任何位置都能明確“我在哪里？這里有什么？從這里能去哪里？”
小時(shí)候，童話故事都告訴我們，迷路可不是一件好事。那會(huì)伴隨著困惑、沮喪、憤怒和恐懼。為了避免迷失方向，我們發(fā)明了各種導(dǎo)航工具，大到衛(wèi)星定位系統(tǒng)，小到指南針，人類在這一事情上，極具創(chuàng)意。
在網(wǎng)站上迷失方向，雖然不是什么生死攸關(guān)的事，但會(huì)帶來許多負(fù)面影響，如：用戶體驗(yàn)下降、任務(wù)不能完成，用戶流失等。我們可以通過良好的導(dǎo)航系統(tǒng)來避免這個(gè)情況發(fā)生。好的導(dǎo)航系統(tǒng)可以幫助人們找到在網(wǎng)站中的位置，并幫助他們制定更好的查詢策略，增進(jìn)對(duì)內(nèi)容的理解。
在制定解決方案前，先了解他們?yōu)槭裁磿?huì)迷路：
1、當(dāng)人們不能理解信息時(shí)，會(huì)產(chǎn)生迷惑
2、人們在查詢過程中迷失，不知道下一步該做什么
3、人們可能會(huì)在網(wǎng)站中失去方向感，無法回到以前的頁面，甚至是首頁
圖1
比如在圖1的這個(gè)網(wǎng)站中游走，你容易陷入進(jìn)退兩難的境地。上圖中，兩個(gè)點(diǎn)擊打開的頁面，都沒有導(dǎo)航信息，甚至沒有任何離開當(dāng)前頁面的出口。
4、 人們在在信息系統(tǒng)中偏離了方向，分散了注意力。人們因眾多的、喧賓奪主的信息而偏離了主要任務(wù)。關(guān)于這一點(diǎn)，可以參考交互指南之《突出重點(diǎn)，一目了然》
圖2
圖2中的登錄頁面，可謂琳瑯滿目，信息的豐富程度毫不遜色于首頁，難道設(shè)計(jì)者的目的，是希望用戶放棄登錄這個(gè)主要任務(wù)，去往“更重要”的地方嗎？
你也許會(huì)想，讓用戶不要迷路，不是非常簡單的事情嗎，我只要在所有頁面中放入全局導(dǎo)航，使他們能在網(wǎng)站的核心內(nèi)容之間移動(dòng)。然后放入面包屑，讓他們了解自己所處的位置，一切不就完事大吉了。
但事實(shí)上果真如此嗎？全局導(dǎo)航也許能幫助用戶了解你網(wǎng)站的核心內(nèi)容，但在具體的任務(wù)中，比如圖3中的淘寶全局導(dǎo)航，如果放入在挑選商品或支付的頁面中，恐怕非但不能指引用戶，還會(huì)干擾到任務(wù)的完成。
圖3
小心，別讓自己陷入導(dǎo)航系統(tǒng)的過度設(shè)計(jì)中去。我們所要做的，是使用人物角色和場景作為參考，確定人物角色會(huì)選擇的到達(dá)內(nèi)容的最佳路線，而不是提供所有線路，更不需要將網(wǎng)站的全部結(jié)構(gòu)復(fù)制到每個(gè)頁面當(dāng)中，造成頁面信息負(fù)擔(dān)。好的導(dǎo)航系統(tǒng)讓人們感知不到它的存在。就好象在觀看體育比賽時(shí)，裁判會(huì)做出許多正確的判定，而我們往往忽略他的存在，但一旦裁判員做出了一個(gè)錯(cuò)誤的判決，就會(huì)引來場上觀眾的一片唏噓。
那么，我們應(yīng)該怎樣做，才能保證用戶不在網(wǎng)站中迷失呢？
首先，我們要幫助用戶定向，也就是確定“當(dāng)前位置”。
即便GPS衛(wèi)星定位系統(tǒng)如此強(qiáng)大，它都必須隨時(shí)在地圖上標(biāo)明我們的“當(dāng)前位置”，才能真正為我們導(dǎo)航。而與現(xiàn)實(shí)世界不同的是，在網(wǎng)絡(luò)世界中沒有南北之分，也沒有地理位置，我們必須利用導(dǎo)航系統(tǒng)的各種因素，來為用戶創(chuàng)造可以判斷當(dāng)前位置的情景：
1、 重視網(wǎng)站的品牌信息
用戶應(yīng)該一直知道自己在瀏覽什么網(wǎng)站，將組織的名稱、標(biāo)識(shí)、和身份識(shí)別圖放進(jìn)網(wǎng)站的所有頁面中，是達(dá)到此目的最顯著的方法。
2、 細(xì)節(jié)創(chuàng)建情景
我們可以通過頁面內(nèi)標(biāo)題、頁面文字，向用戶傳遞當(dāng)前位置的信息。瀏覽器標(biāo)題和URL也是用戶進(jìn)行判斷的依據(jù)。當(dāng)前導(dǎo)航選項(xiàng)的高亮狀態(tài)，也是常用的方式。
3、 面包屑
“面包屑”也是標(biāo)明當(dāng)前網(wǎng)站位置的好工具。此外，面包屑還能傳遞網(wǎng)站結(jié)構(gòu)信息，以及記錄用戶的訪問足跡。
4、 逃生艙模式
逃生艙模式也是幫助用戶確定當(dāng)前位置的一張底牌。也就是在網(wǎng)站的所有頁面上設(shè)置統(tǒng)一的出口，無論什么時(shí)候，點(diǎn)擊這里，都可以回到首頁。大部分網(wǎng)站都把逃生艙設(shè)置在網(wǎng)站LOGO上，已經(jīng)成為慣例了。
其次，根據(jù)用戶需求，確定導(dǎo)航模式。
用戶的需求決定了我們應(yīng)當(dāng)放置何種導(dǎo)航鏈接。在不同類型的頁面，用戶所產(chǎn)生的問題不盡相同。我們需要預(yù)測這些問題，然后在設(shè)計(jì)導(dǎo)航的時(shí)候，也問自己同樣的問題。
一般情況下，用戶會(huì)問：“我在哪里？”“我在這里能做什么？”“我還可以去哪里”；在電子商務(wù)網(wǎng)站，他們也許會(huì)問，我該如何找到想要的產(chǎn)品信息；具體在某一產(chǎn)品，他們也許會(huì)問：“我該如何聯(lián)系客服人員？”“我到哪里可以找到相關(guān)產(chǎn)品”。
我們所要做的，并不是想出所有可能發(fā)生的問題，相應(yīng)的，我們也不可能把所有問題的答案都放入頁面當(dāng)中。這個(gè)時(shí)候，人物角色和場景，將發(fā)揮很重要的作用。對(duì)于不同的頁面，弄清楚每個(gè)用戶角色要去哪里，放置他們最需要的導(dǎo)航。比如：你的人物角色需要隨時(shí)從一個(gè)欄目跳轉(zhuǎn)到另一個(gè)欄目嗎？如果是的話，請(qǐng)保證頂級(jí)欄目的鏈接一直可用。
一旦確定了用戶想要到達(dá)的內(nèi)容，就要思考達(dá)到這一目標(biāo)所需要的最簡單、最容易的方案。比如在圖4中，也許你的人物角色需要的，只是一個(gè)“下一組”鏈接。
圖4
最后，通過壓力測試檢驗(yàn)頁面的導(dǎo)航能力。
怎么樣測試這個(gè)頁面的導(dǎo)航能力呢?
（1） 隨機(jī)從你的網(wǎng)站上選擇一個(gè)頁面；
（2） 把這個(gè)頁面打印成黑白的，并把頁面頭部的瀏覽器地址欄和下面的版權(quán)及公司信息部份去掉；
（3） 假裝你是第一次進(jìn)入這個(gè)網(wǎng)站，并試圖回答下面的問題(詳見下列問題列表)；
（4） 在一張紙上寫下你所想的和答案；
問題列表:
1、這個(gè)頁面是寫什么內(nèi)容的？ 在頁面的標(biāo)題處畫一個(gè)方形或在紙上寫清楚；
2、這是個(gè)什么樣的網(wǎng)站? 把網(wǎng)站的名字用圈圈起來，或者自己寫在紙上；
3、這個(gè)網(wǎng)站主要的版塊是什么? 用x標(biāo)識(shí)；
4、這個(gè)頁面中主要的版塊是什么？ 用三角形圍著x來標(biāo)識(shí)；
5、我怎么樣到達(dá)這個(gè)網(wǎng)站的首頁？ 用H標(biāo)識(shí)；
6、我怎么樣才能到達(dá)網(wǎng)站的頂部呢? T來標(biāo)識(shí)；
7、每一組鏈接分別代表什么? 把頁面上的主要鏈接圈出來，并寫下標(biāo)識(shí)；
D:用來標(biāo)識(shí)更多，詳細(xì)介紹及這個(gè)版塊的子頁面等；
N:在同一版塊的其它相鄰頁面；
S:在同一網(wǎng)站上但不相鄰的頁面；
O:離開這個(gè)網(wǎng)站的頁面；
8、你是通過怎么樣的路徑到達(dá)這個(gè)頁面的呢？ 請(qǐng)寫出你到達(dá)這個(gè)頁面的路徑，選擇1>選擇2>選擇3…
讓你們團(tuán)隊(duì)的其它成員或熟悉你網(wǎng)站的朋友也與你做同一試驗(yàn)，大家象跳傘一樣的進(jìn)入網(wǎng)站中的任意一個(gè)頁面，然后把回答記在紙上，你就可以看出導(dǎo)航存在的問題。
關(guān)于導(dǎo)航壓力測試更詳細(xì)的內(nèi)容，請(qǐng)參考四娘的文章，我們就不詳細(xì)說明了。
]]>
導(dǎo)航標(biāo)簽彼此互斥、完全窮盡。
導(dǎo)航標(biāo)簽其實(shí)就是一種文字表達(dá)形式，我們用標(biāo)簽來代表網(wǎng)站上的各種分類信息。比如“聯(lián)系我們”這個(gè)標(biāo)簽，代表的內(nèi)容通常會(huì)包括公司名稱、電話、地址、郵箱等信息。它可以是文字，也可以是圖片。在英文里被稱作“Label”，并不同于我們常說的“tag”標(biāo)簽云圖。
說簡單一點(diǎn)，我們就是要為網(wǎng)站的信息做分類，并為它們起一個(gè)通俗易懂的名字。這其實(shí)是任何人都可以做的一件事情，所以在導(dǎo)航設(shè)計(jì)流程中，它的重要性也常常被忽略。在設(shè)計(jì)產(chǎn)品時(shí)，常會(huì)聽到這樣的話：“這個(gè)欄目該叫什么名字？恩。。。先別管吧，把更重要的工作做了再說。”
然而，站在用戶的角度，導(dǎo)航標(biāo)簽代表的是整個(gè)網(wǎng)站的內(nèi)容、產(chǎn)品的結(jié)構(gòu)，他們必須依靠標(biāo)簽的內(nèi)容和組織方式來尋找網(wǎng)站中的信息。
標(biāo)簽是訪客行為的觸發(fā)詞，好的標(biāo)簽?zāi)芪L客注意力，引導(dǎo)他們準(zhǔn)確地找到信息。導(dǎo)航標(biāo)簽是訪客預(yù)測目標(biāo)頁內(nèi)容的重要依據(jù)，緊跟著它的就是導(dǎo)航中的關(guān)鍵點(diǎn)，網(wǎng)頁的過渡，所以尤為重要，有歧義的標(biāo)簽逼人猜測它的意圖，甚至讓用戶走錯(cuò)路或迷失方向。
比如這個(gè)網(wǎng)站的標(biāo)簽：
這個(gè)網(wǎng)站的導(dǎo)航標(biāo)簽比較極端，首先標(biāo)簽之間的互斥性差，“淘寶潮流榜”、“愛物秀場”、“敗家俱樂部”等，含義和實(shí)際內(nèi)容都非常接近；其次是一致性差，標(biāo)簽的粒度不同、長度不同、語氣不同，甚至還有英文出現(xiàn)，可謂五花八門； 最糟糕的是，在標(biāo)簽的選擇上，用了很多自作聰明的詞語，如“愛騷談資”，用戶很難預(yù)測到鏈接背后是什么內(nèi)容。
設(shè)計(jì)標(biāo)簽的過程，實(shí)際上就是對(duì)信息分類的過程，我們應(yīng)當(dāng)堅(jiān)持MECE原則，也就是彼此獨(dú)立、完全窮盡（Mutally Exclusive,Collectively Exhaustive）。這是一種客觀的角度。你也可以站在主觀的角度進(jìn)行分類，但必須做到標(biāo)準(zhǔn)清晰、在目標(biāo)群體中能獲得充分共識(shí)。
怎樣的標(biāo)簽才能稱作好的標(biāo)簽？它應(yīng)該滿足這幾個(gè)方面：
1、好的標(biāo)簽，應(yīng)該使用客戶的語言，避免使用術(shù)語、行話、縮寫詞等用戶難以理解的詞語；
2、采用描述性的標(biāo)簽，避免使用“信息”、“細(xì)節(jié)”等過于寬泛的詞語，盡量以某種方式加以限定,如：“給買家的信息”、“交易細(xì)節(jié)”。
3、標(biāo)簽之間的互斥性要強(qiáng)，盡可能地尋找差異化；
4、使用聚焦地標(biāo)簽，如，能把貓、狗、倉鼠等歸納為“寵物”，就不要用“動(dòng)物”。
5、在粒度、語法、展現(xiàn)、用法等方面保持標(biāo)簽的一致性；
6、較長的標(biāo)簽往往比短標(biāo)簽更好，但并非越長越好，請(qǐng)盡量控制在12個(gè)字以內(nèi)（這不是一個(gè)硬性規(guī)定）。
那我們設(shè)計(jì)標(biāo)簽時(shí)的詞匯從何而來呢？是憑空想象出來的嗎？當(dāng)然不是啦，你可以從以下幾個(gè)方面獲得詞匯：
1、你自己的網(wǎng)站或產(chǎn)品
你的網(wǎng)站和產(chǎn)品，在前期建設(shè)中，已經(jīng)積累了很多標(biāo)簽。我們要做的，就是遍走整個(gè)網(wǎng)站，盡可能收集所有標(biāo)簽，然后用表格進(jìn)行整理。
比如,我們在淘江湖改版時(shí)，對(duì)現(xiàn)有標(biāo)簽系統(tǒng)進(jìn)行了一次整理，在表格的幫助下，比較容易看出現(xiàn)有標(biāo)簽系統(tǒng)存在的問題。
2、類似網(wǎng)站或競爭對(duì)手網(wǎng)站
如果你還沒有網(wǎng)站和產(chǎn)品，那就要去同類型網(wǎng)站或競爭對(duì)手網(wǎng)站去收集標(biāo)簽了。相信這一做法，在互聯(lián)網(wǎng)上，幾乎是無師自通的。你可以通過對(duì)同類型網(wǎng)站標(biāo)簽系統(tǒng)的觀察和比較，得到一些行業(yè)類比較通用的詞匯，降低用戶的理解成本。
你可以用同樣的方式，收集同類型或競爭對(duì)手網(wǎng)站的標(biāo)簽，以供參考：
3、受控詞表或敘詞表
這是由圖書館員和特定領(lǐng)域的專家所建立的資源，這些詞匯都是專家們付出很多努力的成果，表達(dá)方式精確且一致，而且這些資源通常是公開的。其實(shí)信息架構(gòu)的很多理論，都來源于圖書館管理。
在完全沒有依據(jù)的情況下，我們必須設(shè)計(jì)新的標(biāo)簽系統(tǒng)時(shí)，應(yīng)該怎么辦呢？
你可以對(duì)通過對(duì)內(nèi)容進(jìn)行分析、要求內(nèi)容的產(chǎn)生者提供、或者象專家或你的直接用戶求助。卡片分類法也是比較流行的一種做法。
卡片分類大概有4個(gè)步驟：
1、招募志愿者，大部分項(xiàng)目適當(dāng)?shù)目ㄆ诸愔驹刚呷藬?shù)是 15 人，大型項(xiàng)目可以達(dá)到 30 人。個(gè)人覺得如果只是想對(duì)自己想法進(jìn)行驗(yàn)證的話，5-10 人即可。
2、 準(zhǔn)備卡片，寫上你預(yù)先設(shè)定好的標(biāo)簽（這些標(biāo)簽必須是你們內(nèi)部討論或請(qǐng)教過專家的結(jié)果）。
3、 讓用戶進(jìn)行分類，你可以觀察用戶的分類過程，以及對(duì)標(biāo)簽的理解。
4、 對(duì)卡片分類的結(jié)果進(jìn)行分析，如果數(shù)據(jù)龐大，你可以借用軟件進(jìn)行分析，推薦工具有 IBM EZSort、CardZort、WebSort 等。
對(duì)卡片分類感興趣的同學(xué)可以進(jìn)一步查閱資料，我們在這里就不詳細(xì)說明了。
]]>
看到這張照片，我們一眼能夠看到天宏(圖中這位UED俊男)的眼睛。我們能從他的表情里讀出一些他的性格。一張好的攝影作品，最重要的一點(diǎn)，就是這個(gè)照片是否有焦點(diǎn)，照片的主題是否一目了然。而攝影作品的用光、構(gòu)圖、景深等等手法，其實(shí)就是在讓一個(gè)照片能夠有其焦點(diǎn)，并且利用這些藝術(shù)手法來烘托氣氛，提升主題。 一個(gè)優(yōu)秀的頁面亦如此：應(yīng)當(dāng)突出重點(diǎn)，一目了然。相信大家也知道，一個(gè)用戶在瀏覽網(wǎng)頁的過程中，只是掃描頁面，而不會(huì)像是在看書似的閱讀每一處地方，每一行文字。一個(gè)網(wǎng)頁呈現(xiàn)在用戶面前的時(shí)候，應(yīng)該在5秒之內(nèi)，就能理解：這個(gè)頁面是干什么的？我大致能通過這個(gè)頁面做些什么？接下來我該去哪里？ 我們網(wǎng)站上的每個(gè)頁面都可以是任務(wù)流上的一個(gè)點(diǎn)。這個(gè)點(diǎn)上包含著用戶需要的信息，也許是繼續(xù)找到任務(wù)流的下一個(gè)點(diǎn)的信息(例如導(dǎo)航)，也許是用戶想找到的最終內(nèi)容。而一個(gè)頁面上存在著上百甚至上千個(gè)鏈接（淘寶的寶貝詳情頁面通常有700多個(gè)鏈接），要在這樣茫茫大海中找到用戶需要的鏈接，可見，“突出重點(diǎn)，一目了然”是多么重要。
測試您的頁面
測試您的頁面是否達(dá)到“突出重點(diǎn)，一目了然”，能夠讓用戶在短時(shí)間內(nèi)找到他們所需要的信息，其實(shí)可以是個(gè)低成本的小型測試。fivesecondtest.com 這個(gè)有趣網(wǎng)站是一個(gè)專門做5秒測試的站點(diǎn)。測試者上傳一張站點(diǎn)的截圖，然后被試觀看截圖5秒，然后說出剛才看到了哪些東西。另外一種方式是被試看到截圖，在5秒的時(shí)間中，點(diǎn)擊他所關(guān)注到的所有焦點(diǎn)，最后給出每個(gè)焦點(diǎn)他認(rèn)為的描述。
下圖是本文開篇的時(shí)候，8個(gè)用戶的測試結(jié)果：
這種測試比起眼動(dòng)議來說，測試的成本要低得多，而且能夠明確得測試出你的頁面的瀏覽者是否能在第一時(shí)間發(fā)現(xiàn)他們所需要的內(nèi)容，并且可以比較出，這是否符合你的設(shè)計(jì)的初衷。
達(dá)到“突出重點(diǎn)，一目了然”
那么，如何達(dá)到這樣的“突出重點(diǎn)，一目了然”呢？據(jù)鄙人不完全歸納，可以有以下方法：
為掃描而設(shè)計(jì)，不是閱讀
你幾乎需要把每個(gè)用戶都想象成大忙人――他們沒有時(shí)間停留在你精心設(shè)計(jì)的頁面上，去閱讀每一行你辛苦撰寫的問題，去欣賞你精心設(shè)計(jì)的高光與圓角――他們想要的只是盡快地找到有用的信息。如果找不到，互聯(lián)網(wǎng)上也許有很多替代品，可能是你的競爭對(duì)手，用戶可以輕而易舉地到其他網(wǎng)站上去尋找他們需要的信息。《點(diǎn)石成金》這本書也比較詳盡地描述了這個(gè)要點(diǎn)。相信大家都應(yīng)該閱讀過了。《點(diǎn)石成金》里談到關(guān)于“為掃描而設(shè)計(jì)，不是閱讀”時(shí)，
給出了幾種方法：
- 盡量符合用戶習(xí)慣的設(shè)計(jì)，讓人接受陌生的東西需要代價(jià)，除非我們覺得這個(gè)代價(jià)是必須的。
- 在頁面把越重要的東西越突出，建立清楚的視覺層次。
- 可以點(diǎn)擊的地方必須突出，讓人明顯知道可以點(diǎn)擊。
- 把頁面劃分成明確定義的區(qū)域
- 省略多余的文字
Yahoo Small Bussiness的頁面改版很具有代表性。 改版前：
兩次改版后：
我們可以發(fā)現(xiàn)，改版后的頁面視覺層次得到了很大的提升。白色內(nèi)容區(qū)域、淺藍(lán)色右邊欄和深藍(lán)色的注冊區(qū)域漸漸遞進(jìn)，深藍(lán)色背景上的強(qiáng)烈反差的黃色按鈕“Sign Up”，引導(dǎo)著這個(gè)頁面的主要目的，亦是重點(diǎn)。另外，大家可以發(fā)現(xiàn)，內(nèi)容文字部分比先前的老版本少了一半一半再一半再一半。。。相應(yīng)的，使用列點(diǎn)和大圖的方式傳遞了相同的信息。“Sign Up”顯而易見，而且視覺上有突起的漸變效果也馬上讓人知道，那是個(gè)按鈕。
將功能“藏起來”
部分產(chǎn)品經(jīng)理有一個(gè)這樣的通病，他們每每作出一個(gè)新功能，就愛向用戶炫耀新的工作成果。看起來，這樣挺好，一來讓用戶知道本網(wǎng)站還沒死，而且還在為他們不斷得制作新的功能，二來辛苦開發(fā)了數(shù)天甚至數(shù)月的功能要是沒人用，那該多“杯具”啊！于是乎，你就會(huì)發(fā)現(xiàn)，長期“堅(jiān)持”下來，界面上的元素越來越多。 假設(shè)某一天，這樣的產(chǎn)品經(jīng)理全部被谷歌挖走，那么谷歌的首頁將會(huì)是一個(gè)放滿“杯具”的餐桌：
還有一個(gè)例子來自于某BSP，它的博客頂端存在著一個(gè)工具欄，有30個(gè)左右的鏈接。而這個(gè)工具欄在4年前他的用戶高速增長期其實(shí)并不存在。
如果你了解20-80原則，你應(yīng)該知道：80%的用戶只會(huì)使用20%的功能。所以，為什么要讓那些少人使用的80%的功能總是放在顯眼的位置，擾亂那些只需要20%的功能的大部分用戶呢？(此句有些拗口，我承認(rèn)，麻煩看官們可能要反復(fù)閱讀幾次。。)其實(shí)那些80%的功能大部分是專家用戶所喜歡的，我們應(yīng)當(dāng)將這些功能“藏起來”，目的就是不影響新手和中間用戶，并等著他們?nèi)グl(fā)現(xiàn)，然后大叫：“哦，居然這個(gè)網(wǎng)站有這個(gè)功能，太棒了！”我們來看看Google Reader iPhone/Android 版本最近的小改版：
改版前：
改版后：
大家可以發(fā)現(xiàn)，原來占據(jù)垂直空間的New items/all items的切換、mark all as read等功能，全部藏匿在右上角的下拉按鈕中。Refresh被替換成了一個(gè)可以容易理解的Refresh圖標(biāo)，頂端其他產(chǎn)品的鏈接也祛除了下劃線。 關(guān)于將功能“藏起來”、功能肥胖癥是個(gè)說不完的話題，《哈佛商業(yè)評(píng)論》早在06年的時(shí)候也詳細(xì)探討過這樣的問題，這部分內(nèi)容，我過段時(shí)間也整理整理，為大家奉上吧，本文中，就不作深入探討。
關(guān)注于用戶的主要任務(wù)流
關(guān)注于用戶想要的，而不要強(qiáng)迫用戶查看、理解與操作無關(guān)的事情，是關(guān)于“突出重點(diǎn)、一目了然”的UCD方法論的延伸。這個(gè)想法，解決了什么元素該被“突出重點(diǎn)”從而達(dá)到界面“一目了然”的問題。從用戶角色到場景，到任務(wù)流，可以決定每個(gè)界面――也就是任務(wù)流上的節(jié)點(diǎn)最重要的元素是什么。加之融合商業(yè)目標(biāo)，即成頁面的重點(diǎn)。其他非重點(diǎn)的元素應(yīng)該盡量“藏起”或是“顯得暗淡”些。我們來看一個(gè)來自于Magic Ink(by Bret Victor)的例子： 這是個(gè)書籍的搜索結(jié)果頁面。
我們能夠發(fā)現(xiàn)，這個(gè)頁面覺得凌亂不堪。各種大小，各種顏色，各種粗細(xì)的字體混雜在一起，眼花繚亂。就像《氣球》這首歌唱的：
黑的白的紅的黃的
紫的綠的藍(lán)的灰的
你的我的他的她的
大的小的圓的扁的
好的壞的美的丑的
新的舊的各種款式各種花色任你選擇
說實(shí)話這么多種氣球還真不知道該選哪個(gè)。如果我們可以通過UCD（或者是其他方式）分析出，這個(gè)書籍的結(jié)果頁，用戶需要這些信息：
- 書籍內(nèi)容。這本書標(biāo)題是什么，是關(guān)于什么的？
- 書籍評(píng)價(jià)。這本書好嗎？別人對(duì)它的評(píng)價(jià)如何，這些評(píng)論可信么？
根據(jù)這個(gè)目標(biāo)，重新設(shè)計(jì)后的結(jié)果如下：
我們可以看到，這本書內(nèi)容和評(píng)價(jià)都一目了然，信息結(jié)構(gòu)利于掃描和比較。重要的信息大而具有色彩，次要信息成灰色的小字。關(guān)于這些更詳細(xì)的敘述可以參見原文。
總結(jié)
本文描述了什么是“突出重點(diǎn)，一目了然”。如何測試頁面是否“突出重點(diǎn)，一目了然”，以及如何達(dá)到“突出重點(diǎn)，一目了然”。 有句話我挺喜歡，作為結(jié)局吧。在《What’s Next in Web Design?》中說道的：
“Simplicity is when someone takes care of the details.”
“簡單而不簡陋！”(謝謝青云給出的翻譯！)
我們所追求的界面或者功能做得簡單，不是粗制濫造，而是需要把下在創(chuàng)造更多無用的功能的功夫轉(zhuǎn)變到現(xiàn)有功能的細(xì)節(jié)上。做出來東西容易，但是把東西做好做精難啊！
]]>我們生活在信息繁雜的社會(huì)，尤其是在互聯(lián)網(wǎng)時(shí)代，人們開始通過網(wǎng)絡(luò)開始接觸越來越多的信息，那么，如何獲取/傳遞有效而準(zhǔn)確的信息將非常重要。在網(wǎng)頁交互設(shè)計(jì)中，我們提出：信息獲取和傳達(dá)的過程必須是簡潔清晰，自然易懂。這樣用戶才能夠有效的獲取這些信息，并迅速作出決定。
1.什么是“簡潔自然，清晰易懂”？
簡潔清晰：使信息最簡化
“少即是多”。提倡使用最少的元素來表達(dá)最多的信息。如果信息繁雜，將使用戶承擔(dān)大量的信息負(fù)擔(dān)，造成信息過載，影響效率，不能幫助用戶解決問題。
自然易懂：使用用戶語言
用戶獲取信息的方式多樣，并且對(duì)信息的理解程度也各有不同，所以使用用戶平時(shí)使用和理解的表達(dá)方式去傳遞信息，更可以被用戶所接受。
2.信息表述的種類與設(shè)計(jì)原則
在網(wǎng)頁交互設(shè)計(jì)中，用于傳達(dá)給用戶以有效信息的方式有多種，其中包括：頁面布局，交互文本，界面色彩，圖像與圖標(biāo)，聲音等。
1）頁面布局
界面中的信息布局，會(huì)直接影響用戶獲取信息的效率。所以，一般界面的布局因功能不同考慮的側(cè)重點(diǎn)不同，并且會(huì)讓用戶有一種“區(qū)塊感”，方便用戶對(duì)信息的掃描性瀏覽。
①界面布局盡量有秩序，排列整齊，防止過緊或過松，有明顯的“區(qū)塊感”。切忌混亂。
②布局要充分表現(xiàn)其功能性，對(duì)于每個(gè)區(qū)域所代表的功能應(yīng)有所區(qū)別。如：標(biāo)題區(qū)，工作區(qū)，提示/幫助區(qū)等
③頁面中最重要的信息所在的模塊將是在屏幕中最明顯的位置上。并且，應(yīng)該是最大的。
④布局中的信息需要有明顯的標(biāo)志和簡單介紹，比如標(biāo)題欄和標(biāo)題等。
⑤信息的位置保證一致性，讓用戶可以無需重新建立對(duì)頁面信息分布的理解。
2）交互文本
交互文本指產(chǎn)品界面涉及交互操作中需要用戶理解并反饋的所有的文字：包括標(biāo)題、按鈕文字、鏈接文字，對(duì)話框提示、各種提示信息、幫助等。這些文字直接影響用戶在交互過程中對(duì)預(yù)期的理解，好的交互文本設(shè)計(jì)，可以提高用戶完成任務(wù)的效率。
①表述的信息盡量口語化，不用或少用專業(yè)術(shù)語；
②表述語氣柔和、禮貌，避免使用被動(dòng)語態(tài)，否定句等；
③簡潔、清楚的表達(dá)，文字較多要適當(dāng)斷句，盡量避免左右滾屏，折行。
④對(duì)于同種操作的交互文本，操作行文字保持統(tǒng)一性。
⑤字體使用默認(rèn)/標(biāo)準(zhǔn)的字體，大小以用戶的視覺清晰分辨為主；
3）界面色彩
人眼一共約能區(qū)分一千萬種顏色，所以用戶與界面中顏色的關(guān)注度非常的高，有效的使用色彩區(qū)分信息的級(jí)別，分類等，有助于用戶對(duì)信息和操作產(chǎn)生關(guān)聯(lián)，有效減少用戶的記憶負(fù)擔(dān)。
①根據(jù)不同的產(chǎn)品使用“場景”，選擇其合適的顏色。如，管理界面經(jīng)常使用藍(lán)色。
②考慮顏色對(duì)用戶的心理和文化的影響。比如，黃色代表警告，綠色代表成功等。
③避免界面中同時(shí)出現(xiàn)3種以上的顏色。
④顏色的對(duì)比度明顯，如在深色的背景中使用淺色的文字。
⑤使用顏色指導(dǎo)用戶關(guān)注到到最重要的信息。
4）圖像圖標(biāo)
相對(duì)于單純的文本，圖像以及符號(hào)化的圖標(biāo)更加符合用戶的認(rèn)識(shí)習(xí)慣。往往表述一種信息，一張圖片或者一個(gè)標(biāo)識(shí)更能讓不同用戶理解與接受。適當(dāng)?shù)氖褂脠D片與符號(hào)化的圖標(biāo)，會(huì)讓用戶很自然的建立起認(rèn)知習(xí)慣。
①表意清晰，明確，有高度的概括性與指向性，讓用戶能夠快速的聯(lián)想到對(duì)應(yīng)的功能和操作。
②同類或同一緯度的信息，在形式和色彩風(fēng)格上盡量保持一致性；
③僅在突出重要信息，用戶可能產(chǎn)生理解偏差的情況下使用。避免濫用。
④盡量與交互文本結(jié)合使用。
5）聲音
在網(wǎng)頁的交互設(shè)計(jì)中，用于聲音的信息表述方式相對(duì)與視覺來說不是很多。一般應(yīng)用于提示，提醒，幫助等信息的表述。此類信息表述讓用戶通過聽覺獲取反饋，更加的直接與有效。
①表述清晰，語氣親切，不生硬，有禮貌。
②使用符合用戶認(rèn)知習(xí)慣的聲音。如，使用敲門聲提示好友來訪信息等。
③使用不讓用戶反感（如：恐怖，惡心，煩躁）的聲音。
④在用戶可預(yù)知的情況下發(fā)出聲音。
4.小結(jié)
對(duì)于不同的信息表述方式，我們都要求設(shè)計(jì)師在表達(dá)信息的時(shí)候做到簡潔清晰，自然易懂，盡量讓用戶覺得這是自然而然，而且又是清晰明了的信息。就像小溪流水一樣自然，就像軍人命令一樣明確。這樣才會(huì)讓用戶快速，準(zhǔn)確的完成任務(wù)。
]]>任何一個(gè)交互過程的操作，對(duì)于用戶來說都有學(xué)習(xí)成本，誰也不能保證所有人都可以準(zhǔn)確無誤地走完一個(gè)流程。交互設(shè)計(jì)師在設(shè)計(jì)時(shí)應(yīng)該考慮適時(shí)地給用戶相應(yīng)的幫 助，這一點(diǎn)非常重要。適時(shí)幫助，是指在用戶使用流程中，在需要的時(shí)候能及時(shí)地得到幫助；反之，在不需要幫助的時(shí)候,不要出現(xiàn)信息干擾。
不及時(shí)的幫助會(huì)造成用戶使用進(jìn)程中斷，或者增加用戶達(dá)成目標(biāo)的難度。無效的幫助則可能給用戶造成干擾，影響用戶完成任務(wù)。
“適時(shí)幫助”是一個(gè)偏正結(jié)構(gòu)，首先是幫助，然后制約條件是適時(shí)。我們分開來講。
在理想的交互設(shè)計(jì)狀態(tài)下,我們當(dāng)然希望用戶在使用過程中”無師自通”,但受制硬件、使用環(huán)境、用戶層次等各種原因，有一個(gè)”老師”幫助用戶是非常必要的。
韓愈在《師說》里一開始就講到：古之學(xué)者必有師。師者，所以傳道受業(yè)解惑也。人非生而知之者，孰能無惑？
同理，我們的幫助也是相似的作用，傳道授業(yè)解惑。
1.傳道
傳道主要是理論上的幫助，告訴別人這是什么，主要指一些名詞解釋，規(guī)則說明等等。
2.授業(yè)
授業(yè)主要是操作上的幫助，告訴用戶怎么作才能完成整個(gè)流程。很多當(dāng)前操作提示，流程示意圖等都屬于這個(gè)范疇。
3.解惑
解惑主要是在用戶迷惑不解的時(shí)候提供解決方案，比如對(duì)用戶操作出錯(cuò)的建議，某分流程結(jié)束后的幫助提示等等。
然后主要來說一說“適時(shí)”。這就要討論用戶在什么時(shí)候需要幫助。一般有以下三種情況：
A.在用戶第一次使用某產(chǎn)品功能的時(shí)候。
當(dāng)新用戶使用一個(gè)產(chǎn)品的時(shí)候需要幫助，或者老用戶在使用一項(xiàng)新功能的時(shí)候，由于認(rèn)知不足，用戶會(huì)覺得陌生，不知所措。此時(shí)幫助應(yīng)該及時(shí)出現(xiàn)，但不能一直強(qiáng)制出現(xiàn)，應(yīng)該讓用戶有選擇的余地。
B.在用戶已經(jīng)出錯(cuò)或者將要出錯(cuò)的時(shí)候。
當(dāng)用戶在流程中不小心與系統(tǒng)現(xiàn)在規(guī)則有了沖突的時(shí)候應(yīng)該及時(shí)提醒，不能任其為之，到最后顯示一句“對(duì)不起，你出錯(cuò)了”，這樣可能會(huì)造成用戶主動(dòng)中斷流程。
C.在用戶遇到不明白的問題的時(shí)候。
用戶遇到不明白的名詞或者操作時(shí)，應(yīng)該及時(shí)給出解釋。用戶了解信息主體時(shí)候，如果有必要的補(bǔ)充說明也應(yīng)該及時(shí)出現(xiàn)。
當(dāng)出現(xiàn)以上三種情況的時(shí)候，我們應(yīng)該采取適當(dāng)?shù)姆椒▉頌橛脩籼峁椭?BR>1.幫助信息明顯，提示方式靈活。
看案例:
google文檔的新功能幫助信息，第一次訪問時(shí)，用明顯的形式出現(xiàn)，用戶點(diǎn)擊關(guān)閉以后再也不會(huì)出現(xiàn)；如果點(diǎn)擊以后提醒我，幫助信息會(huì)暫時(shí)關(guān)閉，下次訪問還會(huì)出現(xiàn)。
2.及時(shí)反饋操作，防止用戶出錯(cuò)；分析錯(cuò)誤原因，給出合理建議。
看案例:
上圖針對(duì)錯(cuò)誤頁面的幫助提示，分析用戶可能出現(xiàn)的原因，并給出了一些建議。我們再來看看下面這個(gè)反面案例。
用戶在注冊過程中，用戶已經(jīng)存在的情況下，輸入是沒有提示的；直到所有資料填寫好之后提交，才彈出結(jié)果頁面，說用戶名已經(jīng)被注冊，然后讓用戶重新填寫。這個(gè)幫助信息來得太晚了，如果在注冊用戶填寫用戶名的時(shí)候，就檢測該用戶名是否有效，就不會(huì)讓用戶覺得前功盡棄了。
3.及時(shí)補(bǔ)充，信息完整
再看QQ會(huì)員頁面，在開通會(huì)員的大按鈕下有一個(gè)“QQ會(huì)員是什么”的幫助信息，這個(gè)幫助就是為了讓用戶首先在理論上對(duì)QQ會(huì)員有一個(gè)認(rèn)知。對(duì)用戶不了解的信息給出了通往答案的道路。
總之，幫助在交互設(shè)計(jì)的有效性里有相當(dāng)重要的地位，而適時(shí)性是幫助的重要關(guān)鍵點(diǎn)。我們可以用兩個(gè)詞組合起來，形容適時(shí)幫助的特點(diǎn)，那就是”聊勝于無，過猶不及”。只有及時(shí)而不多余的幫助信息才能更好地幫助用戶，從而完成一個(gè)具有“有效性”的交互設(shè)計(jì)。
]]>也就是說，交互設(shè)計(jì)實(shí)用指南所定義的“可及”就是“信息可及”。具體解釋為在產(chǎn)品設(shè)計(jì)應(yīng)用過程中，應(yīng)當(dāng)考慮到特殊人群的使用狀況，讓這部分用戶享受無障礙設(shè)計(jì)帶來的便捷，在瀏覽，使用網(wǎng)頁時(shí)能很順暢的使用該網(wǎng)頁所提供的相關(guān)資源。
交互設(shè)計(jì)主要考慮的幾個(gè)特殊人群：
1.色盲
據(jù)統(tǒng)計(jì)，這個(gè)世界上有大約8.65%的男性和0.43%的女性，在識(shí)別部分或者全部顏色時(shí)有困難。我們通常籠統(tǒng)地稱這種缺陷為色盲(Color Blindness)。其中，輕度的色覺異常稱為色弱。
2.肢體殘疾
而僅僅在我國，殘疾人數(shù)就約有8300萬，占總?cè)丝诘?.34%，其中肢體殘疾者2412萬人，占29.07%。肢體殘疾人士在精神智力方面和正常人是沒有太大分別的，這部分群體由于活動(dòng)不便，對(duì)于以電腦，移動(dòng)終端為媒介的網(wǎng)絡(luò)產(chǎn)品有著更為迫切的使用需求。
3.老人，兒童（5～12歲）
更值得關(guān)注的是人口老齡化的趨勢在中國越來越嚴(yán)峻，有一個(gè)預(yù)測的數(shù)據(jù)顯示，到2050年中國將有4.3億的老齡人。老年人退休了，時(shí)間相對(duì)充裕，除了從傳統(tǒng)媒體獲得信息外，對(duì)于網(wǎng)絡(luò)信息獲取的需求也在日益增長。家長們?yōu)榱碎_闊子女眼界的需要，也會(huì)允許兒童在特定時(shí)間上特定的網(wǎng)站來開發(fā)智力，學(xué)習(xí)娛樂。
4.文盲
另外從文化程度的差異來看，在中國文盲的數(shù)量仍然占人口總數(shù)相當(dāng)大的比例，現(xiàn)在我們的青壯年文盲占5.8%，這部分人群雖然網(wǎng)絡(luò)基礎(chǔ)知識(shí)幾乎為零，但是一旦接觸到網(wǎng)絡(luò)，他們會(huì)有很高的學(xué)習(xí)欲望和熱情，如何幫助他們盡快的使用網(wǎng)絡(luò)，也是Web交互設(shè)計(jì)師應(yīng)該關(guān)注的一個(gè)問題。
5.其他
其他對(duì)信息使用不擅長的人
交互設(shè)計(jì)的方法：
對(duì)于如此多的特殊用戶，無論是出于專業(yè)精神還是商業(yè)利益，Web產(chǎn)品設(shè)計(jì)師都應(yīng)該去關(guān)注他們，這也是作為一個(gè)設(shè)計(jì)師社會(huì)責(zé)任所在。那么，所設(shè)計(jì)的產(chǎn)品如何能夠滿足對(duì)特殊人群的“可及”呢，這就要求設(shè)計(jì)師在設(shè)計(jì)一個(gè)產(chǎn)品的時(shí)候，時(shí)刻要提醒自己不能忘記特殊人群，換位思考，站在特殊人群使用的角度上來設(shè)計(jì)Web產(chǎn)品的整體布局，各個(gè)元素的具體形態(tài)及操作行為。關(guān)于這一部分，交互設(shè)計(jì)實(shí)用指南也給出了一些基本的思路，以下是一些可借鑒的設(shè)計(jì)方法。
1.使用形狀+色彩的信息提示
這一點(diǎn)對(duì)于色盲這類人群尤為重要，和普通用戶相比，他們的缺陷是在顏色識(shí)別方面，也就是說如果設(shè)計(jì)師在某個(gè)地方僅僅使用了色彩作為信息提示，的話，那就有可能帶來問題了，下面的例子：
上圖是蘋果的官方網(wǎng)站曾提供的一個(gè)在線工具，幫助用戶來查詢哪些專賣店明天有貨。 蘋果的設(shè)計(jì)師用綠色填充的圓圈表示有貨，紅色的圓圈表示沒貨，貌似挺清晰的，對(duì)于普通人當(dāng)然沒問題。但是對(duì)于綠色色盲用戶來說，就不容易了。
其實(shí)，我們只需要優(yōu)化提示ICON就能解決這個(gè)問題，修改如下：
這個(gè)例子告訴我們，在使用設(shè)計(jì)元素時(shí)，要盡量使用形狀+色彩的方式來表現(xiàn)信息，或者使用文字的提示。這樣對(duì)于正常用戶和對(duì)顏色識(shí)別有障礙的特殊用戶，都不影響他們的識(shí)別。有一個(gè)小技巧可以使用，在完成設(shè)計(jì)時(shí)，可以把自己的設(shè)計(jì)圖做去色處理，然后一項(xiàng)項(xiàng)的去做交互測試，如此可以有效的避免色彩的識(shí)別問題。
2.簡化操作方式
無論是老人還是文盲對(duì)于網(wǎng)絡(luò)產(chǎn)品的操作都有信心不足的情況，一個(gè)簡便的操作方式，令他們快速實(shí)現(xiàn)目標(biāo)，對(duì)于增長信心非常有幫助。對(duì)于肢體殘疾人士，他們的困難在于使用交互輸入設(shè)備，如鼠標(biāo)和鍵盤比正常人更不容易，也需要簡化操作方式。比如在設(shè)計(jì)操作時(shí)盡可能地采用“選擇”的方式而不是“填寫”（避免給手指殘疾的用戶增加負(fù)擔(dān)）。比如下面這個(gè)輸入日期的設(shè)計(jì)：
3.容錯(cuò)和及時(shí)幫助
這也是交互設(shè)計(jì)指南中兩個(gè)非常重要的部分，對(duì)于特殊人群來說，這兩點(diǎn)顯得更加重要。具體的設(shè)計(jì)方法可以參考接下來的文章http://ued.taobao.com/blog/category/ixd_guide/ 。
4.使用視覺、聽覺，觸覺等多元化的手法傳達(dá)必要的資訊
在產(chǎn)品設(shè)計(jì)中，對(duì)于重要的操作及信息提示可以使用語音提示來配合視覺樣式來提示用戶操作的狀態(tài)。比如在一些智能手機(jī)產(chǎn)品上，點(diǎn)擊觸摸屏數(shù)字鍵盤時(shí)，不但被選中的數(shù)字鍵的底色會(huì)發(fā)生變化，而且屏幕還有震動(dòng)的觸感提示。
5.使用輔助性的工具
以目前的技術(shù)，語音識(shí)別可以部分解決單純的輸入問題，比如Windows7的語音指令功能，在操作者說出“打開Word”這句話時(shí)，電腦就可以自動(dòng)啟動(dòng)該軟件，也可以為視力不好的老年使用者逐字逐句地朗讀電腦上顯示的任意文章，但是要靠語音識(shí)別完全解決人和電腦間大量的快速的交互行為還要走很長的路。在未來，也許大腦可以直接來操控電腦，這方面已經(jīng)有了一些研究成果。下圖為谷歌手機(jī)中文語音搜索的界面：
另外可以內(nèi)置輔助殘疾人的工具，Windows7有一個(gè)新的功能，叫做OSK，即屏幕鍵盤。不習(xí)慣使用鍵盤的人可以用鼠標(biāo)來點(diǎn)這個(gè)屏幕鍵盤，肢體不是很方便的使用者，可以把屏幕鍵盤上的按鍵放大從而提高準(zhǔn)確性；視力不好的老年使用者，可以把按鍵上的字放大，以便閱讀。
6.容易瀏覽及合理的信息架構(gòu)
對(duì)于老年人來說，看互聯(lián)網(wǎng)會(huì)覺得眼花，他們感覺所有的字都太小，不容易瀏覽。所以在設(shè)計(jì)時(shí)要考慮到，能切換到可以適合老年人查看的字體和網(wǎng)頁樣式。比如百度推出了老年搜索來滿足這個(gè)需求，字體較大且突出老年人常用的功能,如下圖：
小結(jié)：
以上拋磚引玉提了幾點(diǎn)為“信息可及”設(shè)計(jì)時(shí)可以考慮的方法，對(duì)于特殊人群的無障礙設(shè)計(jì)需要更深入的挖掘特殊人群的需求，根據(jù)他們的生理和心理狀況，有針對(duì)性的開展設(shè)計(jì)工作。
隨著社會(huì)文明的提高，交互設(shè)計(jì)對(duì)特殊人群的關(guān)注度也越來越高，可及即無障礙設(shè)計(jì)的理念也越來越得到絕大多數(shù)設(shè)計(jì)師的提倡。在我國，互聯(lián)網(wǎng)協(xié)會(huì)網(wǎng)站于近期正式開通了信息無障礙樣板專欄，專欄介紹了國內(nèi)外無障礙行業(yè)標(biāo)準(zhǔn)的內(nèi)容和鏈接，其中有一些設(shè)計(jì)的規(guī)范，有興趣的話，可以下載，對(duì)于網(wǎng)站的設(shè)計(jì)有一定的參考價(jià)值。
據(jù)聯(lián)合國經(jīng)濟(jì)和社會(huì)事務(wù)部發(fā)表的研究報(bào)告，目前全球100家主要網(wǎng)站中只有3家能夠滿足殘障人士的需要，這方面要走的路還有很長。
]]>“操作入口明確”，就是指產(chǎn)品的任何一個(gè)功能都要有明確、合理的入口。“操作入口”，指的是產(chǎn)品內(nèi)部不同模塊之間的轉(zhuǎn)接元素，例如在Web產(chǎn)品中，按鈕控件、輸入框、文字鏈等都屬于操作入口；“明確”指的是入口的視覺感是清晰的、可識(shí)別的；“合理”是指入口的出現(xiàn)是符合用戶操作邏輯的，適時(shí)的。
之所以要提出“操作入口明確”，是因?yàn)橛脩粼谑褂卯a(chǎn)品的過程中，往往遵循的是可分析的行為邏輯。對(duì)于產(chǎn)品本身而言，必須有相對(duì)應(yīng)的操作提示來引導(dǎo)用戶最有效地獲取信息，還原為實(shí)現(xiàn)層面就是明確、合理的操作入口。如果說首頁是整個(gè)網(wǎng)站的門戶，那么操作入口就是連接各個(gè)子頁面的樞紐。設(shè)計(jì)師的終極目的， 就是通過對(duì)這些樞紐的優(yōu)化讓用戶利用最有效的方式在最短時(shí)間內(nèi)完成自己的預(yù)期任務(wù)。
對(duì)于基于WEB的電子商務(wù)而言，核心價(jià)值是信息資源，而能否將這些海量數(shù)據(jù)合理地推送給用戶，則是產(chǎn)品生存的關(guān)鍵。操作入口的設(shè)計(jì)，甚至可以看做 “通過對(duì)引導(dǎo)方式的優(yōu)化間接達(dá)到對(duì)信息資源的歸類”――這很像圖書館中的書類標(biāo)簽管理，用戶可以根據(jù)不同的類目標(biāo)簽找到自己想看的書。失敗的操作入口所帶來的后果往往是災(zāi)難性的，功能失效、位置隱蔽、信息干擾……都會(huì)給用戶帶來嚴(yán)重的挫敗感，使其絕望地湮沒在茫茫的信息海洋中。所以，明確合理的操作入口設(shè)計(jì)，是對(duì)產(chǎn)品“有效性”的保障，更是對(duì)用戶體驗(yàn)的尊重。
那么，在具體的設(shè)計(jì)中如何做到“操作入口明確”呢？
1、強(qiáng)化重點(diǎn)，弱化周邊
星爺《唐伯虎點(diǎn)秋香》中的精彩片段，一聲“美女”換來諸多牛鬼蛇神的壯觀回眸和秋香MM的驚鴻一瞥――“美女這東西是要需要比較地”。WEB產(chǎn)品也 一樣，尤其是海量信息的電子商務(wù)網(wǎng)站，由信息架構(gòu)衍生出的各類功能入口相當(dāng)復(fù)雜，部署在頁面的各個(gè)角落，一不留心就被疏漏。通常有兩種方法來解決這類問題：一是增加入口數(shù)量，即“廣撒網(wǎng)”，同樣的功能入口有多個(gè)，以此增加功能模塊的使用率，不過這種方法存在較大隱患，后面會(huì)詳細(xì)分析；二是“強(qiáng)化重點(diǎn)，弱化周邊”，即在視覺上將入口模塊凸顯出來，采用精妙的布局，并適當(dāng)弱化周邊的信息展示，加大二者的權(quán)重對(duì)比，客觀上增加用戶識(shí)別的準(zhǔn)確性。
例如地球人最熟悉的Google首頁：
濃郁藝術(shù)氣息的LOGO作為唯一的色彩元素有效地抓住了瀏覽者的視覺中心，輸入欄和Button作為功能核心占據(jù)了頁面的心臟位置，這種組合讓用戶 通過第一視覺便能夠準(zhǔn)確理解頁面所表達(dá)的信息邏輯――“輸入關(guān)鍵詞”+“點(diǎn)擊按鈕”=“Everything you want”。
再看一個(gè)反例，如圖：
面對(duì)這樣一個(gè)下載頁面，面對(duì)這樣一個(gè)搶眼的大Button（標(biāo)記②），相信即使是電信用戶，也會(huì)很大方地支持下網(wǎng)通……但是，點(diǎn)擊之后彈出的卻是下載遨游瀏覽器的窗口，崩潰之余再仔細(xì)查看，終于發(fā)現(xiàn)在華麗的廣告位旁邊蜷縮著一個(gè)毫無特色的“立刻下載”（標(biāo)記 ①）――剎那間，無數(shù)用戶被這種飽含“讓賢”哲理的設(shè)計(jì)深深震撼了！
2、入口信息明確易識(shí)別
上面提到，增加入口數(shù)量雖然在一定程度上有助于提高功能模塊的使用率，但也存在致命的缺陷――入口信息不明確。因?yàn)椤叭肟凇钡韧谟脩舻摹斑x擇”， 入口越多，選擇越多，“過多的選擇等于沒有選擇”，這勢必會(huì)造成用戶使用產(chǎn)品時(shí)的疑惑：這幾個(gè)鏈接和按鈕好像都一樣啊，該選哪個(gè)呢？所以，要根據(jù)頁面本身 的信息量嚴(yán)格控制同功能入口的數(shù)量，保證有效的識(shí)別性，讓用戶迅速找到正確的入口。
這次用我們可愛的兄弟產(chǎn)品“支付寶”為例，看看改版前后的細(xì)節(jié)變化：
改版前
改版后
通過對(duì)比，我們可以發(fā)現(xiàn)，管理頁面中部分相同功能的入口出現(xiàn)了多個(gè)，對(duì)于新手用戶來說，很可能造成不必要的困惑；而在新版本中，每個(gè)功能模塊只有一個(gè)入口，明晰簡潔。
另外，對(duì)于入口元素本身而言，需要通過適合的展現(xiàn)形式來提示用戶此入口的功能屬性。例如，一個(gè)標(biāo)準(zhǔn)的按鈕控件，用戶會(huì)知 道“可以點(diǎn)擊”，但點(diǎn)擊后會(huì)發(fā)生什么交互行為，需要通過其他視覺元素進(jìn)行信息提示（如按鈕上的文字或者具有標(biāo)識(shí)性的ICON），告訴用戶當(dāng)前的情況和可行的操作方案，這點(diǎn)有些類似生活中的“指示設(shè)計(jì)”。
下圖是eBay首頁的注冊區(qū)，通過按鈕文字和輔助文本信息，新手用戶也能夠很清楚地了解眼前這兩個(gè)Button代表的意義。
3、根據(jù)用戶定制合適的入口
交互設(shè)計(jì)離開用戶研究便是閉門造車，在設(shè)計(jì)產(chǎn)品操作入口的同時(shí)，要充分考慮到不同用戶的需求。用戶劃分維度很多， 《About Face3.0》中根據(jù)與產(chǎn)品的相關(guān)度將其分為“新手”、“中間用戶”和“專家”。這三類用戶對(duì)產(chǎn)品的了解程度并不一致，操作行為習(xí)慣也大相徑庭，若再通 過其他維度將其細(xì)分（如“有無目的”、“性別年齡”等），會(huì)相當(dāng)復(fù)雜，在對(duì)產(chǎn)品進(jìn)行進(jìn)一步優(yōu)化時(shí)，應(yīng)當(dāng)考慮到操作入口對(duì)不同用戶的適用性。
“在交互和界面設(shè)計(jì)中，如何用同一個(gè)界面滿足新手用戶和專家用戶的需求是長久以來存在的難題之一。雖然大多數(shù)中間用戶傾 向于保留在這一類型中，但新手不會(huì)永遠(yuǎn)是新手。要維持高水平的技術(shù)程度很困難，因此專家門也在快速變化。新手的變化更快，新手和專家隨著時(shí)間推移都會(huì)傾向 于成為中間用戶。”（《About Face 3.0》第三章），所以針對(duì)用戶的定性研究和定量分析會(huì)顯得尤為重要。不過，無論如何劃分用戶人群，有一點(diǎn)共性是至始至終的――產(chǎn)品操作入口設(shè)計(jì)的終極目 的是讓用戶迅速有效地完成核心需求。
小 結(jié)
綜上所述，對(duì)于信息龐雜的電子商務(wù)網(wǎng)站而言，出色的操作入口設(shè)計(jì)好似科幻片中的“星際之門”，能讓用戶隨心所欲地抵達(dá)任意空間，享受完美的交互體驗(yàn)；同樣，失敗的設(shè)計(jì)也能讓用戶猶如墜入希臘神話中恐怖的克里特島迷宮，郁悶不可自拔。“操作入口明確”，是所有優(yōu)秀交互產(chǎn)品的 共性之一，也是每一個(gè)設(shè)計(jì)師“想用戶之所想”的職責(zé)所在。
]]>