1、List列表布局
特點，內(nèi)容從上向下排列，導航之間的跳轉(zhuǎn)要回到初始點
優(yōu)點，層次展示清晰明了，視線流從上到下瀏覽體驗快捷，縱向長度沒有限制，上下滑動可以看見無限內(nèi)容，視覺整齊美觀，用戶接受度很高，可展示內(nèi)容較長的菜單或擁有次級文字內(nèi)容的標題
缺點，同級內(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)容，擴展性不如列表布局，標題不易過長
場景，適合展示較多入口，切各模塊相對獨立
4、儀表布局，也是一種數(shù)據(jù)展示結(jié)構(gòu)布局
優(yōu)點，展示更加直觀
缺點，信息展示量少，過于單一
場景，適合表現(xiàn)趨勢走向的展示
5、標簽布局(關(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、手風琴布局
優(yōu)點，兩級結(jié)構(gòu)可承載更多信息同時保持界面簡介，減少界面跳轉(zhuǎn)，提高操作效率高
缺點，同時打開多個手風琴菜單，分類標題不易尋找，且容易將頁面布局打亂
場景，適用于兩級結(jié)構(gòu)的內(nèi)容，并且二級結(jié)構(gòu)可以隱藏
9、行為擴展式布局
特點，能一屏幕內(nèi)顯示更多細節(jié)，無需頁面跳轉(zhuǎn)，騰訊QQ聯(lián)系人使用
優(yōu)點，減少頁面跳轉(zhuǎn)層級，對分類有整體性的了解，清楚當前所在的入口位置
缺點，分類位置不固定，當展示內(nèi)容較多時時跨分類跳轉(zhuǎn)不方便
10、多面板布局
特點，能同時呈現(xiàn)比較多的分類及內(nèi)容
優(yōu)點，分類位置固定，清楚當前所在入口位置，分類一目了然，對分類有整體性的了解，減少界面跳轉(zhuǎn)的層級
缺點，兩欄設(shè)計使頁面比較擁擠，分類很多時左側(cè)滑動區(qū)域過窄，且不利于單手操作，容易產(chǎn)生視覺疲勞
場景，適合分類多并且內(nèi)容需要同時展示
11、大圖展示布局，視覺效果好，多見于引導頁和一些圖片分享、藝術(shù)范、攝影類APP
12、gallery布局，單頁面內(nèi)容整體性強(比如天氣)，聚焦度高，閱讀起來比較順暢感
13、選項卡式布局
特點，導航一直存在，具有選中狀態(tài)，可快速切換另一個導航
優(yōu)點，直接展示最重要接口內(nèi)容信息，分類位置固定清晰當前所在入口位置，減少界面跳轉(zhuǎn)層級輕松在各入口頻繁跳轉(zhuǎn)
缺點，功能入口過多時該模式顯得笨重不實用
14、旋轉(zhuǎn)木馬式布局
特點，重點展示一個對象，通過手勢滑動查看更多內(nèi)容
優(yōu)點，單頁面內(nèi)容整體性強，聚焦度高
缺點，受屏幕寬度限制可顯示的數(shù)量較少，不能跳躍性地查看間隔的內(nèi)容，各頁面內(nèi)容結(jié)構(gòu)相似容易忽略后面的內(nèi)容
15、圖標信息布局
優(yōu)點，完整的圖表要素，突出的標題區(qū)，從上到下的閱讀順序，讓APP更加生動形象，商務(wù)氣質(zhì)
缺點，標題不夠突出，信息量不足，移動APP空間利用不足
更多關(guān)于“UI培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學，課程大綱緊跟企業(yè)需求，更科學更嚴謹，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。
京公網(wǎng)安備 11010802030320號