與直接搜索相比，用戶更喜歡使用導(dǎo)航，因?yàn)閷?dǎo)航允許用戶提出多項(xiàng)選擇題，而搜索則是一個(gè)空白填充的問題。那篇文章主要講的是導(dǎo)航設(shè)計(jì)，什么樣的導(dǎo)航設(shè)計(jì)可以讓用戶喜歡它。
McGovern（Customer Carewords的創(chuàng)始人兼首席執(zhí)行官）表示，用戶更喜歡使用導(dǎo)航而不是直接搜索，因?yàn)閷?dǎo)航是為了讓用戶提出多項(xiàng)選擇問題，搜索是一個(gè)空白填空的問題（導(dǎo)航副本已經(jīng)存在）信息，不需要通過用戶的大腦進(jìn)行額外的搜索處理）。他解釋說：如果鏈接的副本與用戶正在尋找的內(nèi)容相匹配，他們更有可能直接點(diǎn)擊鏈接。
雖然導(dǎo)航設(shè)計(jì)一直是一個(gè)有爭議的話題，但仍然有一些很好的應(yīng)用規(guī)則。作為一名用戶體驗(yàn)設(shè)計(jì)師，在進(jìn)行網(wǎng)站導(dǎo)航設(shè)計(jì)時(shí)值得注意：
保持（協(xié)調(diào)結(jié)構(gòu)）連貫性和一致性;設(shè)計(jì)清晰易懂的互動(dòng);設(shè)計(jì)平面導(dǎo)航結(jié)構(gòu);考慮響應(yīng)設(shè)備的兼容性。首先，維護(hù)（導(dǎo)航結(jié)構(gòu)）一致性和一致性1-1子頁面和登陸頁面
Coherence還需要通過內(nèi)容進(jìn)行過濾。并非所有導(dǎo)航項(xiàng)目都需要顯示其子頁面鏈接，或者不顯示任何導(dǎo)航項(xiàng)目;相反，他們表明那些用戶會(huì)錯(cuò)誤地認(rèn)為他們沒有顯示他們的子頁面鏈接。多內(nèi)容導(dǎo)航項(xiàng)目。
如果子頁面鏈接沒有顯示在第一級(jí)導(dǎo)航結(jié)構(gòu)中，那么請確保它們在每個(gè)部分的輔助導(dǎo)航結(jié)構(gòu)中的使用始終是一致的（在本節(jié)中不顯示是一級(jí)導(dǎo)航結(jié)構(gòu)，而是另一部分）它顯示在輔助導(dǎo)航結(jié)構(gòu)中）。
同樣，所有1級(jí)導(dǎo)航項(xiàng)都是指向著陸頁的鏈接，或者是輔助導(dǎo)航鏈接的標(biāo)題。如果一部分要跳轉(zhuǎn)到目標(biāo)網(wǎng)頁而另一部分是輔助導(dǎo)航鏈接的標(biāo)題，那么用戶在點(diǎn)擊時(shí)會(huì)感到困惑。
在視覺設(shè)計(jì)中，應(yīng)給出相同的明顯指示。第一級(jí)導(dǎo)航項(xiàng)目是否是指向目標(biāo)網(wǎng)頁的鏈接？或者是輔助導(dǎo)航機(jī)制的標(biāo)題，字體的顏色和樣式以及鼠標(biāo)指針的變化？
此外，如果主要導(dǎo)航項(xiàng)目是鏈接，則應(yīng)通過文案或視覺設(shè)計(jì)明確指出相關(guān)操作。
在費(fèi)爾法克斯縣公立學(xué)校的官方網(wǎng)站的完整菜單下，用戶可以點(diǎn)擊“職業(yè)”鏈接到“職業(yè)”頁面，或單擊右箭頭展開輔助導(dǎo)航項(xiàng)目的標(biāo)題。
這與上面提到的導(dǎo)航機(jī)制的一致性是一致的：主導(dǎo)航項(xiàng)目要么轉(zhuǎn)移到二級(jí)登陸頁面;或兩者都是輔助導(dǎo)航項(xiàng)目的標(biāo)題條目。如果兩者都可用，則區(qū)分樣式。
如果新添加的內(nèi)容與當(dāng)前站點(diǎn)的各個(gè)部分不匹配，則需要重新考慮站點(diǎn)的層次結(jié)構(gòu)，或者重新訪問——由于本節(jié)的內(nèi)容與網(wǎng)站的其他部分不符，那么為什么還要存在呢？可以將其刪除或合并到與內(nèi)容相關(guān)的頁面中嗎？
如果需要更輕松地觸摸某些頁面，請考慮使用響應(yīng)主頁或模塊的登錄頁面（浮動(dòng)層？）而出現(xiàn)的功能模塊。用戶實(shí)際上更愿意關(guān)注這些模塊，并且對用戶重要且具有重要功能的模塊不會(huì)干擾整個(gè)網(wǎng)站的導(dǎo)航結(jié)構(gòu)。
1-2面包屑導(dǎo)航結(jié)構(gòu)
面包屑導(dǎo)航是引導(dǎo)用戶的好方法，這種指導(dǎo)對于從外部鏈接跳轉(zhuǎn)到深層頁面的用戶尤其重要。
但是面包屑導(dǎo)航需要非常精確的結(jié)果才能工作，并且您不能丟失導(dǎo)致錯(cuò)誤級(jí)別的任何級(jí)別或頁面。對于只有兩級(jí)結(jié)構(gòu)的小型網(wǎng)站，沒有必要使用痕跡導(dǎo)航。如果必須使用它，則必須保持級(jí)別的一致性和一致性。您可以訪問UI-Patterns網(wǎng)站以了解有關(guān)面包屑導(dǎo)航的更多信息。實(shí)際用例。
二，設(shè)計(jì)清晰易懂的交互模式2-1功能可視化
視覺元素的變化可以幫助用戶找出網(wǎng)站上可能的交互形式。例如，將關(guān)閉的按鈕滑動(dòng)到打開意味著設(shè)置已更改并知道如何將其反轉(zhuǎn)。當(dāng)圖標(biāo)未改變時(shí)，用戶可能無法預(yù)測操作的結(jié)果。
在上面顯示的網(wǎng)頁中，請注意根據(jù)導(dǎo)航菜單的展開或折疊切換箭頭的方向。
IOS功能開關(guān)也是一個(gè)很好的案例
2-2使用帶圖標(biāo)的標(biāo)簽
有時(shí)候圖標(biāo)可以替換文本鏈，包括使用icon標(biāo)簽來降低理解成本。例如，如果您使用有爭議的漢堡包式圖標(biāo)（單獨(dú)），則放置一個(gè)“菜單”圖標(biāo)。旁邊的標(biāo)簽將解決這個(gè)潛在的可用性問題。
此方法也適用于其他常用圖標(biāo)，例如：“聯(lián)系人”，“登錄”等。
2-3根據(jù)功能區(qū)分圖標(biāo)
區(qū)分圖標(biāo)并區(qū)分具有鏈接的那些圖標(biāo)和僅作為純信息或用作類別的圖標(biāo)。
根據(jù)NNG研究：當(dāng)使用用戶檢索網(wǎng)頁上的信息時(shí)，通過顏色和圖標(biāo)對差異化設(shè)計(jì)的視覺指導(dǎo)可以使用戶比唯一的副本快37％。區(qū)分圖標(biāo)的顏色，而不僅僅是將其設(shè)計(jì)成不同的樣式，使用戶更容易感知這些圖標(biāo)具有不同的效果。
例如：Twitter上那些無法交互的圖標(biāo)被設(shè)計(jì)為匹配灰色方塊中的白色（筆劃）圖標(biāo)。例如：“喜歡” （并且喜歡贊美按鈕）并且“跟著你”。 （已經(jīng)遵循的焦點(diǎn)按鈕）。
用戶可以與之交互的圖標(biāo)被設(shè)計(jì)為灰顯和顏色切換，并且當(dāng)用戶懸停時(shí)顯示解釋性消息。
第三，設(shè)計(jì)平面導(dǎo)航結(jié)構(gòu)
為了設(shè)計(jì)出良好的導(dǎo)航結(jié)構(gòu)，良好的網(wǎng)站信息架構(gòu)和層次結(jié)構(gòu)是關(guān)鍵。當(dāng)網(wǎng)站的信息層次圖出現(xiàn)時(shí)，有必要嘗試設(shè)計(jì)平面導(dǎo)航結(jié)構(gòu)。這種扁平結(jié)構(gòu)允許用戶只需一次或兩次點(diǎn)擊即可轉(zhuǎn)到最低級(jí)別的頁面。
雖然平面導(dǎo)航結(jié)構(gòu)是理想的，但僅僅因?yàn)槎唐谟洃浀南拗贫O(shè)計(jì)菜單也是錯(cuò)誤的。
正如尼爾森諾曼集團(tuán)所說：
菜單的含義是讓用戶識(shí)別導(dǎo)航欄項(xiàng)而不是讓用戶調(diào)用它（導(dǎo)航欄項(xiàng)）。
因此，菜單必須設(shè)計(jì)為用戶瀏覽的簡短，但必須明確說明信息。 （菜單欄必須設(shè)計(jì)得簡潔明了，表達(dá)式準(zhǔn)確）
3-1限制導(dǎo)航級(jí)別
導(dǎo)航結(jié)構(gòu)的層次結(jié)構(gòu)最終由網(wǎng)站的信息層次決定。理想情況下，用戶點(diǎn)擊的導(dǎo)航級(jí)別越少，用戶訪問目標(biāo)頁面的速度就越快。
我們再次引用尼爾森諾曼集團(tuán)的話：
信息層越深，用戶就越容易被誤導(dǎo)。
平面導(dǎo)航層次結(jié)構(gòu)
深層導(dǎo)航結(jié)構(gòu)
通常，大多數(shù)網(wǎng)站都是三到四個(gè)信息級(jí)別，因此網(wǎng)站的頁面更容易到達(dá)，但這需要確保網(wǎng)站的導(dǎo)航結(jié)構(gòu)不是太寬泛。
要弄清楚哪些級(jí)別的信息是合適的，請嘗試將現(xiàn)有的信息層次劃分為單獨(dú)的，不相關(guān)的部分。然后查看每個(gè)子頁面的分組，看看它們是否可以升級(jí)到更高級(jí)別。
這時(shí)，你需要注意：
更新當(dāng)前信息部分下的標(biāo)簽;創(chuàng)建一個(gè)全新的信息部分，以容納最初屬于橫截面的子頁面;重新調(diào)整各個(gè)信息部分之間的關(guān)??系，也許應(yīng)該根據(jù)操作行為而不是主題進(jìn)行分組。
合并內(nèi)容或刪除內(nèi)容同樣可行。平面導(dǎo)航設(shè)計(jì)是終極的，并且目前正在成為整頁導(dǎo)航設(shè)計(jì)的趨勢，即沒有子頁面和只有一個(gè)信息級(jí)別。
3-2為每個(gè)級(jí)別設(shè)計(jì)獨(dú)特的視覺（或區(qū)分每個(gè)層次和視覺感知）
用戶應(yīng)該能夠快速瀏覽導(dǎo)航信息并知道這些鏈接的導(dǎo)航項(xiàng)目級(jí)別，并且這些鏈接的放置和分組應(yīng)基于此級(jí)別。
字體樣式，字體大小，字體粗細(xì)或顏色等視覺設(shè)計(jì)都應(yīng)該在導(dǎo)航級(jí)別上構(gòu)建，并且應(yīng)始終保持一致。如果使用輔助導(dǎo)航，則還應(yīng)區(qū)分其父/子或兄弟導(dǎo)航鏈接的設(shè)計(jì)并與主導(dǎo)航一致。
Antro網(wǎng)站導(dǎo)航菜單的第一級(jí)導(dǎo)航副本和第二級(jí)導(dǎo)航副本的字體，字體大小和顏色級(jí)別懸停狀態(tài)不同
3-3使用位置指南
就像痕跡導(dǎo)航結(jié)構(gòu)一樣，導(dǎo)航欄上的當(dāng)前位置定義可以幫助用戶找到他們當(dāng)前的位置，特別是如果他們在更深的頁面上，這個(gè)清晰的視覺指南可以幫助用戶了解他們所在的頁面。 。
Audubon將突出顯示當(dāng)前位置的導(dǎo)航菜單
第四，考慮響應(yīng)設(shè)備的兼容性
良好的導(dǎo)航結(jié)構(gòu)可以很好地適應(yīng)手機(jī)和平板電腦。在設(shè)計(jì)導(dǎo)航結(jié)構(gòu)時(shí)，您應(yīng)該考慮多端通用，或者考慮使用兩個(gè)類似的導(dǎo)航結(jié)構(gòu)。這種結(jié)構(gòu)不允許用戶將他們的思維模式轉(zhuǎn)移到移動(dòng)端。它與PC不同。
4-1移動(dòng)端沒有懸停狀態(tài)
當(dāng)用戶在PC側(cè)懸停主導(dǎo)航項(xiàng)時(shí)，狀態(tài)顯示輔助導(dǎo)航的內(nèi)容鏈接。然而，移動(dòng)終端沒有懸停狀態(tài)，這使得移動(dòng)終端和PC端不一致。當(dāng)用戶使用移動(dòng)設(shè)備時(shí)，他們不會(huì)本能地將菜單懸停在PC上以找到他們想要的內(nèi)容。
如果您必須在內(nèi)容鏈接上使用兩種形式的互動(dòng)，請考慮設(shè)計(jì)兩個(gè)不同的點(diǎn)擊位置（導(dǎo)致不同的點(diǎn)擊效果），就像Fairfax County Public Sc??hools案例——導(dǎo)航標(biāo)題副本本身可以跳轉(zhuǎn)到某個(gè)頁面，然后單擊標(biāo)題副本旁邊的加號(hào)以展開主導(dǎo)航這一部分的內(nèi)容。
4-2為移動(dòng)終端設(shè)計(jì)與PC不同的導(dǎo)航表格
例如，日本時(shí)代雜志在PC端的導(dǎo)航結(jié)構(gòu)設(shè)計(jì)使用寬屏和水平排列的導(dǎo)航欄。移動(dòng)端的相同導(dǎo)航內(nèi)容使用漢堡式導(dǎo)航設(shè)計(jì)，并在部署時(shí)使用手機(jī)帶的垂直空間。
單擊第一級(jí)導(dǎo)航標(biāo)題時(shí)，輔助導(dǎo)航標(biāo)題會(huì)在其下方展開，而不是將導(dǎo)航區(qū)域分為兩列，一級(jí)和兩級(jí)。
這種設(shè)計(jì)不是將PC的導(dǎo)航形式機(jī)械地復(fù)制到移動(dòng)端?？梢宰⒁獾剑苿?dòng)端的藍(lán)線與主導(dǎo)航更符合輔助導(dǎo)航標(biāo)題，實(shí)際上更符合移動(dòng)端的設(shè)計(jì)。
無可否認(rèn)，在不同端優(yōu)化導(dǎo)航設(shè)計(jì)時(shí)仍需要保持一致。
說明：我喜歡翻譯國外互動(dòng)設(shè)計(jì)體驗(yàn)設(shè)計(jì)網(wǎng)站優(yōu)秀文章案例，僅供相互學(xué)習(xí)和討論，翻譯有版權(quán)，如有任何錯(cuò)誤，請指正！?/p>
原作者：Stephanie Lin
原始地址鏈接：現(xiàn)代導(dǎo)航規(guī)則| UX Booth
本文由@vanhelsinglhj出版。未經(jīng)許可，禁止復(fù)制
該地圖來自Unsplash，基于CC0協(xié)議