解釋網(wǎng)站導(dǎo)航選項(xiàng)的3種方法技巧

時(shí)間：2022-05-30 16:06:01 | 來源：網(wǎng)絡(luò)營銷

時(shí)間：2022-05-30 16:06:01 來源：網(wǎng)絡(luò)營銷

一個(gè)優(yōu)質(zhì)的網(wǎng)站只需要給用戶展示他們需要的信息就好，任何更多的信息都有使用戶疲勞、混亂界面和延遲導(dǎo)航的風(fēng)險(xiǎn)，甚至?xí)屗麄兎艞壃F(xiàn)在的選擇。所以，不要給他們太多的信息，如果用戶會(huì)猜測鏈接指向，然后對鏈接到的頁面很失望，他們會(huì)對界面失去信心，接著就會(huì)離開網(wǎng)站。

根據(jù)用戶喜好來構(gòu)建導(dǎo)航選項(xiàng)是簡化網(wǎng)站信息架構(gòu)的重要一步，但是如果用戶在第一時(shí)間不能理解選項(xiàng)，再精致復(fù)雜的結(jié)構(gòu)都是無用的。所以，考慮如何最好地有效地解釋導(dǎo)航選項(xiàng)，是一個(gè)設(shè)計(jì)師首先要做的事情，在此，我就借助億企邦的平臺(tái)跟大家分享3種方法來解釋網(wǎng)站導(dǎo)航選項(xiàng)：

1、標(biāo)簽

首先我們就要先評估目標(biāo)受眾群體最熟悉的標(biāo)簽，對于不同的標(biāo)簽我們也要使用不同的方法來對待：

（1）、常見的項(xiàng)目標(biāo)簽

如果使用的標(biāo)簽是為人熟知的項(xiàng)目標(biāo)簽，如：“SEO”，“網(wǎng)絡(luò)營銷”，“電子商務(wù)”……，那就必要去解釋什么了，直接添加設(shè)置就好了。

（2）、使用短標(biāo)簽

標(biāo)簽可以簡短，但是不能是以表意不清為代價(jià)。像UX和BMI的縮寫和術(shù)語，只要是目標(biāo)用戶熟悉就能較好得起作用。有時(shí)候單個(gè)術(shù)語是容易理解的，但是放在上下文中，可能就會(huì)模糊不清。

（3）、重復(fù)標(biāo)簽

許多大型組織的網(wǎng)站都有固定的指向主要工作的水平導(dǎo)航，和指向次要工作的與上下文相關(guān)的垂直導(dǎo)航。這可能會(huì)導(dǎo)致重復(fù)標(biāo)簽。如巴斯大學(xué)的網(wǎng)站(下圖)，在頂部的全局水平菜單和左側(cè)狹窄的垂直菜單上都有標(biāo)簽“Research”。

雖然這可能會(huì)迷惑用戶，但仔細(xì)的設(shè)計(jì)可以避免歧義。在上面的截圖中，菜單標(biāo)題“探索部門”是一個(gè)很好的指示，但在這之下的“Research”標(biāo)簽指向的是部門，而不是整個(gè)大學(xué)。絕對肯定的是，可以加長“About Us”的標(biāo)簽，改為“About This Department”。

（4）、類別標(biāo)簽

在一些菜單中，一個(gè)類別的條目數(shù)量用標(biāo)簽顯示。如下圖所示：



（5）、過濾選擇標(biāo)簽

這些數(shù)字通常在動(dòng)態(tài)過濾選擇面板中顯示。如下圖所示：

在許多有動(dòng)態(tài)過濾選擇的界面上，類別中的項(xiàng)目數(shù)量通常用一個(gè)值來顯示。

雖然許多用戶喜歡看這些數(shù)字，但設(shè)計(jì)師還是要仔細(xì)考慮何時(shí)去顯示它們。比如，通過查看主頁來猜測一個(gè)網(wǎng)站有多少內(nèi)容是困難的。所以，明確顯示有多少內(nèi)容可以贏得用戶，他們可能會(huì)想“對的，這個(gè)網(wǎng)站有我要的東西。”

主頁上量化的內(nèi)容讓用戶更容易操作。

在此，億企邦要提醒大家一點(diǎn)，那就是如果你的網(wǎng)站還沒有內(nèi)容，最好不要去透露這樣一個(gè)數(shù)字。

同樣的，當(dāng)用戶瀏覽某一類別并對其一特定主題感興趣，他們會(huì)想要探索相關(guān)的類別，即使不相關(guān)的類別包含更多條目而這個(gè)類別只有很少的東西。當(dāng)然，顯示的數(shù)字會(huì)拖慢瀏覽器加載速度，擾亂界面。

這種情況同樣適用于動(dòng)態(tài)過濾選擇面板。用戶會(huì)根據(jù)所包含的條目數(shù)量來選擇類別嗎？如果是這樣，這些顯示的條目數(shù)量就是有意義的。如果不是這樣，你應(yīng)該提供的唯一的一種反饋類型是顯示灰色或刪除零值的項(xiàng)。

另外，在動(dòng)態(tài)過濾選擇的情況下，顯示條目數(shù)量是有用的信息。一旦用戶選擇了一個(gè)類別，顯示這個(gè)類別的數(shù)量。

（6）、圖標(biāo)標(biāo)簽

圖標(biāo)是另一種有時(shí)會(huì)附加到標(biāo)簽上的元素。當(dāng)圖標(biāo)制作精良和易于識(shí)別時(shí)，它們將是非常有用的補(bǔ)充。當(dāng)沒有必要去解釋用戶的選項(xiàng)時(shí)，圖標(biāo)能更容易區(qū)分不同的選項(xiàng)。

在下面的截屏中，我將圖標(biāo)從菜單條目中刪除，注意到標(biāo)簽還是足以解釋每個(gè)選項(xiàng)，每個(gè)人都知道什么是“汽車”，“房車”，“摩托車”和“卡車”。

如果我們將圖標(biāo)放在標(biāo)簽旁邊能讓用戶更容易得理解和區(qū)別不同的選項(xiàng)。如下圖所示：

但是，單獨(dú)的圖標(biāo)就會(huì)引起混亂。即使這個(gè)圖標(biāo)是為人熟知的，用戶可能會(huì)不確定它在一個(gè)特定上下文中代表的意思。

2、標(biāo)簽和圖片

標(biāo)簽和圖標(biāo)在為人熟知的事物上起到很大作用。但是對于不常見的事物，圖像就是必須的，如：品牌名稱。在以下截屏中，汽車模型的名稱在標(biāo)簽中是純文本格式的文字。

但是，對于以上的分類標(biāo)簽，假如我們不知道什么是“Tribeca”或“Legacy”。標(biāo)簽還不足以幫助我來決定去探索哪些產(chǎn)品。像下圖所示，標(biāo)簽和圖片是一個(gè)更好得解決方式。

所以，億企邦覺得標(biāo)簽和圖片是解釋不熟悉術(shù)語的一種好方式。

什么時(shí)候在導(dǎo)航里使用圖像或是圖標(biāo)是一個(gè)有意思的問題。顯而易見的，解釋一個(gè)非常具體的項(xiàng)目，像“13-inch Macbook Pro”或是“Samsung Galaxy Note 3”，沒有什么比實(shí)際產(chǎn)品圖片更好的了。解釋一個(gè)產(chǎn)品類別并不簡單。在一些菜單中，這些分類在進(jìn)行解釋時(shí)會(huì)使用圖標(biāo)。

在其他菜單里，這些相同的分類使用實(shí)際產(chǎn)品的照片來解釋這個(gè)類別。比如在一些菜單中，使用實(shí)際產(chǎn)品的圖像來解釋這個(gè)類別。

對于產(chǎn)品類別來說，圖標(biāo)比圖片更加適合。使用制作精良的圖標(biāo)使菜單看上去顯得更加專業(yè)。并且，使用一個(gè)產(chǎn)品來代表這個(gè)產(chǎn)品類別可能會(huì)下意識(shí)地提升用戶的疑問。“為什么這個(gè)特殊的產(chǎn)品代表了這個(gè)類別呢？”“這個(gè)產(chǎn)品是他們最好的嗎？”“產(chǎn)品的范圍是以這個(gè)特定的項(xiàng)目為中心的嘛？”“如果我不是找這種物品，這對我來說就不是一個(gè)好網(wǎng)站。”如果用戶第一眼看到的商品類別和他們在菜單中看到的一樣時(shí)，這種憂慮可能會(huì)加強(qiáng)。相反，圖標(biāo)能不多不少地簡單表述一個(gè)類別中包含某類產(chǎn)品。

不過，圖標(biāo)的技巧必須達(dá)到某種標(biāo)準(zhǔn)。如果圖標(biāo)沒有畫好，看起來就會(huì)很不專業(yè)。并且，如果它不容易辨認(rèn)，它甚至?xí)煜脩?。所以，圖標(biāo)更適合產(chǎn)品類別，但是如果你沒有信心將圖標(biāo)做得專業(yè)和容易辨認(rèn)，你最好使用圖片。如果你又想做的利于搜索引擎抓取，利于網(wǎng)站優(yōu)化的話，可以參照億企邦的《網(wǎng)站導(dǎo)航的優(yōu)化方法和設(shè)置技巧》相關(guān)介紹來設(shè)置。

3、標(biāo)簽、圖片和描述

有時(shí)候，標(biāo)簽和圖標(biāo)還不足以解釋產(chǎn)品。許多服務(wù)提供商都有復(fù)雜的解決方式，像銀行、保險(xiǎn)服務(wù)公司和因特網(wǎng)服務(wù)提供商，經(jīng)常給他們的產(chǎn)品命名為“50+”和“活躍網(wǎng)站”。對于此類產(chǎn)品，幾行的描述和標(biāo)簽，再加上圖片會(huì)對用戶很有幫助。

對于一些復(fù)雜產(chǎn)品也許需要標(biāo)簽、圖片和描述才能理解。

標(biāo)題和文章題目是不同的標(biāo)簽，標(biāo)題可能需要附帶圖片和描述，而文章題目可能不需要。

許多作者建議前置標(biāo)題要有重要信息，并且保持標(biāo)題盡可能的短。

其中一種最常見的建議是保持短標(biāo)題，并且將重要信息前置。雖然這樣的標(biāo)題簡短而有重點(diǎn)，但是這種風(fēng)格并不適合每一個(gè)網(wǎng)站。

描述語句應(yīng)該傳達(dá)的是頭條標(biāo)題還沒有表述的信息。

如果頭條標(biāo)題里面就都是關(guān)鍵信息了，那么描述語句就不再需要。因?yàn)橛脩粼陂喿x完標(biāo)題后就可以點(diǎn)擊鏈接到文章了，再閱讀多余沒有新意的描述語句只為放緩閱讀速度。

但是，單獨(dú)顯示頭條標(biāo)題或是用這種方式寫標(biāo)題通常不太好或甚至是不明智的。如果一篇文章只是簡單地報(bào)道一個(gè)事件，那么像BBC這樣的標(biāo)題是一個(gè)好選擇。但是如果文章有更多的細(xì)節(jié)，那么標(biāo)題、圖片和描述將會(huì)更有效、更迷人。

下面截圖中的標(biāo)題比內(nèi)容更吸引人，關(guān)鍵信息被分在下面兩行。同時(shí)，旁邊的圖片為文章定下了基調(diào)。

如上圖所示，從小片段中了解這篇文章是講什么的并不困難。使用標(biāo)題作為焦點(diǎn)，使用描述來解釋文章，并用圖片來為文章定調(diào)，整個(gè)片段給了不僅能吸引用戶，也傳達(dá)了文章的觀點(diǎn)。

所以，億企邦覺得標(biāo)題、圖片和描述的混合使用通常是深入解釋新聞的最好方法。

億企邦點(diǎn)評：

對于網(wǎng)站導(dǎo)航除了在實(shí)用和方便加強(qiáng)理解力度之外，我覺得還應(yīng)該順應(yīng)潮流，添加新的功能和應(yīng)用，將實(shí)用和娛樂兩結(jié)合，比如添加最新要聞，各類選題等等。