在UI設(shè)計(jì)的藝術(shù)領(lǐng)域里，有三個(gè)被廣泛運(yùn)用并備受贊譽(yù)的設(shè)計(jì)元素，它們被形象地稱為“三大法寶”，
分別是陰影設(shè)計(jì)、圓角、透明
，對(duì)于初學(xué)者和設(shè)計(jì)師們來說，它們仿佛是提升界面層次感和吸引力的魔法棒。尤其是在設(shè)計(jì)卡片布局時(shí)，很多同學(xué)會(huì)不假思索地應(yīng)用系統(tǒng)默認(rèn)的陰影效果，覺得這樣能為設(shè)計(jì)增添不少魅力。
然而，真正讓陰影效果發(fā)揮最佳作用的關(guān)鍵，并不在于簡單地添加它，而在于如何根據(jù)不同的設(shè)計(jì)場(chǎng)景和需求，精心選擇并設(shè)置陰影。今天，我們就來深入探討一下，如何在UI設(shè)計(jì)中巧妙運(yùn)用陰影這一元素。
陰影的選擇和設(shè)置并非隨心所欲，而是需要綜合考慮多種因素，如光源位置、界面風(fēng)格、元素功能等。通過精細(xì)調(diào)整陰影的大小、透明度、模糊度和顏色等屬性，我們可以讓陰影與整體設(shè)計(jì)完美融合，為界面增添立體感和深度，同時(shí)避免過度使用導(dǎo)致的視覺混亂。
因此，在設(shè)計(jì)過程中，我們需要深入了解陰影的特性和運(yùn)用技巧，結(jié)合實(shí)際需求進(jìn)行靈活調(diào)整。只有這樣，我們才能真正掌握陰影這一UI設(shè)計(jì)利器，為作品增添更多的魅力和吸引力。
“藝術(shù)來源于生活又高于生活”設(shè)計(jì)領(lǐng)域同樣如此，特別是在我們所關(guān)注的界面設(shè)計(jì)中。
界面中的陰影就是讓物體擁有來源于真實(shí)物理世界一樣的空間特性
。
在設(shè)計(jì)的早期階段，界面元素的設(shè)計(jì)往往傾向于盡可能地模擬現(xiàn)實(shí)世界的物體，以此拉近用戶與互聯(lián)網(wǎng)產(chǎn)品之間的距離，降低其陌生感。然而，隨著互聯(lián)網(wǎng)的快速發(fā)展和對(duì)高效迭代的需求，許多模擬真實(shí)世界的細(xì)節(jié)被簡化或優(yōu)化，以突出用戶最為關(guān)心的質(zhì)感、層次感和深度。在這里，陰影元素尤為關(guān)鍵，它成為了構(gòu)建界面深度感的核心。
陰影在界面中的應(yīng)用，使得元素能夠自然地呈現(xiàn)出一種錯(cuò)落有致的空間布局。通過調(diào)整陰影的大小，我們可以清晰地傳達(dá)出界面中不同元素之間的層級(jí)關(guān)系和優(yōu)先級(jí)，從而降低了用戶理解界面的難度，幫助他們更快速地識(shí)別所需信息。這種設(shè)計(jì)方式不僅提升了用戶體驗(yàn)，也讓界面設(shè)計(jì)更加富有層次感和立體感。
在界面設(shè)計(jì)中，當(dāng)用戶進(jìn)行操作時(shí)，有時(shí)會(huì)導(dǎo)致兩個(gè)物體因?yàn)槲恢玫恼{(diào)整而發(fā)生表面上的重疊。當(dāng)這種重疊發(fā)生時(shí)，如果物體的不透明度或?qū)Ρ榷炔粔蝻@著，用戶往往會(huì)遇到識(shí)別上的困難，即難以判斷哪一個(gè)表面位于另一個(gè)表面的前方。
為了解決這個(gè)問題，一種有效的方法是清晰界定每個(gè)表面的邊緣。通過明確這些邊緣，我們可以有效地減少因重疊而產(chǎn)生的混淆，幫助用戶更輕松地辨識(shí)不同表面之間的層次關(guān)系，從而避免這種“尷尬”的重疊現(xiàn)象，提升用戶體驗(yàn)和界面的清晰度。
方式二：
不同的表面顏色顯示表面邊緣和重疊，但不顯示高度。
方式三：
不透明度顯示表面邊緣和重疊，但不顯示高度。
通過對(duì)比我們發(fā)現(xiàn)陰影可以以最簡單的方式展示表面之間的高度。
陰影來源于現(xiàn)實(shí)生活反映物體與物體之間距離的物理現(xiàn)象。陰影受
光源的方向
以及
物體與物體之間相對(duì)高度
的影響。
在界面中，我們往往通過模擬元素的投影直截了當(dāng)?shù)膩砀嬖V用戶，元素的空間關(guān)系。
物體越低，優(yōu)先級(jí)越低，其陰影小而銳利，反之物體越高，優(yōu)先級(jí)越高，其陰影越大越柔和。在設(shè)計(jì)中常見的陰影影響因素有X軸、Y軸、模糊、擴(kuò)展。
X軸：
這是投影延水平面或者X軸位置的偏移，控制著頂部和底部的陰影；
Y軸：
這是投影延垂直面或者Y軸位置的偏移，控制著頂部和底部的陰影；
擴(kuò)展：
控制著陰影的大小以及前景與后景之間的距離；
當(dāng)界面中的組件失去陰影效果時(shí)，用戶在操作時(shí)可能會(huì)因?yàn)橐曈X上缺乏變化而感到困惑，對(duì)頁面內(nèi)的層級(jí)關(guān)系產(chǎn)生疑慮，進(jìn)而覺得內(nèi)容顯得混亂，增加了理解和使用界面的難度。
用戶通常期望界面元素之間能在空間上有所區(qū)分，以實(shí)現(xiàn)更為直觀和流暢的交互體驗(yàn)。
常見的陰影狀態(tài)分為常規(guī)和懸浮兩種。
常規(guī)陰影：
這是不進(jìn)行任何操作時(shí)界面的默認(rèn)陰影樣式，通常表示為零級(jí)陰影狀態(tài)，它為用戶提供了一個(gè)清晰的視覺層級(jí)參考。
懸浮陰影：
當(dāng)用戶與界面進(jìn)行交互，如hover態(tài)時(shí)，元素可以使用一級(jí)陰影，甚至根據(jù)特定場(chǎng)景需求，可能采用二級(jí)或三級(jí)陰影狀態(tài)。這種動(dòng)態(tài)變化不僅提升了界面的趣味性，也增強(qiáng)了用戶對(duì)于元素狀態(tài)變化的感知。
陰影在界面中扮演著重要的角色，它能夠直觀地體現(xiàn)元素的層級(jí)關(guān)系。不同的陰影高度代表了不同的層級(jí)，陰影的強(qiáng)度則由元素與地面之間的距離決定。因此，物體的高度直接影響了其陰影的大小和模糊程度。物體離地面越遠(yuǎn)，其陰影通常越大，模糊值也相應(yīng)增高。
在antdesign設(shè)計(jì)系統(tǒng)中，采用了代表四個(gè)不同高度級(jí)別的陰影來適配界面中的元素，而不是像某些美國網(wǎng)頁設(shè)計(jì)系統(tǒng)那樣采用六種不同的高度。這四個(gè)陰影級(jí)別各自對(duì)應(yīng)著不同的高度層級(jí)，并且擁有獨(dú)特的屬性，以確保界面元素在視覺上既清晰又和諧。
第 0 層：
物體緊貼地面，投影與物體完全重疊，在界面中不對(duì)此層定義陰影值。
第 1 層
: 物體位于低層級(jí)，此時(shí)物體被操作(懸停、點(diǎn)擊等)觸發(fā)為懸浮狀態(tài)，當(dāng)操作完成或取消時(shí)，懸停狀態(tài)反饋也跟隨消失，物體回歸到原有的層級(jí)中，如：卡片 hover 等；
第 2 層：
物體位于中層級(jí)，此時(shí)物體與基準(zhǔn)面的關(guān)系是展開并跟隨，物體由地面上的元素展開產(chǎn)生，會(huì)跟隨元素所在層級(jí)的移動(dòng)而移動(dòng)。如：
下拉面板
等；
第 3 層：
物體位于高層級(jí)，該物體的運(yùn)動(dòng)和其他層級(jí)沒有關(guān)聯(lián)。如：對(duì)話框等。
模擬真正狀態(tài)下的陰影，我們可以通過對(duì)其變化過程進(jìn)行三層拆分，讓原本生硬的陰影變的更加柔和。
上圖展示了不同級(jí)別陰影的從低到高不同層級(jí)變化過程
陰影的偏移由組件的位置決定，確保同一套組件在光源方向的一致性。
陰影的位置對(duì)于提升用戶體驗(yàn)和視覺設(shè)計(jì)至關(guān)重要。按照光源方向的邏輯，我們可以這樣總結(jié)陰影的三種常見應(yīng)用：
陰影向左：
當(dāng)元素（如導(dǎo)航欄、抽屜組件或固定表格欄）位于屏幕右側(cè)時(shí)，向左的陰影能夠突出這些元素，并暗示它們是可交互或可擴(kuò)展的。
陰影向右：
對(duì)于位于屏幕左側(cè)的元素（如導(dǎo)航欄、抽屜組件或固定表格欄），向右的陰影能夠吸引用戶的注意力，并強(qiáng)調(diào)這些元素的存在和重要性。
陰影向下：
陰影向下通常用于組件內(nèi)部或組件本身，以營造立體感和層次感，這是界面設(shè)計(jì)中比較常規(guī)且有效的視覺處理方法。
陰影設(shè)計(jì)在界面設(shè)計(jì)中扮演著至關(guān)重要的角色，它不僅能夠增強(qiáng)設(shè)計(jì)的立體感和層次感，還能有效地引導(dǎo)用戶的注意力，提升用戶體驗(yàn)。在本文中，我們探討了陰影在不同位置所代表的含義及其應(yīng)用場(chǎng)景。
我們還詳細(xì)的了解了陰影的變化過程，在對(duì)應(yīng)的工作中，能夠根據(jù)不同的信息層級(jí)來設(shè)置陰影，希望這篇文章能夠讓我們對(duì)陰影這種常見技法有深入的了解。
以上就是我對(duì)陰影設(shè)計(jì)見解和總結(jié)，我非常期待能夠與你分享更多的想法，并一同在設(shè)計(jì)的道路上不斷進(jìn)步。
作者：北有暖樹
鏈接：https://www.zcool.com.cn/article/ZMTYyNTE2OA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
