你的項目用過哪些布局呢？

你的項目用了哪些布局展示？

有過完整項目的小伙伴，此時可能在想我用了....( 此處省略n個答案 )。

其實我們隨便打開一個app，都能看到各種各樣的布局。但是屬于哪一類布局就有點說不清楚了（ 我也是惡補了一下才知道，原來是這樣啊........－－！！ ）

專業的人員把布局分成8類（ 目前我查到的 ）

1.列表式布局 2.成列館式布局 3.九宮格布局 4.選項卡式布局 5.旋轉木馬布局 6.行為擴展式布局 7.多面板布局 8.圖表式布局

1.列表式布局

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

場景：列表菜單適合用來顯示平級菜單，以及標題較長或者有次級文字內容的標題。

優點 ：1.層次展示清晰

2.視覺流線從上向下，方便瀏覽。

3.可以展示內容比較長的菜單或者擁有次級文字內容的標題。

缺點 ：1.導航之間的跳轉要回到初始點

2.同級內容過多時，用戶瀏覽容易疲勞

3.排版靈活性不是很高

4.只能通過排列順序、顏色來區別個入口重要程度

2.陳列館式布局

特點：布局靈活，設計師可以平均分布這些網絡，也可以根據內容的重要性不規則分布，相對列表式，它的優點在于同樣的高度下可以放更多的菜單具有流動性（比如瀑布流）

場景：適合以圖片為主的單一內容瀏覽型展示。

優點 ：1.直觀展現各項內容

2.方便瀏覽經常更新的內容。

缺點 ：1.不適合展現頂層入口框架

2.容易形成頁面內容過多，顯得雜亂

3.設計效果容易呆板

3.九宮格式布局

特點：相比陳列館式，布局比較穩定，為一行三列示布局

場景：適合入口比較多的展示，而且導航之間切換不是很頻繁的情況，也就是業務之間相對獨立，沒有踢啊多的瓜葛

優點 ：1.清晰展現各個入口

2.容易記住各個入口位置，方便快速查找

缺點 ：1.菜單之間跳轉要回到初始點

2.無法向用戶介紹大概功能，只能點擊進去獲知，初始狀態不如列表式明朗

3.容易形成更深的路徑

4.不能直接展現入口內容

5.不能顯示太多入口次級內容

4.選項卡式布局

特點：導航一直存在，具有選中態，可以快速切換到另一個導航

場景：大部分放在底部，方便用戶操作，切換的時候，選中狀態高亮顯示，有少數放在頂部（適合分類少及其內容同時展示，導航菜單項數量為3-5個，各導航菜單項之間內容／功能有顯著差異；用戶在各個導航選項之間需要非常頻繁的切換操作）

優點 ：1.減少界面跳轉的層級

2.分類位置固定

3.清楚當前所在的入口位置

4.輕松在各個入口頻繁跳轉且不會迷失方向

5.直接展現最重要入口的內容信息

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

5.旋轉木馬布局

特點：重點展示一個對象，通過手勢滑動按順序查看更多

場景：舍和數量少，聚焦度高，視覺沖擊力強的圖片展示

優點 ：1.單頁面內容整體性強，聚焦度高

2.線性的瀏覽方式有順暢感、方向感

缺點 ：1.受屏幕寬度限制，它可以顯示的數量較少，需要用戶進行主動探索

2.由于個頁面內容結構相似，容易忽略后面的內容

3.不能跳躍性地查看間隔頁面，只能按順序查看相鄰的頁面

6.行為擴展式布局

特點：能在一屏內顯示更多的細節，無需頁面的跳轉

場景：適合分類多及其內容同時展示的

優點 ：1.減少界面跳轉的層級

2.對分類有整體性的了解

3.清楚當前所在的入口位置

缺點 ：1.分類位置不固定，當展開內容比較多時，跨分類跳轉不方便

7.多面板式布局

特點：能同時呈現比較多的分類內容

場景：適合分類多的及其內容同時展示的

優點：1.減少界面跳轉的層級

2.對分類有整體性的了解

3.分類位置固定

4.清楚當前所在的入口位置

缺點 ：1.界面比較擁擠

8.圖表式布局

特點：圖表的形式能直觀的呈現信息

場景：適合總－分結構或表現時間段內的趨勢走向的展示

優點 ：1.總體性強

2.直觀

缺點 ：1.詳細信息顯示的有限

如果你感覺對你有幫助，點個贊吧！