超細(xì)致解讀UI導(dǎo)航設(shè)計不僅僅指的是導(dǎo)航欄

編者按：其實頁面或者App中的導(dǎo)航（Navigation）這個概念遠(yuǎn)不止我們認(rèn)識的導(dǎo)航欄，而是一個更加廣的交互概念：指導(dǎo)用戶和產(chǎn)品進(jìn)行有用的交互，實現(xiàn)用戶的目標(biāo)。本文將細(xì)致地介紹界面的導(dǎo)航設(shè)計。

一個頁面或App產(chǎn)品要想有很好的可用性（usability），必要做好的最基本的一點是導(dǎo)航的設(shè)計或者說指導(dǎo)用戶的設(shè)計。假如用戶在使用一個網(wǎng)站或者App的時候找不到本身的處在什么位置或者該怎么去到想要的網(wǎng)頁，那么視覺結(jié)果再怎么有創(chuàng)意或者抓人眼球都無法填補產(chǎn)品的缺陷。無論你的產(chǎn)品想知足用戶什么需求，讓用戶知道產(chǎn)品當(dāng)下的狀況和每一步操作之后的效果是對用戶最基本的尊重。

導(dǎo)航

首先，讓我們弄清楚導(dǎo)航這個概念。最基本的含義就是在我們的實際世界中，當(dāng)我們從一個地方到另一個地方，必要一些指導(dǎo)和指示。英文中Navigation這個詞來源于拉丁文，原意就是：操縱船只在海上航行。所以導(dǎo)航就是能夠幫助我們到達(dá)目的地的舉動。導(dǎo)航的其他意思都是建立在這個原意的基礎(chǔ)上。

所以回到UX／UI設(shè)計上，導(dǎo)航毫無疑問是可用性的一個要點。它可以定義為一系列指導(dǎo)用戶成功地與產(chǎn)品互動并且實現(xiàn)他們目標(biāo)的動作組合或者技巧組合。 用戶帶著他們的期望和目標(biāo)來使用你的網(wǎng)站或者產(chǎn)品，作為設(shè)計師的你必要給他們提供實現(xiàn)他們目標(biāo)的最好操作流程。因此當(dāng)你的導(dǎo)航設(shè)計得特別很是高效，用戶體驗?zāi)艿玫綐O大的提拔。

在你剛開始設(shè)計你的界面時，就要思考怎么設(shè)計一個有用的無縫銜接的導(dǎo)航。通過一些可交互的元素，比如按鈕（buttons），開關(guān)（switches），鏈接（links），標(biāo)簽（tabs），條（bas），菜單（menus），區(qū)域（fields），讓用戶在不同的界面之間進(jìn)行切換。

我們工作室的設(shè)計思路是，在界面設(shè)計的早期就周全地思考導(dǎo)航的設(shè)計，包括界面的布局，網(wǎng)頁間如何切換，導(dǎo)航元素的放置和詳細(xì)功能。并且通過低保真原型來進(jìn)行驗證，保證用戶能清楚地理解所有緊張的操作。假如跳過這一步，設(shè)計將有偉大的風(fēng)險，其他事情有可能到頭來都白干了。所以無論，對用戶照舊客戶照舊設(shè)計團隊來講，做好這最基礎(chǔ)的部分是特別很是有益處的。

菜單（Menu）

菜單是我們最認(rèn)識的具備導(dǎo)航功能的元素，它向用戶展示了界面的所有緊張選項?；旧?，它可以是用動詞命名的一系列指令，用戶可以用它來指示體系做出動作，像保存，刪除等；它也可以是一個用名詞命名的目錄，用來代表不同內(nèi)容的薈萃。

在界面設(shè)計中菜單可以放在不同的位置（側(cè)邊菜單，頂部菜單，底部菜單等），擁有不同的交互和視覺情勢（下拉菜單，上拉菜單，滑動菜單等）。要想設(shè)計好菜單的位置、交互和視覺情勢，設(shè)計師必要經(jīng)過周全的用戶調(diào)查，包括目標(biāo)用戶的預(yù)期和要求、接受能力和使用情境。好的菜單設(shè)計能讓用戶更快地實現(xiàn)他們的目標(biāo)，為用戶體驗打下堅實的基礎(chǔ)。

△ 作者：Tubik

這是一個博客APP的界面設(shè)計，采用了側(cè)邊菜單以及目錄的情勢，筆墨直接說明內(nèi)容，再加上圖標(biāo)來做為輔助的視覺說明。

△ 作者：Ludmila Shevchenko

這個UI概念設(shè)計的例子很好的運用了顏色作為標(biāo)記，這是一種很有用的導(dǎo)航技巧：每個分類的背景色使用了和目錄雷同的的顏色，如許目錄和內(nèi)容有著特別很是強的相干性，用戶能天然地將他們聯(lián)系起來。

舉動召喚（CTA）

CTA是用戶舉動召喚的簡稱（call to action）。CTA簡單來說就是指設(shè)計師通過設(shè)計，刺激用戶去做出一些舉措。響應(yīng)的，CTA元素就是指那些能刺激用戶做出舉措的交互元素。典型的CTA元素是按鈕，標(biāo)簽或者鏈接。

不管在什么界面，CTA元素都是高效的交互舉動的核心，極大的關(guān)系到產(chǎn)品的可用性和導(dǎo)航有用性。假如CTA元素的設(shè)計不到位的話，用戶會產(chǎn)生疑心并且得費勁地去嘗試。產(chǎn)品的轉(zhuǎn)化率和用戶體驗都會大打扣頭。這就是為什么CTA元素分外值得細(xì)致。無論什么樣的界面，它都必須是最矚目的元素之一，用來直接地告訴用戶怎么用這個產(chǎn)品。

△ 作者：Eugene Cameel

一些CTA元素直接用圖標(biāo)情勢而沒有任何筆墨說明，但只適用于大家都熟知其含義的圖標(biāo)，比如聽筒圖標(biāo)和信封圖標(biāo)。上圖這個例子中，這個聽筒圖標(biāo)就是這個界面中一個焦點，是一個典型的CTA元素，指導(dǎo)用戶快速地實現(xiàn)他們的目標(biāo)。不必要任何筆墨說明，用戶也能懂點擊這個圖標(biāo)的效果。

但是，假如一個圖標(biāo)的含義不是那么顯明或者可能造成誤解，最好照舊加上筆墨說明。

△ 作者：Tania Bashkatova

上面這個例子是一個關(guān)于制作海鮮的網(wǎng)站的著陸頁（Landing page）。網(wǎng)頁的題目let’s cook還有食材照片是一個CTA，但不是一個可交互的CTA。可交互的CTA是下面這個紅色按鈕，用戶點擊這個按鈕能看到更多關(guān)于不同主題和菜譜的信息。 抓人眼球的顏色強調(diào)了網(wǎng)頁的視覺層級關(guān)系，把用戶的細(xì)致力拉到關(guān)鍵的交互區(qū)域中。

條（Bar）

條（Bar）指的是界面中一組用戶可以點擊的元素，用來快速與產(chǎn)品進(jìn)行互動，或者還能讓用戶知道事件的進(jìn)程。

標(biāo)簽條（Bar）

最基本的條是標(biāo)簽條（Tab bars），常出如今APP界面的底部，讓用戶能在APP的不同模塊間快速切換。

△ 作者：Sergey Valiukh

載入條（Loading bar）

載入條是用來告知某個動作的進(jìn)展，用戶可以通過時間、百分比或者其他信息了解整個過程。

△ 作者：Sergey Valiukh

進(jìn)度條（Progress bar）

給用戶提供反饋，讓他們了解事件的進(jìn)度，比如說計劃的事情完成了多少。

△ 作者：Valentyn Khenkin

按鈕（Button）

按鈕應(yīng)該是用得最多的元素了。按鈕能讓用戶在對體系發(fā)出指令后得到恰當(dāng)?shù)姆答?。用戶通過按鈕對體系下飭令，跟體系進(jìn)行交互從而實現(xiàn)他們某個目標(biāo)，比如發(fā)送郵件，買一個東西，下載文件，播放音樂等等如許的指令。按鈕之所以那么的常用和對用戶那么友愛，是由于按鈕很好地模擬了人和真實世界里跟物品的交互。

現(xiàn)現(xiàn)在的UI按鈕有不計其數(shù)的設(shè)計樣式，能知足許多的設(shè)計需求。按鈕典型的用途是注解這個地方是可點擊，因此必要具有特別很是高的視覺識別，有著特定的外形還有筆墨說明它能實現(xiàn)什么動作。設(shè)計師通常必要花不少時間好好考慮怎么讓按鈕很好地融合界面的風(fēng)格，同時又能在視覺上跳脫出來。

△ 作者：Ernest Asanov

以下是在APP和頁面設(shè)計中常用的幾種具備附加功能的按鈕。

漢堡按鈕

漢堡按鈕隱蔽著一個菜單。當(dāng)用戶點擊他們的時候，能把菜單調(diào)出來。有這個名字是由于它是由三條水平線組成的，看起來就像是漢堡的情勢。它是一個典型的交互元素，也是頗具爭議的元素。

大多數(shù)用戶知道點擊這個按鈕能睜開一個菜單，所以不必要額外的說明。漢堡菜單極大地節(jié)省了界面的空間，能讓界面看起來更簡潔，也為其他緊張的界面元素騰出了需要的空間。它同時特別很是適合相應(yīng)式設(shè)計，通過隱蔽菜單讓整個設(shè)計更同一，界面能在不同設(shè)備間保持同等。盡管它由于一些瑕玷而飽受爭議，但由于這極大的益處，它目前仍然被廣泛的使用。關(guān)于這個元素的重要詬病是，對于一些對界面不太認(rèn)識的用戶來說，這個比較抽象的設(shè)計元素可能會讓他們產(chǎn)生疑心。所以，在決定使用漢堡菜單前，應(yīng)該調(diào)查一下目標(biāo)用戶的接受程度和他們的需求。

△ 作者：Ernest Asanov

上圖這個概念設(shè)計就是用了漢堡按鈕把菜單隱蔽了起來，從而實現(xiàn)一個簡潔的網(wǎng)頁布局和視覺結(jié)果。

加號按鈕（Plus button）

一樣平常通過這個按鈕，用戶可以實現(xiàn)添加某個內(nèi)容的動作，比如添加新的聯(lián)系人，狀況，筆記，位置等所有效戶在產(chǎn)品里能做的基本動作。偶然候，點擊這個按鈕會出現(xiàn)新的窗口。偶然候還會出現(xiàn)一些選項供用戶進(jìn)行選擇添加什么內(nèi)容，這取決于是什么產(chǎn)品。

△ 作者：Sergey Valiukh

上面這個例子就是用戶在點擊加號按鈕后出現(xiàn)了可以選擇添加的內(nèi)容（圖片，視頻，筆墨），在選擇了之后才會彈出添加內(nèi)容的窗口。盡管這個操作可能增長一些額外的交互動作，但由于給予了用戶選擇空間，所以照舊對用戶很友愛的一種設(shè)計。

分享按鈕（Share Button）

分享按鈕顧名思義就是能讓用戶把內(nèi)容分享到他們的社交平臺賬號上。大多數(shù)情況下，這個按鈕都是用社交平臺的Logo作為視覺形象，如許特別很是易于識別和認(rèn)知。

開關(guān)（Switch）

同樣，這也是一個用戶特別很是好理解的元素，在界面中用得也特別很是多。由于它很好地模擬了實際世界里人們認(rèn)識的開關(guān)概念。關(guān)于這個元素的設(shè)計，分外要細(xì)致的是開和關(guān)的狀況在視覺上要差別特別很是顯明。如許能避免用戶花時間去研究怎樣是開怎樣是關(guān)。許多種的情勢對比或者切換動畫都可以解決這個題目，從而設(shè)計出很好的用戶體驗。

△ 來源：Tubikstudio

這個案例是來自一款鬧鐘應(yīng)用Toonie。動畫結(jié)果讓交互變得更流暢和天然，同時整個控件顏色的改變和滑動元素形態(tài)的轉(zhuǎn)變讓用戶能夠輕易地識別出開關(guān)的狀況。假如你想了解整個App的案例研究，可以到來源查看。

選擇器（Picker）

也很好理解，就是讓用戶在一些選項里選出目標(biāo)選項。通常包含一個可滑動的列表，上面是一列數(shù)值，比如小時，分鐘，日期，度量，幣種等等。通過滑動列表，用戶可以選定想要的數(shù)值。這個元素廣泛地應(yīng)用在偶然間設(shè)定這個功能的界面設(shè)計上。

△ 來源：Tubikstudio

復(fù)選框（Checkbox）

復(fù)選框是可以用來同時標(biāo)記多個特定的內(nèi)容。同樣的，也是借用了我們在實際世界里認(rèn)識的概念。我們在考試的時候，或者填調(diào)查問卷的時候會在選項前的小方框里涂上顏色作為選中的標(biāo)記。和開關(guān)一樣，復(fù)選框同樣用得許多，重要在設(shè)置網(wǎng)頁設(shè)計里。不過，復(fù)選框還有另外一個用得比較多的地方，那就是含有義務(wù)管理，待辦事項，時間記錄等類似功能的App或者頁面。

△ 作者：Tubik

上面這個是一個待辦事項App的概念設(shè)計。用戶點擊復(fù)選框后，透露表現(xiàn)這個內(nèi)容已經(jīng)完成。字體變粗的同時顏色發(fā)生了改變，如許就特別很是顯明地把這個已完成的義務(wù)和其他未完成的義務(wù)區(qū)分開來。

界面的導(dǎo)航（Navigation）是用戶體驗設(shè)計的核心之一。毫無疑問，假如你看不到路, 你就去不了你的目的地。用戶如今正面對著越來越多的網(wǎng)站和APP產(chǎn)品。越來越多的選擇會讓用戶期望這些產(chǎn)品具備吻合他們使用風(fēng)俗的導(dǎo)航設(shè)計。

圖標(biāo)（Icons）

圖標(biāo)可以定義為一個象征著某個概念或物體的視覺形象，有著增強與受眾溝通的目的。會和筆墨結(jié)合一路使用，將想要傳達(dá)給受眾的信息體現(xiàn)出來。在界面設(shè)計中，圖標(biāo)通常是象形符號或表意筆墨，對可用性和成功的人機交互有緊張意義 。

毫無疑問，圖標(biāo)的其中一個緊張作用是可以有用地替換筆墨描述。由于比起筆墨，用戶對圖片的理解速度更快，所以這個特點能極大提拔用戶體驗，加強產(chǎn)品的導(dǎo)航和對用戶的指導(dǎo)。但是，必要細(xì)致，即使是輕微的歧義或者誤解都會導(dǎo)致糟糕的用戶體驗。所以在設(shè)計圖標(biāo)的時候要做需要的測試，根據(jù)目標(biāo)用戶平衡好筆墨和圖標(biāo)的使用。最有用的體例是同時使用圖標(biāo)和筆墨，如許大部分用戶都不會有題目。電商APP或者網(wǎng)站最常使用如許的情勢來給用戶充足的信息，讓他們能輕松快速地欣賞。

△ 作者：Tubik

根據(jù)圖標(biāo)的功能，我們可以將它們分為一下幾類：

交互式圖標(biāo)（interactive icons）

這類圖標(biāo)具備交互功能。他們是可點擊的，能回應(yīng)用戶的要求，觸發(fā)圖標(biāo)代表的動作。這種圖標(biāo)告知用戶按鈕、控件或者其他界面交互元素的功能或者特點。在大多數(shù)情況下，這類圖標(biāo)的意義明確，不必要筆墨輔助說明。

△ Tab Bar

△ 菜單概念設(shè)計

說明性圖標(biāo)（clarifying icons）

起到說明作用的圖標(biāo)，設(shè)計師用它來透露表現(xiàn)某一個特點或者內(nèi)容的種類。它偶然候不屬于界面布局的元素或者并不具備直接的交互功能。經(jīng)常和筆墨結(jié)合使用。

△ 作者：Tubik

△ 作者：Ernest Asanov

娛樂性和裝飾性圖標(biāo)（entertaining and decorative icons）

這類圖標(biāo)看重抓人眼球的視覺結(jié)果并非功能，通常用在節(jié)日或者分外款的場景。他們能有用地吸引用戶的細(xì)致力，加強視覺沖擊力。

新生節(jié)和春上帝題的圖標(biāo)：

△ 圖片作者：Arthur Avakyan

APP圖標(biāo)（app icons）

在各個平臺上可交互的品牌標(biāo)志，展示品牌和產(chǎn)品的形象。最常見的就是我們手機界面上每一個App的圖標(biāo)，上面通常是品牌和產(chǎn)品的Logo。

△ 作者：Arthur Avakyan

頁面圖標(biāo)（favicons）

就是我們經(jīng)常在網(wǎng)址欄或者書簽里看到的URL前面的那個小圖標(biāo)，也是代表著產(chǎn)品或者品牌的形象。能讓用戶在欣賞頁面時給他們快速的視覺提醒。

搜索區(qū)域（Search Field）

搜索區(qū)域又常常被稱作搜索框（search box）或者搜索條（search bar），代表著用戶可以在這個區(qū)域內(nèi)輸入想要搜索的內(nèi)容。它是那些有著許多內(nèi)容的網(wǎng)站或APP的核心導(dǎo)航元素，像博客，電商，消息等產(chǎn)品。設(shè)計得好的搜索框能讓用戶輕松地找到想要的信息。由于它能幫助用戶省去許多時間和精力，所以它是一個對用戶分外友愛的界面元素。

它的設(shè)計情勢有許多種，可以是標(biāo)簽的形態(tài)，也可以是指導(dǎo)輸入的一條線或者簡單的一個搜索圖標(biāo)。大多數(shù)情況下搜索框的圖標(biāo)是一個放大鏡的樣式。基本上所有的用戶都懂得這個圖標(biāo)的含義，所以能實現(xiàn)特別很是直觀的導(dǎo)航設(shè)計。想要在這個圖標(biāo)上做文章的話，要好好測試一下，由于改得不好的話會緊張影響交互和界面的可用性。搜索框還可以加入提供候選項的下拉菜單或者主動彌補內(nèi)容的功能。

△ 作者：Ernest Asanov

另外必要細(xì)致的一點是搜索框控件在界面中的位置。在頁面設(shè)計中，搜索框經(jīng)常出如今頁面的頂部。這是一個很恰當(dāng)?shù)脑O(shè)計，由于通常頁面的頂部區(qū)域具有很高的可見性，用戶打開頁面就看到了，不必要再花時間去找到這個控件。舉個反面例子，假如一個電商網(wǎng)站由于搜索框的設(shè)計有題目，導(dǎo)致用戶沒辦法快速方便地找到想買的東西，網(wǎng)站販賣體現(xiàn)會受到極大的影響。由于如今許多網(wǎng)站都將搜索框放在頁面的頂部，所以用戶也養(yǎng)成了在那里找到搜索框的風(fēng)俗。

至于App界面的話，要視詳細(xì)情況而定，設(shè)計師可能面臨更多的限定。假如是一個有著大量內(nèi)容的APP，而且搜索是核心功能之一的話，那么一樣平常放在一個顯眼的標(biāo)簽條（tab bar）上。假如搜索并不是核心功能，那么可以把它藏到菜單里或者只在必要的用到的地方表現(xiàn)或者時刻表現(xiàn)出來。

△ 作者：Sergey Valiukh

標(biāo)簽（Tag）

標(biāo)簽是一個標(biāo)有關(guān)鍵詞的可交互元素。標(biāo)簽其實是給用戶提供快速通道的元數(shù)據(jù)，用戶可以通過它快速導(dǎo)航到與關(guān)鍵詞相干的所有內(nèi)容。除了頁面或者App自己帶有的標(biāo)簽，在許多情況下用戶也可以本身創(chuàng)建標(biāo)簽。

△ 作者：Design4users

標(biāo)簽這個界面元素被廣泛地應(yīng)用在用戶原創(chuàng)內(nèi)容平臺（UGC）的界面設(shè)計里。當(dāng)用戶上傳圖片、狀況到社交網(wǎng)絡(luò)的時候，可以加上關(guān)鍵詞作為標(biāo)簽。上圖就展示博客網(wǎng)站Design4Users運用了標(biāo)簽來增強網(wǎng)站的內(nèi)容導(dǎo)航。通過點擊某個標(biāo)簽，能切換到帶著這個標(biāo)簽的所有內(nèi)容的網(wǎng)頁。標(biāo)簽是友愛的搜索引擎優(yōu)化（SEO-friendly）技巧，能進(jìn)步用戶搜索內(nèi)容的成功率。

△ 作者：Unsplash

再舉一個例子，上圖是圖片素材網(wǎng)站Unsplash的界面。當(dāng)用戶想要下載圖片時，可以輸入描述圖片的關(guān)鍵詞作為標(biāo)簽。通過如許的情勢幫助用戶有用地找到想要的圖片。我們還可以細(xì)致到，輸入框內(nèi)加入了指導(dǎo)用戶進(jìn)行操作的說明，如許更進(jìn)一步地進(jìn)步了產(chǎn)品的可用性。設(shè)計的細(xì)節(jié)真的很緊張?？偠灾?，標(biāo)簽是一種用戶可以自行創(chuàng)造的導(dǎo)航元素，拉近了界面和目標(biāo)用戶之間的距離。

周全地設(shè)計好整個界面的導(dǎo)航不是一件容易的事，必要一些生理學(xué)、交互模式、用戶測試的基礎(chǔ)知識，還必要在項目的早期思考清楚網(wǎng)站或者App的信息架構(gòu)。但是做好這一點的話，能夠讓你的產(chǎn)品很好地幫助用戶解決他們的題目，給良好的用戶體驗打下堅實的基礎(chǔ)，讓他們對你的產(chǎn)品產(chǎn)生越來越大的粘性。

原文地址：uxplanet
原文作者：Tubik Studio