中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

小編導(dǎo)讀：導(dǎo)航作為用戶體驗重要組成，僅僅是達到目的的一個手段——目的就是消費內(nèi)容。這就是為什么用戶對內(nèi)容和導(dǎo)航會有不一樣的期望。內(nèi)容應(yīng)該是獨一無二的、令人驚訝的、令人激動的，導(dǎo)航應(yīng)該是簡單的、盡可能符合預(yù)期。

這個系列文章，分為兩個部分，是一個「四步走」的指南，用于簡化導(dǎo)航的體驗。通過分析內(nèi)容的類型和數(shù)量，選擇并精心設(shè)計正確的導(dǎo)航菜單。

「四步走」——理想的導(dǎo)航系統(tǒng)

要做一個可用的導(dǎo)航系統(tǒng)，網(wǎng)頁設(shè)計師必須按順序回答以下4個問題：

1. 如何組織內(nèi)容？

2. 如何解釋導(dǎo)航的選項？

3. 哪種導(dǎo)航菜單最適合容納這些選項？

4. 如何設(shè)計導(dǎo)航菜單？

前兩個問題關(guān)注構(gòu)建和便簽內(nèi)容，通常稱為信息架構(gòu)。信息架構(gòu)師通常用網(wǎng)站地圖(site map diagram)來可視化他們的工作成果。

網(wǎng)站地圖給出一個網(wǎng)站的導(dǎo)航結(jié)構(gòu)

然而，由于某些原因（后面會詳細解釋），用網(wǎng)站地圖來并不能提供最好的體驗。設(shè)計一個定制導(dǎo)航菜單，容納、整理、逐步揭開它們的選項也是很重要的，所以要讓用戶舒適地瀏覽、尋找、忽視選項。

成功設(shè)計這樣一個導(dǎo)航菜單，還需要回答后兩個問題，這關(guān)乎到導(dǎo)航體驗的交互設(shè)計。前兩個問題會在Part 1里談到，后兩個問題在Part 2。(Part 2還沒寫??！)

構(gòu)建內(nèi)容

要恰當(dāng)?shù)貥?gòu)建網(wǎng)站的內(nèi)容，首先要考慮用戶是如何尋找信息，然后用與之適應(yīng)的方法來構(gòu)建內(nèi)容。

用戶是如何尋找信息

當(dāng)用戶找些什么東西的時候，如，車、食譜、財務(wù)服務(wù)、衣服…… 他們不一定知道這些東西的確切名字。如果我們假設(shè)用戶知道它們的確切名字，那么我們就認為最近的方法就是提供一個A-Z的索引表，又或是提供一個搜索框。

事實上，事情并不是這么簡單。即使用戶知道確切的名字，A-Z的索引表和搜索都會有先天的交互問題，它們不能成為主導(dǎo)航，這個放到Part 2中再討論。然而，用戶通常不知道確切的名字，他們也不關(guān)心這些名字；他們有關(guān)鍵字或是關(guān)于物品的特征描述。

指引用戶找到正確內(nèi)容的第一步，匯集并分類網(wǎng)站的內(nèi)容。

元數(shù)據(jù)(META DATA)是導(dǎo)航系統(tǒng)的基礎(chǔ)

元數(shù)據(jù)就是收集內(nèi)容的信息——信息的信息。

不需要理會具體內(nèi)容，每個條目都歸屬于不同的元數(shù)據(jù)類別，如：政治類文章、屏幕尺寸、視頻的導(dǎo)演、衣服的領(lǐng)口……當(dāng)然，還有一些類別是大家共有的，如：價錢、受歡迎程度……

通過這些元數(shù)據(jù)類別，用戶可以瀏覽內(nèi)容。然而，給用戶提供所有的可能方式去瀏覽內(nèi)容時不現(xiàn)實，也沒好處。這樣會讓界面混亂，讓導(dǎo)航的過程變復(fù)雜，甚至?xí)煜脩?，以至于他們會拋棄這個網(wǎng)站。

小心地考量是否要，或是在哪個階段展示這些類別。

元數(shù)據(jù)類別的3種類型

決定什么時候展示元數(shù)據(jù)類別，首先把類別劃分成3個組別：重要的，可選的，無關(guān)的。

信息架構(gòu)的一大挑戰(zhàn)就是按照重要的，可選的，無關(guān)的來分類，這很大程度上取決于目標(biāo)用戶的偏好，網(wǎng)站的目的，內(nèi)容的量。一旦你選定了適合的分類標(biāo)準(zhǔn)，這里有一些簡單的規(guī)則來幫你決定什么時候展示什么類別。

重要的類別

重要的類別是指對所有目標(biāo)用戶的很重要。這樣的類別一般較少，但至少每個條目都會有一個重要的類別，這可以簡化設(shè)計師的工作，同時提供更好的導(dǎo)航體驗。

決定重要類別

對食譜來說，元數(shù)據(jù)的類別可能是“過程”、“原料”、“特殊飲食”、“場合”、“烹飪方式”、“烹飪時間”。在這些類別中，最重要的可能是“過程”。不是每個人都有特殊飲食喜好，也不是每頓飯都會有特別的場合，但是幾乎每個人都會把他們的餐飲分為開胃菜、主菜、配菜、沙拉、甜點等。

由于“過程”對每個人來說都是如此重要，首先提供的類別就應(yīng)該是“過程”。

食譜中，“過程”是最重要的元數(shù)據(jù)類別

就像前面提到的，目標(biāo)用戶或是網(wǎng)站目的會影響分類，特別是小眾網(wǎng)站(niche websites)。

例如，“烹飪方式”與一般人去食譜的網(wǎng)站的目的沒有聯(lián)系。但是如果有一個網(wǎng)站收集了地球上最好的烹飪食譜，“烹飪方式”可以成為重要類別，你可以增添這樣一個重要類別，也可以取代“過程”成為唯一的重要類別。無論如何，“烹飪方式”才是這個網(wǎng)站的主題，先展示它才是最適合的做法。

小眾網(wǎng)站會有不一樣的重要類別

整理重要類別

上面的例子是有一個重要類別。然后，當(dāng)你有一大堆條目，就會有各種不同的重要類別。

拿衣服做例子。衣服的類型是一個重要類別，如：“襯衫”、“褲子”、“鞋”、“毛衣”……還會有其他類別，性別、場合，如：“休閑”、“工作”、“舞會”。我們還能找到更多的重要類別。

一開始，把所有的重要類別放在同一個層級似乎很有邏輯。事實上這樣做完全不符合邏輯。重要類別應(yīng)該一個接一個，有順序地出現(xiàn)?？聪孪旅孢@個網(wǎng)站信息架構(gòu)，你大概就明白。

水平的導(dǎo)航欄通常會列出所有種類的商品

這個導(dǎo)航欄列舉了商品的種類，“居家配件”、“打獵&釣魚”、“戶外工作”、“鞋”、“衣服”。但是，對于“衣服”這個類別，設(shè)計師做了一點不一樣的處理。衣服被劃分成“男士”、“女士”，而不是把各種類型的衣服都列舉在這個水平的導(dǎo)航欄上，設(shè)計師決定用更少的分類。用戶從“男士”、“女士”開始，然后才在下拉菜單中看到衣服的所有種類，從而提供更多的選項。

用更少的分類來騰出空間

這樣的處理方式產(chǎn)生的問題就是，兩個分類放在同一個層級里面?！靶惺俊焙汀澳惺俊眱煞N路徑，它們處于相同的層級，使得用戶要在其中做出選擇，這破壞了兩種分類都很重要的假設(shè)。因此，其中一條路徑應(yīng)該會去除——大概是“鞋→男士”吧。

可選的類別

如果有多個重要類別存在，那么其中一些條目就無需納入其中。如果一個網(wǎng)站只有十多個衣服條目，那么只需要簡單地提供“男士”、“女士”的選擇就好。

在很多案例中，事情走向了另一個方向。即使使用了所有的重要類別進行篩選，還是出現(xiàn)很多條目。所以，需要額外的類別，讓用戶進行進一步篩選內(nèi)容?？蛇x類別就是出現(xiàn)在這種情形。

可選分類對部分用戶有用。例如，“汽車”的兩個元數(shù)據(jù)類別，“門的數(shù)量”、“燃料類型”。一些人可能對燃料特別感興趣，不太介意是幾門的汽車，而另一些用戶可能會有相反想法。

重要類別優(yōu)先于可選類別

可選類別應(yīng)該出現(xiàn)在用戶使用主要類別進行篩選之后。

然而，很多零售網(wǎng)站，譬如賣電子產(chǎn)品或是時裝，會把品牌（可選類別）放到和產(chǎn)品類型（重要類別）一樣的層級。

重要類別和可選類別應(yīng)該放在不同的層級

這個方法會出現(xiàn)的問題：如果用戶選擇了一個品牌，然后就會出現(xiàn)上百個條目，他就必須選擇衣服類型進行進一步篩選。所以把可選和重要放在同一個層級會增加多余的路徑，添加選擇的復(fù)雜性、導(dǎo)航的混亂度。

提供各種過濾器不是壞事，但是不要在一開始就把各種導(dǎo)航選項提供給用戶，先提供重要的選項，重要的選修都用完了，再引入可選的。

所以，上述的案例，在這個層級里去掉品牌，先讓用戶選擇衣服類型。再下一個層級中，才提供品牌的選擇。

只有在用戶已經(jīng)選擇重要類別后，可選類別才能出現(xiàn)

動態(tài)過濾器

前面提到，重要類別應(yīng)該一個接一個，有順序地出現(xiàn)。所有可選類別最好是同時提供。

除了一種例外情況，如果可選類別互斥，那么它們就應(yīng)該像重要類別那樣處理（前面提到“男士”、“女士”就是一組互斥的類別），出現(xiàn)在下一個層級的同一菜單中。如果可選類別可能會被合并，它們就應(yīng)該做成動態(tài)過濾器。

在下面的截圖中，可以看到Sears在面包屑路徑中列出了重要類別，可選類別就成為冬天過濾器。

可選類別被合并成為動態(tài)過濾器

重要類別和可選類別之間的差異可以這樣解釋。每一個類別都是一個內(nèi)容的過濾器，動態(tài)過濾器之所以動態(tài)是因為它允許用戶選擇和改變多個多個值。相反，在傳統(tǒng)的層級化導(dǎo)航系統(tǒng)里面，用戶只有在不同的層級才能選擇值。如果是重要類別，像之前的例子，就不會出現(xiàn)問題；但是可選類別，情況就不一樣了。

當(dāng)用戶尋找一件襯衫，很多可選類別都會發(fā)揮作用：“品牌”、“衣領(lǐng)類型”、“袖長”、“布料”、“圖案”、“口袋數(shù)”、“折扣”、“價錢”、“評價”、“受歡迎程度”等等。了解用戶糾結(jié)對哪個類別感興趣是很困難的，有的人可能都沒興趣，有的人會對多個、甚至全部都感興趣。

與其一個接一個地給出可選類別，設(shè)計師應(yīng)給提供一個動態(tài)的可選過濾器。這樣，用戶就可以只選擇感興趣的類別。

相反，下面的網(wǎng)站就沒有明確區(qū)分出重要類別和可選類別。它把所以類別，包括重要類別都做成動態(tài)過濾器。

重要類別不應(yīng)該做成動態(tài)過濾器

區(qū)分的缺失會導(dǎo)致一系列問題。第一，占據(jù)了大量豎直空間，使其他可選類別往下移，讓用戶經(jīng)常滾動才能看到，并做出選擇。

第二，動態(tài)過濾器是一個“重型裝備”：它很厲害，但是很耗費資源。當(dāng)用戶選擇一個值，整個列表的值也會隨之改變。這個提供了及時反饋，但是交互卻變慢了。用傳統(tǒng)的導(dǎo)航菜單，選擇重要類別也能得到相同的結(jié)果，而且也會更快。

事實上，Nike的設(shè)計師的確提供了這樣一個菜單，讓我們驗證了這個假設(shè)，在同一個界面里面測試兩種方式的方式，比較他們的速度和效率。

重要類別還是應(yīng)該做成傳統(tǒng)的導(dǎo)航菜單

互斥類別

動態(tài)過濾器只有在可選類別可以被合并時才能使用。如果可選類別是互斥的，那么它們就應(yīng)該放在主導(dǎo)航菜單的下一個層級。

下面的截圖，Daily Express在最開始就問了用戶一個問題：選擇一種新聞的類型，如：“財經(jīng)”、“娛樂”、“生活”。然后在主頁的選擇部分，會給出這個類型的一些新聞?wù)?，幾乎所有用戶都會去看其?~4篇新聞。對于那些想要看特定主題的讀者，在第一層導(dǎo)航下面列舉了子欄目。

互斥的可選類型最好放在主導(dǎo)航菜單的下一個層級

上面的子欄目可以視作互斥類別，應(yīng)為一個娛樂項目不會既是一本書，又是一個電影。當(dāng)然，合并也是可以的；書也可以放到電影欄目里面，但是文章摘要又怎么匹配這種分類方式？如果不能匹配，那動態(tài)過濾器就有意義。

這個問題的答案，取決于條目的數(shù)量和多樣性，而不是類型，當(dāng)然也取決于目標(biāo)用戶的偏好。

譬如，用戶不會尋找中式、低脂、圣誕主題的早餐；相反，他們會去找一個既不中式，也不低脂，也不是圣誕主題的早餐?？蛇x類別就很難合并在一起，如果一個網(wǎng)站有上千個食譜，而目標(biāo)用戶又會有各自的偏好，動態(tài)過濾器就會很有用。

一大堆不同種類的內(nèi)容+個性化的用戶偏好，就需要動態(tài)過濾器

最后，第3個元數(shù)據(jù)組別。

無關(guān)類別

無關(guān)類別就是目標(biāo)用戶不看的內(nèi)容，但是它們也是交互中的一部分。

文章的元數(shù)據(jù)類別里面“字數(shù)”、“圖片數(shù)”。這些類別都會在數(shù)據(jù)庫中占據(jù)位置，內(nèi)容策劃者可能會查看這些類別，來推斷文章是否過長，是否太少圖片。這可能是用戶沒看完內(nèi)容就關(guān)閉網(wǎng)站的原因。內(nèi)容策劃者就會與設(shè)計師或者客戶討論這些可以提升內(nèi)容質(zhì)量的東西。這些類別對設(shè)計師很有價值，但是用戶不會因為“字數(shù)”、“圖片數(shù)”來選擇文章。

簡單來說，無關(guān)類別不應(yīng)該出現(xiàn)在頁面，它們會被忽視，會照成界面混亂，甚至混淆用戶。但是，無關(guān)類別可以轉(zhuǎn)化為可選類別。

例如，“字數(shù)”可能是個無關(guān)類別。但是下面的網(wǎng)站就積累了大量文章，因此設(shè)計師覺得有必要增加“文章長度”作為內(nèi)容的過濾器。

無關(guān)類別可以轉(zhuǎn)化為可選類別

上面展示食譜、衣服的網(wǎng)站也可以用來解釋優(yōu)化類別的重要性，因為它們對元數(shù)據(jù)類別有需求。但是它們沒有談到一個很多設(shè)計師都會遇到的問題，特別是設(shè)計公司網(wǎng)站時會遇到。

公司產(chǎn)品分類

很多食譜網(wǎng)站會不加選擇地收集食譜，然后讓設(shè)計師去分類。但是公司通常都有內(nèi)部的產(chǎn)品分類方式。這就可能會與需求沖突。

譬如說汽車的元數(shù)據(jù)類別。你可能會根據(jù)尺寸或是生活方式，如：“緊湊型”、“旅行車”、“運動型”、“轎車”、“豪華型”。這樣的分類很重要，因為每種車都是根據(jù)特定的生活方式設(shè)計出來，幾乎對每一個駕駛者來說都是如此。緊湊型，就是小巧、便宜、易于駕駛和方便停車；旅行車就很適合家庭；運動型……

很多汽車公司都會有自己的分類方案。寶馬，就是按數(shù)字來進行分類。

有時這種分類方案很有效

這種公司的內(nèi)部分類方案會導(dǎo)致可用性問題，寶馬的方案在信息架構(gòu)上的確很好。這種方案知名度也很好，數(shù)字與車的尺寸相匹配，某種程度上也算是典型的以“緊湊型”、“轎車”、“豪華型”進行分類。在這個案例中，換成其他分類方式反而會讓用戶不適。

下一個例子就沒那么直白。Opel用自己的內(nèi)部命名約定來列舉車。

內(nèi)部分類對外部用戶就不夠直接

這種產(chǎn)品線的架構(gòu)不清晰，而且這樣的滑動瀏覽汽車的交互也很麻煩（唔……這是一個交互問題）。用戶不能理解車與車的區(qū)別，也就不能按照喜好來過濾。

如果分類方案本身不夠好，那么一個讓人熟悉的外部類別的優(yōu)先級應(yīng)該更好。

注意到，大眾也有自己的名稱分類：“Jetta,” “Passat,” “Touareg,” etc. 但是公司最注重常見的外部方案。結(jié)果就是，菜單更容易被理解，用戶也能更專注于他們喜歡的產(chǎn)品線。

優(yōu)先使用常見的外部方案使導(dǎo)航菜單更容易被理解

客戶可能不喜歡他們的分類方案歸為次要位置。但是，信息架構(gòu)師就是被請來把網(wǎng)站內(nèi)容變得易于瀏覽，你有與客戶溝通的義務(wù)。

解釋導(dǎo)航選項

根據(jù)用戶偏好來做構(gòu)造導(dǎo)航選項是簡化網(wǎng)站信息架構(gòu)的重要一步。但如果用戶一開始就不能理解這些選項，那最精巧的架構(gòu)都沒用。所以，先要考慮解釋導(dǎo)航選項的最佳方法。

給用戶足夠的理解選項的信息量。過多的信息會有混淆界面，減慢導(dǎo)航，甚至讓用戶放棄使用的風(fēng)險。

也不要給太少的信息。如果用戶要猜測，鏈接指向哪里，哪里結(jié)束，他們很快就會對界面失去信心，離開網(wǎng)站。

設(shè)計師可以選擇一種方式來解釋導(dǎo)航選項：

1. 標(biāo)簽

2. 標(biāo)簽+圖

3. 標(biāo)簽+圖+描述

選擇正確的方式，先評估用戶對標(biāo)簽的熟悉程度

標(biāo)簽

如果你用的標(biāo)簽已被人熟知，那么只使用標(biāo)簽就夠了。解釋“牛仔褲”、“短褲”、“襯衫”、“夾克”不需要使用大圖和長描述。

熟悉的條目，用標(biāo)簽足夠了

保持標(biāo)簽很值得稱道，但簡潔不應(yīng)該以清晰為代價?？s寫和術(shù)語可是可以的，如：UX, BMI(body mass index)，前提是目標(biāo)用戶熟悉它們。

有時，盡管術(shù)語本身沒有問題，但是前后文可能會讓它產(chǎn)生歧義。很多大型機構(gòu)的網(wǎng)站包含一個固定水平導(dǎo)航來指向機構(gòu)的主要業(yè)務(wù)，和一個隨內(nèi)容變化的豎直導(dǎo)航來指向下屬機構(gòu)。這樣會出現(xiàn)重復(fù)的標(biāo)簽。巴斯大學(xué)(University of Bath)，“研究”這一標(biāo)簽出現(xiàn)在全局導(dǎo)航和左邊的豎直導(dǎo)航里。

有很多下屬機構(gòu)的大機構(gòu)經(jīng)常出現(xiàn)重復(fù)標(biāo)簽

雖然這個會迷惑用戶，細致地設(shè)計就可以避免歧義。上面這幅截圖，菜單上面的標(biāo)題“探索部門”就是很好的提示，下面的“研究”是指部門的，而不是學(xué)校的?；蛘呶覀兛梢允褂瞄L一點的標(biāo)簽，“關(guān)于我們”改成“關(guān)于此部門”之類的做法。

另一個給標(biāo)簽語境的方法就是使用數(shù)字，來表示這個類別下面有多少個條目。

在某些菜單中，數(shù)字可以配合標(biāo)簽一起使用

這樣的數(shù)字經(jīng)常出現(xiàn)在動態(tài)過濾器中。

動態(tài)過濾器旁邊經(jīng)常會出現(xiàn)代表條目的數(shù)字

很多用戶喜歡數(shù)字，但是要注意考慮什么時候展示它們。例如，瀏覽首頁的時候，用戶通常都不知道有多少內(nèi)容。這時候給出有多少內(nèi)容就可以說服用戶，他們會想，“這里一定有我想要的?！?/p>

在首頁標(biāo)注內(nèi)容數(shù)量可以說服用戶

當(dāng)然，如果內(nèi)容不多的情況下，你一定不想公開這個數(shù)字。

同樣地，用戶瀏覽分類，然后找到感興趣的主題，他們會查看相關(guān)的類別，即使只有幾個條目，又或者有很多條目。但是，這個時候展示數(shù)字就減低瀏覽速度，也會混淆界面。

在某些情境，統(tǒng)計數(shù)據(jù)會妨礙用戶‘

動態(tài)過濾器也會有同樣的情況。用戶會因為條目的數(shù)量而選擇某個類別嗎？如果是，那就標(biāo)出數(shù)字就講得通。如果不是，那只有那些你會去除，或者以灰色標(biāo)注的類別旁邊會有個“0”。

要不，用戶選擇某一個類別，才顯示類別的條目數(shù)；或者在動態(tài)選擇器選擇類別，才顯示相應(yīng)的條目數(shù)也是有用的信息。

圖標(biāo)是另一種會出現(xiàn)在標(biāo)簽旁邊的元素。精巧而又識別度高的圖標(biāo)是很有用的附加物。無需解釋選項的區(qū)別，圖標(biāo)就是很好的區(qū)別。下面的截圖中，我移走了菜單上的圖標(biāo)，你會注意到標(biāo)簽本身就可以解釋選項的意義。

’

標(biāo)簽足夠了，但會花費一點時間去識別。

然而，加上圖標(biāo)可以讓用戶更好地識別和區(qū)別選項。

圖標(biāo)使得識別的過程變得更容易

但是，只會圖標(biāo)會也會讓人迷惑。即使圖標(biāo)已經(jīng)為大家所熟知，用戶還是不太確定究竟它代表什么。

標(biāo)簽+圖

對于熟悉的條目，標(biāo)簽和圖標(biāo)都很好用。對于特殊的條目，圖片就很有必要。例如，品牌名稱。下面的截圖里，車都是以純文字出現(xiàn)在菜單。

品牌名稱只有標(biāo)簽是不足以被理解

我不知道“Tribeca”和“Legacy”分別代表什么。標(biāo)簽不足以讓我做出選擇，帶圖片的標(biāo)簽可能是一個更好方案。

標(biāo)簽+圖對于不熟悉的術(shù)語是個更好的方案

在導(dǎo)航上用圖片或圖標(biāo)是一件很有趣的事。譬如描述特定的產(chǎn)品，“13-inch Macbook Pro”、 “Samsung Galaxy Note 3”，除了產(chǎn)品圖，沒有更好的方案。

但是描述一類類別就沒這么簡單。在某些菜單中，圖標(biāo)可以被用來描述類別。

’

在某些菜單中，圖標(biāo)可以被用來描述類別

在另一些菜單中，會用真實的產(chǎn)品圖片來做這件事。

在某些菜單中，會用真實的產(chǎn)品圖片來描述類別

對于產(chǎn)品分類，圖標(biāo)可能比圖片更適用。一個寫實圖標(biāo)讓整個菜單變得更專業(yè)。

用真實的產(chǎn)品圖片還可能產(chǎn)生新的問題。用戶會下意識問，“為什么這個產(chǎn)品可以代表這個類別？”、“這就是這個類別最好的產(chǎn)品？”、“我可以在這個網(wǎng)站找到其他產(chǎn)品嗎？”……如果他們點進去發(fā)現(xiàn)第一個產(chǎn)品就是菜單上面的那個，這種憂慮還會擴大。相反，圖標(biāo)只是代表一個產(chǎn)品類別，僅此而已。

圖標(biāo)還是有一定的標(biāo)準(zhǔn)。如果畫得不好，會顯得很業(yè)余。如果不能被辨認出來，會混淆用戶。所以當(dāng)你無法保證圖標(biāo)的專業(yè)性和可識別性，還是用圖片吧。

標(biāo)簽+圖+描述

有時標(biāo)簽+圖都不夠用。服務(wù)商提供一些復(fù)雜的方案，譬如銀行、保險經(jīng)紀(jì)、ISPs，然后它們的產(chǎn)品名像這樣，“50 Plus”、“Web on the Go”。一對夫婦跟保險經(jīng)紀(jì)談話，一個女孩在打電話，這樣的圖片無法描述服務(wù)商提供的服務(wù)。對于這種情況，幾行描述+標(biāo)簽+圖才是最有效的方法。

復(fù)雜的產(chǎn)品就需要標(biāo)簽+圖+描述，才能被理解

頭條、文章標(biāo)題這類標(biāo)簽，可能需要，也可能不需要圖和描述。

很多作家支持標(biāo)題只需要關(guān)鍵信息點，而且要盡量簡短。

建議：標(biāo)題只需要關(guān)鍵信息點，而且要盡量簡短

標(biāo)題很簡短，也有關(guān)鍵信息，但是這樣的書寫風(fēng)格有它的風(fēng)險，而且并不適合所有的網(wǎng)站。

應(yīng)不應(yīng)該，或者怎么樣寫描述。事實上BBC的標(biāo)題是有描述的，上面那副圖只是被我去掉而已。下面那幅圖是有描述，你會發(fā)現(xiàn)基本上都是頭條新聞的詳細敘述，沒有大量的新信息。

描述包含標(biāo)題未傳達的信息

如果標(biāo)題應(yīng)該像上面那樣用關(guān)鍵詞來堆砌，那么描述的意義并不大。因為只閱讀標(biāo)題也能達到引導(dǎo)文章的效果。

然而，只有標(biāo)題，或者用這種風(fēng)格來寫標(biāo)題不一定是最好的辦法。如果只是簡短的新聞時間，BBC風(fēng)格是一個不錯的選作。如果是一篇長文章，標(biāo)簽+圖+描述會更吸引人。

下面這個標(biāo)題更注重吸引人，然后再用幾行小字寫信息點。圖片可以設(shè)定基調(diào)。

標(biāo)簽+圖+描述更能深度闡釋文章

從一個小片段了解文章并不困難。用標(biāo)題抓住眼球，再用描述來闡釋文章，再配圖。這整個小片段給作者更多的空間去告訴讀者信息，并傳遞文章觀點。

那些關(guān)于標(biāo)題的建議，讓它在網(wǎng)站之外也被理解。因為標(biāo)題通常出現(xiàn)在搜索結(jié)果、社交媒體、或是其他文章里面。有些作者會做得更多，為這個目的設(shè)計書寫模板。

很多作者會嘗試讓標(biāo)題更容易在其他地方被理解

但是在增添前后文的時候，注意不要增添多余的信息。

上圖的標(biāo)題就沒有提供足夠前后文，因為在網(wǎng)頁設(shè)計里面，多欄式的版面可以出現(xiàn)在首頁、菜單、文章頁……并不局限于表格。所以，“表格可用性”這個額外增添的解釋，就是脫離了原文。其實不一定增添這樣一個東西，因為看文章的人大多知道這是在說什么。

搜索引擎的開發(fā)者知道，如果不能給出用戶想要的搜索結(jié)果，用戶就不會再用它了。所以他們會不斷地提升結(jié)果的相關(guān)性，加上一段描述、圖，改進算法——這些都是添加前后文的做法。如果一個標(biāo)題出現(xiàn)在另一篇文章的的推薦閱讀里面，文章本身就會提供前后文語境。至于社交媒體，一個人推薦的標(biāo)題，關(guān)注他的人也不會不知道他在說什么。

總結(jié)

信息架構(gòu)就是結(jié)構(gòu)化、標(biāo)簽化內(nèi)容，這也是導(dǎo)航的基礎(chǔ)。設(shè)計師可有效地簡化網(wǎng)站信息架構(gòu)，通過為目標(biāo)用戶減少或增加導(dǎo)航的選項，同時也要減低這些選項的認知難度。

這篇文章的建議可以總結(jié)為兩個列表，“結(jié)構(gòu)化內(nèi)容”和“便簽化條目”。

結(jié)構(gòu)化內(nèi)容

收集和分類用于導(dǎo)航的元數(shù)據(jù)。

以重要的、可選的、無關(guān)的來給這個元數(shù)據(jù)分組。重要的表示對所有用戶都很重要，可選的表示對部分用戶很重要，無關(guān)的表示對目標(biāo)用戶不重要。

在第一個層級展示一個重要類別。

如果第二層級的內(nèi)容不多，那就不再分類；否則，按順序，分層次提供其他重要類別。

所有的重要類別都用完以后，列出所有符合要求的內(nèi)容。

如果剩余內(nèi)容很多，可以在一個層次里面使用所有的可選類別。

如果可選類別互斥，那就再增添一個層次。如果可選類別可以合并，那就使用動態(tài)過濾器。

便簽化條目

如果大家都懂標(biāo)簽的意思，那就可以直接用。盡量保持簡潔明了。 可以在首頁和分類頁加數(shù)字標(biāo)示內(nèi)容數(shù)量。圖標(biāo)可以提高選項的識別度。

如果標(biāo)簽比較專業(yè)，那就考慮加圖。用圖標(biāo)來解釋選項，但是圖標(biāo)必須要畫得好看，而且易認。不然還是用圖吧。

對于復(fù)雜的服務(wù)或產(chǎn)品，要考慮為標(biāo)簽加圖和描述。描述應(yīng)該有新的信息而不只是復(fù)述標(biāo)簽。同時注意為標(biāo)題添加前后文時，不要創(chuàng)造多余的信息。

當(dāng)你簡化完整個架構(gòu)，用戶就想要舒適的體驗。因此你要設(shè)計一個容納選項導(dǎo)航菜單，并且交互要舒適。關(guān)于這一點會在Part 2里談到。

相關(guān)閱讀：有效地簡化導(dǎo)航-Part 2：導(dǎo)航系統(tǒng)

本文作者：@Anastasios Karafillis ? 翻譯：@lyzhie ? 來自：smashingmagazine