相比于直接搜索,用戶更喜歡用導(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ì)。
在Fairfax County Public School’s 官網(wǎng)的Full menu欄下,用戶可以通過(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ò)的。
菜單的意義是讓用戶辨識(shí)導(dǎo)航欄項(xiàng)目,而不是讓用戶去回憶(導(dǎo)航欄項(xiàng)目)。
所以菜單必須設(shè)計(jì)的簡(jiǎn)短以方便用戶瀏覽,但是信息必須表達(dá)明確。(菜單欄必須設(shè)計(jì)得簡(jiǎn)潔明了,表意準(zhǔn)確)
丨夸米科技丨
咨詢直線:186-2370-8562 官方網(wǎng)站:www.oceantechmarket.com.cn
重慶市渝北區(qū)金開(kāi)大道西段106號(hào)創(chuàng)新科技園區(qū)3座4樓
鄭州市中原區(qū)電廠西路西三環(huán)交叉口大學(xué)科技園東區(qū)15E