APP界面常用的8種頁(yè)面布局

時(shí)間：2022-05-24 10:00:02 | 來(lái)源：網(wǎng)絡(luò)營(yíng)銷

時(shí)間：2022-05-24 10:00:02 來(lái)源：網(wǎng)絡(luò)營(yíng)銷

學(xué)習(xí)UI設(shè)計(jì)的時(shí)候，經(jīng)常要接觸到頁(yè)面的布局，布局的方式會(huì)直接影響一個(gè)APP的視覺(jué)效果，好的布局方式，往往能帶來(lái)舒服的視覺(jué)效果，更能得到用戶的接受與好評(píng)。

由于手機(jī)屏幕尺寸的限制，無(wú)法直接把所有內(nèi)容在一屏內(nèi)顯示，可顯示內(nèi)容要比PC屏幕少得多。在APP界面設(shè)計(jì)中，我們需要對(duì)信息進(jìn)行有效組織、提煉，通過(guò)合理布局把信息展示給用戶。

合理的布局設(shè)計(jì)可以使信息變得井然有序，用戶可以很容易地找到自己想要的信息，產(chǎn)品的交互效率和信息的傳遞效率都得到提升，在此，我們不妨一起來(lái)看看APP界面常用的8種頁(yè)面布局：

一、列表式布局

簡(jiǎn)書(shū)·列表式布局

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

優(yōu)點(diǎn)：

1、層次展示清晰明了。

2、視線流從上到下，瀏覽體驗(yàn)快捷。

3、可展示內(nèi)容較長(zhǎng)的菜單或擁有次級(jí)文字內(nèi)容的標(biāo)題。

缺點(diǎn)：

1、導(dǎo)航之間的跳轉(zhuǎn)要回到初始點(diǎn)，靈活性不高。

2、同級(jí)內(nèi)容過(guò)多時(shí)，用戶瀏覽容易產(chǎn)生視覺(jué)疲勞。

3、只能通過(guò)排列順序、顏色來(lái)區(qū)分各入口重要程度。

簡(jiǎn)書(shū)的很多地方都運(yùn)用了列表式布局，這種布局方法能夠讓用戶清晰明了地知道頁(yè)面的內(nèi)容，簡(jiǎn)介又大方。

二、陳列館式布局

支付寶·陳列館式布局

特點(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)容過(guò)多時(shí)顯得雜亂，讓用戶眼花繚亂。

支付寶的界面相信大家都很熟悉，它的首頁(yè)就使用了陳列館式布局，它能直觀得展現(xiàn)各項(xiàng)內(nèi)容，而且首頁(yè)的內(nèi)容都是用戶經(jīng)常游覽的，不過(guò)由于界面過(guò)多，視覺(jué)體驗(yàn)效果就稍微遜色了一點(diǎn)（側(cè)重于視覺(jué)效果的設(shè)計(jì)師，可查看億企邦《基于視覺(jué)效果的扁平化設(shè)計(jì)》一文中的相關(guān)介紹）。

三、九宮格布局

簡(jiǎn)書(shū)·九宮格布局

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

優(yōu)點(diǎn)：清晰展現(xiàn)各入口，方便用戶快速查詢。

缺點(diǎn)：

1、菜單之間的跳轉(zhuǎn)要回到初始點(diǎn)。

2、容易形成更深的路徑，不能顯示太多入口次級(jí)內(nèi)容。

很多軟件都喜歡運(yùn)用九宮格布局，簡(jiǎn)書(shū)的專題管理員這里也使用了這種布局，井然有序且間隔合理，視覺(jué)效果挺舒服的。

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

簡(jiǎn)書(shū)·選項(xiàng)卡式布局

特點(diǎn)：導(dǎo)航一直存在，具有選中狀態(tài)，可快速切換另一個(gè)導(dǎo)航（更多的設(shè)計(jì)形式，可查看億企邦《十個(gè)簡(jiǎn)單而有創(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)：功能入口過(guò)多時(shí)，該模式顯得笨重不實(shí)用。

簡(jiǎn)書(shū)的首頁(yè)也使用了選項(xiàng)卡布局，圖中上面的紅色框和下面的紅色框都是此布局，但是，個(gè)人覺(jué)得上面的選項(xiàng)卡由于功能入口太多而顯得笨重，下面的則恰到好處。

五、旋轉(zhuǎn)木馬式布局

一個(gè)·旋轉(zhuǎn)木馬式布局

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

優(yōu)點(diǎn)：單頁(yè)面內(nèi)容整體性強(qiáng)，聚焦度高。

缺點(diǎn)：

1、受屏幕寬度限制，可顯示的數(shù)量較少。

2、不能跳躍性地查看間隔的頁(yè)面。

3、各頁(yè)面內(nèi)容結(jié)構(gòu)相似，容易忽略后面的內(nèi)容。

閱讀軟件“一個(gè)”的首頁(yè)則使用了旋轉(zhuǎn)木馬式布局，一個(gè)的主題是“復(fù)雜的世界里，一個(gè)就夠了”，所以它選用此布局起到了畫(huà)龍點(diǎn)睛的作用，更能提高單頁(yè)面的聚焦度。

六、行為擴(kuò)展式布局

QQ聯(lián)系人·行為擴(kuò)展式布局

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

優(yōu)點(diǎn)：

1、減少頁(yè)面跳轉(zhuǎn)的層級(jí)。

2、對(duì)分類有整體性的了解，清楚當(dāng)前所在的入口位置。

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

騰訊QQ的聯(lián)系人頁(yè)面使用了行為擴(kuò)展式布局，相信大家也不陌生，用起來(lái)也很方便。

七、多面板布局

QQ興趣部落·多面板布局

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

優(yōu)點(diǎn)：

1、分類位置固定，清楚當(dāng)前所在入口位置。

2、對(duì)分類有整體性的了解，減少界面跳轉(zhuǎn)的層級(jí)。

缺點(diǎn)：界面比較擁擠，容易產(chǎn)生視覺(jué)疲勞。

騰訊QQ的興趣部落頁(yè)面使用了多版面布局，能同時(shí)呈現(xiàn)出比較多的興趣分類及內(nèi)容，這也是一種典型的頁(yè)面布局方式。

八、圖表式布局

支付寶·圖表式布局

特點(diǎn)：用圖表的方式直接呈現(xiàn)信息

優(yōu)點(diǎn)：直觀，總體性強(qiáng)

缺點(diǎn)：詳細(xì)信息顯示有限

支付寶作為一個(gè)與金錢(qián)有關(guān)的軟件，它余額寶頁(yè)面選擇了與自身比較符合的圖表式布局，這種布局能直觀詳細(xì)地顯示出信息，很適合用于數(shù)據(jù)、賬單有關(guān)的APP。

億企邦點(diǎn)評(píng)：

設(shè)計(jì)風(fēng)格是設(shè)計(jì)起始的第一步，定好了設(shè)計(jì)風(fēng)格，后續(xù)的設(shè)計(jì)工作才能繼續(xù)安排，另外，要確保設(shè)計(jì)風(fēng)格匹配用戶人群的喜好，符合APP的定位以及給用戶傳遞APP正面良好的形象，確定設(shè)計(jì)風(fēng)格階段，產(chǎn)品經(jīng)理和設(shè)計(jì)師花費(fèi)再多的時(shí)間和精力來(lái)折騰也是值得的。