1、List列表布局
特點(diǎn)，內(nèi)容從上向下排列，導(dǎo)航之間的跳轉(zhuǎn)要回到初始點(diǎn)
優(yōu)點(diǎn)，層次展示清晰明了，視線流從上到下瀏覽體驗(yàn)快捷，縱向長(zhǎng)度沒(méi)有限制，上下滑動(dòng)可以看見(jiàn)無(wú)限內(nèi)容，視覺(jué)整齊美觀，用戶接受度很高，可展示內(nèi)容較長(zhǎng)的菜單或擁有次級(jí)文字內(nèi)容的標(biāo)題
缺點(diǎn)，同級(jí)內(nèi)容過(guò)多時(shí)，用戶瀏覽容易產(chǎn)生視覺(jué)疲勞，只能通過(guò)排列順序、顏色來(lái)區(qū)分入口重要程度，頁(yè)面重點(diǎn)內(nèi)容不突出
場(chǎng)景，常用于并列元素的展示，包括目錄、分類(lèi)、內(nèi)容等，簡(jiǎn)書(shū)很多地方運(yùn)用這種布局方法能讓用戶清晰明了地知道頁(yè)面的內(nèi)容，簡(jiǎn)潔又大方
2、陳列館式布局
特點(diǎn)，布局比較靈活，即可以平均分布這些網(wǎng)格，也可以根據(jù)內(nèi)容的重要性做不規(guī)則分布
優(yōu)點(diǎn)，同樣的高度下可放置更多的菜單流動(dòng)性強(qiáng)，直觀展現(xiàn)各種內(nèi)容方便用戶瀏覽經(jīng)常更新的內(nèi)容
缺點(diǎn)，不適合展示頂層入口框架，界面內(nèi)容過(guò)多時(shí)顯得雜亂，讓用戶眼花繚亂
場(chǎng)景，支付寶首頁(yè)運(yùn)用的比較多，能直觀展現(xiàn)各種內(nèi)容，而且首頁(yè)的內(nèi)容都是用戶經(jīng)常瀏覽的，不過(guò)由于界面過(guò)多，視覺(jué)體驗(yàn)效果稍微遜色一點(diǎn)
3、網(wǎng)格布局，移動(dòng)app主要講宮格布局
特點(diǎn)，相比陳列館式，九宮格布局比較穩(wěn)定為一行三列式
優(yōu)點(diǎn)，入口展示清晰直觀，方便快速查找，結(jié)構(gòu)上最有利于內(nèi)容區(qū)域隨屏幕分辨率不同而自動(dòng)伸展寬高
缺點(diǎn)，菜單之間的跳轉(zhuǎn)要回到初始點(diǎn)，容易形成更深的路徑，不能顯示太多入口次級(jí)內(nèi)容，擴(kuò)展性不如列表布局，標(biāo)題不易過(guò)長(zhǎng)
場(chǎng)景，適合展示較多入口，切各模塊相對(duì)獨(dú)立
4、儀表布局，也是一種數(shù)據(jù)展示結(jié)構(gòu)布局
優(yōu)點(diǎn)，展示更加直觀
缺點(diǎn)，信息展示量少，過(guò)于單一
場(chǎng)景，適合表現(xiàn)趨勢(shì)走向的展示
5、標(biāo)簽布局(關(guān)鍵詞布局、熱度布局)，搜索界面和分類(lèi)界面時(shí)
優(yōu)點(diǎn)，比較動(dòng)感，增加應(yīng)用趣味性
6、卡片布局
優(yōu)點(diǎn)，清晰直觀，簡(jiǎn)單易懂，信息模塊化，增強(qiáng)點(diǎn)擊感，響應(yīng)式設(shè)計(jì)，每個(gè)卡片信息承載量大、轉(zhuǎn)化率高，每張卡片的操作互相獨(dú)立、互不干擾
缺點(diǎn)，每個(gè)卡片頁(yè)面空間的消耗大，一屏可展示信息少，用戶操作負(fù)
場(chǎng)景，以圖片為主單一內(nèi)容瀏覽型的展示
7、瀑布流布局
優(yōu)點(diǎn)，瀑布流圖片展示更有吸引力，加載模式能獲得更多內(nèi)容容易沉浸其中，錯(cuò)落有致的設(shè)計(jì)利用視覺(jué)層級(jí)同時(shí)實(shí)現(xiàn)任意流動(dòng)緩解視覺(jué)疲勞
缺點(diǎn)，頁(yè)面跳轉(zhuǎn)后需要從頭開(kāi)始，用戶返回查找信息困難很大
場(chǎng)景，適用于實(shí)時(shí)內(nèi)容頻繁更新的情況
8、手風(fēng)琴布局
優(yōu)點(diǎn)，兩級(jí)結(jié)構(gòu)可承載更多信息同時(shí)保持界面簡(jiǎn)介，減少界面跳轉(zhuǎn)，提高操作效率高
缺點(diǎn)，同時(shí)打開(kāi)多個(gè)手風(fēng)琴菜單，分類(lèi)標(biāo)題不易尋找，且容易將頁(yè)面布局打亂
場(chǎng)景，適用于兩級(jí)結(jié)構(gòu)的內(nèi)容，并且二級(jí)結(jié)構(gòu)可以隱藏
9、行為擴(kuò)展式布局
特點(diǎn)，能一屏幕內(nèi)顯示更多細(xì)節(jié)，無(wú)需頁(yè)面跳轉(zhuǎn)，騰訊QQ聯(lián)系人使用
優(yōu)點(diǎn)，減少頁(yè)面跳轉(zhuǎn)層級(jí)，對(duì)分類(lèi)有整體性的了解，清楚當(dāng)前所在的入口位置
缺點(diǎn)，分類(lèi)位置不固定，當(dāng)展示內(nèi)容較多時(shí)時(shí)跨分類(lèi)跳轉(zhuǎn)不方便
10、多面板布局
特點(diǎn)，能同時(shí)呈現(xiàn)比較多的分類(lèi)及內(nèi)容
優(yōu)點(diǎn)，分類(lèi)位置固定，清楚當(dāng)前所在入口位置，分類(lèi)一目了然，對(duì)分類(lèi)有整體性的了解，減少界面跳轉(zhuǎn)的層級(jí)
缺點(diǎn)，兩欄設(shè)計(jì)使頁(yè)面比較擁擠，分類(lèi)很多時(shí)左側(cè)滑動(dòng)區(qū)域過(guò)窄，且不利于單手操作，容易產(chǎn)生視覺(jué)疲勞
場(chǎng)景，適合分類(lèi)多并且內(nèi)容需要同時(shí)展示
11、大圖展示布局，視覺(jué)效果好，多見(jiàn)于引導(dǎo)頁(yè)和一些圖片分享、藝術(shù)范、攝影類(lèi)APP
12、gallery布局，單頁(yè)面內(nèi)容整體性強(qiáng)(比如天氣)，聚焦度高，閱讀起來(lái)比較順暢感
13、選項(xiàng)卡式布局
特點(diǎn)，導(dǎo)航一直存在，具有選中狀態(tài)，可快速切換另一個(gè)導(dǎo)航
優(yōu)點(diǎn)，直接展示最重要接口內(nèi)容信息，分類(lèi)位置固定清晰當(dāng)前所在入口位置，減少界面跳轉(zhuǎn)層級(jí)輕松在各入口頻繁跳轉(zhuǎn)
缺點(diǎn)，功能入口過(guò)多時(shí)該模式顯得笨重不實(shí)用
14、旋轉(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)，受屏幕寬度限制可顯示的數(shù)量較少，不能跳躍性地查看間隔的內(nèi)容，各頁(yè)面內(nèi)容結(jié)構(gòu)相似容易忽略后面的內(nèi)容
15、圖標(biāo)信息布局
優(yōu)點(diǎn)，完整的圖表要素，突出的標(biāo)題區(qū)，從上到下的閱讀順序，讓APP更加生動(dòng)形象，商務(wù)氣質(zhì)
缺點(diǎn)，標(biāo)題不夠突出，信息量不足，移動(dòng)APP空間利用不足
更多關(guān)于“UI培訓(xùn)”的問(wèn)題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬(wàn)人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來(lái)試聽(tīng)。
京公網(wǎng)安備 11010802030320號(hào)