網(wǎng)站建設(shè)|網(wǎng)站導(dǎo)航設(shè)計(jì)超強(qiáng)方法總結(jié)

時(shí)間：2023-09-13 22:18:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-13 22:18:01 來源：網(wǎng)站運(yùn)營

網(wǎng)站建設(shè)|網(wǎng)站導(dǎo)航設(shè)計(jì)超強(qiáng)方法總結(jié)：這是【建站百科】專欄第19篇原創(chuàng)內(nèi)容，由我在建站行業(yè)從業(yè)10年、給上萬公司搭建過網(wǎng)站的經(jīng)驗(yàn)總結(jié)而來。

一、網(wǎng)站導(dǎo)航簡介

用戶瀏覽網(wǎng)頁時(shí)，是有固定的瀏覽習(xí)慣的，一般會(huì)先大概掃一眼首頁信息，然后就會(huì)尋找導(dǎo)航欄。通過導(dǎo)航條了解網(wǎng)站的內(nèi)容和信息的分類方式，判斷網(wǎng)站是否有自己需要和感興趣的內(nèi)容。

擁有一個(gè)有吸引力的導(dǎo)航不僅可以增強(qiáng)網(wǎng)站的優(yōu)勢，提高網(wǎng)站的易用性，還可以大大提升用戶體驗(yàn)，有助于提高轉(zhuǎn)化率。

二、導(dǎo)航在網(wǎng)頁中的位置

根據(jù)眼動(dòng)試驗(yàn)結(jié)果，用戶的注意力往往呈現(xiàn)F形，所以左側(cè)和頂部是注意力中心。因此，最佳導(dǎo)航欄位置通常在網(wǎng)站的頂部和左側(cè)。對(duì)用戶來說，這兩個(gè)位置最先看到。

1、導(dǎo)航條在網(wǎng)頁頂部

起初，受瀏覽器屬性和下載速度的影響，下載網(wǎng)頁的相關(guān)內(nèi)容時(shí)，都是從上到下下載，因此，重要的網(wǎng)站信息都會(huì)放置在頁面的頂部。

現(xiàn)在，盡管下載速度已不再是決定導(dǎo)航位置的重要因素，但很多網(wǎng)站依然使用頂部導(dǎo)航結(jié)構(gòu)。

頂部導(dǎo)航適用于網(wǎng)站頁面內(nèi)容較多的情況，可以節(jié)省頁面空間。不僅符合用戶的視覺習(xí)慣，還可以方便用戶快速捕捉網(wǎng)頁信息，引導(dǎo)用戶使用網(wǎng)站。

2、導(dǎo)航條在網(wǎng)頁左側(cè)

一般來說，左側(cè)導(dǎo)航結(jié)構(gòu)，比較符合人們的視覺習(xí)慣，即自左向右瀏覽。適用于網(wǎng)站頁面內(nèi)容較少的情況，可以有效彌補(bǔ)因網(wǎng)頁內(nèi)容少而導(dǎo)致的頁面空洞感。

導(dǎo)航是網(wǎng)站與用戶溝通最直接，最快速的工具，它具有較強(qiáng)的引導(dǎo)作用，可以有效避免因用戶無方向地瀏覽網(wǎng)頁帶來的諸多不便。

因此，為了使網(wǎng)站導(dǎo)航更加醒目，方便用戶了解網(wǎng)站，可以采用不規(guī)則的圖形來設(shè)計(jì)導(dǎo)航，也可以運(yùn)用鮮艷的色塊作為背景與導(dǎo)航文字形成鮮明的對(duì)比，但需要考慮整個(gè)頁面的協(xié)調(diào)性。

三、導(dǎo)航設(shè)計(jì)的基本原則

1、易用性。

網(wǎng)站導(dǎo)航應(yīng)該滿足用戶以最少點(diǎn)擊的方式去訪問到期望的內(nèi)容，既容易進(jìn)入，也容易退出。這是網(wǎng)站導(dǎo)航易用性最重要的表現(xiàn)。

2、準(zhǔn)確傳遞信息。

設(shè)計(jì)導(dǎo)航一定要注意一點(diǎn)，千萬千萬不要讓用戶猜。好的導(dǎo)航欄菜單的設(shè)計(jì)就像設(shè)計(jì)優(yōu)秀的交通標(biāo)識(shí)，簡明清晰，指明方向，讓用戶一目了然，知道網(wǎng)站是做什么的，服務(wù)范圍有哪些，并且清楚了解自己所處的位置。

只有準(zhǔn)確傳遞信息才能真正發(fā)揮“引導(dǎo)”的作用，引導(dǎo)瀏覽者找到所需的信息。

3、減少選項(xiàng)數(shù)目。

學(xué)會(huì)將信息進(jìn)行合理分類，盡量減少導(dǎo)航的數(shù)目，可以平衡導(dǎo)航的深度和廣度，從而提高用戶查找信息的效率，也會(huì)提高用戶對(duì)網(wǎng)站的好感度。

4、提供導(dǎo)航標(biāo)志。

提供導(dǎo)航標(biāo)志可以加強(qiáng)用戶定位，減少由于導(dǎo)航選項(xiàng)過多而給用戶造成的迷失。

在很多網(wǎng)絡(luò)應(yīng)用中，會(huì)通過顏色、圖標(biāo)或者頁面頂端的標(biāo)簽條這些視覺信息給用戶提供清晰的導(dǎo)航選項(xiàng)，從而有效的幫助用戶定位導(dǎo)航位置。

5、提供總體視圖。

界面總體視圖與導(dǎo)航標(biāo)志的作用相同，都是幫助用戶定位。不同的是，總體視圖幫助用戶定位內(nèi)容，而不是位置。

基于網(wǎng)絡(luò)的應(yīng)用，總體視圖通常以文本的形式出現(xiàn)，即通常所說的“面包屑”導(dǎo)航和無處不在的層級(jí)顯示。

這個(gè)好處是不僅起到標(biāo)示用戶在網(wǎng)絡(luò)應(yīng)用中的位置的作用，還可以直接操作，實(shí)現(xiàn)不同界面之間的跳轉(zhuǎn)。

6、提供具體、完整的導(dǎo)航。

導(dǎo)航的完整性意味著用戶可以獲得整個(gè)網(wǎng)站范圍內(nèi)的領(lǐng)域性導(dǎo)航，能涉及網(wǎng)站中全部的信息及其關(guān)系。

7、保持頁面的一致性。

保持網(wǎng)頁的一致性是成功網(wǎng)頁設(shè)計(jì)的標(biāo)準(zhǔn)之一。

如果每個(gè)頁面的色彩搭配，風(fēng)格樣式、內(nèi)容排版都天差地別，用戶點(diǎn)進(jìn)去后會(huì)產(chǎn)生過大的視覺反差，造成不適。所以保持頁面一致，并且盡量保持在相同的位置，使用相同的功能?？梢杂行岣哂脩舻拈喿x體驗(yàn)。

8、避免復(fù)雜的嵌套關(guān)系。

在程序編寫中經(jīng)常會(huì)將代碼層級(jí)嵌套，但在導(dǎo)航設(shè)計(jì)中應(yīng)該盡量避免這種層級(jí)關(guān)系，因?yàn)樵谖锢硎澜缰?，例如文件柜，信息的存?chǔ)和檢索存在于一個(gè)單層分組中，而不會(huì)存在于嵌套的層次中。在用戶的概念模型中傾向于以單層分組來組織信息，避免嵌套結(jié)構(gòu)過于抽象和復(fù)雜。所以在導(dǎo)航設(shè)計(jì)中避免選項(xiàng)之間過于復(fù)雜的層級(jí)嵌套是非常必要的。

9、讓用戶知道他們「在哪」。

用戶只有了解自己所處的位置，才能確定下一步要做什么。

10、導(dǎo)航一直可見。

人機(jī)交互學(xué)博士Jakob Nielsen說過：“見到什么比記得什么更容易”。所以導(dǎo)航一直可見可以最小化用戶的記憶。

不要期望說當(dāng)用戶有需求時(shí)再出現(xiàn)，到那時(shí)，用戶的耐心已經(jīng)磨損，很可能會(huì)影響到對(duì)網(wǎng)站的整體印象。




看到這里的朋友，相信你一定也喜歡這篇文章，記得點(diǎn)贊+關(guān)注 @云夢智能 讓我看到你的熱情哦~