關(guān)注互聯(lián)網(wǎng)菇民，關(guān)注硅谷堂尽楔。想了解更多關(guān)于互聯(lián)網(wǎng)崗位知識的信息，關(guān)注微信公眾號：硅谷堂（ID：guigutang）或下載“硅谷堂”APP玉雾。
現(xiàn)如今UI設(shè)計正向著移除不必要元素并聚焦核心功能的方向發(fā)展著翔试。核心功能成為當(dāng)之無愧的UI設(shè)計焦點，視覺和細(xì)節(jié)的設(shè)計的重要性也日漸凸顯复旬，新時期里的視覺設(shè)計不僅要面對精簡專注之后的需求垦缅，還需要提升功能的可用性。
今天的文章當(dāng)驹碍，我們我們就專注于探討諸如陰影這樣的視覺元素是如何幫助界面為用戶呈現(xiàn)信息的壁涎。
UI的進化：從偽3D到超扁平
立體化的特效和擬物化設(shè)計凡恍，讓界面產(chǎn)生了有縱深的感覺。
用戶界面是平的怔球，但是設(shè)計師和開發(fā)者投入了巨量的精力和無數(shù)的靈感來試圖將一個3D的世界帶給用戶嚼酝。重新審視GUI 剛剛興起的80和90年代，你會發(fā)現(xiàn)這個時候設(shè)計師們就已經(jīng)開始偽3D效果（陰影竟坛、漸變闽巩、高光）來幫助用戶更輕松理解界面，這些效果讓用戶在視覺上讓GUI同現(xiàn)實世界中的元素產(chǎn)生關(guān)聯(lián)担汤，使得交互和操作更加一目了然涎跨。
這些3D特效所營造的假象讓界面看起來似乎擁有了深度和高度，不同的元素構(gòu)建成不同的視覺層次崭歧，加上源自現(xiàn)實世界的隱喻隅很，用戶自然而然開始明白界面的交互方式：
·看起來凸起的元素讓人覺得應(yīng)該是可以按下去的，這種設(shè)計常用于按鈕的設(shè)計率碾。
·看起來凹陷的元素讓人覺得應(yīng)該是可以被填充的叔营，而輸入框常常會采用這樣的設(shè)計。
Windows 95 的這個對話框的設(shè)計就很好的說明了陰影和高光會帶來怎樣的效果：
不僅僅是Windows所宰，其實整個90年代的UI設(shè)計大都保持著這樣的思路绒尊。被劃歸為Old World 的 MacOS 8是這樣的：
而將多媒體操作系統(tǒng)設(shè)計思路推動到機制的BeOS 也是如此，偽3D風(fēng)格的圖標(biāo)設(shè)計至今都是經(jīng)典：
注意按鈕和輸入框都是怎樣呈現(xiàn)的
擬物化設(shè)計則是上述理念的進一步深化的產(chǎn)物歧匈，UI中每一個元素都以數(shù)字化的形式模擬現(xiàn)實生活中的物體的細(xì)節(jié)與質(zhì)感垒酬，它近乎是一整套完整的視覺語言砰嘁。當(dāng)我們談及擬物化的時候件炉，它很大程度上是iOS7以前蘋果的UI設(shè)計風(fēng)格的代名詞，而iOS7之前的iOS系統(tǒng)矮湘，乃至稍早一些的MacOSX的UI設(shè)計都擬物化的絕佳示例斟冕。
iOS 中的 Newsstand 界面。其中的陰影和紋理均是現(xiàn)實世界中對應(yīng)物體的真實反映缅阳。
02年的MacOSX 10.2 Jaguar的界面長的是下面這樣磕蛇，界面中的元素比起擬物化全盛時期用的還要重：
不過，早期的偽3D GUI 和擬物化設(shè)計常常會讓界面顯得過于“厚重”——過重的視覺設(shè)計更容易讓人分心十办。
扁平化設(shè)計：移除陰影秀撇，不再立體
每一個改變都會帶來相應(yīng)的影響。扁平化設(shè)計和擬物化設(shè)計自然有著巨大的差異向族『茄啵考慮到屏幕上所呈現(xiàn)的信息本身并不是3D的，那么為什么不將裝飾去掉件相，專注功能呢再扭？
同三維設(shè)計和擬物化不同氧苍，最初的扁平化完全不考慮物理世界的特征和界面之間的聯(lián)系，它就是純粹意義上的扁平泛范。這樣的設(shè)計中沒有微妙的陰影和漸變來為你暗示輸入框和按鈕让虐，看看Windows 8時代的Metro 設(shè)計你就能明白：
Windows 8 的Metro UI 就是純粹扁平化設(shè)計的一個典型。界面中每一個元素看起來都不具有明確的交互引導(dǎo)性罢荡，整個設(shè)置界面仿佛是一組帶有標(biāo)簽名稱的圖標(biāo)而已赡突。這樣的組件給用戶的感知度很差，很容易讓用戶曲解甚至忽略区赵。
為了改善這一點麸俘，UI設(shè)計讓特定的元素看起來細(xì)節(jié)更豐富，或者帶有明顯的可交互性（比如光澤惧笛，帶有凸起或者凹陷感知的微妙漸變和陰影）从媚。雖然能指（圖標(biāo)、文字患整、圖像所要表達(dá)的含義）在不同的應(yīng)用中呈現(xiàn)方式有差異拜效，但是它們依然能夠清楚的給用戶傳遞指向性的信息，要做到這一點是基于兩個假設(shè)：
·有強烈能指的元素極有可能是可點擊的
·沒有強烈能指的元素有可能是不可點擊的
因此各谚，將視覺引導(dǎo)和線索完全移除紧憾、沒有能指的純粹扁平化設(shè)計是極端而不人性化的設(shè)計。用戶需要可感知昌渤、能理解的界面幫他們學(xué)習(xí)和了解整個界面的交互赴穗，而陰影、漸變這樣的設(shè)計能夠讓住人類的大腦理解界面元素的意義膀息。
近乎扁平的設(shè)計
隨著大家對于扁平化設(shè)計的反思和優(yōu)化般眉，近兩年的整個設(shè)計風(fēng)向顯得理智而合理了許多。更加平衡而合乎情理的新的扁平化設(shè)計誕生了潜支。這個新的方案得到了絕大多數(shù)的設(shè)計師的認(rèn)可甸赃，這種“近乎扁平”的設(shè)計更多被大家稱為“扁平化設(shè)計2.0”。扁平化2.0 整體上依然是扁平的冗酿，但是其中的諸多設(shè)計元素沿用了微妙的陰影埠对、高光和層級來打造有深度的UI。
Google 的?Material Design?就是扁平化2.0 設(shè)計風(fēng)格中的佼佼者裁替。整套設(shè)計借用了“紙”的隱喻和物理規(guī)則项玛，在視覺層次和交互性上有著明顯的提升。它賦予界面以簡約的視覺弱判，又不犧牲UI的能指襟沮。
擁有Z軸的Android GUI
陰影和高度
現(xiàn)代如今的UI設(shè)計之所以有層次感，很大程度上是因為Z軸，或者說是因為高度的存在臣嚣。不同的層占據(jù)Z座標(biāo)軸上不同的位置净刮，“高度”的差異讓它們看起來有先后的層次之分。
陰影是讓圖片和其他元素從背景中“彈出”并擁有深度的重要手段硅则。微妙合理的陰影設(shè)計不會讓用戶感到分心淹父，同時能讓用戶更輕松的理解界面：
1、陰影會暗示用戶某個元素其實是可點擊的怎虫。
2暑认、陰影可以讓用戶理解元素的層次，讓他們理解兩個對象并不在同一高度大审，不是同一個層級蘸际。
如果沒有陰影，用戶無法將紅色的按鈕和背景的層級清楚的區(qū)分開來
3徒扶、陰影為定向運動提供了重要的視覺線索粮彤。
隨著控件高度的提升，元素在視覺上離用戶更近姜骡，顯得更大导坟，而陰影變則變得柔和并擴散開來，當(dāng)控件下降之后圈澈，視覺上會變的更小惫周，而陰影也緊貼到元素周圍，并顯得更加緊實康栈。
陰影肯定會隨著高度的變化而變化的递递。高度和深度有著明顯的關(guān)聯(lián)，兩個元素在Z軸上的相互距離通過陰影的變化來表現(xiàn)啥么。
當(dāng)用戶無法確定控件或者元素是否可以點擊登舞，或者是否已經(jīng)被點擊了，他們就越是需要點擊之后的反饋給予心理安慰饥臂。一個元素的高度變化應(yīng)該帶來相應(yīng)的陰影變化：
結(jié)語
說了這么多逊躁，最后還是要多說一句：陰影對于扁平化的UI設(shè)計而言一樣重要，但是不要過度依賴重陰影隅熙、極端漸變和復(fù)雜的光照效果，它們太過于分散用戶注意力了核芽。真正有價值的是那些微妙而實用的陰影囚戚，那些符合物理規(guī)則的過渡效果。
人是視覺動物沒錯轧简，但是用戶最終還是更喜歡簡單干凈驰坊、符合自然感知的設(shè)計∠溃看看近些年交互上最成功的設(shè)計拳芙，贏家大都是反饋迅速察藐，邏輯完整，簡約講道理的產(chǎn)品舟扎。
原文地址：uxplanet
原文作者：Nick Babich
優(yōu)設(shè)譯文：@陳子木
