智能手機(jī)的廣泛應(yīng)用，讓移動(dòng)端的APP設(shè)計(jì)、界面設(shè)計(jì)都成為設(shè)計(jì)者追捧的重點(diǎn)之一。任何內(nèi)容都是設(shè)計(jì)的重點(diǎn)，就連界面設(shè)計(jì)布局有都有很多類(lèi)型。大家有沒(méi)有總結(jié)一下關(guān)于移動(dòng)端常見(jiàn)的界面設(shè)計(jì)布局有哪些？各自有什么特點(diǎn)，適用哪些場(chǎng)景呢？今天就讓faceui為大家介紹移動(dòng)端界面設(shè)計(jì)布局。

　　常見(jiàn)的移動(dòng)端界面設(shè)計(jì)布局

　　1、列表式布局

　　特點(diǎn)：內(nèi)容從上向下排列，導(dǎo)航之間的跳轉(zhuǎn)要回到初始點(diǎn)。

　　優(yōu)點(diǎn)：層次展示清晰；視覺(jué)流線(xiàn)從上向下，瀏覽體驗(yàn)快捷；可展示內(nèi)容較長(zhǎng)的菜單或擁有次級(jí)文字內(nèi)容的標(biāo)題。

　　不足：導(dǎo)航之間的跳轉(zhuǎn)要回到初始點(diǎn)；同級(jí)內(nèi)容過(guò)多時(shí)，用戶(hù)瀏覽容易產(chǎn)生疲勞；排版靈活性不是很高；只能通過(guò)排列順序、顏色來(lái)區(qū)分各入口重要程度。

　　場(chǎng)景：列表菜單適合用來(lái)顯示平級(jí)菜單，且較長(zhǎng)或擁有次級(jí)文字內(nèi)容的標(biāo)題。

　　2、陳列式布局

　　特點(diǎn)：布局比較靈活，設(shè)計(jì)師可以平均分布這些網(wǎng)絡(luò)，也可根據(jù)內(nèi)容的重要性不規(guī)則分布，相對(duì)列表式，其優(yōu)點(diǎn)在于同樣的高度下可放置更多的菜單，更具有流動(dòng)性，曝布流就屬于其中一種。

　　優(yōu)點(diǎn)：直觀展現(xiàn)各項(xiàng)內(nèi)容；方便瀏覽經(jīng)常更新的內(nèi)容。

　　不足：1、不適合展現(xiàn)頂層入口框架；容易形成界面內(nèi)容過(guò)多，顯得雜亂；設(shè)計(jì)效果容易呆板。

　　場(chǎng)景：適合以圖片為主的單一內(nèi)容瀏覽型的展示

　　3、九宮格式布局

　　特點(diǎn)：相比陳列館式，布局比較穩(wěn)定為一行三列式布局。

　　優(yōu)點(diǎn)：清晰展現(xiàn)各入口；容易記住各入口位置，方便快速查找。

　　不足：菜單之間的跳轉(zhuǎn)要回到初始點(diǎn)；無(wú)法向用戶(hù)介紹大概的功能，只能點(diǎn)擊進(jìn)去才能獲知，初始狀態(tài)不如列表式明朗；容易形成更深的路徑；不能直接展現(xiàn)入口內(nèi)容；不能顯示太多入口次級(jí)內(nèi)容。

　　場(chǎng)景：適合入口比較多的展示，而且導(dǎo)航之間切換不是很頻繁的情況，也就是業(yè)務(wù)之間相對(duì)獨(dú)立，沒(méi)有太多的瓜葛。

　　4、選項(xiàng)卡式布局

　　特點(diǎn)：導(dǎo)航一直存在，具有選中態(tài)，可快速切換到另一個(gè)導(dǎo)航。

　　優(yōu)點(diǎn)：減少界面跳轉(zhuǎn)的層級(jí)；分類(lèi)位置固定；清楚當(dāng)前所在的入口位置；輕松在各入口間頻繁跳轉(zhuǎn)且不會(huì)迷失方向；直接展現(xiàn)最重要入口的內(nèi)容信息。

　　不足：功能入口過(guò)多時(shí)，該模式顯得笨重不實(shí)用。

　　場(chǎng)景：大部分放在底部，方便用戶(hù)操作，切換的時(shí)候，選中狀態(tài)高亮顯示，有少數(shù)放在頂部。適合分類(lèi)少及其內(nèi)容同時(shí)展示，導(dǎo)航菜單項(xiàng)數(shù)量為3-5個(gè)；各導(dǎo)航菜單項(xiàng)之間內(nèi)容/功能有顯著差異；用戶(hù)在各個(gè)導(dǎo)航選項(xiàng)之間需要非常頻繁的切換操作。

移動(dòng)端界面設(shè)計(jì)（圖片來(lái)自網(wǎng)絡(luò)）

　　5、輪播圖式布局

　　特點(diǎn)：重點(diǎn)展示一個(gè)對(duì)象，通過(guò)手勢(shì)滑動(dòng)按順序查看更多。

　　優(yōu)點(diǎn)：?jiǎn)雾?yè)面內(nèi)容整體性強(qiáng)，聚焦度高；線(xiàn)性的瀏覽方式有順暢感、方向感。

　　不足：受屏幕寬度限制，它可顯示的數(shù)量較少，需要用戶(hù)進(jìn)行主動(dòng)探索；由于各頁(yè)面內(nèi)容結(jié)構(gòu)相似，容易忽略后面的內(nèi)容；不能跳躍性地查看間隔的頁(yè)面，只能按順序查看相鄰的頁(yè)面。

　　場(chǎng)景：適合數(shù)量少，聚焦度高，視覺(jué)沖擊力強(qiáng)的圖片展示。

　　6、伸展式布局

　　特點(diǎn)：能在一屏內(nèi)顯示更多的細(xì)節(jié)，無(wú)需頁(yè)面的跳轉(zhuǎn)。

　　優(yōu)點(diǎn)：1、減少界面跳轉(zhuǎn)的層級(jí)；對(duì)分類(lèi)有整體性的了解；清楚當(dāng)前所在的入口位置。

　　不足：分類(lèi)位置不固定，當(dāng)展開(kāi)的內(nèi)容比較多時(shí)，跨分類(lèi)跳轉(zhuǎn)不方便。

　　場(chǎng)景：適合分類(lèi)多及其內(nèi)容同時(shí)展示；內(nèi)容展示的信息多。

　　7、抽屜式布局

　　特點(diǎn)：突出核心功能，隱藏其它功能。

　　優(yōu)點(diǎn)：不占用寶貴的屏幕空間，讓用戶(hù)首先能聚焦于內(nèi)容；導(dǎo)航的菜單項(xiàng)目不受數(shù)量限制，應(yīng)用的所有信息組織入口都可以加入到抽屜導(dǎo)航中；擴(kuò)展性強(qiáng)，配置靈活，一些常用的快捷操作功能和低層級(jí)界面入口也能直接放置進(jìn)抽屜導(dǎo)航中。

　　不足：隱藏框架中其他入口、用戶(hù)需要一定記憶成本；對(duì)入口交互的功能可見(jiàn)性要求高；容易與應(yīng)用內(nèi)的其他交互模式?jīng)_突，比如側(cè)滑手勢(shì)操作。

　　場(chǎng)景：適合功能較多，信息結(jié)構(gòu)較復(fù)雜的產(chǎn)品，用戶(hù)的注意力聚焦在主信息流的瀏覽上，不用頻繁切換“子產(chǎn)品模塊”，且擴(kuò)展性比較好。

　　8、彈出框式布局

　　特點(diǎn)：沒(méi)有跳出感，適合內(nèi)容比較少和簡(jiǎn)單操作的呈現(xiàn)。

　　優(yōu)點(diǎn)：在原有界面上進(jìn)行操作，不必跳出界面，體驗(yàn)比較連貫；在用戶(hù)需要的時(shí)候才顯示（重要提示除外），不主動(dòng)干擾。

　　不足：顯示的內(nèi)容有限。

　　場(chǎng)景：適合內(nèi)容較少的顯示。

　　9、橫向拓展式布局

　　特點(diǎn)：節(jié)省空間，可使用箭頭，圓點(diǎn)或顯示不全的圖片告訴用戶(hù)還有更多的內(nèi)容可查看。

　　優(yōu)點(diǎn)：查看更多內(nèi)容不必跳出界面，體驗(yàn)連貫。節(jié)省空間。

　　不足：橫屏寬度有限，更多的內(nèi)容有數(shù)量上限制。

　　場(chǎng)景：適合圖片或信息組塊更多的展示方式。

移動(dòng)端界面設(shè)計(jì)（圖片來(lái)自網(wǎng)絡(luò)）

　　10、多面板式布局

　　特點(diǎn)：能同時(shí)呈現(xiàn)比較多的分類(lèi)及內(nèi)容。

　　優(yōu)點(diǎn)：減少界面跳轉(zhuǎn)的層級(jí)；對(duì)分類(lèi)有整體性的了解；分類(lèi)位置固定；清楚當(dāng)前所在的入口位置。

　　不足：界面比較擁擠。

　　場(chǎng)景：適合分類(lèi)多及其內(nèi)容同時(shí)展示；內(nèi)容展示的信息不多。

　　移動(dòng)端界面設(shè)計(jì)原則

　　1、用戶(hù)原則。

　　人機(jī)界面設(shè)計(jì)首先要確立用戶(hù)類(lèi)型。劃分類(lèi)型可以從不同的角度，視實(shí)際情況而定。確定類(lèi)型后要針對(duì)其特點(diǎn)預(yù)測(cè)他們對(duì)不同界面的反應(yīng)。這就要從多方面設(shè)計(jì)分析。

　　2、信息最小量原則。

　　人機(jī)界面設(shè)計(jì)要盡量減少用戶(hù)記憶負(fù)擔(dān)，采用有助于記憶的設(shè)計(jì)方案。

　　3、幫助和提示原則。

　　要對(duì)用戶(hù)的*作命令作出反應(yīng)，幫助用戶(hù)處理問(wèn)題。系統(tǒng)要設(shè)計(jì)有恢復(fù)出錯(cuò)現(xiàn)場(chǎng)的能力，在系統(tǒng)內(nèi)部處理工作要有提示，盡量把主動(dòng)權(quán)讓給用戶(hù)。

　　4、媒體最佳組合原則。

　　多媒體界面的成功并不在于僅向用戶(hù)提供豐富的媒體，而應(yīng)在相關(guān)理論指導(dǎo)下，注意處理好各種媒體間的關(guān)系，恰當(dāng)選用。

　　以上就是faceui為大家介紹的關(guān)于移動(dòng)端界面設(shè)計(jì)的相關(guān)內(nèi)容。雖然上述的移動(dòng)端界面設(shè)計(jì)布局類(lèi)型很多，但是到底哪些才是大家喜歡，容易得到用戶(hù)認(rèn)可的，大家在設(shè)計(jì)前可以做好用戶(hù)調(diào)查。