街頭指示牌和面包屑——設(shè)計導(dǎo)航

你會發(fā)現(xiàn)自己在一所漂亮的房子里，身邊有一位漂亮的妻子，然后你會問：嗯，，，，我是怎么來的？——once in a lifetime

如果人們在網(wǎng)站上找不到方向，他們將不會使用你的網(wǎng)站。

1. 網(wǎng)站導(dǎo)航101法則

（1）你通常是為了尋找某個目標

• 這就像你在現(xiàn)實生活中逛超市時，想要找到草莓味的酸奶在哪里

（2）你會決定先詢問還是先瀏覽

• 先詢問，就像你會先詢問超市的工作人員，草莓味道的酸奶在哪里（搜索狂人，一進入網(wǎng)站就使用搜索框）
• 先瀏覽，就像你會先試著自己找找草莓味道的酸奶在哪里，實在找不到或者不想再找了，再去詢問超市的工作人員（鏈接狂人，先瀏覽再搜索）
• 先瀏覽還是先詢問，取決于用戶的時間成本以及網(wǎng)站是否有很好的導(dǎo)航機制

（3）如果選擇瀏覽，你將通過標志的引導(dǎo)在層次的結(jié)構(gòu)中進行

• 這就像你會依次找到超市的飲品區(qū)>>>牛奶區(qū)>>>很多牛奶，其中包含中你需要的草莓味酸奶

（4）最后，如果找不到想要的東西，你會離開

• 這就像通過上述方法你找不到草莓味酸奶

上述（1）~（4）所述過程，如下圖所示：

Paste_Image.png

無法承受的瀏覽之輕

1. 首先，我們來看看這些web空間的奇怪之處：

（1）感覺不到大小：我們無法得到一個網(wǎng)站的頁面數(shù)量，這會造成在實際使用過程中，我們很難知道是否已經(jīng)看到這個網(wǎng)站上所有感興趣的內(nèi)容，因此也很難知道什么時候該停止尋找

（2）感覺不到方向：在網(wǎng)站上沒有上下左右的方向，只有網(wǎng)站層級結(jié)構(gòu)的上一級和下一級

（3）感覺到到位置：不同于處在物理空間里，我們只能通過點擊鏈接向前移動，記住它在概念層次上的位置，然后重要順著以往的鏈接過去，所以書簽存在了

2. 如何解決這些奇怪之處——使用web導(dǎo)航

（1）當我們轉(zhuǎn)身網(wǎng)絡(luò)時，我們本來就是迷路的，我們也不能通過那些走道知道我們的位置，使用web導(dǎo)航則彌補了這種缺失的空間感

被忽視了的導(dǎo)航用途

1. 它告訴我們這里有些什么

2. 它告訴我們?nèi)绾问褂镁W(wǎng)站

3. 它給了我們對網(wǎng)站建造者的信息

WEB導(dǎo)航習慣用法

1. 把導(dǎo)航放在標準的位置讓我們快速定位，不必費力，標準化它們的外觀 讓我們更容易把它們與別的東西區(qū)分開來

2. web導(dǎo)航的習慣用法

Paste_Image.png

現(xiàn)在先別看，它們就在后面

1. 持久導(dǎo)航

（1）導(dǎo)航部分在這里，其中一些可能會根據(jù)你所在的位置有所變化，但它總會出現(xiàn)在這里，也會總是以同樣的方式為你服務(wù)

（2）應(yīng)該保持這4個元素可見

Paste_Image.png

2. 全局導(dǎo)航

我說的是每一頁

1. 每個地方都一樣，除了表單

現(xiàn)在我知道我們不是在堪薩斯

1. 網(wǎng)站的站點ID或LOGO就像建筑物的名稱，需要在每個頁面上見到，通常在左上角（或至少靠近左上角）

2. 站點ID代表了整個網(wǎng)站，在當前站點結(jié)構(gòu)上層次最高

3. 有2種方式讓它出現(xiàn)在頁面可視層次的首要位置

• 讓它成為本頁最顯眼的內(nèi)容

• 讓它涵蓋頁面所有其他元素

欄目

欄目（主導(dǎo)航條），是到達該站點主要欄目的鏈接，即站點層次結(jié)構(gòu)的最頂層

實用工具

實用工具是到達網(wǎng)站中不屬于內(nèi)容層次的重要元素的鏈接

1. 作用
   （1）幫助我們使用站點：注冊、登錄、幫助、站點地圖、購物車等
   （2）提供網(wǎng)站發(fā)布者的信息：關(guān)于我們、聯(lián)系我們等

2. 通常在持久導(dǎo)航上只能放置4~5個實用工具——用戶用的最多的那幾個工具

只要跺三次腳，說“我要回家”

持久導(dǎo)航是重要的元素之一是把用戶送回主頁的按鈕或鏈接，所以要讓一個返回主頁的按鈕始終可見

提供搜索

一個輸入框，一個按鈕，還有search兩個字。

1. 要避免以下幾項：

• 花哨用詞：他們會尋找“搜索”，所以不要使用“查找”、“快速查找”、“快速搜索”等花哨字樣
• 指示說明：不要有指示說明（可以有但是會顯得你很土），因為他們對搜索很熟悉
• 選項：如果存在任何混淆搜索范圍（整個站點還是部分站點）的可能性，一定要把它們列出來

2. 要謹慎提供選項

• 要謹慎提供選項，以便指定以何種方式搜索我們想要尋找的內(nèi)容（例如通過書名或作者搜索等）

頁面名稱或者說，為什么我喜歡在洛杉磯開車

關(guān)于頁面名稱，需要注意以下4點：

• 每個頁面都需要一個名稱，就像每個拐角都應(yīng)該有一個路牌
• 頁面名稱需要出現(xiàn)在合適的位置
• 名稱要引人注目，在大多數(shù)情況下，它應(yīng)該是這個頁面最大的文字
• 名稱要和點擊的鏈接一致

面包屑，你在這里

面包悄的層級菜單可以告訴你當前的位置，如果設(shè)計的好，面包屑是不言而喻的，下面是面包屑設(shè)計中的幾項最佳實踐：

• 把它們放在最頂層，它們高于所有內(nèi)容時最有效
• 使用“>”對層級進行間隔，這個符號在視覺上就暗示了沿著層級向前移動的動作
• 加粗最后一個元素，讓它得到應(yīng)有的突出

我依舊喜歡TAB的3個理由

1. 它們不言而喻
2. 它們很難錯過
3. 它們很靈活

來試試后備廂測試（trunk test）

1. 如果這個頁面設(shè)計良好，你應(yīng)該能毫不猶豫的回答以下問題：

• 這是什么網(wǎng)站？（網(wǎng)站ID）
• 我在哪個網(wǎng)頁上？（網(wǎng)頁名稱）
• 這個網(wǎng)站的主要欄目是什么?（欄目清單）
• 在這個層次上我有哪些選擇？（本頁導(dǎo)航）
• 我在導(dǎo)航系統(tǒng)的什么位置？（“你在這里”的指示器）
• 我怎么搜索？

2. 下面是后備廂測試的執(zhí)行過程：
   （1）在網(wǎng)站上任意選擇一個網(wǎng)頁，把它打印出來
   （2）拿到一手開外，或者斜過一個角度，讓你不能仔細觀察
   （3）盡快找到下面清單中的項目并畫上圈圈：

• 網(wǎng)站ID
• 網(wǎng)頁名稱
• 欄目清單
• 本頁導(dǎo)航
• “你在這里”的指示器
• 搜索