本文源自：微信公眾號：EDU1717? 名稱：學翼啟

更多原創文章請訪問微信號：tencentgad

新浪@學翼啟-互聯網干貨平臺

手機由于屏幕尺寸的限制，可顯示內容要比PC屏幕少得多。合理的布局設計可以使信息變得井然有序，用戶可以很容易地找到自己想要的信息，產品的交互效率和信息的傳遞效率都得到提升。

?列表式布局

?陳列館式布局

?九宮格布局

?選項卡式布局

?旋轉木馬布局

?行為擴展式布局

?多面板布局

?圖表式布局

1、列表式布局

特點：

內容從上向下排列，導航之間的跳轉要回到初始點，好比一條街上有理發店，飯店，你想從理發店到飯店，得先多理發店出來，才能進入飯店。

優點：

1、層次展示清晰

2、視覺流線從上向下，瀏覽體驗快捷。

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

不足：

1、導航之間的跳轉要回到初始點。

2、同級內容過多時，用戶瀏覽容易產生疲勞。

3、排版靈活性不是很高。

4、只能通過排列順序、顏色來區分各入口重要程度。

場景：

列表菜單適合用來顯示平級菜單，且較長或擁有次級文字內容的標題。

2、陳列館式布局

特點：

布局比較靈活，設計師可以平均分布這些網絡，也可根據內容的重要性不規則分布，相對列表式，其優點在于同樣的高度下可放置更多的菜單，更具有流動性，曝布流就屬于其中一種。

優點：

1、直觀展現各項內容。

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

不足：

1、不適合展現頂層入口框架。

2、容易形成界面內容過多，顯得雜亂。

3、設計效果容易呆板。

場景：

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

3、九宮格布局

特點：

相比陳列館式，布局比較穩定為一行三列式布局。

優點：

1、清晰展現各入口。

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

不足：

1、菜單之間的跳轉要回到初始點。

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

3、容易形成更深的路徑。

4、不能直接展現入口內容。

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

場景：

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

4、選項卡式布局

特點：

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

優點：

1、減少界面跳轉的層級。

2、分類位置固定。

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

4、輕松在各入口間頻繁跳轉且不會迷失方向。

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

不足：

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

場景：

大部分放在底部，方便用戶操作，切換的時候，選中狀態高亮顯示，有少數放在頂部。

適合分類少及其內容同時展示，導航菜單項數量為3-5個；各導航菜單項之間內容/功能有顯著差異；用戶在各個導航選項之間需要非常頻繁的切換操作

5、旋轉木馬布局

特點：

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

優點：

1、單頁面內容整體性強，聚焦度高。

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

不足：

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

2、由于各頁面內容結構相似，容易忽略后面的內容。

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

場景：

適合數量少，聚焦度高，視覺沖擊力強的圖片展示。

6、行為擴展式布局

特點：

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

優點：

1、減少界面跳轉的層級。

2、對分類有整體性的了解。

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

不足：

分類位置不固定，當展開的內容比較多時，跨分類跳轉不方便。

場景：

適合分類多及其內容同時展示。

內容展示的信息多。

7、多面板布局

特點：

能同時呈現比較多的分類及內容。

優點：

1、減少界面跳轉的層級。

2、對分類有整體性的了解。

3、分類位置固定。

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

不足：

界面比較擁擠。

場景：

適合分類多及其內容同時展示。

內容展示的信息不多。

8、圖表式布局

特點：

用圖表的形式直觀的呈現信息。

優點：

1、總體性強。

2、直觀。

不足：

詳情信息顯示的有限。

場景：

適合總-分結構或表現時間段內的趨勢走向的展示。

小結

以上都是基本布局，在實際的設計中，我們可以像搭積木一樣組合起來完成復雜的界面設計。另外要考慮到各種布局的優劣，并有最完美的布局，要考慮信息結構、重要層次以及數量上的差異，提供最適合的布局，以增加產品的易用性和交互體驗。