本文整理自壹佰講堂第68期，由1905電影網成都產品總監張崟傾情分享。
想要查看視頻回顧？
想要獲取分享課件？
前言
手機不僅是信息的工具，甚至成為了人們的一部分，其打破了時間和空間的限制，這也是移動趨勢滲入我們工作和生活的魅力。
而導航就是手機應用的靈魂，而靈魂的好壞，也決定了產品所傳達給用戶的體驗好壞。在如此狹小的空間中，我們想要去駕馭其手掌方寸間的空間，作為優秀的產品經理，就要為自己的產品設計最優秀的導航。
良好的導航會讓用戶覺得方便好用，也能夠讓用戶降低學習成本，因此所有的導航設計，包括產品架構設計都要站在用戶的角度來著想。
移動交互設計快速發展，微創新難度擴大
介紹移動應用的導航種類前，先回顧一下這幾年來整個移動交互設計的發展：
5、6年前國內的移動交互設計才開始萌芽，逐步走向專業化，在那個階段，行業內大家那個時候大家對于版權的意識還不強烈，有可能今天你的產品上線了一個獨樹一幟、頗受用戶好評的設計，第二天就在應用海中看到和你一樣的設計出現。而我們整個行業經過快速的發展，移動應用已是一片廣袤的紅海了?，F在的交互設計、框架設計已經相對成熟了，可復制性強，可用性也很高。所以要從交互層面來講，微創新很困難。用戶也從關注產品本身的服務，到更關注產品體驗了
三大類移動應用導航
1. 全局導航
各個選項一目了然：
跳板式、卡片式、列表菜單式、儀表式、陳列館式、選項卡菜單式、隱喻式。
2. 瞬時導航
需要通過點擊或手勢才能清楚顯示：
側邊抽屜式、下拉菜單式、轉盤菜單式。
3. 次級導航
其它主導航模式也可用于次級導航模式：
翻頁式、滾動選項卡式、伸縮面板式。
全局導航案例分析
以上圖片中所舉出的導航樣式，正是目前很多產品典型的導航樣式，同時也基本上囊括當前移動APP的所有導航設計。
1. 跳板式導航：
2011年左右比較流行 ，移動端模式時期和可放置多個選項卡造就了跳板式導航。目前仍然有很多應用使用這種導航。
其缺點也很明顯：所有選項都被扁平化，沒有優先級。而抽屜式模式的導航容納的選項還可以更多 。適用于功能扁平化的產品。
側邊抽屜式：交互與動態類似于生活生推拉抽屜的樣式，擴展性很強。
轉盤菜單式：典型案例——中國建設銀行APP，比較少見。
選項卡和跳板式：支付寶，對于這種功能豐富的產品，主導航和次級導航的結合，可以把優先級和層級劃分清晰，對于用戶來講，易用性很高的優秀設計。
2. 列表菜單式導航
列表菜單式導航在國外的產品中比較常見，列表菜單式中的每一個列表項都是進入該應用各項功能的入口，這一點和跳板式導航比較類似。
在設計層級結構的應用導航時可考慮列表菜單式。這種模式對于列表項名稱較長的菜單，以及列表項既要有名稱又要有描述的菜單都可使用。
3. 儀表盤式
儀表盤式的導航，讓用戶一眼就能看到他最需要的信息概覽，而不用轉到另一個頁面。
在需要使用關鍵指標或數據作為應用入口的時候，可以采用儀表盤式，但不要在單一頁面載入過多的信息，對于要展示的關鍵指標或數據需經過仔細研究再做判斷。
4. 陳列館式
陳列館式設計模式最適合呈現經常更新、視覺效果直觀的無層級內容。呈現實時內容，比如新聞、菜譜、照片，可采用網絡布局或輪盤布局，還可以采用幻燈片模式進行展示彼此獨立的內容項。
因此在使用這種導航時，要盡力將圖片的優點利用到極致。
5. 選項卡菜單式
選項卡菜單式主要可用于讓用戶從一個主要類別切換到另一個主要分類。目前其也是所有移動端導航中占比較高的類型，可以方便的在不同視圖間進行瀏覽和切換 場景，降低用戶操作成本，讓用戶清楚地知道有哪些可選擇的視圖 。適用于預計用戶會經常切換、固定選項卡有限的情況。
6. 隱喻式菜單
隱喻式的菜單，顧名思義，就是用設計模仿應用的隱喻對象，很多時尚雜志、書籍、股票APP等經常使用。
但是建議大家慎用隱喻式導航，蹩腳的模仿可能會標新立異，但是很容易走向反模式。
以上就是比較典型的全局導航案例，現在大家頭腦中應該形成了較為直觀、體系化的思路，能夠很清楚的明白不同的產品適用于什么樣的導航。接下來，我們來看看瞬時導航。
瞬時導航案例分析
1. 側邊抽屜式
手機QQ就是抽屜式導航的典型案例
在我們諸多產品的運用中，其實已經把用戶的習慣培養起來了。
手機QQ的導航是側邊抽屜式導航，是嵌入式的，充分突出即時消息功能的重要性，同時又承載了其他很多項功能。這里強調一點，除非產品提供的某一個功能優先級、唯一性特別高，否則不要輕易使用側邊抽屜式，因為這樣會導致用戶使用成本增加。如果你使用的是側邊抽屜式，那么建議在用戶第一次打開時進行用戶教育的說明。
如果選擇抽屜式的導航設計，那么其設計請放在左邊或者右邊，但是不要在下邊進行抽屜式。
那么如何怎么讓用戶知道你是側邊抽屜式？需要在用戶第一次打開應用時，自動打開抽屜（有學習成本）。
這里分享一個之前我們團隊產品設計的小案例。
目前1905手機端的應用，選用的是選項卡時導航，但是改版前一直用的是抽屜式導航，將推薦頻道作為應用啟動的第一個界面。然而除了推薦頻道的點擊量很高之外，其他頻道的點擊量很低，所以當時考慮很重要的一個因素，是因為導航將其他頻道隱藏太深導致，因此經過團隊的討論后，決定將導航改為選項卡導航。改版后各項數據都有所上升，體驗非常直觀。
2. 下拉菜單式
國外的某APP界面
在上面這張圖中的應用，就是采用瞬時導航來刪選不同頻道的分類。
下拉式導航幾年前也頗受偏愛。曾經我所在的PPTV團隊，PPTV手機端1.0版本，我們所有的電影、電視劇、動漫等內容選擇，都采用下拉式菜單展現。產品的交互設計也如時尚界，有一個流行趨勢，這個交互設計流行了一段時間后，現在又開始了另外一種交互設計的流行。所以你會發現菜單式流行完后，視頻類的產品又開始流行選項卡式的導航設計，并且沿用至今。其實用戶的習慣養成，并不是我們想象中這么難。好用與可用，是不同的。但是，只要是好的設計，總是會受到用戶的喜愛。
3. 轉盤菜單式
在我們所有模式中，轉盤菜單式是最少見的，無論是國內還是國外，使用率都非常低。究其原因，主要是由于其交互設計較為復雜，對于用戶來說，使用成本太高。因此我們要謹記，能簡單的，絕不復雜化。
同時，由于其操作手勢很不簡單和自然，因此設計任何有多個層級的菜單時應該避免采用轉盤式的菜單。
次級導航模式案例分析
為什么叫次級導航呢？因為其是在一級導航主導航下的二級分類和導航。
1. 翻頁式導航
翻頁式導航視覺呈現效果很強
翻頁式導航通常應用在次級導航中，通常利用移動手勢控制，如左右滑動，而手勢的利用，在移動的交互中，往往可以達到事半功倍的效果。
因此我們在進行產品設計時，如果我們可以用手勢來進行操作的功能，不要在界面上增加更多的按鈕或者指示，增加流暢的交互體驗所帶給人的舒適感。
運用翻頁式時要利用移動的手勢控制，不要依賴像下一步按鈕或標簽頁這類桌面端模式。但要注意提供視覺指示，讓用戶知道可以使用滑動手勢。
2. 滾動選項卡式
滾動選項卡式的導航和手勢的使用、動態交互密切不分。其適用于在某一個模塊中顯示多種類別或視圖時。
滾動選項卡一般比標準的標簽欄要窄，沒必要作為觸摸對象，進行滑動就可以進行切換，因此一定要注意動態交互設計。所以，希望大家在進行導航設計時，不僅要考慮導航本身的設計，還要考慮到功能分類和手勢交互達到完美結合，這樣的產品體驗才能達到極致效果。
3. 折疊菜單式
折疊菜單式的導航，就是運用動態的效果，將二級的信息展開，無需跳轉到新的頁面，使用戶在同一個頁面上查看到更多的信息，不需要任何跳轉。因此用戶可以在一級頁面就獲取大量信息。這種模式比跳轉到另一個頁面再跳轉回來更高效。
但是，一定要使用常見的圖標來進行指示折疊式菜單的打開或關閉狀態，避免用戶產生疑問。
然而，熟悉了這么多的移動導航之后，在我們以上講的內容中，并不是所有的設計都站在了用戶的角度，有一些設計我們稱之為反模式設計。
反模式——繞過那些陷阱
反模式也稱之為陷阱，指一類通常是重復發生的糟糕的問題解決方案。通俗來講就是一些違背現有設計規范規則，違背常用的視覺交互的方式方法，設計者出于某種目的，進行的一些沒有必要或者不按常理出牌的設計。 因此，我們要特別注意，避開這些陷阱。
很多時候產品經理更像是團隊中的潤滑劑，面對開發人員、設計師等各種要求，務必要站在用戶的角度，多方面進行慎重的思考。在面對反模式的需求時，要堅決的拒絕。但是，在拒絕的時候，要用專業知識進行支撐，這就是say no的底氣。
反面教材——反模式
以下內容都是反面教材，切記勿踩坑！
1. 標新立異
反面案例一：中國建設銀行手機客戶端
建行的轉盤導航 ，交互操作非常復雜，沒有辦法讓用戶一眼看到所有的菜單分類 ，切換主菜單時，菜單會旋轉，影響用戶視覺 。正是這些原因，讓我將這個產品從我的手機中徹底刪除了。
案例二：NBC NEWS
NBC NEWS試圖創造一個與自己商標形狀一樣的菜單，但這樣的設計完全不符合用戶使用的標準：
對于移動應用來說這樣的菜單樣式不標準
旋轉的文字增加閱讀困難
顏色太多
作為導航菜單不能讓用戶明確的知道當前處于哪個位置
2. 不必要的復雜
過于復雜的交互設計會增加用戶使用成本，千萬不要做那些讓用戶感到疑惑的交互設計。
比如下面這幾個案例：
向右短距離滑動粘貼，向右長距離滑動
長按并且拖放才能保存收藏
長達9頁的用戶教育長圖，極大提高了用戶使用產品的成本
通常用戶在5秒內，無法完全理解、得到交互所要傳達的信息，就會放棄使用產品。這個概念也在產品設計的其他方面有所應用，例如加載頁面中的下拉刷新動作，5秒內必須完成，時間節點務必要控制好。
隱喻錯位
隱喻錯位也是常見的反模式，造成這種反模式的原因很多，主要是在界面設計上選擇了錯誤的隱喻。
不同的隱喻錯位可能出現在低層次，比如沒有正確使用一個控件或圖標，張冠李戴。當然，也可能出現在高層次，比如應用的概念模型與用戶心理模型的不符。
隱喻錯位低層次比較好理解，比如空間或者圖標的誤用，但是高層次的概念模型與用戶心理模型的錯位，需要結合更實際的業務場景，在實踐當中去體會到更深的陷阱。
3. 控件錯位
控件錯位主要是指精準到某一個在設計中的控件運用不得當。例如下面這個例子，設計者將ios的控件放在安卓的應用上，如此不專業的設計，作為優秀的產品經理，在實際的工作中是絕不能出現的。
一個安卓應用出現了iOS風格的控件
主導航采用了非標準控件，用戶不能輕易看出應用的主模塊
懶人周末主導航從上而下，留有大塊黑色背景
在反模式中，控件錯位、圖標錯位和手勢錯位等，是比較容易理解并且避免的，而在平時你在應用海中使用各種各樣的app時，也應該有一定積累，在遇見各種產品中的交互中，面對好的點，不好的點，要有習慣去把這些一一記錄下來，能夠很大程度上提升自己的產品設計能力。
4. 圖標錯位
這也是非常易犯的錯誤。用戶對于通用圖標，已有非常深的認識，例如：齒輪代表設置，星星代表保存收藏，放大鏡代表搜索。把熟悉的圖標用于常用功能之外就會導致混亂。
kindle把亮度控件放在字體設置圖標下面
所以我們不要去追求標新立異，有一些行業規范，特別是用戶已經養成的習慣，更多的時候需要去順應，不要為了創新而去創新。這是作為產品經理要思考的點。
5. 手勢錯位
手勢錯位和動態交互是相關的，例如下面這兩個例子：
下拉手勢在一般認識當中都是刷新。這個郵件應用Seed，使用手勢下拉卻是添加提醒。
微信首頁下拉拍攝小視屏
微信的下拉手勢是小視頻，其實這一點是比較反人類的，和常規的“下拉刷新”完全不同，給用戶造成困惑。
這些圖標錯位、手勢錯位，都是屬于比較低層面的錯位，在行為層中很好理解，但是還有一種比較高層次的錯位，我們稱之為心理模型錯位。
6. 心理模型錯位
一個地球儀樣子的新聞內容導航，但新聞內容其實跟這個地球完全沒有關系。右邊這個新聞做得比較好，因為新聞跟其所對應的地區是相關的。
這個APP下拉刷新時出現一個小游戲
這個APP將下拉刷新的loading界面，做成了一個貪吃蛇的游戲。雖然其看似有趣，但是卻會打斷用戶的操作，也屬于反模式中的一種。
通過對比，我們也可從中看到，什么樣的導航符合用戶心理預期。
7. 隱喻錯位
無論是圖標，控件，還是概念模型方面的隱喻，都是可以簡化和提升體驗的視覺化快捷方式。但是使用不當的話，會讓用戶感到挫敗，感到困惑或者難以掌握。
8. 愚蠢的對話框
在進行產品設計時，切結不要擾亂用戶的操作流，只在用戶執行不可撤銷的操作（比如永久刪除），需要用戶確認時，或者是有重要信息，需要告訴用戶時才顯示對話框。
初次使用就彈出多個對話框，在正式開始前就擾亂了用戶
點擊添加到購物清單時彈出對話框要求用戶確認。 右圖是刪除確認，在執行一個不可撤銷的操作前要求用戶確認是正確、合理的設計。否則就是打擾用戶。
9. 圖表垃圾
圖表設計，對于數據型產品來說，是一個較大的挑戰，一旦涉及到數據、多維度的標簽，對于產品經理、交互設計師、UI設計師來說難度都很大，因為你必須要在限定空間內把所有元素清晰展示，讓用戶快速感知。
上面這個案例中，該產品將各種各樣的色塊來區分出分類，對各個分類的文字描述全部都展現出來，畫面顯得擁擠并增加閱讀難度 。
在數據和分層較多的導航設計中，整個界面顏色不要查過4-5中顏色，數據展示也注意減少元素。
圖表應該通過描繪數據之間的重要關系講訴故事。沒有實現這一目的，那它就是在浪費空間。
在圖表和圖形中，只使用絕對必要的視覺元素傳達信息，越簡單越好。 這也是產品經理和產品團隊，能夠為用戶，讓他們打到最舒服的狀態，這才是我們真的到了很高的境界才能完成的事情。（用戶體驗最優）
10. 按鈕海
在眾多反模式的陷阱中，對于交互設計師來說，很容易誤用按鈕海。在設計時，拿到一個功能或者需求，需要我們在一個界面上呈現很多信息時，很容易出現“堆砌”的情況，只考慮如何將信息羅列出來傳達給用戶，而沒有考慮這些功能、層級的重要性。
整個頁面充斥著各種按鈕 ，所有按鈕占據了視野。
將所有元素都設計成按鈕的樣子
我們很容易在輸入很多要素時，忽略視覺的感受。這時候就需要產品經理想辦法，將移動端的空間進行不斷拓展，如利用手勢和動態的延展，將空間延展到3D、4D。我們缺乏的是想象力，與智商無關。
11. 格格不入
這種反模式，也稱之為設計中的懶惰病。
格格不入的反模式通常是在執行層面做出無知決定的結果，或者是匆忙投入市場的結果或者兩者兼而有之。這種模式是指，采用了一個為單一平臺所做的設計，又將其套用到另一個平臺當中。（許多公司不做任何修改就把iOS平臺設計直接搬到安卓上去，這樣的情況在前幾年尤其多。）
在面對產品設計時，我們會有很多壓力，需要快速的將產品上線發布，在iOS及安卓功能差異不大時，很多產品經理為了偷懶，就將兩者的交互，甚至界面做的一模一樣。在當下競爭激烈的時代下，產品的優秀品質，不是短時間就能做好的，因此，我們需要比所有人都做的更加細致。
做到以下幾點可避免格格不入的反模式：
通讀并理解目標操作系統的設計指南。
每天使用你為之設計的移動設備，直到你對那個平臺的細節全部了如指掌。
為每個平臺分別設計不同的UI，準守他們的設計規范。
希望大家在以上的實例及方法論中獲得一些靈感，至少在產品設計的這條道路上少走一些彎路。
*本文未經許可，禁止轉載。
