看到這張照片，我們一眼能夠看到天宏(圖中這位UED俊男)的眼睛。我們能從他的表情裡讀出一些他的性格。一張好的攝影作品，最重要的一點，就是這個照片是否有焦點，照片的主題是否一目了然。而攝影作品的用光、構圖、景深等等手法，其實就是在讓一個照片能夠有其焦點，并且利用這些藝術手法來烘托氣氛，提升主題。 一個優秀的頁面亦如此：應當突出重點，一目了然。相信大家也知道，一個使用者在浏覽網頁的過程中，隻是掃描頁面，而不會像是在看書似的閱讀每一處地方，每一行文字。一個網頁呈現在使用者面前的時候，應該在5秒之内，就能了解：這個頁面是幹什麼的？我大緻能通過這個頁面做些什麼？接下來我該去哪裡？ 我們網站上的每個頁面都可以是任務流上的一個點。這個點上包含着使用者需要的資訊，也許是繼續找到任務流的下一個點的資訊(例如導航)，也許是使用者想找到的最終内容。而一個頁面上存在着上百甚至上千個連結（淘寶的寶貝詳情頁面通常有700多個連結），要在這樣茫茫大海中找到使用者需要的連結，可見，“突出重點，一目了然”是多麼重要。
測試您的頁面
測試您的頁面是否達到“突出重點，一目了然”，能夠讓使用者在短時間内找到他們所需要的資訊，其實可以是個低成本的小型測試。fivesecondtest.com 這個有趣網站是一個專門做5秒測試的站點。測試者上傳一張站點的截圖，然後被試觀看截圖5秒，然後說出剛才看到了哪些東西。另外一種方式是被試看到截圖，在5秒的時間中，點選他所關注到的所有焦點，最後給出每個焦點他認為的描述。
下圖是本文開篇的時候，8個使用者的測試結果：
這種測試比起眼動議來說，測試的成本要低得多，而且能夠明确得測試出你的頁面的浏覽者是否能在第一時間發現他們所需要的内容，并且可以比較出，這是否符合你的設計的初衷。
達到“突出重點，一目了然”
那麼，如何達到這樣的“突出重點，一目了然”呢？據鄙人不完全歸納，可以有以下方法：
為掃描而設計，不是閱讀
你幾乎需要把每個使用者都想象成大忙人——他們沒有時間停留在你精心設計的頁面上，去閱讀每一行你辛苦撰寫的問題，去欣賞你精心設計的高光與圓角——他們想要的隻是盡快地找到有用的資訊。如果找不到，網際網路上也許有很多替代品，可能是你的競争對手，使用者可以輕而易舉地到其他網站上去尋找他們需要的資訊。《點石成金》這本書也比較詳盡地描述了這個要點。相信大家都應該閱讀過了。《點石成金》裡談到關于“為掃描而設計，不是閱讀”時，
給出了幾種方法：
- 盡量符合使用者習慣的設計，讓人接受陌生的東西需要代價，除非我們覺得這個代價是必須的。
- 在頁面把越重要的東西越突出，建立清楚的視覺層次。
- 可以點選的地方必須突出，讓人明顯知道可以點選。
- 把頁面劃分成明确定義的區域
- 省略多餘的文字
Yahoo Small Bussiness的頁面改版很具有代表性。 改版前：
兩次改版後：
我們可以發現，改版後的頁面視覺層次得到了很大的提升。白色内容區域、淺藍色右邊欄和深藍色的注冊區域漸漸遞進，深藍色背景上的強烈反差的黃色按鈕“Sign Up”，引導着這個頁面的主要目的，亦是重點。另外，大家可以發現，内容文字部分比先前的老版本少了一半一半再一半再一半。。。相應的，使用列點和大圖的方式傳遞了相同的資訊。“Sign Up”顯而易見，而且視覺上有突起的漸變效果也馬上讓人知道，那是個按鈕。
将功能“藏起來”
部分産品經理有一個這樣的通病，他們每每作出一個新功能，就愛向使用者炫耀新的工作成果。看起來，這樣挺好，一來讓使用者知道本網站還沒死，而且還在為他們不斷得制作新的功能，二來辛苦開發了數天甚至數月的功能要是沒人用，那該多“杯具”啊！于是乎，你就會發現，長期“堅持”下來，界面上的元素越來越多。 假設某一天，這樣的産品經理全部被谷歌挖走，那麼谷歌的首頁将會是一個放滿“杯具”的餐桌：
還有一個例子來自于某BSP，它的部落格頂端存在着一個工具欄，有30個左右的連結。而這個工具欄在4年前他的使用者高速增長期其實并不存在。
如果你了解20-80原則，你應該知道：80%的使用者隻會使用20%的功能。是以，為什麼要讓那些少人使用的80%的功能總是放在顯眼的位置，擾亂那些隻需要20%的功能的大部分使用者呢？(此句有些拗口，我承認，麻煩看官們可能要反複閱讀幾次。。)其實那些80%的功能大部分是專家使用者所喜歡的，我們應當将這些功能“藏起來”，目的就是不影響新手和中間使用者，并等着他們去發現，然後大叫：“哦，居然這個網站有這個功能，太棒了！”我們來看看Google Reader iPhone/Android 版本最近的小改版：
改版前：
改版後：
大家可以發現，原來占據垂直空間的New items/all items的切換、mark all as read等功能，全部藏匿在右上角的下拉按鈕中。Refresh被替換成了一個可以容易了解的Refresh圖示，頂端其他産品的連結也祛除了下劃線。 關于将功能“藏起來”、功能肥胖症是個說不完的話題，《哈佛商業評論》早在06年的時候也詳細探讨過這樣的問題，這部分内容，我過段時間也整理整理，為大家奉上吧，本文中，就不作深入探讨。
關注于使用者的主要任務流
關注于使用者想要的，而不要強迫使用者檢視、了解與操作無關的事情，是關于“突出重點、一目了然”的UCD方法論的延伸。這個想法，解決了什麼元素該被“突出重點”進而達到界面“一目了然”的問題。從使用者角色到場景，到任務流，可以決定每個界面——也就是任務流上的節點最重要的元素是什麼。加之融合商業目标，即成頁面的重點。其他非重點的元素應該盡量“藏起”或是“顯得暗淡”些。我們來看一個來自于Magic Ink(by Bret Victor)的例子： 這是個書籍的搜尋結果頁面。
我們能夠發現，這個頁面覺得淩亂不堪。各種大小，各種顔色，各種粗細的字型混雜在一起，眼花缭亂。就像《氣球》這首歌唱的：
黑的白的紅的黃的
紫的綠的藍的灰的
你的我的他的她的
大的小的圓的扁的
好的壞的美的醜的
新的舊的各種款式各種花色任你選擇
說實話這麼多種氣球還真不知道該選哪個。如果我們可以通過UCD（或者是其他方式）分析出，這個書籍的結果頁，使用者需要這些資訊：
- 書籍内容。這本書标題是什麼，是關于什麼的？
- 書籍評價。這本書好嗎？别人對它的評價如何，這些評論可信麼？
根據這個目标，重新設計後的結果如下：
我們可以看到，這本書内容和評價都一目了然，資訊結構利于掃描和比較。重要的資訊大而具有色彩，次要資訊成灰色的小字。關于這些更詳細的叙述可以參見原文。
總結
本文描述了什麼是“突出重點，一目了然”。如何測試頁面是否“突出重點，一目了然”，以及如何達到“突出重點，一目了然”。 有句話我挺喜歡，作為結局吧。在《What’s Next in Web Design?》中說道的：
“Simplicity is when someone takes care of the details.”
“簡單而不簡陋！”(謝謝青雲給出的翻譯！)
我們所追求的界面或者功能做得簡單，不是粗制濫造，而是需要把下在創造更多無用的功能的功夫轉變到現有功能的細節上。做出來東西容易，但是把東西做好做精難啊！