網(wǎng)站建設中陰影與層次：當現實(shí)世界照進(jìn)UI設計發(fā)布者：本站     時(shí)間：2022-03-17 15:03:37

現如今UI設計正向著(zhù)移除不必要元素并聚焦核心功能的方向發(fā)展著(zhù)。核心功能成為當之無(wú)愧的UI設計焦點(diǎn)，視覺(jué)和細節的設計的重要性也日漸凸顯，新時(shí)期里的視覺(jué)設計不僅要面對精簡(jiǎn)專(zhuān)注之后的需求，還需要提升功能的可用性。
 

今天的文章，我們就專(zhuān)注于探討諸如陰影這樣的視覺(jué)元素是如何幫助界面為用戶(hù)呈現信息的。

UI的進(jìn)化：從偽3D到超扁平
立體化的特效和擬物化設計，讓界面產(chǎn)生了有縱深的感覺(jué)。
 

用戶(hù)界面是平的，但是設計師和開(kāi)發(fā)者投入了巨量的精力和無(wú)數的靈感來(lái)試圖將一個(gè)3D的世界帶給用戶(hù)。重新審視GUI 剛剛興起的80和90年代，你會(huì )發(fā)現這個(gè)時(shí)候設計師們就已經(jīng)開(kāi)始偽3D效果（陰影、漸變、高光）來(lái)幫助用戶(hù)更輕松理解界面，這些效果讓用戶(hù)在視覺(jué)上讓GUI同現實(shí)世界中的元素產(chǎn)生關(guān)聯(lián)，使得交互和操作更加一目了然。這些3D特效所營(yíng)造的假象讓界面看起來(lái)似乎擁有了深度和高度，不同的元素構建成不同的視覺(jué)層次，加上源自現實(shí)世界的隱喻，用戶(hù)自然而然開(kāi)始明白界面的交互方式：

·看起來(lái)凸起的元素讓人覺(jué)得應該是可以按下去的，這種設計常用于按鈕的設計。
·看起來(lái)凹陷的元素讓人覺(jué)得應該是可以被填充的，而輸入框常常會(huì )采用這樣的設計。

Windows 95 的這個(gè)對話(huà)框的設計就很好的說(shuō)明了陰影和高光會(huì )帶來(lái)怎樣的效果：

陰影與層次：當現實(shí)世界照進(jìn)UI設計

不僅僅是Windows，其實(shí)整個(gè)90年代的UI設計大都保持著(zhù)這樣的思路。被劃歸為Old World 的 MacOS 8是這樣的：

陰影與層次：當現實(shí)世界照進(jìn)UI設計

而將多媒體操作系統設計思路推動(dòng)到機制的BeOS 也是如此，偽3D風(fēng)格的圖標設計至今都是經(jīng)典：

陰影與層次：當現實(shí)世界照進(jìn)UI設計
注意按鈕和輸入框都是怎樣呈現的
 

擬物化設計則是上述理念的進(jìn)一步深化的產(chǎn)物，UI中每一個(gè)元素都以數字化的形式模擬現實(shí)生活中的物體的細節與質(zhì)感，它近乎是一整套完整的視覺(jué)語(yǔ)言。當我們談及擬物化的時(shí)候，它很大程度上是iOS7以前蘋(píng)果的UI設計風(fēng)格的代名詞，而iOS7之前的iOS系統，乃至稍早一些的MacOSX的UI設計都擬物化的絕佳示例。

陰影與層次：當現實(shí)世界照進(jìn)UI設計
iOS 中的 Newsstand 界面。其中的陰影和紋理均是現實(shí)世界中對應物體的真實(shí)反映。
 

02年的MacOSX 10.2 Jaguar的界面長(cháng)的是下面這樣，界面中的元素比起擬物化全盛時(shí)期用的還要重：

陰影與層次：當現實(shí)世界照進(jìn)UI設計
不過(guò)，早期的偽3D GUI 和擬物化設計常常會(huì )讓界面顯得過(guò)于“厚重”——過(guò)重的視覺(jué)設計更容易讓人分心。

扁平化設計：移除陰影，不再立體
每一個(gè)改變都會(huì )帶來(lái)相應的影響。扁平化設計和擬物化設計自然有著(zhù)巨大的差異?？紤]到屏幕上所呈現的信息本身并不是3D的，那么為什么不將裝飾去掉，專(zhuān)注功能呢？
 

同三維設計和擬物化不同，最初的扁平化完全不考慮物理世界的特征和界面之間的聯(lián)系，它就是純粹意義上的扁平。這樣的設計中沒(méi)有微妙的陰影和漸變來(lái)為你暗示輸入框和按鈕，看看Windows 8時(shí)代的Metro 設計你就能明白：
 

陰影與層次：當現實(shí)世界照進(jìn)UI設計
Windows 8 的Metro UI 就是純粹扁平化設計的一個(gè)典型。界面中每一個(gè)元素看起來(lái)都不具有明確的交互引導性，整個(gè)設置界面仿佛是一組帶有標簽名稱(chēng)的圖標而已。這樣的組件給用戶(hù)的感知度很差，很容易讓用戶(hù)曲解甚至忽略。
 

為了改善這一點(diǎn)，UI設計讓特定的元素看起來(lái)細節更豐富，或者帶有明顯的可交互性（比如光澤，帶有凸起或者凹陷感知的微妙漸變和陰影）。雖然能指（圖標、文字、圖像所要表達的含義）在不同的應用中呈現方式有差異，但是它們依然能夠清楚的給用戶(hù)傳遞指向性的信息，要做到這一點(diǎn)是基于兩個(gè)假設：

·有強烈能指的元素極有可能是可點(diǎn)擊的
·沒(méi)有強烈能指的元素有可能是不可點(diǎn)擊的


陰影與層次：當現實(shí)世界照進(jìn)UI設計
因此，將視覺(jué)引導和線(xiàn)索完全移除、沒(méi)有能指的純粹扁平化設計是極端而不人性化的設計。用戶(hù)需要可感知、能理解的界面幫他們學(xué)習和了解整個(gè)界面的交互，而陰影、漸變這樣的設計能夠讓住人類(lèi)的大腦理解界面元素的意義。

近乎扁平的設計
隨著(zhù)大家對于扁平化設計的反思和優(yōu)化，近兩年的整個(gè)設計風(fēng)向顯得理智而合理了許多。更加平衡而合乎情理的新的扁平化設計誕生了。這個(gè)新的方案得到了絕大多數的設計師的認可，這種“近乎扁平”的設計更多被大家稱(chēng)為“扁平化設計2.0”。扁平化2.0 整體上依然是扁平的，但是其中的諸多設計元素沿用了微妙的陰影、高光和層級來(lái)打造有深度的UI。
 

Google 的 Material Design 就是扁平化2.0 設計風(fēng)格中的佼佼者。整套設計借用了“紙”的隱喻和物理規則，在視覺(jué)層次和交互性上有著(zhù)明顯的提升。它賦予界面以簡(jiǎn)約的視覺(jué)，又不犧牲UI的能指。
 

陰影與層次：當現實(shí)世界照進(jìn)UI設計
擁有Z軸的Android GUI

陰影和高度
現代如今的UI設計之所以有層次感，很大程度上是因為Z軸，或者說(shuō)是因為高度的存在。不同的層占據Z座標軸上不同的位置，“高度”的差異讓它們看起來(lái)有先后的層次之分。
 

陰影與層次：當現實(shí)世界照進(jìn)UI設計
陰影是讓圖片和其他元素從背景中“彈出”并擁有深度的重要手段。微妙合理的陰影設計不會(huì )讓用戶(hù)感到分心，同時(shí)能讓用戶(hù)更輕松的理解界面：
 

1、陰影會(huì )暗示用戶(hù)某個(gè)元素其實(shí)是可點(diǎn)擊的。
 

陰影與層次：當現實(shí)世界照進(jìn)UI設計
2、陰影可以讓用戶(hù)理解元素的層次，讓他們理解兩個(gè)對象并不在同一高度，不是同一個(gè)層級。
 

陰影與層次：當現實(shí)世界照進(jìn)UI設計
如果沒(méi)有陰影，用戶(hù)無(wú)法將紅色的按鈕和背景的層級清楚的區分開(kāi)來(lái)
 

3、陰影為定向運動(dòng)提供了重要的視覺(jué)線(xiàn)索。
 

陰影與層次：當現實(shí)世界照進(jìn)UI設計
隨著(zhù)控件高度的提升，元素在視覺(jué)上離用戶(hù)更近，顯得更大，而陰影變則變得柔和并擴散開(kāi)來(lái)，當控件下降之后，視覺(jué)上會(huì )變的更小，而陰影也緊貼到元素周?chē)?，并顯得更加緊實(shí)。
 

陰影肯定會(huì )隨著(zhù)高度的變化而變化的。高度和深度有著(zhù)明顯的關(guān)聯(lián)，兩個(gè)元素在Z軸上的相互距離通過(guò)陰影的變化來(lái)表現。