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