淺談web端導(dǎo)航設(shè)計(jì) @UED頻道
時(shí)間:2023-09-07 08:48:02 | 來(lái)源:網(wǎng)站運(yùn)營(yíng)
時(shí)間:2023-09-07 08:48:02 來(lái)源:網(wǎng)站運(yùn)營(yíng)
淺談web端導(dǎo)航設(shè)計(jì) @UED頻道: 導(dǎo)航作為網(wǎng)站或者平臺(tái)的骨架,是產(chǎn)品設(shè)計(jì)中不容忽視的一環(huán)。結(jié)合自身對(duì)于導(dǎo)航設(shè)計(jì)的理解,并綜合當(dāng)下導(dǎo)航設(shè)計(jì)相關(guān)的資料書(shū)籍,對(duì)web端導(dǎo)航設(shè)計(jì)作如下闡述,望本文能對(duì)讀者有所啟迪,也期盼能有機(jī)會(huì)與大咖溝通交流。
導(dǎo)航的價(jià)值
是器,是術(shù),而非終點(diǎn)。導(dǎo)航設(shè)計(jì)的目的不是設(shè)計(jì)導(dǎo)航,導(dǎo)航是內(nèi)容或者功能的定位、導(dǎo)向與通道;除了競(jìng)品捕食者,一般用戶(hù)恐怕沒(méi)有欣賞導(dǎo)航的習(xí)慣;同樣,除了在完成其使命的同時(shí),導(dǎo)航更多承擔(dān)的是一個(gè)靜默者的角色。
召之即來(lái),揮之即去的功能主義者。導(dǎo)航更多情況下是功能主義的倡導(dǎo)者,他的存在是具備使命性的,一般操作過(guò)程中,用戶(hù)更多是在進(jìn)入頁(yè)面前、進(jìn)入界面初、將要離開(kāi)界面時(shí)才會(huì)愈加關(guān)注導(dǎo)航設(shè)置;如沒(méi)有特殊的需求,在滿(mǎn)足其“導(dǎo)”與“航”功能的前提下,個(gè)人感覺(jué),導(dǎo)航應(yīng)盡量弱化。導(dǎo)航的存在畢竟是服務(wù)并烘托內(nèi)容與功能的,任何導(dǎo)航中心化的設(shè)計(jì)不免有舍本逐末之嫌,改變了其應(yīng)有的屬性。
偶爾想起你,卻又不能沒(méi)有你。優(yōu)秀的導(dǎo)航設(shè)計(jì)更是一個(gè)網(wǎng)站或者平臺(tái)的宏觀(guān)概覽,同時(shí)也是用戶(hù)與網(wǎng)頁(yè)間的關(guān)鍵觸點(diǎn)。面向用戶(hù)一連串哲學(xué)性的問(wèn)題“
我們從哪里來(lái)?”“
我們?cè)谀睦??”“還可以做什么?”,總是可以給予肯定的回答。
優(yōu)秀導(dǎo)航的素養(yǎng)
在滿(mǎn)足基本的功能性需求外,優(yōu)秀的導(dǎo)航還具備如下屬性:
無(wú)感知:該觀(guān)點(diǎn)似乎不僅僅應(yīng)用于導(dǎo)航設(shè)計(jì),似乎任何功能性設(shè)計(jì)最佳的體驗(yàn)便是在無(wú)意識(shí)狀態(tài)下完成任務(wù)。這種無(wú)意識(shí)更多的是無(wú)障礙、無(wú)不適,仿佛你永遠(yuǎn)不會(huì)想回家的路該如何走,因?yàn)閷?duì)于家的位置,你非常了解。而設(shè)計(jì)所構(gòu)建的呈現(xiàn)模型也應(yīng)努力向用戶(hù)心理感知靠近?;蛟S,優(yōu)秀的設(shè)計(jì),便是無(wú)感知的。
一致性:基于格式塔理論的整體性原則,用戶(hù)觀(guān)察內(nèi)容是總是將相近或者關(guān)聯(lián)的內(nèi)容視為一個(gè)整體,同級(jí)導(dǎo)航的一致性也是必然的,這種一致性體現(xiàn)在交互、元素等各個(gè)方面。
扁平的導(dǎo)航結(jié)構(gòu):構(gòu)建合理高效的信息架構(gòu)是平臺(tái)搭建的關(guān)鍵,一般網(wǎng)站架構(gòu)三到四級(jí)即可;而今愈受歡迎的全屏導(dǎo)航設(shè)計(jì)似乎也表明用戶(hù)更加傾向于一步到位的操作。
積極的交互反饋:導(dǎo)航設(shè)計(jì)需關(guān)注交互細(xì)節(jié),給予用戶(hù)操作前、操作中及操作后不同階段的反饋,并需保持交互的一致性。
導(dǎo)航分類(lèi)
結(jié)構(gòu)導(dǎo)航:遵循導(dǎo)航層級(jí)結(jié)構(gòu),包括全局導(dǎo)航和局部導(dǎo)航;全局導(dǎo)航顧名思義,是用戶(hù)操作上貫穿始終的導(dǎo)航;局部導(dǎo)航,其操作范圍只針對(duì)平臺(tái)部分界面或者模塊適用。
全局導(dǎo)航局部導(dǎo)航 關(guān)聯(lián)導(dǎo)航:解決用戶(hù)下一步去哪里,還能提供什么等問(wèn)題;
優(yōu)秀的設(shè)計(jì)是讓用戶(hù)盡可能多的使用關(guān)聯(lián)導(dǎo)航,而不是結(jié)構(gòu)導(dǎo)航。關(guān)聯(lián)導(dǎo)航 可用性導(dǎo)航:通常置于網(wǎng)站右上角關(guān)于用戶(hù)、消息、登錄、幫助等導(dǎo)航。
可用性導(dǎo)航
常見(jiàn)的導(dǎo)航模式
結(jié)合當(dāng)下優(yōu)秀導(dǎo)航設(shè)計(jì)案例,將導(dǎo)航模式做如下歸類(lèi),還是按結(jié)構(gòu)導(dǎo)航和關(guān)聯(lián)導(dǎo)航兩個(gè)大類(lèi)展開(kāi),結(jié)構(gòu)導(dǎo)航分為:全局導(dǎo)航、頂部導(dǎo)航、左側(cè)導(dǎo)航、右側(cè)導(dǎo)航、底部導(dǎo)航、個(gè)性化導(dǎo)航、混合導(dǎo)航;關(guān)聯(lián)導(dǎo)航分為面包屑導(dǎo)航、卡片式導(dǎo)航、分步式導(dǎo)航;另外部分網(wǎng)站采用無(wú)導(dǎo)航模式。以上分類(lèi)仍有不足,后期個(gè)人也將不斷更新完善。
全屏導(dǎo)航-抽屜式
網(wǎng)址:
http://www.vitysdesign.com/說(shuō)明:點(diǎn)擊上方折疊按鈕,下拉展開(kāi)導(dǎo)航(全屏顯示);全屏導(dǎo)航頁(yè)在一定層度上提升了網(wǎng)站扁平化,是導(dǎo)航新興趨勢(shì)。
全屏導(dǎo)航-抽屜式
網(wǎng)址:
https://adwyse.de/#!/ueber-uns.html說(shuō)明:導(dǎo)航一分為二在左側(cè)和右側(cè)對(duì)稱(chēng)顯示,適用于趣味性較強(qiáng),簡(jiǎn)單娛樂(lè)性網(wǎng)站
頂部導(dǎo)航-下拉式
網(wǎng)址:
https://www.zcool.com.cn/說(shuō)明:導(dǎo)航水平分布;鼠標(biāo)懸浮下拉,可選擇二級(jí)導(dǎo)航,跳轉(zhuǎn)至二級(jí)界面
頂部導(dǎo)航-標(biāo)簽式
網(wǎng)址:
https://www.apple.com/cn/說(shuō)明:導(dǎo)航水平分布;導(dǎo)航區(qū)域固定;標(biāo)簽平鋪展示,點(diǎn)擊進(jìn)入相應(yīng)界面;
頂部導(dǎo)航-網(wǎng)頁(yè)定位
網(wǎng)址:
https://prollective.com/說(shuō)明:點(diǎn)擊對(duì)應(yīng)導(dǎo)航,頁(yè)面滾動(dòng)至導(dǎo)航對(duì)應(yīng)模塊
頂部導(dǎo)航-縱向分布
網(wǎng)址:
https://prollective.com/contact說(shuō)明:導(dǎo)航字體較小,縱向排布于頁(yè)面右上角;既方便用戶(hù)切換,且預(yù)留出空間呈現(xiàn)內(nèi)容
左側(cè)導(dǎo)航-標(biāo)簽式
來(lái)源于METRONIC web模板
說(shuō)明:左側(cè)縱向排列;web內(nèi)容或?qū)哟屋^多時(shí),常用該導(dǎo)航樣式(若導(dǎo)航層級(jí)三級(jí)或者多于三級(jí)可考慮雙導(dǎo)航欄布局);導(dǎo)航欄菜單可實(shí)現(xiàn)整體折疊或局部折疊,折疊方式可縱向或橫向。
左側(cè)導(dǎo)航-抽屜式
網(wǎng)址:
http://www.vitysdesign.com/說(shuō)明:點(diǎn)擊左上方折疊按鈕,左側(cè)劃出導(dǎo)航欄
右側(cè)導(dǎo)航-抽屜式
網(wǎng)址:
http://futurewatercity.com/說(shuō)明:點(diǎn)擊右上方折疊按鈕,右側(cè)劃出導(dǎo)航欄;右側(cè)導(dǎo)航與用戶(hù)日常操作不符合,多用于導(dǎo)航切換頻率低的場(chǎng)景
底部導(dǎo)航-標(biāo)簽式
網(wǎng)址:
http://www.galleristapp.com/說(shuō)明:導(dǎo)航平鋪于頁(yè)面底部,適用于趣味性較強(qiáng),用戶(hù)操作性較強(qiáng)的網(wǎng)站
底部導(dǎo)航-網(wǎng)頁(yè)定位
網(wǎng)址:
https://www.croptrust.org/2014/home說(shuō)明:導(dǎo)航平鋪于頁(yè)面底部,點(diǎn)擊切換網(wǎng)頁(yè)滾動(dòng)定位至相關(guān)模塊
個(gè)性化導(dǎo)航-左右布局
網(wǎng)址:
https://shuka.design/說(shuō)明:導(dǎo)航一分為二在左側(cè)和右側(cè)對(duì)稱(chēng)顯示,適用于趣味性較強(qiáng),簡(jiǎn)單娛樂(lè)性網(wǎng)站
個(gè)性化導(dǎo)航-可視化
網(wǎng)址:
http://futurewatercity.com/ http://www.thehappyforecast.com/說(shuō)明:由整體到局部,采用可視化元素引導(dǎo)用戶(hù)
個(gè)性化導(dǎo)航-差異化
網(wǎng)址:
http://grazsecrets.at/說(shuō)明:頂部導(dǎo)航居中放置下載菜單,鼓勵(lì)用戶(hù)點(diǎn)擊下載
個(gè)性化導(dǎo)航-交互式
網(wǎng)址:
https://www.signesduquotidien.org/說(shuō)明:長(zhǎng)按“導(dǎo)航球”將其拖入中間虛線(xiàn)框內(nèi),則跳轉(zhuǎn)至對(duì)應(yīng)界面,增強(qiáng)用戶(hù)互動(dòng)性
混合導(dǎo)航-電商平臺(tái)
網(wǎng)址:
https://www.suning.com/說(shuō)明:全局導(dǎo)航和商品導(dǎo)航并行,采用不同分類(lèi)標(biāo)準(zhǔn);可用性導(dǎo)航及快捷入口位于上方和右側(cè)
混合導(dǎo)航-雙導(dǎo)航
網(wǎng)址:
http://hao.shejidaren.com/index.html說(shuō)明:頂部導(dǎo)航+左側(cè)導(dǎo)航;頂部導(dǎo)航為一級(jí)導(dǎo)航,左側(cè)導(dǎo)航為二級(jí)導(dǎo)航;一級(jí)導(dǎo)航較少,二級(jí)導(dǎo)航多的場(chǎng)景更契合
無(wú)導(dǎo)航模式
網(wǎng)址:
http://www.quincy-requin-avocats.com/說(shuō)明:適用于無(wú)目的游客或者內(nèi)容介紹與預(yù)覽,打造旅行式體驗(yàn);通過(guò)鼠標(biāo)滾動(dòng)和前進(jìn)/后退按鈕進(jìn)行操作
關(guān)聯(lián)導(dǎo)航-卡片式導(dǎo)航
網(wǎng)址:
https://www.zcool.com.cn/work/ZMTg3MjI1NTY=.html說(shuō)明:卡片式布局是web端布局的一大趨勢(shì),關(guān)聯(lián)導(dǎo)航也更多采用該樣式引導(dǎo)下一步操作,構(gòu)建安全網(wǎng),防止用戶(hù)離開(kāi),常用【猜你喜歡】【更多類(lèi)似】【查看更多】等引導(dǎo)用戶(hù)
關(guān)聯(lián)導(dǎo)航-面包屑導(dǎo)航
網(wǎng)址:
https://product.suning.com/0000000000/690105195.html說(shuō)明:面包屑導(dǎo)航用于表示頁(yè)面間的層級(jí)關(guān)系、用戶(hù)當(dāng)前位置、并方便用戶(hù)執(zhí)行返回操作;當(dāng)前電商平臺(tái)面包屑變異,將其與產(chǎn)品類(lèi)型篩選與搜索控件復(fù)合使用
分步式導(dǎo)航
來(lái)源于METRONIC web模板
說(shuō)明:分步式導(dǎo)航多用于流程性操作引導(dǎo),方便用戶(hù)了解當(dāng)前位置,對(duì)之后步驟也有預(yù)見(jiàn)性;部分分步式支持點(diǎn)擊切換,返回之前步驟
導(dǎo)航設(shè)計(jì)實(shí)踐論 做好導(dǎo)航設(shè)計(jì),個(gè)人建議需要關(guān)注以下幾個(gè)方面:
嚴(yán)謹(jǐn)?shù)男畔⒓軜?gòu)搭建:信息架構(gòu)的搭建是網(wǎng)站的基礎(chǔ),可嘗試采用卡片分類(lèi)法對(duì)導(dǎo)航進(jìn)行分類(lèi)篩選;而對(duì)于導(dǎo)航設(shè)計(jì)目前已經(jīng)形成的規(guī)則,個(gè)人還是建議遵循的,改變用戶(hù)行為總是要付出成本的。
可視化語(yǔ)義表達(dá):可采用顏色、icon等元素提高導(dǎo)航可視性,根據(jù)NNG
study的研究:用當(dāng)戶(hù)在網(wǎng)頁(yè)檢索信息時(shí),相比于只有文案,通過(guò)顏色和icon的差異化設(shè)計(jì)的視覺(jué)指引能讓用戶(hù)快37%。
注重交互細(xì)節(jié):加強(qiáng)觸點(diǎn)交互反饋;對(duì)同一級(jí)導(dǎo)航制定統(tǒng)一的交互行為規(guī)則、反饋及循環(huán)模式等,例如鼠標(biāo)每次懸浮,菜單背景灰色顯示,文字由深灰變?yōu)樗{(lán)色;另外需注意,對(duì)不同層級(jí)的導(dǎo)航可進(jìn)行差異化處理,凸顯導(dǎo)航層級(jí)。
以上為個(gè)人對(duì)導(dǎo)航設(shè)計(jì)的些許梳理,望大家不吝賜教。
關(guān)鍵詞:頻道,設(shè)計(jì),導(dǎo)航,淺談