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

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

今天的文章，我們就專注于探討諸如陰影這樣的視覺元素是如何幫助界面為用戶呈現(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è)計就很好的說明了陰影和高光會帶來怎樣的效果：

陰影與層次：當(dāng)現(xiàn)實世界照進UI設(shè)計

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

陰影與層次：當(dāng)現(xiàn)實世界照進UI設(shè)計

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

陰影與層次：當(dāng)現(xiàn)實世界照進UI設(shè)計
注意按鈕和輸入框都是怎樣呈現(xiàn)的
 

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

陰影與層次：當(dāng)現(xiàn)實世界照進UI設(shè)計
iOS 中的 Newsstand 界面。其中的陰影和紋理均是現(xiàn)實世界中對應(yīng)物體的真實反映。
 

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

陰影與層次：當(dāng)現(xiàn)實世界照進UI設(shè)計
不過，早期的偽3D GUI 和擬物化設(shè)計常常會讓界面顯得過于“厚重”——過重的視覺設(shè)計更容易讓人分心。

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

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

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

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

·有強烈能指的元素極有可能是可點擊的
·沒有強烈能指的元素有可能是不可點擊的


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

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

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

陰影與層次：當(dāng)現(xiàn)實世界照進UI設(shè)計
擁有Z軸的Android GUI

陰影和高度
現(xiàn)代如今的UI設(shè)計之所以有層次感，很大程度上是因為Z軸，或者說是因為高度的存在。不同的層占據(jù)Z座標(biāo)軸上不同的位置，“高度”的差異讓它們看起來有先后的層次之分。
 

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

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

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

陰影與層次：當(dāng)現(xiàn)實世界照進UI設(shè)計
如果沒有陰影，用戶無法將紅色的按鈕和背景的層級清楚的區(qū)分開來
 

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

陰影與層次：當(dāng)現(xiàn)實世界照進UI設(shè)計
隨著控件高度的提升，元素在視覺上離用戶更近，顯得更大，而陰影變則變得柔和并擴散開來，當(dāng)控件下降之后，視覺上會變的更小，而陰影也緊貼到元素周圍，并顯得更加緊實。
 

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