APP界面架構設計

做爲PM，信息架構和頁面流的設計想必爛熟於心，當肯定好產品戰略層和範圍層即爲什麼種目標用戶提供何種服務後，就要着手搭建功能架構，將目標功能經過良好的用戶體驗傳遞給用戶，目的是高效解決用戶痛點，從而實現價值爲公司帶來流量，讓商業變現成爲可能。

趁五一假期有空，總結常見的信息架構導航設計和頁面佈局設計

文章內容架構以下：

 

 

 

 

1.標籤式導航（選項卡式）

標籤式導航，也就是常說的Tab導航。是目前應用最普遍、最多見的導航形式。通常做爲主導航，也會做爲輔助導航，若是其餘導航和標籤式導航搭配使用時通常都會用做次級導航。

標籤式導航有以下幾種拓展形式：

頂部標籤導航、底部標籤導航、頂部導航+底部導航（雙導航模式）、舵式導航、滾動式標籤導航

根據操做系統不一樣，標籤位置也不相同。ios的標籤推薦在底部 ，Android的則推薦是在頂部。可是當前全面屏手機逐漸成爲主流，支持全面屏手勢，Android和ios的設計差別逐漸減少，主要仍是根據產品功能進行設計。

1.1 底部標籤導航

底部標籤式導航是最經常使用的導航形式，通常存在於頁面底端，

採用文字加圖標的方式展示。通常有3~5個標籤，適合在相關的幾類核心信息中間頻繁的切換使用。這類信息優先級較高，須要圍繞產品戰略層範圍層進行歸類，用戶使用頻繁，彼此之間相互獨立，經過標籤式引導，用戶能夠迅速的實現頁面之間的切換且不會迷失方向，

使用場景：若是app有多個核心模塊，而且它們之間的切換比較頻繁，這個時候很是適合使用標籤式導航。

 

拉鉤-微信

優勢：

1.入口扁平化，直接展示最重要的入口信息，用戶在各入口頻繁跳轉不會迷失方向；

2.導航控件佔據面積大，可以輕鬆進行點擊操做，進行功能間的快速切換。

缺點：

1.會佔用顯示面積，不超過5個模塊，不然容易分散注意力增長用戶選擇難度，不利於沉浸式體驗，例如在微博發現標籤中，下滑瀏覽時會隱藏底部標籤；知乎app中，首頁、通知、個人三個模塊在下滑瀏覽時，也會隱藏底部標籤導航，向上滑動才觸發顯示。

 

微博-發現標籤

1.2 頂部標籤導航

當內容分類比較多，用戶對不一樣內容的打開率相差不是很大，須要快速切換/調出的時候，常常會採用頂部導航設計模式，常見於工具類APP中如滴滴打車，這樣設計有一部分目的是爲了避免與安卓端底部虛擬按鈕組合在一塊兒產生信息堆疊和誤操做，能更多展現標籤下的內容，還有一部分是支持快捷操做，例如安卓版音樂類app，方便操做下方區域的內容和按鈕（播放/暫停和下一曲）。

 

 

網易雲音樂-滴滴打車

若是多於5個就採用滾動式標籤導航，下面會有介紹。

1.3 頂部導航+底部導航（雙導航模式）

若是產品分類的內容和維度較多，則採用頂部和底部結合的導航形式。

相似騰訊新聞和網易新聞這種新聞類APP，採用了頂部導航+底部導航結構，且加入手勢切換的操做，方便用戶在高頻的標籤中快速切換，能帶來更好地閱讀體驗，當欄目頻道較多時，可再結合超級菜單式導航準肯定位類目。

使用場景：能夠和超級菜單式導航相結合，滾動式標籤導航的特色是顯示數目有限，可是可以實現快速的切換，超級菜單式導航能快速定位入，可以顯示足夠多的條目，可是切換起來比較麻煩，二者結合，正好進行優點互補。

 

嗶哩嗶哩-網易新聞-喜馬拉雅

1.4 滾動式標籤導航

前面介紹頂部標籤導航時，任務切換若是超過5個，這時候應該使用滾動式標籤導航。使用該導航須要給用戶提示，告訴用戶頁面以外還有一些標籤存在。例如會露出界面外的一部分文案，表示界面以外還有內容，例如Lofter

 

 

 

1.5 舵式導航

當頁面有處於同一層級的幾大部份內容，同時又須要一個很是重要且頻繁操做的入口，那就能夠採用這種舵式導航。中間項標籤不緊操做最頻繁，最重要，且須要引人注意，方便尋找。

舵式導航能夠看爲底部標籤式導航的一種變體。它在後者的基礎上，突出強調了一個高頻核心功能，而且放在中間。

使用場景：若是app有幾個重要的功能，而且須要頻繁切換，其中一個做爲app的核心功能或者是高頻操做，這個時候能夠選擇舵式導航。案例：soul、隨手記、薄荷健康

 

Soul-隨手記-薄荷健康

2 宮格導航

宮格式導航適合入口相互獨立，且不須要交叉使用的信息歸類，宮格導航將主要入口所有聚合在頁面，讓用戶總體瞭解app的服務，各個入口之間相互獨立，沒有太多的交集，沒法跳轉互通。

採用這種導航的應用已經愈來愈少，做爲教科書式使用宮格導航做爲主導航的美圖秀秀，如今也轉變成了舵式導航，目前大多數app會把宮格導航做爲頁面的輔助導航，或是做爲一系列工具入口的聚合。例如支付寶首頁

 

美圖秀秀

優勢：

1.類目清晰、可容納多種類目

2.清晰展示各入口，方便快速查找

缺點：

1.信息獨立，沒法相互通達

2.不能直接展示入口內容，只能點擊進去才能獲知

3.容易造成更深的路徑

4.選擇壓力較大

3 列表式導航

做爲信息梳理條目，通常會做爲次級導航，也有做爲主導航的應用，例如QQ郵箱、系統自帶的信息、聯繫人。

能夠經過間距將列表分模塊進行展現，好比微信的設置頁面，用留白的方式來區份內容的不一樣，「新消息通知、隱私、通用」是一組，「幫助與反饋、關於微信」又是一組。即便不仔細觀察也能經過間距感覺出微信團隊已經對其進行歸類。只要善用這個細節，能夠更好的加以區分次要功能，並提高用戶體驗度。

 

聯繫人-QQ郵箱

用做爲次級導航

標題式列表：通常只顯示一行文字，有的顯示一行文字加一張圖片等等。

內容式列表：主要之內容爲主，因此在列表中就會體現出部份內容信息，點擊進去就是詳情。例如薄荷健康的首頁，頭部是儀表盤式佈局，結合內容式列表展現信息內容。

拓展式列表：相似QQ聯繫人的頁面，造成分組產生明顯的主次級關係。

嵌入式列表：嵌入式其實就是由多個列表層級組合而成的導航。

 

標題式列表-內容式列表-嵌入式列表

優勢：

1.層次展現清晰，利於理解，快速定位

2.可展現內容較長的標題

3.可展現標題的次級內容

缺點：

1.內容過多時，用戶瀏覽容易產生疲勞

2.排版靈活性不是很高

3.只能經過排列順序、顏色來區分各入口重要程度

2.目的個數與條目的詳細程度成反比。

例如美團外賣須要每一個列表足夠詳細，用戶直接看列表就能夠知道想要的信息。通信錄用戶要尋找聯繫人，這時候就要展現足夠多的條目，列表信息詳細程度反而沒那麼重要。

4 抽屜式導航

抽屜式導航經常使用搭配主導航用做於次級導航，由於抽屜式導航的核心就是「藏」，隱藏低頻操做的功能，如設置、關於、會員等功能，使用頻率少，讓核心功能更加突出。抽屜式菜單隱藏在當前頁面後，只要側面滑動或者點擊入口就能將拉出來，減小了主界面中導航控件的數量，讓主界面更加乾淨利落。例如QQ個人頁面，滴滴出行，網易雲音樂。

 

滴滴-網易雲音樂

優勢：

節省頁面空間，擴展性好。

缺點：

1.次功能入口比較隱藏，用戶不容易發現，同時次功能須要二次點擊，增長用戶操做成本。

2.在大屏手機上，左上角的導按鈕存在於單手拇指操做熱區難以到達的位置，致使導航按鈕難以觸達；

 

5 陳列館式導航

也有人會叫作卡片式佈局，可是卡片式佈局會更加明顯，下面會有介紹。陳列館式導航設計通常用做輔助導航，最適合呈現常常更新的，視覺效果直觀，彼此獨立的內容，例如用來展現豐富的圖片文字信息，常見於購物類、照片、新聞，能夠佈局成網格或瀑布流式進行展現。

特色：

佈局比較靈活，設計師能夠平均分佈這些網絡，也可根據內容的重要性不規則分佈，更具備流動性，曝布流就屬於其中一種。

 

小紅書-豆瓣

優勢：

1.樣式多種，能直觀展示各項內容

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

缺點：

1.適合做爲主導航

2.如設計很差，容易致使界面內容過多，顯得雜亂

 

6 超級菜單式導航（下拉導航）

也有叫做下拉導航，有些app是點擊控件下拉式，有些會新打開一個新頁面。

使用場景：通常做爲輔助導航，和滾動式導航相結合，滾動式導航的特色是顯示數目有限，可是可以實現快速的切換，而超級菜單式導航的特色是可以顯示足夠多的條目，可是切換起來比較麻煩，二者結合，正好進行優點互補。

優勢：

1.層次展現清晰

2.能容納不少分類

3.可快速切換定位到另外一個分類中

缺點：

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

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

三、排版靈活性不是很高

 

 

7 輪播式導航

使用場景：應用信息足夠扁平,想突出沉浸式體驗,適用於一些小而美的應用,能夠嘗試輪播導航，例如天氣app。

優勢：

1.單頁面簡潔，總體性強

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

缺點：

1.不適合展現過多頁面，容易視覺疲勞

2.不能快速定位到對應的分頁內容，只能按順序查看相鄰的頁面

3.因爲各頁面內容結構類似，容易忽略後面的內容

 

墨跡天氣

其中，全部的主要導航均可以作爲次級導航，但次級導航不太適合用做主要導航 。其餘一些零散的如隱喻式導航(遊戲），點聚式導航，如蘋果的懸浮按鈕。

8 儀表盤式佈局

儀表盤式佈局能夠展現一功能中關鍵數據便可，通常用做輔助導航，結合主導航展現數據信息，這種導航模式經常使用於金融應用程序、記錄分析工具、銷售和營銷應用程序，如薄荷健康和Timi記帳

 

薄荷健康-Timi記帳

 

9 多面板佈局

在電商模塊中，用戶須要選品定位時會碰見這類佈局，其特色是能同時呈現比較多的分類及對應的內容，適合分類多及其內容同時展現的頁面。

優勢：

1.減小界面跳轉的層級

2.對分類有總體性的瞭解

3.分類位置固定

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

缺點：

一、界面比較擁擠

 

京東-必要

10 卡片式佈局

卡片式導航模仿生活中撲克牌，翻牌等動做來切換內容，經常使用做輔助導航，像探探，最美有物，其中最美有物首頁畫報使用卡片式內容展示，讓人第一次使用以爲很驚豔，固然長時間使用這種形式獲取信任容易疲勞。

優勢：

特定內容上展現效果明顯，並且單個條目的點擊率會相應的提升。

缺點：

當運營量較大的時候，這種結構會下降用戶尋找信息的效率。

 

最美有物

到此總結結束，大部分app都是基於功能組合搭配，知足功能狀況下，選擇最優的展現方式便可。

小禮物走一走，來簡書關

做者：Richard_L連接：https://www.jianshu.com/p/07647d3d65ef來源：簡書簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。