1、List列表布局

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

　　優(yōu)點(diǎn)，層次展示清晰明了，視線流從上到下瀏覽體驗(yàn)快捷，縱向長(zhǎng)度沒有限制，上下滑動(dòng)可以看見無限內(nèi)容，視覺整齊美觀，用戶接受度很高，可展示內(nèi)容較長(zhǎng)的菜單或擁有次級(jí)文字內(nèi)容的標(biāo)題

　　缺點(diǎn)，同級(jí)內(nèi)容過多時(shí)，用戶瀏覽容易產(chǎn)生視覺疲勞，只能通過排列順序、顏色來區(qū)分入口重要程度，頁面重點(diǎn)內(nèi)容不突出

　　場(chǎng)景，常用于并列元素的展示，包括目錄、分類、內(nèi)容等，簡(jiǎn)書很多地方運(yùn)用這種布局方法能讓用戶清晰明了地知道頁面的內(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)容過多時(shí)顯得雜亂，讓用戶眼花繚亂

　　場(chǎng)景，支付寶首頁運(yùn)用的比較多，能直觀展現(xiàn)各種內(nèi)容，而且首頁的內(nèi)容都是用戶經(jīng)常瀏覽的，不過由于界面過多，視覺體驗(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)題不易過長(zhǎng)

　　場(chǎng)景，適合展示較多入口，切各模塊相對(duì)獨(dú)立

　　4、儀表布局，也是一種數(shù)據(jù)展示結(jié)構(gòu)布局

　　優(yōu)點(diǎn)，展示更加直觀

　　缺點(diǎn)，信息展示量少，過于單一

　　場(chǎng)景，適合表現(xiàn)趨勢(shì)走向的展示

　　5、標(biāo)簽布局(關(guān)鍵詞布局、熱度布局)，搜索界面和分類界面時(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è)卡片頁面空間的消耗大，一屏可展示信息少，用戶操作負(fù)

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

　　7、瀑布流布局

　　優(yōu)點(diǎn)，瀑布流圖片展示更有吸引力，加載模式能獲得更多內(nèi)容容易沉浸其中，錯(cuò)落有致的設(shè)計(jì)利用視覺層級(jí)同時(shí)實(shí)現(xiàn)任意流動(dòng)緩解視覺疲勞

　　缺點(diǎn)，頁面跳轉(zhuǎn)后需要從頭開始，用戶返回查找信息困難很大

　　場(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í)打開多個(gè)手風(fēng)琴菜單，分類標(biāo)題不易尋找，且容易將頁面布局打亂

　　場(chǎng)景，適用于兩級(jí)結(jié)構(gòu)的內(nèi)容，并且二級(jí)結(jié)構(gòu)可以隱藏

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

　　特點(diǎn)，能一屏幕內(nèi)顯示更多細(xì)節(jié)，無需頁面跳轉(zhuǎn)，騰訊QQ聯(lián)系人使用

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

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

　　10、多面板布局

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

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

　　缺點(diǎn)，兩欄設(shè)計(jì)使頁面比較擁擠，分類很多時(shí)左側(cè)滑動(dòng)區(qū)域過窄，且不利于單手操作，容易產(chǎn)生視覺疲勞

　　場(chǎng)景，適合分類多并且內(nèi)容需要同時(shí)展示

　　11、大圖展示布局，視覺效果好，多見于引導(dǎo)頁和一些圖片分享、藝術(shù)范、攝影類APP

　　12、gallery布局，單頁面內(nèi)容整體性強(qiáng)(比如天氣)，聚焦度高，閱讀起來比較順暢感

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

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

　　優(yōu)點(diǎn)，直接展示最重要接口內(nèi)容信息，分類位置固定清晰當(dāng)前所在入口位置，減少界面跳轉(zhuǎn)層級(jí)輕松在各入口頻繁跳轉(zhuǎn)

　　缺點(diǎn)，功能入口過多時(shí)該模式顯得笨重不實(shí)用

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

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

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

　　缺點(diǎn)，受屏幕寬度限制可顯示的數(shù)量較少，不能跳躍性地查看間隔的內(nèi)容，各頁面內(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)”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來試聽。