起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識導航設(shè)計：4個要點教你設(shè)計更好的導航
相比于直接搜索，用戶更喜歡用導航，因為導航是讓用戶做選擇題，而搜索是填空題。那本文主要談談導航設(shè)計，看怎樣的導航設(shè)計更能讓用戶喜歡。
McGovern(the founder and CEO of Customer Carewords)說相比于直接搜索，用戶更喜歡用導航，因為導航是讓用戶做選擇題，而搜索是填空題（導航文案是現(xiàn)有的信息，不需要經(jīng)過用戶大腦的額外加工去進行搜索)。并且他解釋道：如果鏈接的文案與用戶尋找的內(nèi)容相符，那他們直接點擊鏈接的可能性更大。
盡管導航設(shè)計一直是一個有爭議的話題，仍然有一些比較好的應用規(guī)則，是作為用戶體驗設(shè)計師的我們，在進行網(wǎng)站導航設(shè)計時值得注意的：
- 保持(導航結(jié)構(gòu)的)連貫性和一致性；
- 設(shè)計清晰易懂的交互方式；
- 設(shè)計扁平的導航結(jié)構(gòu)；
- 考慮響應式設(shè)備的兼容性。
一、保持（導航結(jié)構(gòu)）的連貫性和一致性
1-1 子頁面與落地頁
連貫性的產(chǎn)生也需要經(jīng)過內(nèi)容的篩選，不是所有的導航項目都需要展示其子頁面鏈接，亦或者全都不展示；而是要展示那些會讓用戶誤以為不展示其子頁面鏈接，就沒有更多內(nèi)容的導航項目。
如果子頁面鏈接沒有在一級導航結(jié)構(gòu)中展示，那么就要確保其在各個板塊的次級導航結(jié)構(gòu)中的使用始終保持一致（不要在這個版塊是一級導航結(jié)構(gòu)中展示，而到了另一個版塊卻是在二級導航結(jié)構(gòu)中展示）。
同樣，所有的一級導航項目要么都是跳轉(zhuǎn)到落地頁的鏈接，要么都是作為二級導航鏈接的標題。如果一部分是跳轉(zhuǎn)到落地頁，另一部分則是二級導航鏈接的標題，那么用戶就會在點擊時產(chǎn)生疑惑。
在視覺設(shè)計上，同樣應該比較明顯的示意處，一級導航項目到底是跳轉(zhuǎn)到落地頁的鏈接？還是二級導航機構(gòu)的標題、字體的顏色和樣式，鼠標指針的變化？
此外，如果一級導航項目是一個鏈接，那么就要清楚地示意相關(guān)操作，或者通過文案措辭或者通過視覺設(shè)計。
在Fairfax County Public School’s 官網(wǎng)的Full menu欄下，用戶可以通過點擊“Career”文案來鏈接到“Career”落地頁，或者點擊向右的箭頭來展開查看次級導航項目的標題。
這與前面講的導航機構(gòu)的一致性也是相符的：一級導航項目要么都調(diào)到次級落地頁；要么都作為二級導航項目的標題入口。如果兩者都有，那么就在樣式上作區(qū)分。
如果新添加的內(nèi)容不能很好地匹配當前網(wǎng)站的各個板塊，那么是時候重新思考一下網(wǎng)站的層級結(jié)構(gòu)了，或者重新審視一下——既然這個部分的內(nèi)容與網(wǎng)站的其他內(nèi)容不相符，那為什么還要存在？是不是可以被刪掉或者將它合并到一個內(nèi)容相關(guān)的頁面？
如果有些頁面需要被更加便捷地觸達，那么可以考慮在首頁試用一種響應時出現(xiàn)的功能模塊或者一個模塊的落地頁(浮層？)。用戶其實更愿意去關(guān)注這些模塊，對用戶來說很重要并且特征顯著的模塊并不會干擾到整個網(wǎng)站的導航結(jié)構(gòu)。
1-2 面包屑導航結(jié)構(gòu)
面包屑導航可以很好地引導用戶，這種引導對那些從外部鏈接跳轉(zhuǎn)進深層級頁面的用戶尤其重要。
但是面包屑導航，需要非常精確才能起到效果，不能丟失任何層級或者引導至錯誤層級的頁面。對于一些只有兩種層級結(jié)構(gòu)的小網(wǎng)站，使用面包屑導航就沒有必要了，如果一定要使用那么就要保持層級的連貫性和一致性，可以去UI-Patterns 這個網(wǎng)站學習更多關(guān)于面包屑導航的實際運用案例。
二、設(shè)計清晰易懂的交互方式
2-1 功能的可視化
視覺元素的變化，可以幫助用戶搞清楚網(wǎng)站有哪些可能的交互形式。例如：把關(guān)閉狀態(tài)的按鈕滑至開啟意味著某個設(shè)置改變了，并且知道如何反置。當icon沒有改變，那么用戶可能就無法預知操作結(jié)果。
在上圖所示網(wǎng)頁中，注意看箭頭方向的切換是基于對導航菜單的展開或者收起操作。
IOS的功能開關(guān)也是一個很好的案例
2-2 使用帶有icon的標簽
有時候icon可以替代文字鏈，包括帶有icon標簽的使用可以減少理解成本。例如：相比于(單獨)使用有爭議的漢堡包式的icon，在其旁邊放一個“Menu”標簽會很好的解決這個潛在的可用性問題。
這種方式對于其他常用的icon同樣適用，比如：“Contact”、“Log in”。
2-3 根據(jù)功能差異化icon
將icon差異化，把那些有鏈接的icon和只是純信息或者用作分類的icon做差異化。
根據(jù)NNG study的研究：用當戶在網(wǎng)頁檢索信息時，相比于只有文案，通過顏色和icon的差異化設(shè)計的視覺指引能讓用戶快37%。將icon的顏色做區(qū)分處理，而不僅僅只是設(shè)計成不同的樣式，可以讓用戶更容易感知到這些icon有著不同的作用。
例如：twitter上那些不能交互的icon，被設(shè)計成灰色方形內(nèi)配合白色(描邊)icon。例如：“l(fā)iked”（已經(jīng)贊過的點贊按鈕）和“followed you”(已經(jīng)關(guān)注的關(guān)注按鈕)。
那些用戶可以進行交互的icon則被設(shè)計成灰色，并且當用戶hover的時候進行顏色切換并展示一個解釋性的信息。
三、設(shè)計扁平的導航結(jié)構(gòu)
為了設(shè)計一個很好的導航結(jié)構(gòu)，好的網(wǎng)站信息架構(gòu)和層級才是關(guān)鍵。當網(wǎng)站的信息層級結(jié)構(gòu)圖已經(jīng)出來時，此時就要盡力去設(shè)計一個扁平的導航結(jié)構(gòu)，這種扁平的結(jié)構(gòu)要能讓用戶只需要點擊一兩次就可以去到最底層的頁面。
盡管扁平的導航結(jié)構(gòu)固然是最理想的，但是僅僅因為短時記憶的局限，而把菜單設(shè)計得很簡短也是錯的。
就像Nielsen Norman Group 說的：
菜單的意義是讓用戶辨識導航欄項目，而不是讓用戶去回憶(導航欄項目)。
所以菜單必須設(shè)計的簡短以方便用戶瀏覽，但是信息必須表達明確。(菜單欄必須設(shè)計得簡潔明了，表意準確)
3-1 限制導航層級
導航結(jié)構(gòu)的層級數(shù)最終是由網(wǎng)站的信息層級所決定，理想狀態(tài)下，用戶需要點擊的導航層級越少，那么用戶到達他們的目標頁面也就越快越清晰。
我們再次引用Nielsen Norman Group說的：
信息層級越深，則用戶越容易被誤導
?扁平的導航層級結(jié)構(gòu)
深層級的導航結(jié)構(gòu)
通常，絕大部分網(wǎng)站都是三到四個信息層級，這樣網(wǎng)站的頁面比較容易被觸達，不過這樣做需要確保網(wǎng)站的導航結(jié)構(gòu)不至于太過寬泛。
要想弄清到底幾個信息層級是合適的，試著把現(xiàn)有的信息層級結(jié)構(gòu)劃分成互不相關(guān)的獨立部分。然后審視一下各個子頁面的分組，看看他們是否可以被升至更高一個層級。
這時候需要注意：
- 更新一下當前信息版塊下的標簽；
- 建立一個完全新的信息版塊，去容納那些原本屬于交叉版塊的子頁面；
- 重新調(diào)整各個信息版塊之間的關(guān)系 ，也許他們應該依照操作行為來被分組而不是主題。
合并內(nèi)容或者刪掉內(nèi)容也是同樣可行的，把扁平化的導航設(shè)計做到極致，當前正成為全頁面導航設(shè)計的潮流這種做法，就是沒有子頁面并且只有一個信息層級。
3-2 為每一層級設(shè)計獨特的視覺(或者說差異化每一層及的視覺感受)
用戶應該能夠快速瀏覽導航信息，并且知道那些鏈接分別是哪個層級的導航項目，這些鏈接的擺放和分組都應該建立在這種層級基礎(chǔ)上。
像字體樣式、字體大小、字體權(quán)重或者顏色這些視覺設(shè)計，都應該建立在導航層級之上，并且應該始終保持一致。如果使用一個次級導航，那么它與其父/子或者同級導航鏈接的設(shè)計，也同樣應該區(qū)分開來并且與主導航保持一致。
Antro網(wǎng)站導航菜單的一級導航文案與二級導航文案在字體、字號、顏色一級hover狀態(tài)上都有區(qū)分
3-3 使用位置指引
就像面包屑導航結(jié)構(gòu)，導航欄上的當前位置釋義能幫助用戶找到自己當前的位置，尤其是如果他們處在一個層級比較深的頁面，這種清晰的視覺指引可以幫助用戶明白他們在哪個頁面。
Audubon會高亮當前位置的導航菜單
四、考慮響應式設(shè)備的兼容性
一個好的導航結(jié)構(gòu)可以很好的適應手機和平板電腦，設(shè)計導航結(jié)構(gòu)時應該考慮到多端通用，或者考慮使用兩種相似的導航結(jié)構(gòu)，這種結(jié)構(gòu)不會讓用戶去切換思維模式去適應移動端和PC端的不同。
4-1 移動端沒有hover態(tài)
用戶在PC端hover主導航項目時狀態(tài)顯示次級導航的內(nèi)容鏈接，然而移動端沒有hover狀態(tài)，這就會使得移動端和PC端不能保持一致。用戶在使用移動設(shè)備時，不會像在PC上本能地hover菜單來找他們想要的內(nèi)容。
如果非得要把兩種交互形式用在一個內(nèi)容鏈接上，可以考慮設(shè)計兩個不同的點擊位置(產(chǎn)生不同的點擊效果)，就像之前看過的Fairfax County Public Schools 的案例——點擊主導航標題文案本身可以跳轉(zhuǎn)到一個頁面，然后點擊標題文案旁邊的加號，可以展開這一部分主導航的內(nèi)容。
4-2 為移動端設(shè)計不同于PC的導航形式
例如：日本的時代周刊在PC端的導航結(jié)構(gòu)設(shè)計，用的是寬屏而且是橫向分布排列的導航條。而在移動端同樣的導航內(nèi)容用的是漢堡包式導航設(shè)計，并且它在展開時利用的是手機長條的縱向空間這種特點。
當點擊一級導航標題時，二級導航標題會在其下方展開，而不是將導航區(qū)域分割成一級、二級導航兩條縱列。
這種設(shè)計并不是機械的把PC端的導航形式照搬到移動端，可以注意到移動端藍色線條，是更加挨著次級導航標題而不是主導航，這實際上更符合移動端上的設(shè)計。
誠然，優(yōu)化不同端的導航設(shè)計時仍然需要有一致性的。
說明：喜歡翻譯國外交互設(shè)計體驗設(shè)計網(wǎng)站優(yōu)秀文章案例，僅供互相學習探討，翻譯有版權(quán)，如有錯誤，請多指正~
拓展閱讀：
Nielsen Norman Group’s section on navigation
User Testing Blog’s set of 37 Menu Usability Resources
UX Pin’s article Website Navigation Trends: 16 UI Patterns Totally Deconstructed
Designing for Mobile, Part 1: Information Architecture
The Difference Between Information Architecture and UX Design
原文作者：Stephanie Lin
原文地址鏈接：The Rules for Modern Navigation | UX Booth
本文由 @?vanhelsinglhj 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
- 目前還沒評論，等你發(fā)揮！
