交互設計實用指南系列(5) – 突出重點，一目瞭然

連接：http://ued.taobao.org/blog/2010/01/the-practice-guidelines-of-interaction-design-emphasis-and-clarity/

 

看到這張照片，咱們一眼可以看到天宏(圖中這位UED俊男)的眼睛。咱們能從他的表情裏讀出一些他的性格。一張好的攝影做品，最重要的一點，就是這個照片是否有焦點，照片的主題是否一目瞭然。而攝影做品的用光、構圖、景深等等手法，其實就是在讓一個照片可以有其焦點，而且利用這些藝術手法來烘托氣氛，提高主題。 一個優秀的頁面亦如此：應當突出重點，一目瞭然。相信你們也知道，一個用戶在瀏覽網頁的過程當中，只是掃描頁面，而不會像是在看書似的閱讀每一處地方，每一行文字。一個網頁呈如今用戶面前的時候，應該在5秒以內，就能理解：這個頁面是幹什麼的？我大體能經過這個頁面作些什麼？接下來我該去哪裏？ 咱們網站上的每一個頁面均可以是任務流上的一個點。這個點上包含着用戶須要的信息，也許是繼續找到任務流的下一個點的信息(例如導航)，也許是用戶想找到的最終內容。而一個頁面上存在着上百甚至上千個連接（淘寶的寶貝詳情頁面一般有700多個連接），要在這樣茫茫大海中找到用戶須要的連接，可見，「突出重點，一目瞭然」是多麼重要。

測試您的頁面

測試您的頁面是否達到「突出重點，一目瞭然」，可以讓用戶在短期內找到他們所須要的信息，其實能夠是個低成本的小型測試。fivesecondtest.com 這個有趣網站是一個專門作5秒測試的站點。測試者上傳一張站點的截圖，而後被試觀看截圖5秒，而後說出剛纔看到了哪些東西。另一種方式是被試看到截圖，在5秒的時間中，點擊他所關注到的全部焦點，最後給出每一個焦點他認爲的描述。

 

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

這種測試比起眼動議來講，測試的成本要低得多，並且可以明確得測試出你的頁面的瀏覽者是否能在第一時間發現他們所須要的內容，而且能夠比較出，這是否符合你的設計的初衷。

達到「突出重點，一目瞭然」

那麼，如何達到這樣的「突出重點，一目瞭然」呢？據鄙人不徹底概括，能夠有如下方法：

爲掃描而設計，不是閱讀

你幾乎須要把每一個用戶都想象成大忙人——他們沒有時間停留在你精心設計的頁面上，去閱讀每一行你辛苦撰寫的問題，去欣賞你精心設計的高光與圓角——他們想要的只是儘快地找到有用的信息。若是找不到，互聯網上也許有不少替代品，多是你的競爭對手，用戶能夠垂手可得地到其餘網站上去尋找他們須要的信息。《點石成金》這本書也比較詳盡地描述了這個要點。相信你們都應該閱讀過了。《點石成金》裏談到關於「爲掃描而設計，不是閱讀」時，

給出了幾種方法：

1. 儘可能符合用戶習慣的設計，讓人接受陌生的東西須要代價，除非咱們以爲這個代價是必須的。
2. 在頁面把越重要的東西越突出，創建清楚的視覺層次。
3. 能夠點擊的地方必須突出，讓人明顯知道能夠點擊。
4. 把頁面劃分紅明肯定義的區域
5. 省略多餘的文字

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（或者是其餘方式）分析出，這個書籍的結果頁，用戶須要這些信息：

1. 書籍內容。這本書標題是什麼，是關於什麼的？
2. 書籍評價。這本書好嗎？別人對它的評價如何，這些評論可信麼？

根據這個目標，從新設計後的結果以下：

咱們能夠看到，這本書內容和評價都一目瞭然，信息結構利於掃描和比較。重要的信息大而具備色彩，次要信息成灰色的小字。關於這些更詳細的敘述能夠參見原文。

總結

本文描述了什麼是「突出重點，一目瞭然」。如何測試頁面是否「突出重點，一目瞭然」，以及如何達到「突出重點，一目瞭然」。 有句話我挺喜歡，做爲結局吧。在《What’s Next in Web Design?》中說道的：

「Simplicity is when someone takes care of the details.」

「簡單而不簡陋！」(謝謝青雲給出的翻譯！)

咱們所追求的界面或者功能作得簡單，不是粗製濫造，而是須要把下在創造更多無用的功能的功夫轉變到現有功能的細節上。作出來東西容易，可是把東西作好作精難啊！