UI設計中的寫實主義[轉載/翻譯]

翻看一下近些年來使用者介面的視覺設計你一定會發現“寫實風格”正逐步變成主流。我們所使用的電腦越來越強勁，速度越來越快，設計師們也有了更多的發揮空間。為了增加細節，我們已經可以使用3D效果、陰影、透明甚至一些物理特性來修飾介面。這其中有些效果能顯著改善可用性，比如陰影能夠更好地協助使用者區別啟用與非啟用狀態的視窗、iPhone系統中的豐富但有效動畫效果也能極大減少使用者的學習成本。
但在其他方面，這些新技術對可用性卻未必作出了多少貢獻。圖形化使用者介面基本上就是一堆符號，大部分按鈕、表徵圖以及其他控制項只是指代了某些概念或某個想法，比如齒輪表徵圖並不意味著一個齒輪，他只是告訴你點擊之後可以進行軟體的設定。越多的細節和越高的寫實性會讓使用者的關注焦點脫離這些概念。
在此推薦大家讀一下Scott McCloud的 《Understanding Comics 》，和GUI無關，但是每個設計師讀過之後肯定都有受益 

最左邊的圖顯然是個特定的男士，而右邊那個笑臉形象幾乎能指代任何一個人。從這個例子看得出來，如果為了表達一個概念而使用隱喻，那視覺上的細節就必須減少。而事實上實際場合中我們所使用的介面控制項一般不會去指代一個特定的東西。

當然，細節也不能太少，保證必要的識別性肯定是前提，至少要讓使用者看得出這是什麼東西：

左邊這個是人臉，右邊這個你就很難分清楚是蛋還是球了。
接下來我們再來看看電腦上的實際例子，一個代表“首頁”的表徵圖：

從左至右，我們看到從一間特定的房子到廣義上的Home概念的變化，細節越多，越難搞清楚其指代的概念

同樣的，細節也不能過少，去掉窗子和煙囪之後這個Home表徵圖就變得像一個 按鍵了。
讓我們用一個並不太科學的圖表來說明問題：

圖表上的數值並不是來自實際測試中的資料，我只是想說明優秀的GUI設計應該出現在曲線的中間部分，視覺上只需要保證足夠而不花哨的細節就可以了。
那什麼樣的細節是恰當的，什麼樣的細節是會讓使用者分心的呢？

左邊這個按鈕太過寫實，不適合放到介面當中，而右邊的只有一個邊框，也很難激起使用者的點擊慾望。

對於這個開關來說也是一樣，過度的細節讓左邊這個按鈕看起來就是一張照片而很難認為是介面的一部分。
合理地運用陰影、漸層等細節，讓使用者既能分辨得出這個元素又能不分心於圖形上的效果能夠協助我們打造美觀而可識別的介面。

例外情況
當然也有一個領域是特別的，那就是程式表徵圖，只用來指代你的程式。

Coda的樹葉表徵圖不是指代樹葉，而是用豐富的細節、形狀和顏色特徵讓使用者一眼就看出這是Coda的葉子。而Acorn這個圖形編輯軟體也正如他的名字所表現的，使用了一個橡果來作為程式表徵圖。在這種場合，我們需要表現的只是一個特定程式而不是廣義的概念，最終目的就是把表徵圖和軟體的品牌、價值直接聯絡起來，讓使用者一看就知道。所以程式表徵圖可供設計師發揮的空間就很大了。
結論
就像開頭所說，圖形化使用者介面就是一堆符號，而符號的精髓就是簡潔。讓使用者快速準確地讀懂符號以及其背後的含義是我們每個GUI設計師的重要責任，過多華而不實的寫實性只能在可用性上帶來明顯的問題。
在設計中增加細節的目的不是讓介面和表徵圖看起來像照片那樣真實，而是提高識別性，協助使用者更好地和各種控制項進行互動操作
在此特別感謝Max Steenbergen 和Cameron Kenley Hunt ，第二個Home表徵圖來自Dellustrations的表徵圖集Dellipack
想看原文，請猛擊這裡