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