編輯導語：UI設計中有三寶——透明、陰影、加圓角，很多同學在做卡片時都會使用系統默認的方式加一個陰影。那么，陰影該怎么選擇，如何對不同場景下的陰影進行設置呢？一起來學習一下吧。

網傳UI設計有三寶：透明、陰影、加圓角。很多同學在做卡片的時候都會使用系統默認的方式加一個陰影，可能覺得加了之后，檔次立馬提升不少。但是陰影該怎么選擇，怎么對不同場景下的陰影進行設置卻并不是很清楚。今天我們來學習一下~

老話說“藝術來源于生活又高于生活”設計也不例外。例如我們界面中的陰影就是讓物體擁有來源于真實物理世界一樣的空間特性。

最早的界面元素都是盡可能地模擬真實的物體，以減少人們對互聯網產品的距離感。后來慢慢地為了適應效率高且迭代快的互聯網，很多都被減弱了，只保留了人們最關心的質感、層次與深度。其中我們今天的主題陰影就是深度最核心的元素。

界面中的物體通過不同的陰影讓元素很自然的呈現出錯落有致的感覺。因為它的大小讓我們對界面中的層級有著不同優先級的認知，降低了我們對界面理解的約束，以便用戶快速上手。

一、陰影的定義

1. 為什么需要使用陰影

界面中因為操作，會使得一個物體與另外一個物體因為位置的改變而變得表面重疊。當表面之間的不透明度或者對比度不足時，很難區分不同表面之前的差距，也就是不知道哪一個表面在另一個表面的前面。

這時候我們可以通過明確表面的邊緣來避免“尷尬”的重疊。

有三種處理方法：

1. 陰影顯示表面邊緣、表面重疊和高度
2. 不同的表面顏色顯示表面邊緣和重疊，但不顯示高度
3. 不透明度顯示表面邊緣和重疊，但不顯示高度

通過對比我們發現陰影可以以最簡單的方式展示表面之間的高度。

2. 陰影的影響因素

陰影來源于現實生活反映物體與物體之間距離的物理現象。陰影受光源的方向以及物體與物體之間相對高度的影響。

在界面中，我們往往通過模擬元素的投影直截了當的來告訴用戶，元素的空間關系。

物體越低，優先級越低，其陰影小而銳利，反之物體越高，優先級越高，其陰影越大越柔和。在設計中常見的陰影影響因素有X軸、Y軸、模糊、擴展。

• X軸：這是投影延水平面或者X軸位置的偏移，控制著頂部和底部的陰影
• Y軸：這是投影延垂直面或者Y軸位置的偏移，控制著頂部和底部的陰影
• 模糊：調整陰影顏色的模糊或者羽化
• 擴展：控制著陰影的大小以及前景與后景之間的距離

二、陰影的狀態

如果界面中的組件都沒有了陰影，在實際操作的時候視覺上沒有任何變化，這時候我們會對頁面內的層級產生懷疑，覺得內容的混亂，增加了對內容理解的困難程度。

用戶也渴望界面元素之間在空間上發生改變，常見的陰影狀態可以分為常規以及懸浮2種。

1. 常規：不進行任何操作時界面的陰影樣式，一般用零級陰影狀態表示
2. 懸?。?/strong>hover態等常規交互操作可以使用一級陰影，甚至有時候因為場景的特殊要求可能會用到二級或者三級的陰影狀態