&

網站的導航欄怎么設計比較好？

2018-08-10

相比于直接搜索，用戶更喜歡用導航，因為導航是讓用戶做選擇題，而搜索是填空題（導航文案是現有的信息，不需要經過用戶大腦的額外加工去進行搜索)。并且他解釋道：如果鏈接的文案與用戶尋找的內容相符，那他們直接點擊鏈接的可能性更大。
盡管導航設計一直是一個有爭議的話題，仍然有一些比較好的應用規則，是作為用戶體驗設計師的我們，在進行網站導航設計時值得注意的：
保持(導航結構的)連貫性和一致性；設計清晰易懂的交互方式；設計扁平的導航結構；考慮響應式設備的兼容性。
一、保持（導航結構）的連貫性和一致性1-1 子頁面與落地頁
連貫性的產生也需要經過內容的篩選，不是所有的導航項目都需要展示其子頁面鏈接，亦或者全都不展示；而是要展示那些會讓用戶誤以為不展示其子頁面鏈接，就沒有更多內容的導航項目。
如果子頁面鏈接沒有在一級導航結構中展示，那么就要確保其在各個板塊的次級導航結構中的使用始終保持一致（不要在這個版塊是一級導航結構中展示，而到了另一個版塊卻是在二級導航結構中展示）。
同樣，所有的一級導航項目要么都是跳轉到落地頁的鏈接，要么都是作為二級導航鏈接的標題。如果一部分是跳轉到落地頁，另一部分則是二級導航鏈接的標題，那么用戶就會在點擊時產生疑惑。
在視覺設計上，同樣應該比較明顯的示意處，一級導航項目到底是跳轉到落地頁的鏈接？還是二級導航機構的標題、字體的顏色和樣式，鼠標指針的變化？
此外，如果一級導航項目是一個鏈接，那么就要清楚地示意相關操作，或者通過文案措辭或者通過視覺設計。
在Fairfax County Public School’s 官網的Full menu欄下，用戶可以通過點擊“Career”文案來鏈接到“Career”落地頁，或者點擊向右的箭頭來展開查看次級導航項目的標題。
這與前面講的導航機構的一致性也是相符的：一級導航項目要么都調到次級落地頁；要么都作為二級導航項目的標題入口。如果兩者都有，那么就在樣式上作區分。
二、設計清晰易懂的交互方式2-1 功能的可視化
　　視覺元素的變化，可以幫助用戶搞清楚網站有哪些可能的交互形式。例如：把關閉狀態的按鈕滑至開啟意味著某個設置改變了，并且知道如何反置。當icon沒有改變，那么用戶可能就無法預知操作結果。
三、設計扁平的導航結構
　　為了設計一個很好的導航結構，好的網站信息架構和層級才是關鍵。當網站的信息層級結構圖已經出來時，此時就要盡力去設計一個扁平的導航結構，這種扁平的結構要能讓用戶只需要點擊一兩次就可以去到最底層的頁面。
盡管扁平的導航結構固然是最理想的，但是僅僅因為短時記憶的局限，而把菜單設計得很簡短也是錯的。
菜單的意義是讓用戶辨識導航欄項目，而不是讓用戶去回憶(導航欄項目)。
所以菜單必須設計的簡短以方便用戶瀏覽，但是信息必須表達明確。(菜單欄必須設計得簡潔明了，表意準確)