30分鍾掌握這8種頁面布局
學習UI設計的時候，經常要接觸到頁面的布局，布局的方式會直接影響一個APP的視覺效果，好的布局方式，往往能帶來舒服的視覺效果，更能得到用戶的接受與好評。然而萬變不離其宗，移動端頁面常用的布局，不外乎以下8種。
1.列表式布局
特點：內容從上向下排列，導航之間的跳轉要回到初始點
優點：
1.層次展示清晰明了
2.視線流從上到下，瀏覽體驗快捷
3.可展示內容較長的菜單或擁有次級文字內容的標題
缺點：
1.導航之間的跳轉要回到初始點，靈活性不高
2.同級內容過多時，用戶瀏覽容易產生視覺疲勞
3.只能通過排列順序、顏色來區分各入口重要程度
2.陳列館式布局
特點：布局比較靈活，即可以平均分布這些網格，也可以根據內容的重要性做不規則分布
優點：
1.同樣的高度下可放置更多的菜單，流動性強
2.直觀展現各項內容，方便用戶瀏覽經常更新的內容
缺點：
1.不適合展示頂層入口框架
2.界面內容過多時顯得雜亂，讓用戶眼花繚亂
3.九宮格布局
特點：相比陳列館式，九宮格布局比較穩定為一行三列式
優點：清晰展現各入口，方便用戶快速查詢
缺點：
1.菜單之間的跳轉要回到初始點
2.容易形成更深的路徑，不能顯示太多入口次級內容
很多軟件都喜歡運用九宮格布局，簡書的專題管理員這里也使用了這種布局，井然有序且間隔合理，視覺效果挺舒服的。
4.選項卡式布局
特點：導航一直存在，具有選中狀態，可快速切換另一個導航
優點：
1.直接展示最重要接口內容信息
2.分類位置固定，清楚當前所在入口位置
3.減少界面跳轉的層級，輕松在各入口間頻繁跳轉
缺點：
1.功能入口過多時，該模式顯得笨重不實用
5.旋轉木馬式布局
特點：重點展示一個對象，通過手勢滑動查看更多內容
優點：單頁面內容整體性強，聚焦度高
缺點：
1.受屏幕寬度限制，可顯示的數量較少
2.不能跳躍性地查看間隔的頁面
3.各頁面內容結構相似，容易忽略后面的內容
6.行為擴展式布局
特點：能在一屏幕內顯示更多的細節，無需頁面跳轉
優點：
1.減少頁面跳轉的層級
2.對分類有整體性的了解，清楚當前所在的入口位置
缺點：分類位置不固定，當展開的內容較多時，跨分類跳轉不方便
7.多面板布局
特點：能同時呈現比較多的分類及內容
優點：
1.分類位置固定，清楚當前所在入口位置
2.對分類有整體性的了解，減少界面跳轉的層級
缺點：界面比較擁擠，容易產生視覺疲勞
8.圖表式布局
特點:用圖表的方式直接呈現信息
優點：直觀，總體性強
缺點：詳細信息顯示有限
支付寶作為一個與金錢有關的軟件，它余額寶頁面選擇了與自身比較符合的圖表式布局，這種布局能直觀詳細地顯示出信息，很適合用於數據、賬單有關的APP。
------------------END------------------