因為最近接觸到APP設計類似的工作，所以我來梳理一下如今市面上流行的APP導航設計模式以及信息布局設計模式。因為還沒有深刻體會到每一種設計的優(yōu)缺點以及適用場景，所以這里主要的任務是梳理APP的布局設計有哪些。

下圖為本文的結構圖：

導航設計

標簽導航（選項卡導航）

將入口放在頁面底部，形成標簽導航，這是現(xiàn)在市面上比較流行的一種導航模式，幾乎所有APP都有應用到。優(yōu)點顯而易見，讓用戶一進入APP就能對APP的結構有一個初步的認識，簡單易懂。通常這種導航方式底部的標簽選項不會超過5個，如果超過五個就會考慮適用舵式導航。

舵式導航

與標簽導航類似，但是其中一個導航標簽蘊含更多的操作選項，也可以理解為標簽中蘊含更多二級導航標簽，可以讓導航欄簡潔高效，避免擁擠，又可以突出常用功能。

其中，舵式導航中蘊含二級導航標簽的標簽可以單獨成為一種導航——點聚導航，適用于因為內容的展示，要求界面有極高的簡潔性的APP。印象筆記的APP版本就是一個典型的點聚導航，印象筆記是個特別的例子，不僅用點聚導航作為一級導航，還用了抽屜導航作為二級導航，應該是為了最大程度保持產品的簡潔性。

tab標簽導航

將標簽放到界面的上方，就會形成tab標簽導航，這種導航適用于類目較多的APP作為二級導航梳理頁面邏輯，布局清晰。作為一個二級導航，頂部標簽導航應用于多種情境下，可以固定數(shù)量，展示有限的幾個標簽。也可以擴大一定的數(shù)量，變成向左滑動展現(xiàn)更多標簽，十分靈活，但是因為在手機中左右滑動不如上下滑動方便，因此，個人認為還是不要展開太多標簽。

抽屜導航

抽屜導航是將菜單隱藏在當前頁面后，點擊導航入口即可像拉抽屜一樣拉出菜單。抽屜導航一般用來放置對用戶而言不太常用或者對于產品而言不太核心的功能，優(yōu)點是可以節(jié)省頁面空間，比較適合于不那么需要頻繁切換內容的應用，例如對設置、關于、個人信息等內容的隱藏。

下拉導航

一般位于產品頂部，通過點擊呼出導航菜單。導航菜單以浮窗形式位于界面上層，可通過點擊導航菜單以外的區(qū)域使其收起。下拉導航的菜單與界面的連貫性比抽屜式要好，容易讓用戶感知當前位置。但由于是位于屏幕上方，相對隱蔽而且不能結合手勢操作，所以該菜單形式也不適合于頻繁的切換功能使用?？紤]到導航菜單的可用面積較小，所以一般采用列表的形式展示菜單內容。下拉導航還有一種變式，就是下來菜單中展示兩級甚至多級，一般在電商產品中比較常見，因為品類和篩選條件眾多。

宮格導航

主要入口全部聚合在頁面，讓用戶做出選擇。這樣的組織方式雖然無法讓用戶第一時間看到內容或執(zhí)行操作，用戶的選擇壓力也比較大。但卻能夠讓用戶整體上了解APP提供的服務，從而選擇自己所需要的那個服務。這種導航于一些提供的服務較多或者類目較多的APP，例如支付寶、優(yōu)酷等。

由于受到卡片式設計的影響，宮格導航也出現(xiàn)了不少的變式，主要有以下幾種：

將宮格的卡片變大，宮格與宮格時間不留空白。

增加縱向滾動功能，就可以增加卡片數(shù)量的展現(xiàn)，可以說是無限的。如下圖：

對宮格進行分類

每個分類也可以繼續(xù)展開，滑動出更多，甚至跟訂閱相結合

列表導航

通過列表指示類目，在右側顯示箭頭表示有二級內容，列表導航通常用于二級頁，由于它與宮格導航一樣，不會默認展示任何實質內容，所以通常app不會在首頁使用它。這種導航結構清晰，易于理解，冷靜高效，能夠幫助用戶快速的定位去到對應的頁面。

同樣可以對列表進行分類產生變式，這樣邏輯會更清晰，不知道如何確定分類名稱。把分類名稱去掉也是可以的。只是用間距將每一組列表隔開也能起到梳理邏輯的作用。

輪播導航

每一個頁面就代表一個導航入口，這就是輪播導航，適用于比較簡單或者結構比較扁平的APP。輪播導航能夠最大程度的保證應用的頁面簡潔性，操作也是最方便的，只需要手指左右滑動。缺點也很明顯：承載入口的數(shù)量有限，超過10個可能就多了。這種導航常見于查看圖片，也經(jīng)常與其他導航模式結合，作為banner廣告呈現(xiàn)。

隱喻導航

如果原始導航中的五個入口，變成游戲界面中的五個關卡，只是簡單地將其按照上下順序列出來就會不太適用。游戲對導航的要求不僅要可用，更要和整個游戲的風格等匹配。因此，有了隱喻導航這種模式，用頁面模仿應用的隱喻對象。這種導航主要用于游戲，但在幫助導航 人們組織事物(如日記、書籍等)，并對其進行分類的應用中也能看到。

總結起來，導航主要分為兩大類，橫向和縱向。橫向的導航有：標簽導航、舵式導航、tab導航、輪播導航；縱向的導航有：宮格導航、下拉導航、列表導航、隱喻導航、抽屜導航。這些是導航的基本樣式，如今大部分的導航設計都可以從中變種、組合而成。

信息布局設計

列表布局

內容從上往下排列，一個單元內容占據(jù)一行，以列表的形式展示具體內容，并且能夠根據(jù)數(shù)據(jù)的長度自適應顯示，理論上可以無限延伸，適合具體內容的展示。

List View是可以滾動的列表布局方式，最常見的應該屬于android的列表布局，這也是最快速的app布局方式。因為無論ios開發(fā)和android 都有現(xiàn)成的列表布局插件和模板。代表的就是分類信息的展示形式，還有產品列表、對話列表等等。簡潔高效就是它的優(yōu)點。

宮格布局

也可以稱為網(wǎng)格布局，九宮格是一種特殊的宮格布局，只要是網(wǎng)格狀布局的都可以稱為宮格布局，這種布局的優(yōu)點是入口展示清晰，查找方便，適合展示入口較多且模塊之間相對獨立的APP。理論上也是可以延伸的，但是因為主要用作模塊入口，過多會讓用戶選擇困難，也會讓頁面顯得冗贅，且標題也不宜過長。宮格之間最好能有留白，讓用戶視覺負擔少一點。

圖表布局

用圖表的方式顯示信息，主要用在一些商務型APP上，讓數(shù)據(jù)可視化。

卡片布局

卡片布局也是一種常見的布局，每個卡片信息承載量大，轉化率高；每張卡片的操作互相獨立，互不干擾。適合以圖片、視頻為主單一內容瀏覽型的展示，現(xiàn)在也是信息展示的主流方式。

標簽布局

標簽是一個子類，主要用作填寫信息信息的標注、還有搜索的時候熱門關鍵詞的布局。

瀑布流布局

瀑布流圖片展現(xiàn)具有吸引力；瀑布流里的加載模式能獲得更多的內容，容易沉浸其中；瀑布流錯落有致的設計巧妙利用視覺層級，同時視線任意流動緩解視覺疲勞。適用于實時內容頻繁更新的情況。

手風琴布局

兩級結構可承載較多信息，同時保持界面簡潔；減少界面跳轉，提高操作效率高；對分類有整體的了解，入口清晰。適用于兩級結構的內容，并且二級結構可以隱藏。但如果內容過多的時候，列表之間的跳轉會比較麻煩。

多面板布局

多面板可以說是手風琴布局的改良，具有手風琴布局的優(yōu)點，同時克服了手風琴布局跳轉麻煩的缺點，適合分類多并且內容需要同時展示。

旋轉木馬式布局

一個單元占據(jù)一個頁面位置，重點展示一個內容，通過左右滑動查看更多。單頁面內容整體性強，聚焦度高；線性的瀏覽方式有順暢感、方向感。適合數(shù)量少，聚焦度高，視覺沖擊力強的圖片展示。

總結

以上便是市面上主要的APP頁面信息的布局模式。如有不妥，還望指正。

最后，APP采用的設計沒有最好的，只有最適合的，根據(jù)自己產品的信息結構選擇最適合的布局方式，就是最好的設計。

以上內容主要參考自網(wǎng)上資料：

1. APP界面設計之頁面布局的22條基本原則：http://www.chinaz.com/design/2015/1009/454723.shtml
2. APP導航交互設計解析：http://www.xueui.cn/tutorials/app-navigation-interaction-design.html
3. APP常用的八種頁面布局：http://www.mahaixiang.cn/App/1622.html
4. 手機APP設計干貨：常見的APP信息布局方式：http://www.25xt.com/appdesign/9051.html
5. APP設計當中常見的8種基礎布局方案，實用至極：http://www.uibaba.com/article/751.html

本文由 @包包 原創(chuàng)發(fā)布于人人都是產品經(jīng)理。未經(jīng)許可，禁止轉載。