新手也能學(xué)會(huì)的Web端導(dǎo)航設(shè)計(jì)

時(shí)間：2023-07-24 04:12:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-24 04:12:01 來源：網(wǎng)站運(yùn)營(yíng)

新手也能學(xué)會(huì)的Web端導(dǎo)航設(shè)計(jì)：從定義，為何需要，分類，樣式，建議，審查的角度來了解導(dǎo)航設(shè)計(jì)

一、導(dǎo)航的定義

牛津詞典上有對(duì)Navigation一詞在互聯(lián)網(wǎng)領(lǐng)域的解釋：你在瀏覽網(wǎng)頁時(shí)四處移動(dòng)尋找信息的方式

也就是說用戶看到的，影響其尋找信息的因素都可視為導(dǎo)航。

二、為什么需要導(dǎo)航

用戶在使用傳統(tǒng)方式閱讀時(shí)，所處的空間是單向的，只能向前或向后翻頁；

而在網(wǎng)頁領(lǐng)域，所有的內(nèi)容都存放在各自的URL里，信息在多維度多空間里相互交錯(cuò)，各有聯(lián)系，可跳躍的閱讀方式讓用戶很容易失去位置感。

三、從信息構(gòu)建模式給導(dǎo)航分類

1.內(nèi)容

內(nèi)容涉及到的東西很多，內(nèi)容之間的相互關(guān)系也不確定，因此不同內(nèi)容導(dǎo)航需要不同的導(dǎo)航模式

1）種類

不同行業(yè)，不同業(yè)務(wù)重點(diǎn)對(duì)內(nèi)容的分類方式不同

種類可以是符合大眾認(rèn)知，具有并列關(guān)系的信息







2）字母

以字母順序排列信息。適用于信息量超大，且不存在主次、重要級(jí)關(guān)系的內(nèi)容。常見于聯(lián)系人列表，地區(qū)導(dǎo)航，介紹人名，合作伙伴等場(chǎng)景。







3）自然屬性

以時(shí)間，地理位置等屬性組織信息架構(gòu)。

時(shí)間：展示在一段時(shí)間內(nèi)發(fā)生的事情，以時(shí)間為導(dǎo)航可以直觀地感受到信息的變遷，立體感更強(qiáng)。例如一個(gè)企業(yè)的發(fā)展歷史

地理位置：展示在不同地理位置的事件信息，空間感更強(qiáng)

2.層級(jí)

也叫做結(jié)構(gòu)導(dǎo)航，根據(jù)信息的上下級(jí)關(guān)系、主體信息架構(gòu)等因素將信息有序排列。分為全局導(dǎo)航和局部導(dǎo)航。

全局導(dǎo)航往往指頁眉和頁腳，存在于網(wǎng)站的大部分頁面，便于用戶隨時(shí)跳轉(zhuǎn)。

頁眉：用戶進(jìn)入網(wǎng)站最先關(guān)注到的點(diǎn)，將網(wǎng)站進(jìn)行功能分類后，將導(dǎo)航文字放置在頁眉上

頁腳：此空間是為隱私和法律鏈接保留的，還會(huì)加上聯(lián)系方式，也有許多內(nèi)容繁重的網(wǎng)站會(huì)把站點(diǎn)地圖放置在頁腳。

局部導(dǎo)航是是更深層級(jí)的導(dǎo)航，不作用于全局，存在于特定的功能區(qū)，可分布在頁面各部分。

3.功能

業(yè)務(wù)上必要的一些功能入口，通常貫穿全局，例如很多網(wǎng)站的個(gè)人信息，用戶需要在大部分時(shí)刻都可直接接觸到該功能。根據(jù)用戶的心理模型，這類功能會(huì)存在于頁面的右上角。

4.搜索

用戶使用較多，也是最重要的導(dǎo)航方式之一。當(dāng)帶有明確的目的性或無法通過內(nèi)容，層級(jí)導(dǎo)航找到想要的信息時(shí)，用戶會(huì)在搜索框內(nèi)嘗試輸入一些信息。

為了讓搜索導(dǎo)航更有效地發(fā)揮其作用，出現(xiàn)了自動(dòng)填充，模糊搜索，推薦搜索，搜索歷史，搜索糾正等一系列導(dǎo)航功能，這些功能都是為了想辦法將用戶引導(dǎo)到他可能需要的頁面上。

5.網(wǎng)站地圖

以類似地圖的樣式來展示網(wǎng)站頁面之間的層級(jí)關(guān)系，并提供相應(yīng)的鏈接?？梢曅詮?qiáng)，便于用戶找到想要的信息。

四、導(dǎo)航的常見樣式

1.文字與圖標(biāo)

考慮到排版布局，樣式美觀，除了用文字本身的含義用作導(dǎo)航外，圖標(biāo)也經(jīng)常被用作導(dǎo)航，分為純圖標(biāo)導(dǎo)航和文字+圖標(biāo)導(dǎo)航，這里圖標(biāo)的風(fēng)格會(huì)很大程度上影響這個(gè)頁面的視覺效果

2.橫向?qū)Ш?/h2>將導(dǎo)航文字橫向有序地排列，獨(dú)立性強(qiáng)，占用空間較少，可放置的導(dǎo)航條目有限，但這個(gè)局限性也可以成為優(yōu)點(diǎn)，它要求設(shè)計(jì)師創(chuàng)造出簡(jiǎn)短，易于理解，且滿足業(yè)務(wù)需求的標(biāo)題。

當(dāng)內(nèi)容過多時(shí)會(huì)選擇在單個(gè)導(dǎo)航下放置下拉顯示二級(jí)導(dǎo)航，下拉顯示的二級(jí)導(dǎo)航可以很長(zhǎng)或采用滾動(dòng)顯示的方式，這種臨時(shí)的模態(tài)導(dǎo)航可以最大限度地利用到屏幕空間。

很多網(wǎng)頁的橫向頁眉導(dǎo)航會(huì)保持滑動(dòng)時(shí)固定的樣式，便于用戶時(shí)時(shí)找到主頁面的入口。

3.豎向?qū)Ш?/h2>占用空間較多，通常放置在頁面左邊位置，用不同的底色或分割線將其與主內(nèi)容分開，內(nèi)容文字一般采用左對(duì)齊，便于閱讀，導(dǎo)航層級(jí)過多時(shí)會(huì)采用點(diǎn)擊展開的樣式，上下滾動(dòng)的常用交互也讓豎向?qū)Ш饺菁{的內(nèi)容更多。

部分豎向?qū)Ш绞强呻[藏或收縮的

4.混合導(dǎo)航

在擁有復(fù)雜信息的網(wǎng)頁中，會(huì)將橫向?qū)Ш?，豎向?qū)Ш降绕渌麡邮交旌鲜褂茫?br>

5.面包屑

面包屑導(dǎo)航是位于頁面頂部或底部的一行內(nèi)部鏈接，在不同層級(jí)的鏈接之間用“>”分隔，可讓訪問者快速返回上一版塊或根網(wǎng)頁。許多面包屑導(dǎo)航都將內(nèi)容最寬泛的頁面（通常為根網(wǎng)頁）設(shè)置為最左邊的首個(gè)鏈接，并在右側(cè)列出更具體的部分。

占用很少的空間并提供主導(dǎo)航實(shí)現(xiàn)不了的深層次定位功能。

面包屑的使用讓網(wǎng)站的結(jié)構(gòu)更加清晰，強(qiáng)化用戶的心理層級(jí)模型，并實(shí)現(xiàn)跨層級(jí)跳躍

6.分頁與無限滾動(dòng)

分頁顯示的內(nèi)容數(shù)量固定，有時(shí)用戶可自定義內(nèi)容數(shù)量，此外頁面上通常有當(dāng)前頁，任意頁，上一頁，下一頁，首頁，末頁的鏈接。具有定位性，當(dāng)用戶需要回到之前瀏覽過的某個(gè)位置時(shí)，可采用分頁的形式




無限滾動(dòng)希望用戶只注意當(dāng)前頁的內(nèi)容且不能快速到達(dá)頁面的底部，適用于無法預(yù)測(cè)用戶何時(shí)能夠找到需要的信息的情況。在一些圖片展示，內(nèi)容推送的網(wǎng)站上設(shè)計(jì)者不知道用戶想要的內(nèi)容，同時(shí)也要展現(xiàn)網(wǎng)站內(nèi)容豐富，資源庫(kù)深不見底的特質(zhì)會(huì)采用交互上更簡(jiǎn)單的無限滾動(dòng)模式。

7.突出的版式

一些設(shè)計(jì)者想要用戶優(yōu)先注意到的內(nèi)容，會(huì)采用突出的版面設(shè)計(jì)，通過改變文字圖形的大小，顏色等與其他一般性內(nèi)容形成對(duì)比或使用海報(bào)，彈窗等形式試圖引導(dǎo)用戶行為。

五、導(dǎo)航設(shè)計(jì)的建議

1.一致性

同一類型導(dǎo)航的視覺表現(xiàn)與交互操作在整個(gè)網(wǎng)站頁面中要保持一致，清晰一致的導(dǎo)航可以讓用戶預(yù)見每一步操作的結(jié)果。




2.清晰性

顏色與大?。何淖诸伾c背景顏色的對(duì)比，標(biāo)題與內(nèi)容的字號(hào)大小，這些最基本的元素直接影響導(dǎo)航的清晰度

留白與裝飾：與平面設(shè)計(jì)中原理一樣，留白讓網(wǎng)站頁面布局平衡，張弛有度；裝飾與留白相結(jié)合，讓導(dǎo)航表現(xiàn)得更精美，也有助于視覺分割

強(qiáng)調(diào)與弱化：有些導(dǎo)航起引導(dǎo)作用需要突出，有些起輔助作用需要弱化，強(qiáng)弱對(duì)比結(jié)合豐富了視覺層次，并讓導(dǎo)航起到它該起的作用




3.凸顯超鏈接

將可點(diǎn)擊的超鏈接文本與常規(guī)文字在樣式和交互上進(jìn)行區(qū)分，常見做法有下劃線，文字顏色，加粗，鼠標(biāo)懸浮變色。




4.在常規(guī)位置放置導(dǎo)航

網(wǎng)頁發(fā)展的幾十年讓用戶對(duì)網(wǎng)頁產(chǎn)生了一些常識(shí)性認(rèn)識(shí)，例如用戶會(huì)在進(jìn)入一個(gè)網(wǎng)站時(shí)去頁眉或側(cè)邊欄尋找主導(dǎo)航，盡量遵循這些常規(guī)用法。




5.導(dǎo)航數(shù)量不宜過多

無論是全局或局部導(dǎo)航，數(shù)目越多用戶處理和記住信息的難度越大，可以通過分組分層來提高信息瀏覽效率







6.側(cè)邊欄

側(cè)邊欄導(dǎo)航會(huì)占據(jù)一部分的屏幕空間，將其與主內(nèi)容部分進(jìn)行分割有助于用戶，例如用反差較大的背景色形成導(dǎo)航區(qū)與內(nèi)容區(qū)

加入導(dǎo)航收縮功能，以便更好地利用屏幕空間，特別是在一些小尺寸屏幕上。

六、導(dǎo)航設(shè)計(jì)審查：

在做完網(wǎng)頁設(shè)計(jì)后可以根據(jù)瀏覽網(wǎng)頁的一般習(xí)慣，通過以下幾個(gè)方面對(duì)導(dǎo)航設(shè)計(jì)進(jìn)行簡(jiǎn)單審查

問自己以及團(tuán)隊(duì)其他成員以下幾個(gè)問題

1.這是什么網(wǎng)站

2.網(wǎng)站有哪些主要內(nèi)容

3.導(dǎo)航看上去是否像是導(dǎo)航，可點(diǎn)擊的

4.導(dǎo)航的名稱是否會(huì)引起歧義

5.現(xiàn)在處在網(wǎng)站的哪個(gè)層級(jí)

6.如何進(jìn)退

7.具體的功能是否會(huì)在預(yù)想的地方出現(xiàn)

8.怎么進(jìn)行內(nèi)容搜索

借助工具

9.使用Google Analytics對(duì)網(wǎng)站的訪問情況進(jìn)行回顧并進(jìn)行一些評(píng)估

例如一些頁面的瀏覽量極低于預(yù)期或相較于同類頁面瀏覽差距過大，就要考慮是否是指向該頁面的導(dǎo)航出現(xiàn)了問題。

總結(jié)

導(dǎo)航的最終目的是簡(jiǎn)化獲取信息的過程，具體以何種方式表達(dá)還需要取決于業(yè)務(wù)內(nèi)容，但總體上要以用戶易接受的方式呈現(xiàn)。用戶若是能在獲取信息的過程中按照設(shè)計(jì)者所想的方式前進(jìn)并感受到暢通無阻的快感，導(dǎo)航便是成功的。

想要學(xué)習(xí)或者提升設(shè)計(jì)可以來AAA教育。

相關(guān)推薦：