手機介面設計中9種常用的布局

手機由於螢幕尺寸的限制，可顯示內容要比PC螢幕少得多。在手機介面設計中，若直接把所有內容在一屏內顯示，會使介面混亂不堪，醜陋且不可用。我們需要對資訊進行有效組織，通過合理布局把資訊展示給使用者。合理的布局設計可以使資訊變得井然有序，使用者可以很容易地找到自己想要的資訊，產品的互動效率和資訊的傳遞效率都得到提升。下面來看看手機介面設計中常用到的一些布局。

1，豎排列表

豎排列表是最常用的布局之一。手機螢幕一般是列表豎屏顯示的，文字是橫屏顯示的，因此豎排列表可以包含比較多的資訊。列表長度可以沒有限制，通過上下滑動可以查看更多內容。豎排列表在視覺上整齊美觀，使用者接受度很高，常用於並列元素的展示，包括目錄、分類、內容等。

 

2、 橫排方塊

 

橫排方塊是把並列元素橫向顯示的一種布局。我們常見的工具列，TAB，Coverflow 等都採用這種布局。受螢幕寬度限制，它可顯示的數量較少，但可通過左右滑動螢幕或點擊箭頭查看更多內容，不過這需要使用者進行主動探索。它比較適合元素數量較少的情形，當需要展示更多的內容適，豎排列表則是更優的選擇。

 

 
 

3，九宮格

 

九宮格是非常經典的設計，展示形式簡單明了，使用者接受度很廣。當元素數量固定不變為8、9、12、16時，則適合採用九宮格。雖然它有時候給人設計老套的感覺，不過它的一些變體目前比較流行，比如METRO風格，一行兩格的設計等。

 

 

4，TAB

 

採用TAB可以減少介面跳轉的層級，可以將並列的資訊通過橫向或豎向TAB來表現。與傳統的一級一級的架構方式對比，此種架構方式可以減少使用者的點擊次數，提高效率。當功能之間聯絡密切，使用者需要頻繁在各功能之間進行頻繁時，TAB布局是首選。

 

 
 

5，多面板

 

多面版的布局常見於PAD終端，手機上也會用到。多面版很像豎屏排列的TAB，可以展示更多的資訊量，操作效率較高，適合分類和內容都比較多的情形。它的不足是介面比較擁擠。

 

 
 

 6，手風琴

手風琴布局常見於兩級結構的內容。使用者點擊分類可展開顯示二級內容，在不用的時候，內容是隱藏的。因此它可承載比較多的資訊，同時保持介面簡潔。手風琴可以減少介面跳轉，與樹形結構相比，手風琴減少點擊次數，提高操作效率。手風琴在瀏覽器上很常見，很多瀏覽器的導航、曆史、下載管理等頁面均採用了手風琴的設計。

 

7，彈出框

 

彈出框很常見，也屬於布局設計的一種。彈出框把內容隱藏，僅在需要的時候才彈出，以節省螢幕空間。彈出框可在原有介面上進行操作，不必跳出介面，體驗比較連貫。彈出框在安卓系統上的使用很普遍，比菜單、單選框、多選框等，在IOS系統上使用相對少些。

 

 

8，抽屜/側邊欄

抽屜也是將內容先藏起來，在需要時再展開。彈出框一般是完成設定或完成某個任務，而抽屜展示的一般是具體內容。抽屜在互動體驗上更加自然，和原介面融合較好。抽屜欄一般從頂部或底部拉出，若是從左右兩側拉出的，我們一般稱為側邊欄。Path和一些瀏覽器的書籤，均採用了側邊欄的設計。

 

 
 

9，標籤

 

在搜尋介面和分類介面時，會採用標籤的方式來展現。標籤方式比較動感的，增加了應用的趣味性，但使用情境較有限。

 

 

在產品設計過程中，我們需要考慮為不同的資訊結構來提供相匹配的布局。布局方案不是唯一的，巧妙採用各種布局可以強化產品的易用性和互動體驗。我們還可以通過基本布局的組合來完成複雜的介面設計，例如天天瀏覽器的菜單，它是一個彈出框，同時它有三個TAB，每個TAB下面是個8宮格的布局。

總之，對於手機終端來說，內容總是超出螢幕可顯示的範圍，介面布局的設計是非常重要的。掌握這9種常見的布局設計，可以讓我們在產品設計時更加地遊刃有餘。