1、List列表布局

　　特點，內容從上向下排(pai)列，導航之間的跳轉要回到初(chu)始點

　　優點，層次(ci)展示清晰明了，視(shi)線(xian)流從(cong)上到下瀏覽體驗快捷，縱向長度(du)沒有(you)限(xian)制，上下滑動可以看見無限(xian)內(nei)容，視(shi)覺(jue)整齊美(mei)觀(guan)，用(yong)戶(hu)接受度(du)很高(gao)，可展示內(nei)容較長的菜單或擁有(you)次(ci)級文字內(nei)容的標題

　　缺點，同(tong)級(ji)內(nei)容過(guo)多時(shi)，用(yong)戶瀏覽(lan)容易產(chan)生視覺疲(pi)勞，只(zhi)能通過(guo)排列順序、顏色來(lai)區分入(ru)口重(zhong)要程度，頁面重(zhong)點內(nei)容不突出(chu)

　　場景，常用于并(bing)列元素(su)的展示，包括(kuo)目(mu)錄、分(fen)類、內容等，簡書很(hen)多(duo)地(di)方(fang)運用這種布局方(fang)法能(neng)讓用戶清(qing)晰明了地(di)知道頁面的內容，簡潔又(you)大方(fang)

　　2、陳列館式布局

　　特點，布局比(bi)較靈(ling)活，即可(ke)以平均(jun)分布這些網格，也可(ke)以根據內(nei)容的(de)重要性做不規(gui)則分布

　　優點，同樣的(de)高度下可(ke)放置更多(duo)的(de)菜(cai)單流動性強(qiang)，直觀展現(xian)各(ge)種內(nei)容方便(bian)用戶瀏覽經常更新的(de)內(nei)容

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

　　場(chang)景，支(zhi)付寶(bao)首(shou)頁(ye)運用的(de)比較多，能直觀展現各種內容(rong)，而且首(shou)頁(ye)的(de)內容(rong)都是用戶經常(chang)瀏(liu)覽的(de)，不過(guo)由于界面過(guo)多，視覺體驗效果稍微遜色一點(dian)

　　3、網格布局，移動app主要講宮格布局

　　特點，相比陳列館式(shi)(shi)，九宮格(ge)布(bu)局比較穩定為(wei)一(yi)行三列式(shi)(shi)

　　優點(dian)，入口展(zhan)示清(qing)晰直(zhi)觀，方便快速查找，結(jie)構上最有利于(yu)內容區域隨屏幕分辨(bian)率不(bu)同而(er)自動伸展(zhan)寬高(gao)

　　缺點，菜(cai)單之間的跳轉(zhuan)要回(hui)到初始點，容(rong)易形(xing)成更深(shen)的路徑，不能顯示(shi)太(tai)多(duo)入口次級(ji)內容(rong)，擴展性不如列表布局，標題不易過長

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

　　4、儀表布局，也是一種數據展示結構布局

　　優點(dian)，展(zhan)示更加直觀

　　缺(que)點(dian)，信息展示量少，過于單一

　　場景，適合表現趨(qu)勢(shi)走向的(de)展(zhan)示

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

　　優點，比較動(dong)感，增加應用趣味性(xing)

　　6、卡片布局

　　優點，清(qing)晰直觀，簡單易懂，信(xin)(xin)息模(mo)塊化，增強點擊感，響應(ying)式設計(ji)，每個卡(ka)片信(xin)(xin)息承載(zai)量大、轉化率高，每張卡(ka)片的操作(zuo)互相(xiang)獨立、互不干擾

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

　　場景，以(yi)圖片為主單一內容瀏覽(lan)型的(de)展示

　　7、瀑布流布局

　　優點，瀑布(bu)流圖片展示(shi)更有吸引力(li)，加載模式(shi)能獲得(de)更多(duo)內容(rong)容(rong)易(yi)沉浸其中(zhong)，錯落有致(zhi)的設計利用視覺層級同時實現任意流動(dong)緩解(jie)視覺疲勞

　　缺點(dian)，頁面(mian)跳轉后(hou)需要從頭開(kai)始(shi)，用(yong)戶返回查找信(xin)息(xi)困(kun)難很大

　　場景(jing)，適用(yong)于(yu)實時內容頻(pin)繁更新的(de)情況(kuang)

　　8、手風琴布局

　　優(you)點，兩級結構可承載更(geng)多信息同(tong)時保持界面簡介，減少界面跳轉，提高(gao)操(cao)作(zuo)效率高(gao)

　　缺點，同(tong)時打開多個(ge)手風琴菜單，分類標題不(bu)易尋找，且容易將頁面布局打亂

　　場(chang)景，適用于兩(liang)級結構(gou)的內(nei)容，并且二級結構(gou)可以隱藏(zang)

　　9、行為擴展式布局

　　特(te)點，能(neng)一屏幕內顯(xian)示更(geng)多細節(jie)，無需(xu)頁面(mian)跳(tiao)轉，騰訊QQ聯系人使用

　　優點，減(jian)少頁(ye)面跳轉層級，對分類有整體性的了解(jie)，清楚(chu)當前所在(zai)的入口位置

　　缺點，分(fen)類位置不固定，當(dang)展示內容較多時(shi)時(shi)跨分(fen)類跳(tiao)轉不方便

　　10、多面板布局

　　特(te)點，能同時呈(cheng)現比(bi)較多的分類及內容(rong)

　　優點，分(fen)類位(wei)(wei)置固定，清楚當(dang)前所在入口位(wei)(wei)置，分(fen)類一目了然，對分(fen)類有整(zheng)體性的了解，減少界面跳轉(zhuan)的層級(ji)

　　缺點，兩欄設計使頁(ye)面比(bi)較擁(yong)擠(ji)，分類很多(duo)時左側滑動區域(yu)過窄，且不利于單手操作，容易產生(sheng)視覺疲勞

　　場景，適合分類多并且內容需要同時展示

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

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

　　13、選項卡式布局

　　特點，導航(hang)(hang)一直存在，具(ju)有(you)選中(zhong)狀態(tai)，可快速(su)切換另一個導航(hang)(hang)

　　優點，直接展示最(zui)重要接口(kou)內(nei)容信息，分類位(wei)置(zhi)固定清晰當前所在(zai)入口(kou)位(wei)置(zhi)，減少界(jie)面跳(tiao)轉(zhuan)層級(ji)輕松在(zai)各入口(kou)頻(pin)繁跳(tiao)轉(zhuan)

　　缺點，功能入(ru)口(kou)過多(duo)時該模(mo)式(shi)顯得笨(ben)重不實用

　　14、旋轉木馬式布局

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

　　優點，單頁面(mian)內容整體性強，聚(ju)焦度高

　　缺點(dian)，受屏幕寬度限(xian)制可顯(xian)示的數量較少，不能跳躍(yue)性(xing)地查(cha)看間隔的內容，各頁面(mian)內容結(jie)構相似容易忽略后(hou)面(mian)的內容

　　15、圖標信息布局

　　優點(dian)，完整的圖表要素，突出(chu)的標題區，從上到下的閱讀(du)順序，讓(rang)APP更加生動形象，商務氣質

　　缺(que)點(dian)，標題不(bu)夠突出，信息量不(bu)足(zu)，移動APP空間利用不(bu)足(zu)

　　更多關于“UI培訓”的問題，歡迎咨詢千鋒教育。千(qian)鋒(feng)教育(yu)多年辦學，課程(cheng)大綱緊(jin)跟(gen)企業需(xu)求，更科(ke)學更嚴謹，每年培養泛IT人才近2萬(wan)人。不論你是零基礎還是想(xiang)提(ti)升(sheng)，都可(ke)以找到適合的班型，千(qian)鋒(feng)教育(yu)隨(sui)時歡迎(ying)你來試聽。