DIV CSS 佈局教程網

有時候表面上看起來很簡潔的東西其實未必如此簡潔，比如現在遍地都是的Twitter客戶端，他們的按鈕普遍使用純圖標而不是文本。這些小圖標真的很省空間，看起來很典雅，也很簡潔，但是實際情況真是這樣嗎？

讓我們以Tweetdeck為例來看看：

不知是不是我個人比較愚鈍，但是對我來說這些圖標確實很難搞清楚含義。第一個看起來算像是刷新，然後第二個圖標是一根棍子嗎？接著是一個扳手？然後是問號？最後是警告標志？但是最後我發現那個“小棍子”其實代表“單欄浏覽”，而警告標志其實是表示“登出”。。。

我並不是每天都使用Tweetdeck，所以每次登錄之後都要重新學習那些圖標分別代表什麼。這樣的情況廣泛的發生在Tweetdeck界面的其他部分已經更多的Twitter客戶端上。

一排整齊的純圖標會讓見面顯得清爽不少，但是他不一定會讓你的界面更好用。尤其是當你不用顏色區分圖標，而且圖標的隱喻也表達不清的時候情況會變得愈發嚴重。圖標在界面中的作用無可替代，但他們畢竟還是作為一種視覺上的輔助，幫助用戶更好地理解按鈕文字等等。

關於圖標， Jef Raskin (注：Jef是麥金塔之父) 曾經曰過這麼兩句話：

在幾乎所有相關的研究中，我們都發覺圖標比文字更難理解，尤其是第一眼掃描屏幕的時候。這和我們使用圖標幫助用戶理解的初衷是背道而馳的。

用小圖標代替文字的確能夠節省屏幕空間的使用，但我們必須時刻問自己“代價是什麼？”。按鈕越小，點擊越不便，也越不容易被用戶找到。並且不同小圖標之間比較難分清楚區別。

- Jef Raskin, The Humane Interface

只要正確地選擇了隱喻、顏色、位置等等，圖標還是能在界面中發揮很積極的作用，特別是數量很多，只用文字排布會非常凌亂的時候。因為圖標可以用一些視覺語言，比如顏色、形狀、質感等等來區別開。並且一般的圖標應用也能擴大點擊范圍。

總之，別因為簡化界面而盲目用圖標取代文字，太過頭的簡潔往往會適得其反。