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

　　常見的移動端界面設(shè)計布局

　　1、列表式布局

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

　　優(yōu)點：層次展示清晰；視覺流線從上向下，瀏覽體驗快捷；可展示內(nèi)容較長的菜單或擁有次級文字內(nèi)容的標題。

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

　　場景：列表菜單適合用來顯示平級菜單，且較長或擁有次級文字內(nèi)容的標題。

　　2、陳列式布局

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

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

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

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

　　3、九宮格式布局

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

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

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

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

　　4、選項卡式布局

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

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

　　不足：功能入口過多時，該模式顯得笨重不實用。

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

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

　　5、輪播圖式布局

　　特點：重點展示一個對象，通過手勢滑動按順序查看更多。

　　優(yōu)點：單頁面內(nèi)容整體性強，聚焦度高；線性的瀏覽方式有順暢感、方向感。

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

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

　　6、伸展式布局

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

　　優(yōu)點：1、減少界面跳轉(zhuǎn)的層級；對分類有整體性的了解；清楚當前所在的入口位置。

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

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

　　7、抽屜式布局

　　特點：突出核心功能，隱藏其它功能。

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

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

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

　　8、彈出框式布局

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

　　優(yōu)點：在原有界面上進行操作，不必跳出界面，體驗比較連貫；在用戶需要的時候才顯示（重要提示除外），不主動干擾。

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

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

　　9、橫向拓展式布局

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

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

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

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

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

　　10、多面板式布局

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

　　優(yōu)點：減少界面跳轉(zhuǎn)的層級；對分類有整體性的了解；分類位置固定；清楚當前所在的入口位置。

　　不足：界面比較擁擠。

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

　　移動端界面設(shè)計原則

　　1、用戶原則。

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

　　2、信息最小量原則。

　　人機界面設(shè)計要盡量減少用戶記憶負擔，采用有助于記憶的設(shè)計方案。

　　3、幫助和提示原則。

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

　　4、媒體最佳組合原則。

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

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