2022-6-14 博博
編者按：其實網頁或者App中的導航（Navigation）這個概念遠不止我們熟悉的導航欄，而是一個更加廣的交互概念：引導用戶和產品進行有效的交互，實現用戶的目標。本文將詳細地介紹界面的導航設計。
一個網頁或App產品要想有很好的可用性（usability），需要做好的最基本的一點是導航的設計或者說引導用戶的設計。如果用戶在使用一個網站或者App的時候找不到自己的處在什么位置或者該怎么去到想要的頁面，那么視覺效果再怎么有創意或者抓人眼球都無法彌補產品的缺陷。無論你的產品想滿足用戶什么需求，讓用戶知道產品當下的狀態和每一步操作之后的結果是對用戶最基本的尊重。
首先，讓我們弄清楚導航這個概念。最基本的含義就是在我們的現實世界中，當我們從一個地方到另一個地方，需要一些引導和指示。英文中Navigation這個詞來源于拉丁文，原意就是：操縱船只在海上航行。所以導航就是能夠幫助我們到達目的地的行為。導航的其他意思都是建立在這個原意的基礎上。
所以回到UX／UI設計上，導航毫無疑問是可用性的一個要點。它可以定義為一系列引導用戶成功地與產品互動并且實現他們目標的動作組合或者技巧組合。 用戶帶著他們的期望和目標來使用你的網站或者產品，作為設計師的你需要給他們提供實現他們目標的最好操作流程。因此當你的導航設計得非常高效，用戶體驗能得到極大的提升。
在你剛開始設計你的界面時，就要思考怎么設計一個有效的無縫銜接的導航。通過一些可交互的元素，比如按鈕（buttons），開關（switches），鏈接（links），標簽（tabs），條（bas），菜單（menus），區域（fields），讓用戶在不同的界面之間進行切換。
我們工作室的設計思路是，在界面設計的早期就全面地思考導航的設計，包括界面的布局，頁面間如何切換，導航元素的放置和具體功能。并且通過低保真原型來進行驗證，保證用戶能清楚地理解所有重要的操作。如果跳過這一步，設計將有巨大的風險，其他事情有可能到頭來都白干了。所以無論，對用戶還是客戶還是設計團隊來講，做好這最基礎的部分是非常有好處的。
菜單是我們最熟悉的具備導航功能的元素，它向用戶展示了界面的所有重要選項?；旧?，它可以是用動詞命名的一系列指令，用戶可以用它來指示系統做出動作，像保存，刪除等；它也可以是一個用名詞命名的目錄，用來代表不同內容的集合。
在界面設計中菜單可以放在不同的位置（側邊菜單，頂部菜單，底部菜單等），擁有不同的交互和視覺形式（下拉菜單，上拉菜單，滑動菜單等）。要想設計好菜單的位置、交互和視覺形式，設計師需要經過全面的用戶調查，包括目標用戶的預期和要求、接受能力和使用情境。好的菜單設計能讓用戶更快地實現他們的目標，為用戶體驗打下堅實的基礎。
△ 作者：Tubik
這是一個博客APP的界面設計，采用了側邊菜單以及目錄的形式，文字直接說明內容，再加上圖標來做為輔助的視覺說明。
△ 作者：Ludmila Shevchenko
這個UI概念設計的例子很好的運用了顏色作為標記，這是一種很有效的導航技巧：每個分類的背景色使用了和目錄相同的的顏色，這樣目錄和內容有著非常強的相關性，用戶能自然地將他們聯系起來。
CTA是用戶行為召喚的簡稱（call to action）。CTA簡單來說就是指設計師通過設計，刺激用戶去做出一些行動。相應的，CTA元素就是指那些能刺激用戶做出行動的交互元素。典型的CTA元素是按鈕，標簽或者鏈接。
不管在什么界面，CTA元素都是高效的交互行為的核心，極大的關系到產品的可用性和導航有效性。如果CTA元素的設計不到位的話，用戶會產生困惑并且得費勁地去嘗試。產品的轉化率和用戶體驗都會大打折扣。這就是為什么CTA元素特別值得注意。無論什么樣的界面，它都必須是最矚目的元素之一，用來直接地告訴用戶怎么用這個產品。
△ 作者：Eugene Cameel
一些CTA元素直接用圖標形式而沒有任何文字說明，但只適用于大家都熟知其含義的圖標，比如聽筒圖標和信封圖標。上圖這個例子中，這個聽筒圖標就是這個界面中一個焦點，是一個典型的CTA元素，引導用戶快速地實現他們的目標。不需要任何文字說明，用戶也能懂點擊這個圖標的結果。
但是，如果一個圖標的含義不是那么明顯或者可能造成誤解，最好還是加上文字說明。
△ 作者：Tania Bashkatova
上面這個例子是一個關于制作海鮮的網站的著陸頁（Landing page）。頁面的標題let’s cook還有食材照片是一個CTA，但不是一個可交互的CTA?？山换サ腃TA是下面這個紅色按鈕，用戶點擊這個按鈕能看到更多關于不同主題和菜譜的信息。 抓人眼球的顏色強調了頁面的視覺層級關系，把用戶的注意力拉到關鍵的交互區域中。
條（Bar）指的是界面中一組用戶可以點擊的元素，用來快速與產品進行互動，或者還能讓用戶知道事件的進程。
標簽條（Bar）
最基本的條是標簽條（Tab bars），常出現在APP界面的底部，讓用戶能在APP的不同模塊間快速切換。
△ 作者：Sergey Valiukh
載入條（Loading bar）
載入條是用來告知某個動作的進展，用戶可以通過時間、百分比或者其他信息了解整個過程。
△ 作者：Sergey Valiukh
進度條（Progress bar）
給用戶提供反饋，讓他們了解事件的進度，比如說計劃的事情完成了多少。
△ 作者：Valentyn Khenkin
按鈕應該是用得最多的元素了。按鈕能讓用戶在對系統發出指令后得到恰當的反饋。用戶通過按鈕對系統下命令，跟系統進行交互從而實現他們某個目標，比如發送郵件，買一個東西，下載文件，播放音樂等等這樣的指令。按鈕之所以那么的常用和對用戶那么友好，是因為按鈕很好地模仿了人和真實世界里跟物品的交互。
現如今的UI按鈕有不計其數的設計樣式，能滿足很多的設計需求。按鈕典型的用途是表明這個地方是可點擊，因此需要具有非常高的視覺識別，有著特定的形狀還有文字說明它能實現什么動作。設計師通常需要花不少時間好好考慮怎么讓按鈕很好地融合界面的風格，同時又能在視覺上跳脫出來。
△ 作者：Ernest Asanov
以下是在APP和網頁設計中常用的幾種具備附加功能的按鈕。
漢堡按鈕
漢堡按鈕隱藏著一個菜單。當用戶點擊他們的時候，能把菜單調出來。有這個名字是因為它是由三條水平線組成的，看起來就像是漢堡的形式。它是一個典型的交互元素，也是頗具爭議的元素。
大多數用戶知道點擊這個按鈕能展開一個菜單，所以不需要額外的說明。漢堡菜單極大地節省了界面的空間，能讓界面看起來更簡潔，也為其他重要的界面元素騰出了必要的空間。它同時非常適合響應式設計，通過隱藏菜單讓整個設計更統一，界面能在不同設備間保持一致。盡管它因為一些缺點而飽受爭議，但因為這極大的好處，它目前仍然被廣泛的使用。關于這個元素的主要詬病是，對于一些對界面不太熟悉的用戶來說，這個比較抽象的設計元素可能會讓他們產生困惑。所以，在決定使用漢堡菜單前，應該調查一下目標用戶的接受程度和他們的需求。
△ 作者：Ernest Asanov
上圖這個概念設計就是用了漢堡按鈕把菜單隱藏了起來，從而實現一個簡潔的頁面布局和視覺效果。
加號按鈕（Plus button）
一般通過這個按鈕，用戶可以實現添加某個內容的動作，比如添加新的聯系人，狀態，筆記，位置等所有用戶在產品里能做的基本動作。有時候，點擊這個按鈕會出現新的窗口。有時候還會出現一些選項供用戶進行選擇添加什么內容，這取決于是什么產品。
△ 作者：Sergey Valiukh
上面這個例子就是用戶在點擊加號按鈕后出現了可以選擇添加的內容（圖片，視頻，文字），在選擇了之后才會彈出添加內容的窗口。盡管這個操作可能增加一些額外的交互動作，但因為給予了用戶選擇空間，所以還是對用戶很友好的一種設計。
分享按鈕（Share Button）
分享按鈕顧名思義就是能讓用戶把內容分享到他們的社交平臺賬號上。大多數情況下，這個按鈕都是用社交平臺的Logo作為視覺形象，這樣非常易于識別和認知。
同樣，這也是一個用戶非常好理解的元素，在界面中用得也非常多。因為它很好地模仿了現實世界里人們熟悉的開關概念。關于這個元素的設計，特別要注意的是開和關的狀態在視覺上要差別非常明顯。這樣能避免用戶花時間去研究怎樣是開怎樣是關。很多種的形式對比或者切換動畫都可以解決這個問題，從而設計出很好的用戶體驗。
△ 來源：Tubikstudio
這個案例是來自一款鬧鐘應用Toonie。動畫效果讓交互變得更流暢和自然，同時整個控件顏色的改變和滑動元素形態的變化讓用戶能夠輕易地識別出開關的狀態。如果你想了解整個App的案例研究，可以到來源查看。
也很好理解，就是讓用戶在一些選項里選出目標選項。通常包含一個可滑動的列表，上面是一列數值，比如小時，分鐘，日期，度量，幣種等等。通過滑動列表，用戶可以選定想要的數值。這個元素廣泛地應用在有時間設定這個功能的界面設計上。
△ 來源：Tubikstudio
復選框是可以用來同時標記多個特定的內容。同樣的，也是借用了我們在現實世界里熟悉的概念。我們在考試的時候，或者填調查問卷的時候會在選項前的小方框里涂上顏色作為選中的標記。和開關一樣，復選框同樣用得很多，主要在設置頁面設計里。不過，復選框還有另外一個用得比較多的地方，那就是含有任務管理，待辦事項，時間記錄等類似功能的App或者網頁。
△ 作者：Tubik
上面這個是一個待辦事項App的概念設計。用戶點擊復選框后，表示這個內容已經完成。字體變粗的同時顏色發生了改變，這樣就非常明顯地把這個已完成的任務和其他未完成的任務區分開來。
界面的導航（Navigation）是用戶體驗設計的核心之一。毫無疑問，如果你看不到路, 你就去不了你的目的地。用戶現在正面對著越來越多的網站和APP產品。越來越多的選擇會讓用戶期望這些產品具備符合他們使用習慣的導航設計。
圖標可以定義為一個象征著某個概念或物體的視覺形象，有著加強與受眾溝通的目的。會和文字結合一起使用，將想要傳達給受眾的信息表現出來。在界面設計中，圖標通常是象形符號或表意文字，對可用性和成功的人機交互有重要意義 。
毫無疑問，圖標的其中一個重要作用是可以有效地替代文字描述。因為比起文字，用戶對圖片的理解速度更快，所以這個特點能極大提升用戶體驗，增強產品的導航和對用戶的引導。但是，需要注意，即使是輕微的歧義或者誤解都會導致糟糕的用戶體驗。所以在設計圖標的時候要做必要的測試，根據目標用戶平衡好文字和圖標的使用。最有效的方式是同時使用圖標和文字，這樣大部分用戶都不會有問題。電商APP或者網站最常使用這樣的形式來給用戶足夠的信息，讓他們能輕松快速地瀏覽。
△ 作者：Tubik
根據圖標的功能，我們可以將它們分為一下幾類：
交互式圖標（interactive icons）
這類圖標具備交互功能。他們是可點擊的，能回應用戶的要求，觸發圖標代表的動作。這種圖標告知用戶按鈕、控件或者其他界面交互元素的功能或者特點。在大多數情況下，這類圖標的意義明確，不需要文字輔助說明。
△ Tab Bar
△ 菜單概念設計
說明性圖標（clarifying icons）
起到說明作用的圖標，設計師用它來表示某一個特點或者內容的種類。它有時候不屬于界面布局的元素或者并不具備直接的交互功能。經常和文字結合使用。
△ 作者：Tubik
△ 作者：Ernest Asanov
娛樂性和裝飾性圖標（entertaining and decorative icons）
這類圖標注重抓人眼球的視覺效果并非功能，通常用在節日或者特別款的場景。他們能有效地吸引用戶的注意力，增強視覺沖擊力。
復活節和春天主題的圖標：
△ 圖片作者：Arthur Avakyan
APP圖標（app icons）
在各個平臺上可交互的品牌標志，展示品牌和產品的形象。最常見的就是我們手機界面上每一個App的圖標，上面通常是品牌和產品的Logo。
△ 作者：Arthur Avakyan
網頁圖標（favicons）
就是我們經常在網址欄或者書簽里看到的URL前面的那個小圖標，也是代表著產品或者品牌的形象。能讓用戶在瀏覽網頁時給他們快速的視覺提示。
搜索區域又常常被稱作搜索框（search box）或者搜索條（search bar），代表著用戶可以在這個區域內輸入想要搜索的內容。它是那些有著很多內容的網站或APP的核心導航元素，像博客，電商，新聞等產品。設計得好的搜索框能讓用戶輕松地找到想要的信息。因為它能幫助用戶省去很多時間和精力，所以它是一個對用戶特別友好的界面元素。
它的設計形式有很多種，可以是標簽的形態，也可以是引導輸入的一條線或者簡單的一個搜索圖標。大多數情況下搜索框的圖標是一個放大鏡的樣式?；旧纤械挠脩舳级眠@個圖標的含義，所以能實現非常直觀的導航設計。想要在這個圖標上做文章的話，要好好測試一下，因為改得不好的話會嚴重影響交互和界面的可用性。搜索框還可以加入提供候選項的下拉菜單或者自動填補內容的功能。
△ 作者：Ernest Asanov
另外需要注意的一點是搜索框控件在界面中的位置。在網頁設計中，搜索框經常出現在網頁的頂部。這是一個很恰當的設計，因為通常網頁的頂部區域具有很高的可見性，用戶打開網頁就看到了，不需要再花時間去找到這個控件。舉個反面例子，如果一個電商網站因為搜索框的設計有問題，導致用戶沒辦法快速方便地找到想買的東西，網站銷售表現會受到極大的影響。因為現在很多網站都將搜索框放在網頁的頂部，所以用戶也養成了在那里找到搜索框的習慣。
至于App界面的話，要視具體情況而定，設計師可能面臨更多的限制。如果是一個有著大量內容的APP，而且搜索是核心功能之一的話，那么一般放在一個顯眼的標簽條（tab bar）上。如果搜索并不是核心功能，那么可以把它藏到菜單里或者只在需要的用到的地方顯示或者時刻顯示出來。
△ 作者：Sergey Valiukh
標簽是一個標有關鍵詞的可交互元素。標簽其實是給用戶提供快速通道的元數據，用戶可以通過它快速導航到與關鍵詞相關的所有內容。除了網頁或者App本身帶有的標簽，在很多情況下用戶也可以自己創建標簽。
△ 作者：Design4users
標簽這個界面元素被廣泛地應用在用戶原創內容平臺（UGC）的界面設計里。當用戶上傳圖片、狀態到社交網絡的時候，可以加上關鍵詞作為標簽。上圖就展示博客網站Design4Users運用了標簽來加強網站的內容導航。通過點擊某個標簽，能切換到帶著這個標簽的所有內容的頁面。標簽是友好的搜索引擎優化（SEO-friendly）技巧，能提高用戶搜索內容的成功率。
△ 作者：Unsplash
再舉一個例子，上圖是圖片素材網站Unsplash的界面。當用戶想要下載圖片時，可以輸入描述圖片的關鍵詞作為標簽。通過這樣的形式幫助用戶有效地找到想要的圖片。我們還可以注意到，輸入框內加入了引導用戶進行操作的說明，這樣更進一步地提高了產品的可用性。設計的細節真的很重要。總而言之，標簽是一種用戶可以自行創造的導航元素，拉近了界面和目標用戶之間的距離。
全面地設計好整個界面的導航不是一件容易的事，需要一些心理學、交互模式、用戶測試的基礎知識，還需要在項目的早期思考清楚網站或者App的信息架構。但是做好這一點的話，能夠讓你的產品很好地幫助用戶解決他們的問題，給優秀的用戶體驗打下堅實的基礎，讓他們對你的產品產生越來越大的粘性。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
手機及小程序界面設計之一：讓設計更有說服力的20條經典原則：菲茨定律
手機及小程序界面設計之六：讓設計更有說服力的20條經典原則：菲茨定律
手機及小程序界面設計之八：如何適配iPhone X？來看滴滴出行的實戰案例復盤！
