由于手機(jī)屏幕尺寸的限制，無法直接把所有內(nèi)容在一屏內(nèi)顯示，可顯示內(nèi)容要比PC屏幕少得多。在APP界面設(shè)計(jì)中，我們需要對(duì)信息進(jìn)行有效組織、提煉，通過合理布局把信息展示給用戶。
合理的布局設(shè)計(jì)可以使信息變得井然有序，用戶可以很容易地找到自己想要的信息，產(chǎn)品的交互效率和信息的傳遞效率都得到提升，在此，我們不妨一起來看看APP界面常用的8種頁面布局：
一、列表式布局
特點(diǎn)：內(nèi)容從上向下排列，導(dǎo)航之間的跳轉(zhuǎn)要回到初始點(diǎn)。
優(yōu)點(diǎn)：1、層次展示清晰明了。2、視線流從上到下，瀏覽體驗(yàn)快捷。3、可展示內(nèi)容較長的菜單或擁有次級(jí)文字內(nèi)容的標(biāo)題。
缺點(diǎn)：1、導(dǎo)航之間的跳轉(zhuǎn)要回到初始點(diǎn)，靈活性不高。2、同級(jí)內(nèi)容過多時(shí)，用戶瀏覽容易產(chǎn)生視覺疲勞。3、只能通過排列順序、顏色來區(qū)分各入口重要程度。
二、陳列館式布局
特點(diǎn)：布局比較靈活，即可以平均分布這些網(wǎng)格，也可以根據(jù)內(nèi)容的重要性做不規(guī)則分布。
優(yōu)點(diǎn)：1、同樣的高度下可放置更多的菜單，流動(dòng)性強(qiáng)。2、直觀展現(xiàn)各項(xiàng)內(nèi)容，方便用戶瀏覽經(jīng)常更新的內(nèi)容。
缺點(diǎn)：1、不適合展示頂層入口框架。2、界面內(nèi)容過多時(shí)顯得雜亂，讓用戶眼花繚亂。
三、九宮格布局
特點(diǎn)：相比陳列館式，九宮格布局比較穩(wěn)定為一行三列式。
優(yōu)點(diǎn)：清晰展現(xiàn)各入口，方便用戶快速查詢。
缺點(diǎn)：1、菜單之間的跳轉(zhuǎn)要回到初始點(diǎn)。2、容易形成更深的路徑，不能顯示太多入口次級(jí)內(nèi)容。
四、選項(xiàng)卡式布局
特點(diǎn)：導(dǎo)航一直存在，具有選中狀態(tài)，可快速切換另一個(gè)導(dǎo)航（更多的設(shè)計(jì)形式，可查看馬海祥博客《十個(gè)簡單而有創(chuàng)意的網(wǎng)站導(dǎo)航設(shè)計(jì)案例》的相關(guān)介紹）。
優(yōu)點(diǎn)：1、直接展示最重要接口內(nèi)容信息。2、分類位置固定，清楚當(dāng)前所在入口位置。3、減少界面跳轉(zhuǎn)的層級(jí)，輕松在各入口間頻繁跳轉(zhuǎn)。
缺點(diǎn)：功能入口過多時(shí)，該模式顯得笨重不實(shí)用。
五、旋轉(zhuǎn)木馬式布局
特點(diǎn)：重點(diǎn)展示一個(gè)對(duì)象，通過手勢滑動(dòng)查看更多內(nèi)容。
優(yōu)點(diǎn)：單頁面內(nèi)容整體性強(qiáng)，聚焦度高。
缺點(diǎn)：1、受屏幕寬度限制，可顯示的數(shù)量較少。2、不能跳躍性地查看間隔的頁面。3、各頁面內(nèi)容結(jié)構(gòu)相似，容易忽略后面的內(nèi)容。
六、行為擴(kuò)展式布局
特點(diǎn)：能在一屏幕內(nèi)顯示更多的細(xì)節(jié)，無需頁面跳轉(zhuǎn)。
優(yōu)點(diǎn)：1、減少頁面跳轉(zhuǎn)的層級(jí)。2、對(duì)分類有整體性的了解，清楚當(dāng)前所在的入口位置。
缺點(diǎn)：分類位置不固定，當(dāng)展開的內(nèi)容較多時(shí)，跨分類跳轉(zhuǎn)不方便。
七、多面板布局
特點(diǎn)：能同時(shí)呈現(xiàn)比較多的分類及內(nèi)容。
優(yōu)點(diǎn)：1、分類位置固定，清楚當(dāng)前所在入口位置。2、對(duì)分類有整體性的了解，減少界面跳轉(zhuǎn)的層級(jí)。
缺點(diǎn)：界面比較擁擠，容易產(chǎn)生視覺疲勞。
八、圖表式布局
特點(diǎn)：用圖表的方式直接呈現(xiàn)信息
優(yōu)點(diǎn)：直觀，總體性強(qiáng)
缺點(diǎn)：詳細(xì)信息顯示有限
