任何位置都能明確“我在哪里？這里有什么？從這里能去哪里？”

小時候，童話故事都告訴我們，迷路可不是一件好事。那會伴隨著困惑、沮喪、憤怒和恐懼。為了避免迷失方向，我們發(fā)明了各種導航工具，大到衛(wèi)星定位系統(tǒng)，小到指南針，人類在這一事情上，極具創(chuàng)意。

在網(wǎng)站上迷失方向，雖然不是什么生死攸關的事，但會帶來許多負面影響，如：用戶體驗下降、任務不能完成，用戶流失等。我們可以通過良好的導航系統(tǒng)來避免這個情況發(fā)生。好的導航系統(tǒng)可以幫助人們找到在網(wǎng)站中的位置，并幫助他們制定更好的查詢策略，增進對內(nèi)容的理解。

在制定解決方案前，先了解他們?yōu)槭裁磿月罚?/P>

1、當人們不能理解信息時，會產(chǎn)生迷惑

2、人們在查詢過程中迷失，不知道下一步該做什么

3、人們可能會在網(wǎng)站中失去方向感，無法回到以前的頁面，甚至是首頁

圖1

比如在圖1的這個網(wǎng)站中游走，你容易陷入進退兩難的境地。上圖中，兩個點擊打開的頁面，都沒有導航信息，甚至沒有任何離開當前頁面的出口。

4、  人們在在信息系統(tǒng)中偏離了方向，分散了注意力。人們因眾多的、喧賓奪主的信息而偏離了主要任務。關于這一點，可以參考交互指南之《突出重點，一目了然》

圖2

圖2中的登錄頁面，可謂琳瑯滿目，信息的豐富程度毫不遜色于首頁，難道設計者的目的，是希望用戶放棄登錄這個主要任務，去往“更重要”的地方嗎？

你也許會想，讓用戶不要迷路，不是非常簡單的事情嗎，我只要在所有頁面中放入全局導航，使他們能在網(wǎng)站的核心內(nèi)容之間移動。然后放入面包屑，讓他們了解自己所處的位置，一切不就完事大吉了。

但事實上果真如此嗎？全局導航也許能幫助用戶了解你網(wǎng)站的核心內(nèi)容，但在具體的任務中，比如圖3中的淘寶全局導航，如果放入在挑選商品或支付的頁面中，恐怕非但不能指引用戶，還會干擾到任務的完成。

圖3

 小心，別讓自己陷入導航系統(tǒng)的過度設計中去。我們所要做的，是使用人物角色和場景作為參考，確定人物角色會選擇的到達內(nèi)容的最佳路線，而不是提供所有線路，更不需要將網(wǎng)站的全部結(jié)構復制到每個頁面當中，造成頁面信息負擔。好的導航系統(tǒng)讓人們感知不到它的存在。就好象在觀看體育比賽時，裁判會做出許多正確的判定，而我們往往忽略他的存在，但一旦裁判員做出了一個錯誤的判決，就會引來場上觀眾的一片唏噓。

那么，我們應該怎樣做，才能保證用戶不在網(wǎng)站中迷失呢？

首先，我們要幫助用戶定向，也就是確定“當前位置”。

即便GPS衛(wèi)星定位系統(tǒng)如此強大，它都必須隨時在地圖上標明我們的“當前位置”，才能真正為我們導航。而與現(xiàn)實世界不同的是，在網(wǎng)絡世界中沒有南北之分，也沒有地理位置，我們必須利用導航系統(tǒng)的各種因素，來為用戶創(chuàng)造可以判斷當前位置的情景：

1、  重視網(wǎng)站的品牌信息

用戶應該一直知道自己在瀏覽什么網(wǎng)站，將組織的名稱、標識、和身份識別圖放進網(wǎng)站的所有頁面中，是達到此目的最顯著的方法。

2、  細節(jié)創(chuàng)建情景

我們可以通過頁面內(nèi)標題、頁面文字，向用戶傳遞當前位置的信息。瀏覽器標題和URL也是用戶進行判斷的依據(jù)。當前導航選項的高亮狀態(tài)，也是常用的方式。

3、  面包屑

“面包屑”也是標明當前網(wǎng)站位置的好工具。此外，面包屑還能傳遞網(wǎng)站結(jié)構信息，以及記錄用戶的訪問足跡。

4、  逃生艙模式

逃生艙模式也是幫助用戶確定當前位置的一張底牌。也就是在網(wǎng)站的所有頁面上設置統(tǒng)一的出口，無論什么時候，點擊這里，都可以回到首頁。大部分網(wǎng)站都把逃生艙設置在網(wǎng)站LOGO上，已經(jīng)成為慣例了。

其次，根據(jù)用戶需求，確定導航模式。

用戶的需求決定了我們應當放置何種導航鏈接。在不同類型的頁面，用戶所產(chǎn)生的問題不盡相同。我們需要預測這些問題，然后在設計導航的時候，也問自己同樣的問題。

一般情況下，用戶會問：“我在哪里？”“我在這里能做什么？”“我還可以去哪里”；在電子商務網(wǎng)站，他們也許會問，我該如何找到想要的產(chǎn)品信息；具體在某一產(chǎn)品，他們也許會問：“我該如何聯(lián)系客服人員？”“我到哪里可以找到相關產(chǎn)品”。

我們所要做的，并不是想出所有可能發(fā)生的問題，相應的，我們也不可能把所有問題的答案都放入頁面當中。這個時候，人物角色和場景，將發(fā)揮很重要的作用。對于不同的頁面，弄清楚每個用戶角色要去哪里，放置他們最需要的導航。比如：你的人物角色需要隨時從一個欄目跳轉(zhuǎn)到另一個欄目嗎？如果是的話，請保證頂級欄目的鏈接一直可用。

一旦確定了用戶想要到達的內(nèi)容，就要思考達到這一目標所需要的最簡單、最容易的方案。比如在圖4中，也許你的人物角色需要的，只是一個“下一組”鏈接。

圖4

 最后，通過壓力測試檢驗頁面的導航能力。

怎么樣測試這個頁面的導航能力呢?

（1） 隨機從你的網(wǎng)站上選擇一個頁面；
（2） 把這個頁面打印成黑白的，并把頁面頭部的瀏覽器地址欄和下面的版權及公司信息部份去掉；
（3） 假裝你是第一次進入這個網(wǎng)站，并試圖回答下面的問題(詳見下列問題列表)；
（4） 在一張紙上寫下你所想的和答案；

問題列表:

1、這個頁面是寫什么內(nèi)容的？ 在頁面的標題處畫一個方形或在紙上寫清楚；

2、這是個什么樣的網(wǎng)站? 把網(wǎng)站的名字用圈圈起來，或者自己寫在紙上；

3、這個網(wǎng)站主要的版塊是什么? 用x標識；

4、這個頁面中主要的版塊是什么？ 用三角形圍著x來標識；

5、我怎么樣到達這個網(wǎng)站的首頁？ 用H標識；

6、我怎么樣才能到達網(wǎng)站的頂部呢? T來標識；

7、每一組鏈接分別代表什么? 把頁面上的主要鏈接圈出來，并寫下標識；

D:用來標識更多，詳細介紹及這個版塊的子頁面等；

N:在同一版塊的其它相鄰頁面；

S:在同一網(wǎng)站上但不相鄰的頁面；

O:離開這個網(wǎng)站的頁面；

8、你是通過怎么樣的路徑到達這個頁面的呢？ 請寫出你到達這個頁面的路徑，選擇1>選擇2>選擇3…

讓你們團隊的其它成員或熟悉你網(wǎng)站的朋友也與你做同一試驗，大家象跳傘一樣的進入網(wǎng)站中的任意一個頁面，然后把回答記在紙上，你就可以看出導航存在的問題。

關于導航壓力測試更詳細的內(nèi)容，請參考四娘的文章，我們就不詳細說明了。

原文：http://ued.taobao.com/blog/2010/01/22/the-practice-guidelines-of-interaction-design-avoid-getting-lost/

導航標簽彼此互斥、完全窮盡。
導航標簽其實就是一種文字表達形式，我們用標簽來代表網(wǎng)站上的各種分類信息。比如“聯(lián)系我們”這個標簽，代表的內(nèi)容通常會包括公司名稱、電話、地址、郵箱等信息。它可以是文字，也可以是圖片。在英文里被稱作“Label”，并不同于我們常說的“tag”標簽云圖。

說簡單一點，我們就是要為網(wǎng)站的信息做分類，并為它們起一個通俗易懂的名字。這其實是任何人都可以做的一件事情，所以在導航設計流程中，它的重要性也常常被忽略。在設計產(chǎn)品時，常會聽到這樣的話：“這個欄目該叫什么名字？恩。。。先別管吧，把更重要的工作做了再說?！?/P>

然而，站在用戶的角度，導航標簽代表的是整個網(wǎng)站的內(nèi)容、產(chǎn)品的結(jié)構，他們必須依靠標簽的內(nèi)容和組織方式來尋找網(wǎng)站中的信息。

標簽是訪客行為的觸發(fā)詞，好的標簽能吸引訪客注意力，引導他們準確地找到信息。導航標簽是訪客預測目標頁內(nèi)容的重要依據(jù)，緊跟著它的就是導航中的關鍵點，網(wǎng)頁的過渡，所以尤為重要，有歧義的標簽逼人猜測它的意圖，甚至讓用戶走錯路或迷失方向。

比如這個網(wǎng)站的標簽：

這個網(wǎng)站的導航標簽比較極端，首先標簽之間的互斥性差，“淘寶潮流榜”、“愛物秀場”、“敗家俱樂部”等，含義和實際內(nèi)容都非常接近；其次是一致性差，標簽的粒度不同、長度不同、語氣不同，甚至還有英文出現(xiàn)，可謂五花八門； 最糟糕的是，在標簽的選擇上，用了很多自作聰明的詞語，如“愛騷談資”，用戶很難預測到鏈接背后是什么內(nèi)容。

設計標簽的過程，實際上就是對信息分類的過程，我們應當堅持MECE原則，也就是彼此獨立、完全窮盡（Mutally Exclusive,Collectively Exhaustive）。這是一種客觀的角度。你也可以站在主觀的角度進行分類，但必須做到標準清晰、在目標群體中能獲得充分共識。

怎樣的標簽才能稱作好的標簽？它應該滿足這幾個方面：

1、好的標簽，應該使用客戶的語言，避免使用術語、行話、縮寫詞等用戶難以理解的詞語；

2、采用描述性的標簽，避免使用“信息”、“細節(jié)”等過于寬泛的詞語，盡量以某種方式加以限定,如：“給買家的信息”、“交易細節(jié)”。

3、標簽之間的互斥性要強，盡可能地尋找差異化；

4、使用聚焦地標簽，如，能把貓、狗、倉鼠等歸納為“寵物”，就不要用“動物”。

5、在粒度、語法、展現(xiàn)、用法等方面保持標簽的一致性；

6、較長的標簽往往比短標簽更好，但并非越長越好，請盡量控制在12個字以內(nèi)（這不是一個硬性規(guī)定）。

那我們設計標簽時的詞匯從何而來呢？是憑空想象出來的嗎？當然不是啦，你可以從以下幾個方面獲得詞匯：

1、你自己的網(wǎng)站或產(chǎn)品

你的網(wǎng)站和產(chǎn)品，在前期建設中，已經(jīng)積累了很多標簽。我們要做的，就是遍走整個網(wǎng)站，盡可能收集所有標簽，然后用表格進行整理。

比如,我們在淘江湖改版時，對現(xiàn)有標簽系統(tǒng)進行了一次整理，在表格的幫助下，比較容易看出現(xiàn)有標簽系統(tǒng)存在的問題。

2、類似網(wǎng)站或競爭對手網(wǎng)站

如果你還沒有網(wǎng)站和產(chǎn)品，那就要去同類型網(wǎng)站或競爭對手網(wǎng)站去收集標簽了。相信這一做法，在互聯(lián)網(wǎng)上，幾乎是無師自通的。你可以通過對同類型網(wǎng)站標簽系統(tǒng)的觀察和比較，得到一些行業(yè)類比較通用的詞匯，降低用戶的理解成本。

你可以用同樣的方式，收集同類型或競爭對手網(wǎng)站的標簽，以供參考：

3、受控詞表或敘詞表

這是由圖書館員和特定領域的專家所建立的資源，這些詞匯都是專家們付出很多努力的成果，表達方式精確且一致，而且這些資源通常是公開的。其實信息架構的很多理論，都來源于圖書館管理。

在完全沒有依據(jù)的情況下，我們必須設計新的標簽系統(tǒng)時，應該怎么辦呢？

你可以對通過對內(nèi)容進行分析、要求內(nèi)容的產(chǎn)生者提供、或者象專家或你的直接用戶求助?？ㄆ诸惙ㄒ彩潜容^流行的一種做法。

卡片分類大概有4個步驟：

1、招募志愿者，大部分項目適當?shù)目ㄆ诸愔驹刚呷藬?shù)是 15 人，大型項目可以達到 30 人。個人覺得如果只是想對自己想法進行驗證的話，5-10 人即可。

2、  準備卡片，寫上你預先設定好的標簽（這些標簽必須是你們內(nèi)部討論或請教過專家的結(jié)果）。

3、  讓用戶進行分類，你可以觀察用戶的分類過程，以及對標簽的理解。

4、  對卡片分類的結(jié)果進行分析，如果數(shù)據(jù)龐大，你可以借用軟件進行分析，推薦工具有 IBM EZSort、CardZort、WebSort 等。

對卡片分類感興趣的同學可以進一步查閱資料，我們在這里就不詳細說明了。

看到這張照片，我們一眼能夠看到天宏(圖中這位UED俊男)的眼睛。我們能從他的表情里讀出一些他的性格。一張好的攝影作品，最重要的一點，就是這個照片是否有焦點，照片的主題是否一目了然。而攝影作品的用光、構圖、景深等等手法，其實就是在讓一個照片能夠有其焦點，并且利用這些藝術手法來烘托氣氛，提升主題。 一個優(yōu)秀的頁面亦如此：應當突出重點，一目了然。相信大家也知道，一個用戶在瀏覽網(wǎng)頁的過程中，只是掃描頁面，而不會像是在看書似的閱讀每一處地方，每一行文字。一個網(wǎng)頁呈現(xiàn)在用戶面前的時候，應該在5秒之內(nèi)，就能理解：這個頁面是干什么的？我大致能通過這個頁面做些什么？接下來我該去哪里？ 我們網(wǎng)站上的每個頁面都可以是任務流上的一個點。這個點上包含著用戶需要的信息，也許是繼續(xù)找到任務流的下一個點的信息(例如導航)，也許是用戶想找到的最終內(nèi)容。而一個頁面上存在著上百甚至上千個鏈接（淘寶的寶貝詳情頁面通常有700多個鏈接），要在這樣茫茫大海中找到用戶需要的鏈接，可見，“突出重點，一目了然”是多么重要。

測試您的頁面

測試您的頁面是否達到“突出重點，一目了然”，能夠讓用戶在短時間內(nèi)找到他們所需要的信息，其實可以是個低成本的小型測試。fivesecondtest.com 這個有趣網(wǎng)站是一個專門做5秒測試的站點。測試者上傳一張站點的截圖，然后被試觀看截圖5秒，然后說出剛才看到了哪些東西。另外一種方式是被試看到截圖，在5秒的時間中，點擊他所關注到的所有焦點，最后給出每個焦點他認為的描述。

下圖是本文開篇的時候，8個用戶的測試結(jié)果：

這種測試比起眼動議來說，測試的成本要低得多，而且能夠明確得測試出你的頁面的瀏覽者是否能在第一時間發(fā)現(xiàn)他們所需要的內(nèi)容，并且可以比較出，這是否符合你的設計的初衷。

達到“突出重點，一目了然”

那么，如何達到這樣的“突出重點，一目了然”呢？據(jù)鄙人不完全歸納，可以有以下方法：

為掃描而設計，不是閱讀

你幾乎需要把每個用戶都想象成大忙人――他們沒有時間停留在你精心設計的頁面上，去閱讀每一行你辛苦撰寫的問題，去欣賞你精心設計的高光與圓角――他們想要的只是盡快地找到有用的信息。如果找不到，互聯(lián)網(wǎng)上也許有很多替代品，可能是你的競爭對手，用戶可以輕而易舉地到其他網(wǎng)站上去尋找他們需要的信息。《點石成金》這本書也比較詳盡地描述了這個要點。相信大家都應該閱讀過了?！饵c石成金》里談到關于“為掃描而設計，不是閱讀”時，

給出了幾種方法：

1. 盡量符合用戶習慣的設計，讓人接受陌生的東西需要代價，除非我們覺得這個代價是必須的。
2. 在頁面把越重要的東西越突出，建立清楚的視覺層次。
3. 可以點擊的地方必須突出，讓人明顯知道可以點擊。
4. 把頁面劃分成明確定義的區(qū)域
5. 省略多余的文字

Yahoo Small Bussiness的頁面改版很具有代表性。 改版前：

兩次改版后：

我們可以發(fā)現(xiàn)，改版后的頁面視覺層次得到了很大的提升。白色內(nèi)容區(qū)域、淺藍色右邊欄和深藍色的注冊區(qū)域漸漸遞進，深藍色背景上的強烈反差的黃色按鈕“Sign Up”，引導著這個頁面的主要目的，亦是重點。另外，大家可以發(fā)現(xiàn)，內(nèi)容文字部分比先前的老版本少了一半一半再一半再一半。。。相應的，使用列點和大圖的方式傳遞了相同的信息?！癝ign Up”顯而易見，而且視覺上有突起的漸變效果也馬上讓人知道，那是個按鈕。

將功能“藏起來”

部分產(chǎn)品經(jīng)理有一個這樣的通病，他們每每作出一個新功能，就愛向用戶炫耀新的工作成果?？雌饋恚@樣挺好，一來讓用戶知道本網(wǎng)站還沒死，而且還在為他們不斷得制作新的功能，二來辛苦開發(fā)了數(shù)天甚至數(shù)月的功能要是沒人用，那該多“杯具”??！于是乎，你就會發(fā)現(xiàn)，長期“堅持”下來，界面上的元素越來越多。 假設某一天，這樣的產(chǎn)品經(jīng)理全部被谷歌挖走，那么谷歌的首頁將會是一個放滿“杯具”的餐桌：

還有一個例子來自于某BSP，它的博客頂端存在著一個工具欄，有30個左右的鏈接。而這個工具欄在4年前他的用戶高速增長期其實并不存在。

如果你了解20-80原則，你應該知道：80%的用戶只會使用20%的功能。所以，為什么要讓那些少人使用的80%的功能總是放在顯眼的位置，擾亂那些只需要20%的功能的大部分用戶呢？(此句有些拗口，我承認，麻煩看官們可能要反復閱讀幾次。。)其實那些80%的功能大部分是專家用戶所喜歡的，我們應當將這些功能“藏起來”，目的就是不影響新手和中間用戶，并等著他們?nèi)グl(fā)現(xiàn)，然后大叫：“哦，居然這個網(wǎng)站有這個功能，太棒了！”我們來看看Google Reader iPhone/Android 版本最近的小改版：

改版前：

改版后：

大家可以發(fā)現(xiàn)，原來占據(jù)垂直空間的New items/all items的切換、mark all as read等功能，全部藏匿在右上角的下拉按鈕中。Refresh被替換成了一個可以容易理解的Refresh圖標，頂端其他產(chǎn)品的鏈接也祛除了下劃線。 關于將功能“藏起來”、功能肥胖癥是個說不完的話題，《哈佛商業(yè)評論》早在06年的時候也詳細探討過這樣的問題，這部分內(nèi)容，我過段時間也整理整理，為大家奉上吧，本文中，就不作深入探討。

關注于用戶的主要任務流

關注于用戶想要的，而不要強迫用戶查看、理解與操作無關的事情，是關于“突出重點、一目了然”的UCD方法論的延伸。這個想法，解決了什么元素該被“突出重點”從而達到界面“一目了然”的問題。從用戶角色到場景，到任務流，可以決定每個界面――也就是任務流上的節(jié)點最重要的元素是什么。加之融合商業(yè)目標，即成頁面的重點。其他非重點的元素應該盡量“藏起”或是“顯得暗淡”些。我們來看一個來自于Magic Ink(by Bret Victor)的例子： 這是個書籍的搜索結(jié)果頁面。

我們能夠發(fā)現(xiàn)，這個頁面覺得凌亂不堪。各種大小，各種顏色，各種粗細的字體混雜在一起，眼花繚亂。就像《氣球》這首歌唱的：

黑的白的紅的黃的
紫的綠的藍的灰的
你的我的他的她的
大的小的圓的扁的
好的壞的美的丑的
新的舊的各種款式各種花色任你選擇

說實話這么多種氣球還真不知道該選哪個。如果我們可以通過UCD（或者是其他方式）分析出，這個書籍的結(jié)果頁，用戶需要這些信息：

1. 書籍內(nèi)容。這本書標題是什么，是關于什么的？
2. 書籍評價。這本書好嗎？別人對它的評價如何，這些評論可信么？

根據(jù)這個目標，重新設計后的結(jié)果如下：

我們可以看到，這本書內(nèi)容和評價都一目了然，信息結(jié)構利于掃描和比較。重要的信息大而具有色彩，次要信息成灰色的小字。關于這些更詳細的敘述可以參見原文。

總結(jié)

本文描述了什么是“突出重點，一目了然”。如何測試頁面是否“突出重點，一目了然”，以及如何達到“突出重點，一目了然”。 有句話我挺喜歡，作為結(jié)局吧。在《What’s Next in Web Design?》中說道的：

“Simplicity is when someone takes care of the details.”

“簡單而不簡陋！”(謝謝青云給出的翻譯！)

我們所追求的界面或者功能做得簡單，不是粗制濫造，而是需要把下在創(chuàng)造更多無用的功能的功夫轉(zhuǎn)變到現(xiàn)有功能的細節(jié)上。做出來東西容易，但是把東西做好做精難啊！

我們生活在信息繁雜的社會，尤其是在互聯(lián)網(wǎng)時代，人們開始通過網(wǎng)絡開始接觸越來越多的信息，那么，如何獲取/傳遞有效而準確的信息將非常重要。在網(wǎng)頁交互設計中，我們提出：信息獲取和傳達的過程必須是簡潔清晰，自然易懂。這樣用戶才能夠有效的獲取這些信息，并迅速作出決定。

1.什么是“簡潔自然，清晰易懂”？

簡潔清晰：使信息最簡化
“少即是多”。提倡使用最少的元素來表達最多的信息。如果信息繁雜，將使用戶承擔大量的信息負擔，造成信息過載，影響效率，不能幫助用戶解決問題。

自然易懂：使用用戶語言
用戶獲取信息的方式多樣，并且對信息的理解程度也各有不同，所以使用用戶平時使用和理解的表達方式去傳遞信息，更可以被用戶所接受。

2.信息表述的種類與設計原則

在網(wǎng)頁交互設計中，用于傳達給用戶以有效信息的方式有多種，其中包括：頁面布局，交互文本，界面色彩，圖像與圖標，聲音等。

1）頁面布局

界面中的信息布局，會直接影響用戶獲取信息的效率。所以，一般界面的布局因功能不同考慮的側(cè)重點不同，并且會讓用戶有一種“區(qū)塊感”，方便用戶對信息的掃描性瀏覽。

①界面布局盡量有秩序，排列整齊，防止過緊或過松，有明顯的“區(qū)塊感”。切忌混亂。
②布局要充分表現(xiàn)其功能性，對于每個區(qū)域所代表的功能應有所區(qū)別。如：標題區(qū)，工作區(qū)，提示/幫助區(qū)等
③頁面中最重要的信息所在的模塊將是在屏幕中最明顯的位置上。并且，應該是最大的。
④布局中的信息需要有明顯的標志和簡單介紹，比如標題欄和標題等。
⑤信息的位置保證一致性，讓用戶可以無需重新建立對頁面信息分布的理解。

2）交互文本

交互文本指產(chǎn)品界面涉及交互操作中需要用戶理解并反饋的所有的文字：包括標題、按鈕文字、鏈接文字，對話框提示、各種提示信息、幫助等。這些文字直接影響用戶在交互過程中對預期的理解，好的交互文本設計，可以提高用戶完成任務的效率。

①表述的信息盡量口語化，不用或少用專業(yè)術語；
②表述語氣柔和、禮貌，避免使用被動語態(tài)，否定句等；
③簡潔、清楚的表達，文字較多要適當斷句，盡量避免左右滾屏，折行。
④對于同種操作的交互文本，操作行文字保持統(tǒng)一性。
⑤字體使用默認/標準的字體，大小以用戶的視覺清晰分辨為主；

3）界面色彩

人眼一共約能區(qū)分一千萬種顏色，所以用戶與界面中顏色的關注度非常的高，有效的使用色彩區(qū)分信息的級別，分類等，有助于用戶對信息和操作產(chǎn)生關聯(lián)，有效減少用戶的記憶負擔。

①根據(jù)不同的產(chǎn)品使用“場景”，選擇其合適的顏色。如，管理界面經(jīng)常使用藍色。
②考慮顏色對用戶的心理和文化的影響。比如，黃色代表警告，綠色代表成功等。
③避免界面中同時出現(xiàn)3種以上的顏色。
④顏色的對比度明顯，如在深色的背景中使用淺色的文字。
⑤使用顏色指導用戶關注到到最重要的信息。

4）圖像圖標

相對于單純的文本，圖像以及符號化的圖標更加符合用戶的認識習慣。往往表述一種信息，一張圖片或者一個標識更能讓不同用戶理解與接受。適當?shù)氖褂脠D片與符號化的圖標，會讓用戶很自然的建立起認知習慣。

①表意清晰，明確，有高度的概括性與指向性，讓用戶能夠快速的聯(lián)想到對應的功能和操作。
②同類或同一緯度的信息，在形式和色彩風格上盡量保持一致性；
③僅在突出重要信息，用戶可能產(chǎn)生理解偏差的情況下使用。避免濫用。
④盡量與交互文本結(jié)合使用。

5）聲音

在網(wǎng)頁的交互設計中，用于聲音的信息表述方式相對與視覺來說不是很多。一般應用于提示，提醒，幫助等信息的表述。此類信息表述讓用戶通過聽覺獲取反饋，更加的直接與有效。

①表述清晰，語氣親切，不生硬，有禮貌。
②使用符合用戶認知習慣的聲音。如，使用敲門聲提示好友來訪信息等。
③使用不讓用戶反感（如：恐怖，惡心，煩躁）的聲音。
④在用戶可預知的情況下發(fā)出聲音。

4.小結(jié)

對于不同的信息表述方式，我們都要求設計師在表達信息的時候做到簡潔清晰，自然易懂，盡量讓用戶覺得這是自然而然，而且又是清晰明了的信息。就像小溪流水一樣自然，就像軍人命令一樣明確。這樣才會讓用戶快速，準確的完成任務。

任何一個交互過程的操作，對于用戶來說都有學習成本，誰也不能保證所有人都可以準確無誤地走完一個流程。交互設計師在設計時應該考慮適時地給用戶相應的幫 助，這一點非常重要。適時幫助，是指在用戶使用流程中，在需要的時候能及時地得到幫助；反之，在不需要幫助的時候,不要出現(xiàn)信息干擾。
不及時的幫助會造成用戶使用進程中斷，或者增加用戶達成目標的難度。無效的幫助則可能給用戶造成干擾，影響用戶完成任務。

“適時幫助”是一個偏正結(jié)構，首先是幫助，然后制約條件是適時。我們分開來講。

在理想的交互設計狀態(tài)下,我們當然希望用戶在使用過程中”無師自通”,但受制硬件、使用環(huán)境、用戶層次等各種原因，有一個”老師”幫助用戶是非常必要的。
韓愈在《師說》里一開始就講到：古之學者必有師。師者，所以傳道受業(yè)解惑也。人非生而知之者，孰能無惑？
同理，我們的幫助也是相似的作用，傳道授業(yè)解惑。

1.傳道
傳道主要是理論上的幫助，告訴別人這是什么，主要指一些名詞解釋，規(guī)則說明等等。
2.授業(yè)
授業(yè)主要是操作上的幫助，告訴用戶怎么作才能完成整個流程。很多當前操作提示，流程示意圖等都屬于這個范疇。
3.解惑
解惑主要是在用戶迷惑不解的時候提供解決方案，比如對用戶操作出錯的建議，某分流程結(jié)束后的幫助提示等等。

然后主要來說一說“適時”。這就要討論用戶在什么時候需要幫助。一般有以下三種情況：
A.在用戶第一次使用某產(chǎn)品功能的時候。
當新用戶使用一個產(chǎn)品的時候需要幫助，或者老用戶在使用一項新功能的時候，由于認知不足，用戶會覺得陌生，不知所措。此時幫助應該及時出現(xiàn)，但不能一直強制出現(xiàn)，應該讓用戶有選擇的余地。
B.在用戶已經(jīng)出錯或者將要出錯的時候。
當用戶在流程中不小心與系統(tǒng)現(xiàn)在規(guī)則有了沖突的時候應該及時提醒，不能任其為之，到最后顯示一句“對不起，你出錯了”，這樣可能會造成用戶主動中斷流程。
C.在用戶遇到不明白的問題的時候。
用戶遇到不明白的名詞或者操作時，應該及時給出解釋。用戶了解信息主體時候，如果有必要的補充說明也應該及時出現(xiàn)。

當出現(xiàn)以上三種情況的時候，我們應該采取適當?shù)姆椒▉頌橛脩籼峁椭?BR>1.幫助信息明顯，提示方式靈活。
看案例:

google文檔的新功能幫助信息，第一次訪問時，用明顯的形式出現(xiàn)，用戶點擊關閉以后再也不會出現(xiàn)；如果點擊以后提醒我，幫助信息會暫時關閉，下次訪問還會出現(xiàn)。

2.及時反饋操作，防止用戶出錯；分析錯誤原因，給出合理建議。
看案例:

上圖針對錯誤頁面的幫助提示，分析用戶可能出現(xiàn)的原因，并給出了一些建議。我們再來看看下面這個反面案例。

用戶在注冊過程中，用戶已經(jīng)存在的情況下，輸入是沒有提示的；直到所有資料填寫好之后提交，才彈出結(jié)果頁面，說用戶名已經(jīng)被注冊，然后讓用戶重新填寫。這個幫助信息來得太晚了，如果在注冊用戶填寫用戶名的時候，就檢測該用戶名是否有效，就不會讓用戶覺得前功盡棄了。

3.及時補充，信息完整

再看QQ會員頁面，在開通會員的大按鈕下有一個“QQ會員是什么”的幫助信息，這個幫助就是為了讓用戶首先在理論上對QQ會員有一個認知。對用戶不了解的信息給出了通往答案的道路。

總之，幫助在交互設計的有效性里有相當重要的地位，而適時性是幫助的重要關鍵點。我們可以用兩個詞組合起來，形容適時幫助的特點，那就是”聊勝于無，過猶不及”。只有及時而不多余的幫助信息才能更好地幫助用戶，從而完成一個具有“有效性”的交互設計。

      也就是說，交互設計實用指南所定義的“可及”就是“信息可及”。具體解釋為在產(chǎn)品設計應用過程中，應當考慮到特殊人群的使用狀況，讓這部分用戶享受無障礙設計帶來的便捷，在瀏覽，使用網(wǎng)頁時能很順暢的使用該網(wǎng)頁所提供的相關資源。

交互設計主要考慮的幾個特殊人群：

1.色盲

      據(jù)統(tǒng)計，這個世界上有大約8.65%的男性和0.43%的女性，在識別部分或者全部顏色時有困難。我們通?；\統(tǒng)地稱這種缺陷為色盲(Color Blindness)。其中，輕度的色覺異常稱為色弱。 

2.肢體殘疾

      而僅僅在我國，殘疾人數(shù)就約有8300萬，占總?cè)丝诘?.34%，其中肢體殘疾者2412萬人，占29.07%。肢體殘疾人士在精神智力方面和正常人是沒有太大分別的，這部分群體由于活動不便，對于以電腦，移動終端為媒介的網(wǎng)絡產(chǎn)品有著更為迫切的使用需求。

3.老人，兒童（5～12歲）

      更值得關注的是人口老齡化的趨勢在中國越來越嚴峻，有一個預測的數(shù)據(jù)顯示，到2050年中國將有4.3億的老齡人。老年人退休了，時間相對充裕，除了從傳統(tǒng)媒體獲得信息外，對于網(wǎng)絡信息獲取的需求也在日益增長。家長們?yōu)榱碎_闊子女眼界的需要，也會允許兒童在特定時間上特定的網(wǎng)站來開發(fā)智力，學習娛樂。

4.文盲

      另外從文化程度的差異來看，在中國文盲的數(shù)量仍然占人口總數(shù)相當大的比例，現(xiàn)在我們的青壯年文盲占5.8%，這部分人群雖然網(wǎng)絡基礎知識幾乎為零，但是一旦接觸到網(wǎng)絡，他們會有很高的學習欲望和熱情，如何幫助他們盡快的使用網(wǎng)絡，也是Web交互設計師應該關注的一個問題。

5.其他

      其他對信息使用不擅長的人

交互設計的方法：

      對于如此多的特殊用戶，無論是出于專業(yè)精神還是商業(yè)利益，Web產(chǎn)品設計師都應該去關注他們，這也是作為一個設計師社會責任所在。那么，所設計的產(chǎn)品如何能夠滿足對特殊人群的“可及”呢，這就要求設計師在設計一個產(chǎn)品的時候，時刻要提醒自己不能忘記特殊人群，換位思考，站在特殊人群使用的角度上來設計Web產(chǎn)品的整體布局，各個元素的具體形態(tài)及操作行為。關于這一部分，交互設計實用指南也給出了一些基本的思路，以下是一些可借鑒的設計方法。

1.使用形狀+色彩的信息提示

      這一點對于色盲這類人群尤為重要，和普通用戶相比，他們的缺陷是在顏色識別方面，也就是說如果設計師在某個地方僅僅使用了色彩作為信息提示，的話，那就有可能帶來問題了，下面的例子：

      上圖是蘋果的官方網(wǎng)站曾提供的一個在線工具，幫助用戶來查詢哪些專賣店明天有貨。 蘋果的設計師用綠色填充的圓圈表示有貨，紅色的圓圈表示沒貨，貌似挺清晰的，對于普通人當然沒問題。但是對于綠色色盲用戶來說，就不容易了。

      其實，我們只需要優(yōu)化提示ICON就能解決這個問題，修改如下：

      這個例子告訴我們，在使用設計元素時，要盡量使用形狀+色彩的方式來表現(xiàn)信息，或者使用文字的提示。這樣對于正常用戶和對顏色識別有障礙的特殊用戶，都不影響他們的識別。有一個小技巧可以使用，在完成設計時，可以把自己的設計圖做去色處理，然后一項項的去做交互測試，如此可以有效的避免色彩的識別問題。

2.簡化操作方式

      無論是老人還是文盲對于網(wǎng)絡產(chǎn)品的操作都有信心不足的情況，一個簡便的操作方式，令他們快速實現(xiàn)目標，對于增長信心非常有幫助。對于肢體殘疾人士，他們的困難在于使用交互輸入設備，如鼠標和鍵盤比正常人更不容易，也需要簡化操作方式。比如在設計操作時盡可能地采用“選擇”的方式而不是“填寫”（避免給手指殘疾的用戶增加負擔）。比如下面這個輸入日期的設計：

3.容錯和及時幫助

      這也是交互設計指南中兩個非常重要的部分，對于特殊人群來說，這兩點顯得更加重要。具體的設計方法可以參考接下來的文章http://ued.taobao.com/blog/category/ixd_guide/ 。

4.使用視覺、聽覺，觸覺等多元化的手法傳達必要的資訊

      在產(chǎn)品設計中，對于重要的操作及信息提示可以使用語音提示來配合視覺樣式來提示用戶操作的狀態(tài)。比如在一些智能手機產(chǎn)品上，點擊觸摸屏數(shù)字鍵盤時，不但被選中的數(shù)字鍵的底色會發(fā)生變化，而且屏幕還有震動的觸感提示。

5.使用輔助性的工具

      以目前的技術，語音識別可以部分解決單純的輸入問題，比如Windows7的語音指令功能，在操作者說出“打開Word”這句話時，電腦就可以自動啟動該軟件，也可以為視力不好的老年使用者逐字逐句地朗讀電腦上顯示的任意文章，但是要靠語音識別完全解決人和電腦間大量的快速的交互行為還要走很長的路。在未來，也許大腦可以直接來操控電腦，這方面已經(jīng)有了一些研究成果。下圖為谷歌手機中文語音搜索的界面：

      另外可以內(nèi)置輔助殘疾人的工具，Windows7有一個新的功能，叫做OSK，即屏幕鍵盤。不習慣使用鍵盤的人可以用鼠標來點這個屏幕鍵盤，肢體不是很方便的使用者，可以把屏幕鍵盤上的按鍵放大從而提高準確性；視力不好的老年使用者，可以把按鍵上的字放大，以便閱讀。

6.容易瀏覽及合理的信息架構

      對于老年人來說，看互聯(lián)網(wǎng)會覺得眼花，他們感覺所有的字都太小，不容易瀏覽。所以在設計時要考慮到，能切換到可以適合老年人查看的字體和網(wǎng)頁樣式。比如百度推出了老年搜索來滿足這個需求，字體較大且突出老年人常用的功能,如下圖：

小結(jié)：

      以上拋磚引玉提了幾點為“信息可及”設計時可以考慮的方法，對于特殊人群的無障礙設計需要更深入的挖掘特殊人群的需求，根據(jù)他們的生理和心理狀況，有針對性的開展設計工作。

      隨著社會文明的提高，交互設計對特殊人群的關注度也越來越高，可及即無障礙設計的理念也越來越得到絕大多數(shù)設計師的提倡。在我國，互聯(lián)網(wǎng)協(xié)會網(wǎng)站于近期正式開通了信息無障礙樣板專欄，專欄介紹了國內(nèi)外無障礙行業(yè)標準的內(nèi)容和鏈接，其中有一些設計的規(guī)范，有興趣的話，可以下載，對于網(wǎng)站的設計有一定的參考價值。

      據(jù)聯(lián)合國經(jīng)濟和社會事務部發(fā)表的研究報告，目前全球100家主要網(wǎng)站中只有3家能夠滿足殘障人士的需要，這方面要走的路還有很長。

“操作入口明確”，就是指產(chǎn)品的任何一個功能都要有明確、合理的入口。“操作入口”，指的是產(chǎn)品內(nèi)部不同模塊之間的轉(zhuǎn)接元素，例如在Web產(chǎn)品中，按鈕控件、輸入框、文字鏈等都屬于操作入口；“明確”指的是入口的視覺感是清晰的、可識別的；“合理”是指入口的出現(xiàn)是符合用戶操作邏輯的，適時的。

之所以要提出“操作入口明確”，是因為用戶在使用產(chǎn)品的過程中，往往遵循的是可分析的行為邏輯。對于產(chǎn)品本身而言，必須有相對應的操作提示來引導用戶最有效地獲取信息，還原為實現(xiàn)層面就是明確、合理的操作入口。如果說首頁是整個網(wǎng)站的門戶，那么操作入口就是連接各個子頁面的樞紐。設計師的終極目的， 就是通過對這些樞紐的優(yōu)化讓用戶利用最有效的方式在最短時間內(nèi)完成自己的預期任務。

對于基于WEB的電子商務而言，核心價值是信息資源，而能否將這些海量數(shù)據(jù)合理地推送給用戶，則是產(chǎn)品生存的關鍵。操作入口的設計，甚至可以看做 “通過對引導方式的優(yōu)化間接達到對信息資源的歸類”――這很像圖書館中的書類標簽管理，用戶可以根據(jù)不同的類目標簽找到自己想看的書。失敗的操作入口所帶來的后果往往是災難性的，功能失效、位置隱蔽、信息干擾……都會給用戶帶來嚴重的挫敗感，使其絕望地湮沒在茫茫的信息海洋中。所以，明確合理的操作入口設計，是對產(chǎn)品“有效性”的保障，更是對用戶體驗的尊重。

那么，在具體的設計中如何做到“操作入口明確”呢？

1、強化重點，弱化周邊

星爺《唐伯虎點秋香》中的精彩片段，一聲“美女”換來諸多牛鬼蛇神的壯觀回眸和秋香MM的驚鴻一瞥――“美女這東西是要需要比較地”。WEB產(chǎn)品也 一樣，尤其是海量信息的電子商務網(wǎng)站，由信息架構衍生出的各類功能入口相當復雜，部署在頁面的各個角落，一不留心就被疏漏。通常有兩種方法來解決這類問題：一是增加入口數(shù)量，即“廣撒網(wǎng)”，同樣的功能入口有多個，以此增加功能模塊的使用率，不過這種方法存在較大隱患，后面會詳細分析；二是“強化重點，弱化周邊”，即在視覺上將入口模塊凸顯出來，采用精妙的布局，并適當弱化周邊的信息展示，加大二者的權重對比，客觀上增加用戶識別的準確性。

例如地球人最熟悉的Google首頁：

www.google.com

濃郁藝術氣息的LOGO作為唯一的色彩元素有效地抓住了瀏覽者的視覺中心，輸入欄和Button作為功能核心占據(jù)了頁面的心臟位置，這種組合讓用戶 通過第一視覺便能夠準確理解頁面所表達的信息邏輯――“輸入關鍵詞”+“點擊按鈕”=“Everything you want”。

再看一個反例，如圖：

download.pchome.net

面對這樣一個下載頁面，面對這樣一個搶眼的大Button（標記②），相信即使是電信用戶，也會很大方地支持下網(wǎng)通……但是，點擊之后彈出的卻是下載遨游瀏覽器的窗口，崩潰之余再仔細查看，終于發(fā)現(xiàn)在華麗的廣告位旁邊蜷縮著一個毫無特色的“立刻下載”（標記 ①）――剎那間，無數(shù)用戶被這種飽含“讓賢”哲理的設計深深震撼了！

2、入口信息明確易識別

上面提到，增加入口數(shù)量雖然在一定程度上有助于提高功能模塊的使用率，但也存在致命的缺陷――入口信息不明確。因為“入口”等同于用戶的“選擇”， 入口越多，選擇越多，“過多的選擇等于沒有選擇”，這勢必會造成用戶使用產(chǎn)品時的疑惑：這幾個鏈接和按鈕好像都一樣啊，該選哪個呢？所以，要根據(jù)頁面本身 的信息量嚴格控制同功能入口的數(shù)量，保證有效的識別性，讓用戶迅速找到正確的入口。

這次用我們可愛的兄弟產(chǎn)品“支付寶”為例，看看改版前后的細節(jié)變化：

改版前

改版后

通過對比，我們可以發(fā)現(xiàn)，管理頁面中部分相同功能的入口出現(xiàn)了多個，對于新手用戶來說，很可能造成不必要的困惑；而在新版本中，每個功能模塊只有一個入口，明晰簡潔。

另外，對于入口元素本身而言，需要通過適合的展現(xiàn)形式來提示用戶此入口的功能屬性。例如，一個標準的按鈕控件，用戶會知 道“可以點擊”，但點擊后會發(fā)生什么交互行為，需要通過其他視覺元素進行信息提示（如按鈕上的文字或者具有標識性的ICON），告訴用戶當前的情況和可行的操作方案，這點有些類似生活中的“指示設計”。

下圖是eBay首頁的注冊區(qū)，通過按鈕文字和輔助文本信息，新手用戶也能夠很清楚地了解眼前這兩個Button代表的意義。

www.ebay.com

3、根據(jù)用戶定制合適的入口

交互設計離開用戶研究便是閉門造車，在設計產(chǎn)品操作入口的同時，要充分考慮到不同用戶的需求。用戶劃分維度很多， 《About Face3.0》中根據(jù)與產(chǎn)品的相關度將其分為“新手”、“中間用戶”和“專家”。這三類用戶對產(chǎn)品的了解程度并不一致，操作行為習慣也大相徑庭，若再通 過其他維度將其細分（如“有無目的”、“性別年齡”等），會相當復雜，在對產(chǎn)品進行進一步優(yōu)化時，應當考慮到操作入口對不同用戶的適用性。

“在交互和界面設計中，如何用同一個界面滿足新手用戶和專家用戶的需求是長久以來存在的難題之一。雖然大多數(shù)中間用戶傾 向于保留在這一類型中，但新手不會永遠是新手。要維持高水平的技術程度很困難，因此專家門也在快速變化。新手的變化更快，新手和專家隨著時間推移都會傾向 于成為中間用戶。”（《About Face 3.0》第三章），所以針對用戶的定性研究和定量分析會顯得尤為重要。不過，無論如何劃分用戶人群，有一點共性是至始至終的――產(chǎn)品操作入口設計的終極目 的是讓用戶迅速有效地完成核心需求。

小 結(jié)

綜上所述，對于信息龐雜的電子商務網(wǎng)站而言，出色的操作入口設計好似科幻片中的“星際之門”，能讓用戶隨心所欲地抵達任意空間，享受完美的交互體驗；同樣，失敗的設計也能讓用戶猶如墜入希臘神話中恐怖的克里特島迷宮，郁悶不可自拔。“操作入口明確”，是所有優(yōu)秀交互產(chǎn)品的 共性之一，也是每一個設計師“想用戶之所想”的職責所在。