UX設計師如何構建一款產品的導航體系

隨著智能手機的興起，移動端導航技術的成熟，對於導航我們也越來越熟悉。現如今去一個陌生的城市，只要一部帶有導航功能的手機，我們也能做到暢行無阻。導航最基本的兩個功能：

用戶使用你的產品都是帶有目的性的，就像我們登山是為了看山頂的風景一樣，而這和普通的登山過程又有區別。我們登山最終目的是為了“一覽眾山小”，但是我們也會欣賞沿途的風景，所以並不是每一個人都會選擇耗時最短的登山纜車。從動機理論來說，我們希望驅動用戶使用我們產品的動機是產品本身。比如，我們打開一個電商app不是為了購物，而是單純的因為界面很好看，用戶體驗很棒，使用這款產品這個過程對我們來說就是一種享受。但是這個實現起來比較困難，能做到這種地步的產品是鳳毛麟角。所以保險起見，我們還是給用戶提供可以儘快到達山頂的纜車吧。

什麼時候開始構建導航體系？

產品導航體系的構建應該在前期線框圖繪製的時候就開始，從排版佈局、場景轉換到功能定位，大致規劃出導航體系的框架。在產品原型圖期間，再進行一次檢查，以確保所有重要的操作和功能選項對於用戶來說都是明確的。我們不能等到進行UI設計階段才想起來去搭建導航體系，那樣會冒極大的風險，對產品的未來也會帶來極大的不確定性。

菜單

菜單是最主要的導航元素，在很多人看來甚至是唯一的導航元素。菜單樣式很符合我們傳統意義上對於互聯網產品導航的理解。你打開一款app，出現一個菜單列表，用戶可以通過點擊選項來進入不同的功能模塊。菜單根據在頁面中所處的位置可以分為：頂部欄菜單，側邊欄菜單和底部欄菜單。基於不同的交互模式和外觀又可以分為：下拉菜單，滑動菜單，彈出框菜單。

設計師對於最終菜單方案的選擇是基於多重因素的：功能的優先級、使用場景和用戶的操作習慣。精心設計的菜單會大大加快用戶實現目標和滿足需求的進程。

上面這個就是側邊欄菜單的一個例子，左側菜單中項目代表了內容類別，用戶可以通過微文案和圖標來識別具體功能。這種菜單模式具有較強的拓展性，可以在有限的屏幕空間中容納更多的功能入口數量。

上面這個例子屬於列表式菜單的一種。列表式菜單主要應用於核心功能流程比較單一的產品，主界面就可以滿足用戶核心場景下的需求，不需要通過底部欄菜單來在幾個功能模塊之間來回切換。

行為召喚

Call To Action，這裡翻譯為行為召喚，是一種很重要的設計技法。顧名思義，設計師引入行為召喚是鼓勵和刺激用戶完成特定操作。

在交互過程中，行為召喚在產品的易用性和適航性上起著至關重要的作用。從產品導航的角度來說，即使我們給用戶構建了完整的交互流程，但是如果行為召喚沒有考慮到，用戶會感到困惑。就像我們來到一個陌生城市搭地鐵，通過手機導航我們可以找到地鐵站，但是“前方100米地鐵站”的標誌對於我們來說也是極其重要的。

常見的行為召喚元素有按鈕、標籤和鏈接，但是不止於此。一個圖標，一幅插畫甚至是一句話都可以是召喚用戶的一種行為。

行為召喚元素使用的是非成功在於，我們強迫或者希望用戶看到的內容在頁面中是非足夠明顯，能否被用戶立即識別。

上面這個海鮮食品網站的登錄頁面我們可以看到，圖片上面的那句“Let’s Cook”就是一個行為召喚元素。用戶進入頁面第一眼就可以看到這句話，接受到產品的主題。但是這文案本身不可交互，這個頁面中可交互的行為召喚元素是頁面底部的紅色按鈕。通過按鈕上的標籤View More，用戶知道點擊後就會看到更多特定主題的食品與菜單。紅色的應用增強了頁面的視覺層次結構，可以有效的吸引用戶的目光。

功能條

功能條是一個重要的交互元素，用戶可以進行點擊與產品進行快速互動。此外功能條還可以向用戶展示系統當前狀態，讓用戶時刻了解自己所處的位置。

標籤欄

主要應用於app中，位於頁面底端，用戶可以通過點擊標籤欄實現不同功能之間的切換。

進度條

進度條可以通過時間或者百分比的形式，給用戶很直觀的展示加載或者處理過程。

按鈕

按鈕是當前UI設計中最常用的交互元素，用戶通過按鈕可以向系統發出命令和接受反饋。按鈕本身有著極強的可塑性，給我們的導航設計提供了更多的發揮空間。

漢堡按鈕

使用漢堡按鈕可以將功能列表隱藏起來，節省了空間，保持了頁面的簡潔，而且一般都會結合點擊彈出的樣式，操作起來也很方便。但是有一個缺點，就是增加了用戶的認知負擔，有點時候很難發現。

添加按鈕

用戶可以點擊添加按鈕來添加新的內容，包括新的聯繫人、筆記、照片等。在有的情況下，用戶點擊後會直接進入創建新內容的頁面。其他情況下，用戶還會進行一次選擇。例如發微博的path動效。

開關

開關是用戶可以進行切換狀態（打開／關閉）的控件，在當前UI設計中被普遍使用。主要一部分原因是其模仿了現實生活中的開關，用戶對此很熟悉。當設計師要設計一個開關控件，首先要考慮的是開與關這兩種狀態能夠從視覺上給用戶感覺是截然不同的，差異要足夠的明顯。用戶就不用花時間去分辨兩種狀態的區別，減少了用戶的學習成本。具體來說，我們可以使用加強對比來實現兩種狀態之間的差異化設計，也可以增加一些動畫來提升用戶友好度。

上圖這個例子是Toonie的一個開關樣式。在這裡動畫的應用增加了操作過程中的流暢度，使狀態的轉換更加自然。顏色的變化和那個不斷轉動的太陽可以讓用戶很容易的明白哪種狀態是開，哪種狀態是關。

總結

導航體系對於產品易用性有著極大的影響，設計師應該對此足夠的重視起來。今天給大家分享的一些自己的心得，希望給各位設計師在將來的導航設計的時候提供了一些不同的思路。

閱讀更多 一個人創意 的文章

關鍵字: 智能手機 科技 登山