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

測(cè)試您的頁(yè)面

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

下圖是本文開(kāi)篇的時(shí)候，8個(gè)用戶(hù)的測(cè)試結(jié)果：

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

達(dá)到“突出重點(diǎn)，一目了然”

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

為掃描而設(shè)計(jì)，不是閱讀

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

給出了幾種方法：

盡量符合用戶(hù)習(xí)慣的設(shè)計(jì)，讓人接受陌生的東西需要代價(jià)，除非我們覺(jué)得這個(gè)代價(jià)是必須的。
在頁(yè)面把越重要的東西越突出，建立清楚的視覺(jué)層次。
可以點(diǎn)擊的地方必須突出，讓人明顯知道可以點(diǎn)擊。
把頁(yè)面劃分成明確定義的區(qū)域
省略多余的文字

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

兩次改版后：

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

將功能“藏起來(lái)”

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

還有一個(gè)例子來(lái)自于某BSP，它的博客頂端存在著一個(gè)工具欄，有30個(gè)左右的鏈接。而這個(gè)工具欄在4年前他的用戶(hù)高速增長(zhǎng)期其實(shí)并不存在。

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

改版前：

改版后：

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

關(guān)注于用戶(hù)的主要任務(wù)流

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

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

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

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

書(shū)籍內(nèi)容。這本書(shū)標(biāo)題是什么，是關(guān)于什么的？
書(shū)籍評(píng)價(jià)。這本書(shū)好嗎？別人對(duì)它的評(píng)價(jià)如何，這些評(píng)論可信么？
根據(jù)這個(gè)目標(biāo)，重新設(shè)計(jì)后的結(jié)果如下：

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

總結(jié)

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

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

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

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

原文：http://ued.taobao.com/blog/2010/01/11/the-practice-guidelines-of-interaction-design-emphasis-and-clarity/