1、List列表布局

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

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

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

　　場景，常用于并列元素的展示，包括目錄、分類、內(nèi)容等，簡書很多地方運用這種布局方法能讓用戶清晰明了地知道頁面的內(nèi)容，簡潔又大方

　　2、陳列館式布局

　　特點，布局比較靈活，即可以平均分布這些網(wǎng)格，也可以根據(jù)內(nèi)容的重要性做不規(guī)則分布

　　優(yōu)點，同樣的高度下可放置更多的菜單流動性強，直觀展現(xiàn)各種內(nèi)容方便用戶瀏覽經(jīng)常更新的內(nèi)容

　　缺點，不適合展示頂層入口框架，界面內(nèi)容過多時顯得雜亂，讓用戶眼花繚亂

　　場景，支付寶首頁運用的比較多，能直觀展現(xiàn)各種內(nèi)容，而且首頁的內(nèi)容都是用戶經(jīng)常瀏覽的，不過由于界面過多，視覺體驗效果稍微遜色一點

　　3、網(wǎng)格布局，移動app主要講宮格布局

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

　　優(yōu)點，入口展示清晰直觀，方便快速查找，結(jié)構(gòu)上最有利于內(nèi)容區(qū)域隨屏幕分辨率不同而自動伸展寬高

　　缺點，菜單之間的跳轉(zhuǎn)要回到初始點，容易形成更深的路徑，不能顯示太多入口次級內(nèi)容，擴展性不如列表布局，標(biāo)題不易過長

　　場景，適合展示較多入口，切各模塊相對獨立

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

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

　　缺點，信息展示量少，過于單一

　　場景，適合表現(xiàn)趨勢走向的展示

　　5、標(biāo)簽布局(關(guān)鍵詞布局、熱度布局)，搜索界面和分類界面時

　　優(yōu)點，比較動感，增加應(yīng)用趣味性

　　6、卡片布局

　　優(yōu)點，清晰直觀，簡單易懂，信息模塊化，增強點擊感，響應(yīng)式設(shè)計，每個卡片信息承載量大、轉(zhuǎn)化率高，每張卡片的操作互相獨立、互不干擾

　　缺點，每個卡片頁面空間的消耗大，一屏可展示信息少，用戶操作負

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

　　7、瀑布流布局

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

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

　　場景，適用于實時內(nèi)容頻繁更新的情況

　　8、手風(fēng)琴布局

　　優(yōu)點，兩級結(jié)構(gòu)可承載更多信息同時保持界面簡介，減少界面跳轉(zhuǎn)，提高操作效率高

　　缺點，同時打開多個手風(fēng)琴菜單，分類標(biāo)題不易尋找，且容易將頁面布局打亂

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

　　9、行為擴展式布局

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

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

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

　　10、多面板布局

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

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

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

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

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

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

　　13、選項卡式布局

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

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

　　缺點，功能入口過多時該模式顯得笨重不實用

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

　　特點，重點展示一個對象，通過手勢滑動查看更多內(nèi)容

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

　　缺點，受屏幕寬度限制可顯示的數(shù)量較少，不能跳躍性地查看間隔的內(nèi)容，各頁面內(nèi)容結(jié)構(gòu)相似容易忽略后面的內(nèi)容

　　15、圖標(biāo)信息布局

　　優(yōu)點，完整的圖表要素，突出的標(biāo)題區(qū)，從上到下的閱讀順序，讓APP更加生動形象，商務(wù)氣質(zhì)

　　缺點，標(biāo)題不夠突出，信息量不足，移動APP空間利用不足

　　更多關(guān)于“UI培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。