UI設計中的陰影與層次！

圖/文 Nick Babich 譯 陳子木

隨著大家對於扁平化設計的反思和優化，近兩年的整個設計風向顯得理智而合理了許多。更加平衡而合乎情理的新的扁平化設計誕生了。這個新的方案得到了絕大多數的設計師的認可，這種「近乎扁平」的設計更多被大家稱為「扁平化設計2.0」。扁平化2.0 整體上依然是扁平的，但是其中的諸多設計元素沿用了微妙的陰影、高光和層級來打造有深度的UI。

Google就是扁平化2.0 設計風格中的佼佼者。整套設計借用了「紙」的隱喻和物理規則，在視覺層次和交互性上有著明顯的提升。它賦予界面以簡約的視覺，又不犧牲UI的能指。

陰影和高度現代如今的UI設計之所以有層次感，很大程度上是因為Z軸，或者說是因為高度的存在。不同的層佔據Z座標軸上不同的位置，「高度」的差異讓它們看起來有先後的層次之分。

陰影是讓圖片和其他元素從背景中「彈出」並擁有深度的重要手段。微妙合理的陰影設計不會讓用戶感到分心，同時能讓用戶更輕鬆的理解界面：

1、陰影會暗示用戶某個元素其實是可點擊的。

2、陰影可以讓用戶理解元素的層次，讓他們理解兩個對象並不在同一高度，不是同一個層級。

如果沒有陰影，用戶無法將紅色的按鈕和背景的層級清楚的區分開來

3、陰影為定向運動提供了重要的視覺線索。

點擊播放 GIF/19K

當用戶無法確定控制項或者元素是否可以點擊，或者是否已經被點擊了，他們就越是需要點擊之後的反饋給予心理安慰。一個元素的高度變化應該帶來相應的陰影變化：

結語

點擊播放 GIF/782K

點擊播放 GIF/247K

說了這麼多，最後還是要多說一句：陰影對於扁平化的UI設計而言一樣重要，但是不要過度依賴重陰影、極端漸變和複雜的光照效果，它們太過於分散用戶注意力了。真正有價值的是那些微妙而實用的陰影，那些符合物理規則的過渡效果。

人是視覺動物沒錯，但是用戶最終還是更喜歡簡單幹凈、符合自然感知的設計。看看近些年交互上最成功的設計，贏家大都是反饋迅速，邏輯完整，簡約講道理的產品。

請您繼續閱讀更多來自 平面設計 的精彩文章:

TAG:平面設計 |

※LOL給ADC造成陰影的3個皮膚，最後一個，UZI看見直接掛機？
※GREEN APARTMENT：顏色與空間，光與陰影的高度兼容
※與陰影共游——攝影：Micky Poh
※Vault 7系列「陰影」項目曝光：雷神公司暗中為CIA提供惡意程序分析
※Avaya任命新CEO 或將帶領公司走出破產陰影
※義和團，中國百年前的陰影
※一年了 一加5的設計竟然還活在iPhone陰影下
※AI教程/製做陰影投影
※當老大遇見「巨嬰忙內」，求XIUMIN金泰妍尹智聖的心理陰影面積！
※經典街機中的最終BOSS彙集，哪一個才是你的童年陰影？
※陰影中的力作
※解謎遊戲《陰影之中》眾籌成功 封閉Beta測試開啟
※街機遊戲中新手最怕的BOSS，多少玩家的童年陰影
※世界電影中的十大怪獸，留下童年陰影的十部電影
※AG二連勝，輝月立奇功！百里兄弟的恐怖陰影籠罩KPL！
※創意設計：用陰影度量時間，歲月的三重唱，死亡的倒計時
※OFF-WHITE x NIKE 當道之際，求這雙亂入的 adidas UltraBOOST 心理陰影面積！
※史上最尷尬羞恥的一次聊天，估計要留下心理陰影了...
※ISIS陰影下的摩蘇爾兒童：「我砍了他的手」