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

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

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

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

廣告

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