平，還是不平？看Dribbble和Nielson怎麼說～

02-03

題圖：George Vasyagin

隨意轉發，註明作者 @酈橙錦妖和鏈接。

追波作為世界級的UI設計平台，裡面有豐富的內容可供研究。Wojciech Dobry發布了一篇文章，從按鈕設計這個小細節切入，展現了過去近10年來的設計風格變遷。詳情戳：Button Design Over the Years

可以看出很明顯的3D質感 -> 漸變按鈕投影 -> ghost button -> 純色按鈕投影 -> 按鈕彩色投影 -> 完全扁平的路徑。

美感上，越來越簡潔現代了。但實際效果呢？

恰好前幾天又看到一篇Nielsen Group的研究，Flat UI Elements Attract Less Attention and Cause Uncertainty. 文中在網頁環境下比對了「看起來超能點(strong clickable signifier)的按鈕」和「看起來不是很能點(weak or absent signifier)的按鈕」對用戶理解網頁的影響。

研究蠻長的，抽個例子來看。

上面這個租車網表單的表頭部分有兩種設計，一種是深灰色帶陰影，彷彿縮在後面，另一種是淺黃色，和Book a Car做了一個簡單的區分。此外，鏈接一種是藍色帶下劃線的，一種是灰色不帶下劃線的；按鈕一邊有陰影，一邊沒有陰影；輸入框一邊有陰影，一邊沒有。按照Dribbble那篇，左圖大概是2010年初的風格，右邊是近幾年。

用eye tracking的方法來看用戶的注意力（任務是取消租車預訂）。上圖這個版本里，有立體感的tab吸引了很多注意。

後一個扁扁的版本，注意力更分散一些，在頁腳和右側廣告位上也有不少注意力。對頁腳的注意力並不是我們想要的，因為這可能表示用戶找不到目標，只能求助於頁腳了。

原文還有更多研究，詳情戳：Flat UI Elements Attract Less Attention and Cause Uncertainty

審美趨勢 vs 研究結果，你更信任哪一個呢？在實際項目中又會走向哪個方向？綜合自己的經驗和閱讀，大致推薦如下：

簡潔，信息密度低的，交互少的，可以用flat design。比如設計師的主頁。
內容豐富，信息密度大，交互頻繁的，可以用不那麼平的設計。比如表單。
使用flat design的產品，其用戶最好是對設計和互聯網有足夠經驗的人。比如面向設計師，程序員，年輕人的網站。
Flat design要形成可以依賴的模式，讓用戶產生預期，並且滿足用戶的預期。正面例子：用主題色的地方一般都可以點擊；反面例子：鏈接的文字和普通文字設計相似，無法判斷怎麼交互。
扁平的基礎上，可以剋制地使用其他微妙的設計元素，達到美觀和可用性的平衡。