導(dǎo)航體系對于產(chǎn)品易用性有著極大的影響，設(shè)計師應(yīng)該對此足夠的重視起來。今天，本文作者給大家分享的一些自己的心得，希望給各位設(shè)計師在將來的導(dǎo)航設(shè)計中提供了一些不同的思路。

隨著智能手機的興起，移動端導(dǎo)航技術(shù)的成熟，對于導(dǎo)航我們也越來越熟悉。現(xiàn)如今去一個陌生的城市，我們只要一部帶有導(dǎo)航功能的手機，就能做到暢行無阻。導(dǎo)航最基本的兩個功能：告訴用戶當前所處的位置和規(guī)劃出前往目的地的路線圖。

導(dǎo)航這一理論投射到互聯(lián)網(wǎng)產(chǎn)品的層面來說，網(wǎng)站和app都是為了向用戶展示某些內(nèi)容，但是與從書本或者海報這類展示形式差異來看，網(wǎng)站和app通過“鏈接”可以將不同的內(nèi)容相互串聯(lián)起來，并且可以往返各個內(nèi)容之間。簡言之，因為“鏈接”的存在使得這些內(nèi)容具有了相關(guān)性。所以，用戶在使用過程中，我們必須讓他／她時刻了解：

• 現(xiàn)在我在哪個頁面？
• 這個頁面內(nèi)容是什么？
• 從哪里來到這個頁面？
• 從這個頁面可以到哪個頁面去？

什么時候開始構(gòu)建導(dǎo)航體系？

產(chǎn)品導(dǎo)航體系的構(gòu)建應(yīng)該在前期線框圖繪制的時候就開始，從排版布局、場景轉(zhuǎn)換到功能定位，大致規(guī)劃出導(dǎo)航體系的框架。在產(chǎn)品原型圖期間，再進行一次檢查，以確保所有重要的操作和功能選項對于用戶來說都是明確的。我們不能等到進行UI設(shè)計階段才想起來去搭建導(dǎo)航體系，那樣會冒極大的風險，對產(chǎn)品的未來也會帶來極大的隱患。

菜單

菜單是最主要的導(dǎo)航元素，在很多人看來甚至是唯一的導(dǎo)航元素。菜單樣式很符合我們傳統(tǒng)意義上對于互聯(lián)網(wǎng)產(chǎn)品導(dǎo)航的理解。你打開一款app，出現(xiàn)一個菜單列表，用戶可以通過點擊選項來進入不同的功能模塊。菜單根據(jù)在頁面中所處的位置可以分為：頂部欄菜單，側(cè)邊欄菜單和底部欄菜單?；诓煌慕换ツＪ胶屯庥^又可以分為：下拉菜單，滑動菜單和彈出框菜單。

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

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

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

行為召喚???

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

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

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

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

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

功能條

功能條作為一個重要的交互元素，用戶可以通過點擊來實現(xiàn)與產(chǎn)品之間的快速互動。此外功能條還可以向用戶展示系統(tǒng)當前狀態(tài)，讓用戶時刻了解自己所處的位置。

標簽欄

主要應(yīng)用于app中，位于頁面底端，用戶可以通過點擊標簽欄實現(xiàn)不同功能之間的切換。

進度條

進度條可以通過時間或者數(shù)字百分比的形式，給用戶很直觀的展示加載或者處理過程的實時情況。

按鈕

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

漢堡按鈕

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

添加按鈕

用戶可以點擊添加按鈕來添加新的內(nèi)容，包括新的聯(lián)系人、筆記、照片等。通常情況下，用戶點擊后會直接進入創(chuàng)建新內(nèi)容的頁面。而有的時候，用戶還會進行一次選擇。例如發(fā)微博時點擊“＋”隨后出現(xiàn)的path動效。

開關(guān)

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

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

總結(jié)

導(dǎo)航體系對于產(chǎn)品易用性有著極大的影響，設(shè)計師應(yīng)該對此足夠的重視起來。今天給大家分享的一些自己的心得，希望給各位設(shè)計師在將來的導(dǎo)航設(shè)計中提供了一些不同的思路。

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