淺談導航設計

08-13

淺談導航設計

來自專欄交互設計師的自我成長9 人贊了文章

說明：喜歡翻譯國外交互設計體驗設計網站優秀文章案例，僅供互相學習探討，翻譯有版權，如有錯誤，請多指正~

原文作者：Stephanie Lin

原文地址鏈接：The Rules for Modern Navigation | UX Booth

前言

McGovern(the founder and CEO of Customer Carewords)說相比於直接搜索用戶更喜歡用導航因為導航是讓用戶做選擇題而搜索是填空題(導航文案是現有的信息，不需要經過用戶大腦的額外加工去進行搜索)。並且他解釋道如果鏈接的文案與用戶尋找的內容相符，那他們直接點擊鏈接的可能性更大。

儘管導航設計一直是一個有爭議的話題，仍然有一些比較好的應用規則是作為用戶體驗設計師的我們在進行網站導航設計時值得注意的：

?保持(導航結構的)連貫性和一致性

?設計清晰易懂的交互方式

?設計扁平的導航結構

?考慮響應式設備的兼容性

一.保持(導航結構的)連貫性和一致性

1-1.子頁面與落地頁

連貫性的產生也需要經過內容的篩選，不是所有的導航項目都需要展示其子頁面鏈接，亦或者全都不展示；而是要展示那些會讓用戶誤以為不展示其子頁面鏈接就沒有更多內容的導航項目。如果子頁面鏈接沒有在一級導航結構中展示，那麼就要確保其在各個板塊的次級導航結構中的使用始終保持一致(不要在這個版塊是一級導航結構中展示，而到了另一個版塊卻是在二級導航結構中展示)。

同樣，所有的一級導航項目要麼都是跳轉到落地頁的鏈接，要麼都是作為二級導航鏈接的標題。如果一部分是跳轉到落地頁，另一部分則是二級導航鏈接的標題，那麼用戶就會在點擊時產生疑惑。

在視覺設計上同樣應該比較明顯的示意處一級導航項目到底是跳轉到落地頁的鏈接還是二級導航機構的標題— 字體的顏色和樣式，滑鼠指針的變化。

此外，如果一級導航項目是一個鏈接，那麼就要清楚地示意相關操作，或者通過文案措辭或者通過視覺設計。在Fairfax County Public School』s 官網的Full menu欄下，用戶可以通過點擊「Career」文案來鏈接到「Career」落地頁，或者點擊向右的箭頭來展開查看次級導航項目的標題。這與前面講的導航機構的一致性也是相符的：一級導航項目要麼都調到次級落地頁，要麼都作為二級導航項目的標題入口，如果兩者都有那麼就在樣式上作區分。

如果新添加的內容不能很好地匹配當前網站的各個板塊，那麼是時候重新思考一下網站的層級結構了，或者重新審視一下既然這個部分的內容與網站的其他內容不相符那為什麼還要存在— 是不是可以被刪掉或者將它合併到一個內容相關的頁面。

如果有些頁面需要被更加便捷地觸達，那麼可以考慮在首頁試用一種響應時出現的功能模塊或者一個模塊的落地頁(浮層？)。用戶其實更願意去關注這些模塊 — 對用戶來說很重要並且特徵顯著的模塊並不會干擾到整個網站的導航結構。

1-2.麵包屑導航結構

麵包屑導航可以很好地引導用戶，這種引導對那些從外部鏈接跳轉進深層級頁面的用戶尤其重要。

但是麵包屑導航需要非常精確才能起到效果 — 不能丟失任何層級或者引導至錯誤層級的頁面。對於一些只有兩種層級結構的小網站，使用麵包屑導航就沒有必要了，如果一定要使用那麼就要保持層級的連貫性和一致性，可以去UI-Patterns 這個網站學習更多關於麵包屑導航的實際運用案例。

二.設計清晰易懂的交互方式

2-1.功能的可視化

視覺元素的變化可以幫助用戶搞清楚網站有哪些可能的交互形式。例如，把關閉狀態的按鈕滑至開啟意味著某個設置改變了，並且知道如何反置。當icon沒有改變，那麼用戶可能就無法預知操作結果。

在上圖所示網頁中，注意看箭頭方向的切換是基於對導航菜單的展開或者收起操作

IOS的功能開關也是一個很好的案例

2-2.使用帶有icon的標籤

有時候icon可以替代文字鏈，包括帶有icon標籤的使用可以減少理解成本。例如，相比於(單獨)使用有爭議的漢堡包式的icon，在其旁邊放一個「Menu」標籤會很好的解決這個潛在的可用性問題。這種方式對於其他常用的icon同樣適用，比如「Contact」「Log in」。

2-3.根據功能差異化icon

將icon差異化 —把那些有鏈接的icon和只是純信息或者用作分類的icon做差異化。

根據NNG study的研究 — 用當戶在網頁檢索信息時，相比於只有文案，通過顏色和icon的差異化設計的視覺指引能讓用戶快37%。將icon的顏色做區分處理，而不僅僅只是設計成不同的樣式可以讓用戶更容易感知到這些icon有著不同的作用。例如，twitter上那些不能交互的icon被設計成灰色方形內配合白色(描邊)icon，例如「liked」(已經贊過的點贊按鈕)和「followed you」(已經關注的關注按鈕)。那些用戶可以進行交互的icon則被設計成灰色，並且當用戶hover的時候進行顏色切換並展示一個解釋性的信息。

三.設計扁平的導航結構

為了設計一個很好的導航結構，好的網站信息架構和層級才是關鍵。當網站的信息層級結構圖已經出來時，此時就要儘力去設計一個扁平的導航結構，這種扁平的結構要能讓用戶只需要點擊一兩次就可以去到最底層的頁面。

儘管扁平的導航結構固然是最理想的，但是僅僅因為短時記憶的局限而把菜單設計得很簡短也是錯的。就像Nielsen Norman Group 說的，菜單的意義是讓用戶辨識導航欄項目而不是讓用戶去回憶(導航欄項目)，所以菜單必須設計的簡短以方便用戶瀏覽但是信息必須表達明確。(菜單欄必須設計得簡潔明了，表意準確)

3-1.限制導航層級

導航結構的層級數最終是由網站的信息層級所決定，理想狀態下，用戶需要點擊的導航層級越少，那麼用戶到達他們的目標頁面也就越快越清晰。我們再次引用Nielsen Norman Group說的「信息層級越深，則用戶越容易被誤導」。

扁平的導航層級結構

深層級的導航結構

通常，絕大部分網站都是三到四個信息層級，這樣網站的頁面比較容易被觸達，不過這樣做需要確保網站的導航結構不至於太過寬泛。要想弄清到底幾個信息層級是合適的，試著把現有的信息層級結構劃分成互不相關的獨立部分。然後審視一下各個子頁面的分組，看看他們是否可以被升至更高一個層級，這時候需要注意：

?更新一下當前信息版塊下的標籤

?建立一個完全新的信息版塊去容納那些原本屬於交叉版塊的子頁面

?重新調整各個信息版塊之間的關係 — 也許他們應該依照操作行為來被分組而不是主題

合併內容或者刪掉內容也是同樣可行的，把扁平化的導航設計做到極致當前正成為全頁面導航設計的潮流這種做法就是沒有子頁面並且只有一個信息層級。

3-2.為每一層級設計獨特的視覺(或者說差異化每一層及的視覺感受)

用戶應該能夠快速瀏覽導航信息並且知道那些鏈接分別是哪個層級的導航項目，這些鏈接的擺放和分組都應該建立在這種層級基礎上。

像字體樣式，字體大小，字體權重或者顏色這些視覺設計都應該建立在導航層級之上並且應該始終保持一致。如果使用一個次級導航，那麼它與其父/子或者同級導航鏈接的設計也同樣應該區分開來並且與主導航保持一致。

Antro網站導航菜單的一級導航文案與二級導航文案在字體，字型大小，顏色以及hover狀態都有區分

3-3.使用位置指引

就像麵包屑導航結構，導航欄上的當前位置釋義能幫助用戶找到自己當前的位置，尤其是如果他們處在一個層級比較深的頁面。這種清晰的視覺指引可以幫助用戶明白他們在哪個頁面。

Audubon會高亮當前位置的導航菜單

四.考慮響應式設備的兼容性

一個好的導航結構可以很好的適應手機和平板電腦。設計導航結構時應該考慮到多端通用，或者考慮使用兩種相似的導航結構，這種結構不會讓用戶去切換思維模式去適應移動端和PC端的不同。

4-1.移動端沒有hover態

用戶在PC端hover主導航項目時狀態顯示次級導航的內容鏈接，然而移動端沒有hover狀態，這就會使得移動端和PC端不能保持一致。用戶在使用移動設備時不會像在PC上本能地hover菜單來找他們想要的內容。如果非得要把兩種交互形式用在一個內容鏈接上，可以考慮設計兩個不同的點擊位置(產生不同的點擊效果)，就像之前看過的

Fairfax County Public Schools 的案例 — 點擊主導航標題文案本身可以跳轉到一個頁面，然後點擊標題文案旁邊的加號可以展開這一部分主導航的內容。

4-2.為移動端設計不同於PC的導航形式

例如，日本的時代周刊在PC端的導航結構設計用的是寬屏而且是橫向分布排列的導航條，而在移動端同樣的導航內容用的是漢堡包式導航設計，並且它在展開時利用的是手機長條的縱向空間這種特點。當點擊一級導航標題時二級導航標題會在其下方展開，而不是將導航區域分割成一級二級導航兩條縱列。這種設計並不是機械的把PC端的導航形式照搬到移動端 — 可以注意到移動端藍色線條是更加挨著次級導航標題而不是主導航，這實際上更符合移動端上的設計。誠然，優化不同端的導航設計時仍然需要有一致性的。