05.27 除了pinterest瀑布流，APP的界面佈局還有哪些說道？

在APP設計裡如果你已經把Workflow和信息架構圖都出完了，那麼接下來製作低保真圖（線框圖）的第一步就是要根據自己手裡的信息設計APP的佈局構圖。

但沒有哪個佈局構圖是萬能的，都會有自己的優缺點。下面是APP界面設計中常用的界面構圖案例分析，希望同學們可以通過這些案例來學習構圖的類型和如何應用。

1.列表

列表形式的佈局信息可以縱向伸展，用戶很好理解信息的層級關係。這種列表的形式一般會設計在信息的導航欄或者隱藏導航欄裡使用。每個部分的標題長度比較長，可添加的信息也非常多。

但這樣的列表形式也有缺點，就是用戶一般記不住整體的信息架構，容易忘記操作的步驟，而且每次操作都需要從頭開始，很容易讓人感覺到疲倦。想要找到想要的功能操作頁面，就要進行一層一層的類別選項，這也導致操作時間相對較長。

2.標籤-下

下欄標籤是很多APP作為功能導航的常用方法，其優點是操作速度比較快，因為手指離屏幕下側的部分距離是最短的，因此可以在很快的時間內進行操作。但缺點是可放的內容並不多，一般只能有3-5個標籤，所以要進行準確的分類才能凸顯效果。

3.標籤-上

標籤設計的形式是非常多的。可以用多出來的部分當做tag，也可以用文字突出的形式表示出已經選擇的標籤欄。上側的標籤欄可以防止誤操作的情況發生，因為這個位置離手指的距離較遠，所以選擇的時間比下側的標籤欄長一些，但是tag的作用是一樣的，都可以用來作為導航欄。

4.網格

網格是現在很多APP設計最喜歡使用的一種方式之一。一般常用的有四宮格、六宮格、九宮格和十宮格。顯示的形式一般是文字和標識並行，好處就是進入到具體功能頁的速度很快，直接的選擇方式可以有效減少操作步驟，缺點是不能顯示太多的信息，標題的長度也有限制。

5.滿屏切換

滿屏切換（Gallery佈局）一般用在最初的操作方法演示、圖片展示、少數量的信息展示的時候使用，一般使用滿屏切換的內容會以圖片或者Icon為主。這種用於瀏覽功能的佈局，優點是滿屏瀏覽時界面信息不會受到其他部分的干擾，其切換形式一般有抽線式和點切換式，縱向和橫向切換都是可以的。

6.卡片

卡片式構圖的好處在於每個部分的操作比較獨立，不會受到其他部分的干擾信息，不擁擠、瀏覽體驗較好。但缺點在於無法承載過多的信息。卡片式結構做最終高保真效果圖的時候有一個禁忌，是不要過分的強調卡片的邊緣或者影子的設計，否則會干擾用戶集中精神去讀卡片內容本身。

7.多面板

多面板和卡片式不一樣的地方是，點擊多面板的一個列表或者卡片，就會顯示上面的內容，多面板可以設計成多選多面板和單選多面板。多選多面板就是多個面板可以同時打開瀏覽內容，單選多面板是隻可以一次性查看一個面板上的內容。這種佈局的侷限性在於每個面板上的內容不宜過多，不然每個面板裡面的內容又要進行分類顯示，操作會變得比較繁瑣。

8.瀑布流

瀑布流的形式是大量平臺和分享網站最愛使用的構圖方式，其優點是信息瀏覽的速度比較快，對提高整體信息的曝光率有好處。這樣的形式適合以圖片分享為主的APP設計。但這種界面設計有一個很大的矛盾是要不要限制圖片的比例。因為如果圖片太扁，瀏覽的效果就會不太好，反之如果圖片太長也會影響其他圖片的曝光率。

但如果對圖片尺寸進行限制，又會影響用戶的使用體驗，所以這種情況下要根據具體的圖片內容來確定需不需要進行圖片的比例限制，如果限制，多少是最合適的。就像最初的Instagram只可以使用方形圖片，但因為用戶的評價太低，所以最後改成了無比例限制的分享平臺。

9.複合

除了上述單獨式的構圖設計之外，我們還可以把一些構圖進行結合做成複合形式的構圖設計，一般的組合會在2-3個之間，如果過多則會讓界面的信息變得複雜，用戶無法在腦海中形成信息框架。

以上是對幾種常用構圖方式的解釋和優缺點分析，希望同學們在設計具體平面佈局的時候可以在瞭解每個構圖優缺點的基礎上，反覆思考，擇優選擇具體表現形式，以求達到最佳的佈局效果。