4個要點教你設(shè)計更好的導(dǎo)航

相比于直接搜索，用戶更喜歡用導(dǎo)航，因為導(dǎo)航是讓用戶做選擇題，而搜索是填空題（導(dǎo)航文案是現(xiàn)有的信息，不需要經(jīng)過用戶大腦的額外加工去進(jìn)行搜索)。并且他解釋道：如果鏈接的文案與用戶尋找的內(nèi)容相符，那他們直接點擊鏈接的可能性更大。
盡管導(dǎo)航設(shè)計一直是一個有爭議的話題，仍然有一些比較好的應(yīng)用規(guī)則，是作為用戶體驗設(shè)計師的我們，在進(jìn)行網(wǎng)站導(dǎo)航設(shè)計時值得注意的：
保持(導(dǎo)航結(jié)構(gòu)的)連貫性和一致性；設(shè)計清晰易懂的交互方式；設(shè)計扁平的導(dǎo)航結(jié)構(gòu)；考慮響應(yīng)式設(shè)備的兼容性。
一、保持（導(dǎo)航結(jié)構(gòu)）的連貫性和一致性1-1子頁面與落地頁
連貫性的產(chǎn)生也需要經(jīng)過內(nèi)容的篩選，不是所有的導(dǎo)航項目都需要展示其子頁面鏈接，亦或者全都不展示；而是要展示那些會讓用戶誤以為不展示其子頁面鏈接，就沒有更多內(nèi)容的導(dǎo)航項目。
如果子頁面鏈接沒有在一級導(dǎo)航結(jié)構(gòu)中展示，那么就要確保其在各個板塊的次級導(dǎo)航結(jié)構(gòu)中的使用始終保持一致（不要在這個版塊是一級導(dǎo)航結(jié)構(gòu)中展示，而到了另一個版塊卻是在二級導(dǎo)航結(jié)構(gòu)中展示）。
同樣，所有的一級導(dǎo)航項目要么都是跳轉(zhuǎn)到落地頁的鏈接，要么都是作為二級導(dǎo)航鏈接的標(biāo)題。如果一部分是跳轉(zhuǎn)到落地頁，另一部分則是二級導(dǎo)航鏈接的標(biāo)題，那么用戶就會在點擊時產(chǎn)生疑惑。
在視覺設(shè)計上，同樣應(yīng)該比較明顯的示意處，一級導(dǎo)航項目到底是跳轉(zhuǎn)到落地頁的鏈接？還是二級導(dǎo)航機(jī)構(gòu)的標(biāo)題、字體的顏色和樣式，鼠標(biāo)指針的變化？
此外，如果一級導(dǎo)航項目是一個鏈接，那么就要清楚地示意相關(guān)操作，或者通過文案措辭或者通過視覺設(shè)計。
在FairfaxCountyPublicSchool’s官網(wǎng)的Fullmenu欄下，用戶可以通過點擊“Career”文案來鏈接到“Career”落地頁，或者點擊向右的箭頭來展開查看次級導(dǎo)航項目的標(biāo)題。
這與前面講的導(dǎo)航機(jī)構(gòu)的一致性也是相符的：一級導(dǎo)航項目要么都調(diào)到次級落地頁；要么都作為二級導(dǎo)航項目的標(biāo)題入口。如果兩者都有，那么就在樣式上作區(qū)分。
二、設(shè)計清晰易懂的交互方式2-1功能的可視化
視覺元素的變化，可以幫助用戶搞清楚網(wǎng)站有哪些可能的交互形式。例如：把關(guān)閉狀態(tài)的按鈕滑至開啟意味著某個設(shè)置改變了，并且知道如何反置。當(dāng)icon沒有改變，那么用戶可能就無法預(yù)知操作結(jié)果。
三、設(shè)計扁平的導(dǎo)航結(jié)構(gòu)
為了設(shè)計一個很好的導(dǎo)航結(jié)構(gòu)，好的網(wǎng)站信息架構(gòu)和層級才是關(guān)鍵。當(dāng)網(wǎng)站的信息層級結(jié)構(gòu)圖已經(jīng)出來時，此時就要盡力去設(shè)計一個扁平的導(dǎo)航結(jié)構(gòu)，這種扁平的結(jié)構(gòu)要能讓用戶只需要點擊一兩次就可以去到最底層的頁面。
盡管扁平的導(dǎo)航結(jié)構(gòu)固然是最理想的，但是僅僅因為短時記憶的局限，而把菜單設(shè)計得很簡短也是錯的。
就像NielsenNormanGroup說的：
菜單的意義是讓用戶辨識導(dǎo)航欄項目，而不是讓用戶去回憶(導(dǎo)航欄項目)。
所以菜單必須設(shè)計的簡短以方便用戶瀏覽，但是信息必須表達(dá)明確。(菜單欄必須設(shè)計得簡潔明了，表意準(zhǔn)確)
3-1限制導(dǎo)航層級
導(dǎo)航結(jié)構(gòu)的層級數(shù)最終是由網(wǎng)站的信息層級所決定，理想狀態(tài)下，用戶需要點擊的導(dǎo)航層級越少，那么用戶到達(dá)他們的目標(biāo)頁面也就越快越清晰。
3-2為每一層級設(shè)計獨特的視覺(或者說差異化每一層及的視覺感受)
用戶應(yīng)該能夠快速瀏覽導(dǎo)航信息，并且知道那些鏈接分別是哪個層級的導(dǎo)航項目，這些鏈接的擺放和分組都應(yīng)該建立在這種層級基礎(chǔ)上。
像字體樣式、字體大小、字體權(quán)重或者顏色這些視覺設(shè)計，都應(yīng)該建立在導(dǎo)航層級之上，并且應(yīng)該始終保持一致。如果使用一個次級導(dǎo)航，那么它與其父/子或者同級導(dǎo)航鏈接的設(shè)計，也同樣應(yīng)該區(qū)分開來并且與主導(dǎo)航保持一致。
3-3使用位置指引
就像面包屑導(dǎo)航結(jié)構(gòu)，導(dǎo)航欄上的當(dāng)前位置釋義能幫助用戶找到自己當(dāng)前的位置，尤其是如果他們處在一個層級比較深的頁面，這種清晰的視覺指引可以幫助用戶明白他們在哪個頁面。
四、考慮響應(yīng)式設(shè)備的兼容性
一個好的導(dǎo)航結(jié)構(gòu)可以很好的適應(yīng)手機(jī)和平板電腦，設(shè)計導(dǎo)航結(jié)構(gòu)時應(yīng)該考慮到多端通用，或者考慮使用兩種相似的導(dǎo)航結(jié)構(gòu)，這種結(jié)構(gòu)不會讓用戶去切換思維模式去適應(yīng)移動端和PC端的不同。
4-1移動端沒有hover態(tài)
用戶在PC端hover主導(dǎo)航項目時狀態(tài)顯示次級導(dǎo)航的內(nèi)容鏈接，然而移動端沒有hover狀態(tài)，這就會使得移動端和PC端不能保持一致。用戶在使用移動設(shè)備時，不會像在PC上本能地hover菜單來找他們想要的內(nèi)容。
如果非得要把兩種交互形式用在一個內(nèi)容鏈接上，可以考慮設(shè)計兩個不同的點擊位置(產(chǎn)生不同的點擊效果)，就像之前看過的FairfaxCountyPublicSchools的案例——點擊主導(dǎo)航標(biāo)題文案本身可以跳轉(zhuǎn)到一個頁面，然后點擊標(biāo)題文案旁邊的加號，可以展開這一部分主導(dǎo)航的內(nèi)容。
4-2為移動端設(shè)計不同于PC的導(dǎo)航形式
例如：日本的時代周刊在PC端的導(dǎo)航結(jié)構(gòu)設(shè)計，用的是寬屏而且是橫向分布排列的導(dǎo)航條。而在移動端同樣的導(dǎo)航內(nèi)容用的是漢堡包式導(dǎo)航設(shè)計，并且它在展開時利用的是手機(jī)長條的縱向空間這種特點。
當(dāng)點擊一級導(dǎo)航標(biāo)題時，二級導(dǎo)航標(biāo)題會在其下方展開，而不是將導(dǎo)航區(qū)域分割成一級、二級導(dǎo)航兩條縱列。
成都網(wǎng)站建設(shè)科技告訴大家，這種設(shè)計并不是機(jī)械的把PC端的導(dǎo)航形式照搬到移動端，可以注意到移動端藍(lán)色線條，是更加挨著次級導(dǎo)航標(biāo)題而不是主導(dǎo)航，這實際上更符合移動端上的設(shè)計。

當(dāng)前文章：4個要點教你設(shè)計更好的導(dǎo)航
當(dāng)前網(wǎng)址：http://muchs.cn/article6/sppoog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、品牌網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、品牌網(wǎng)站制作、全網(wǎng)營銷推廣、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)