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

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

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

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

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

一、陰影的定義

1. 為什么需要使用陰影

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

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

有三種處理方法：

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

通過對比我們發(fā)現(xiàn)陰影可以以最簡單的方式展示表面之間的高度。

2. 陰影的影響因素

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

在界面中，我們往往通過模擬元素的投影直截了當(dāng)?shù)膩砀嬖V用戶，元素的空間關(guān)系。

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

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

二、陰影的狀態(tài)

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

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

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

陰影可以體現(xiàn)界面上元素的層級，不同的陰影高度代表了不同的層級，它的強度由兩者之間的距離決定。所以物體的高度直接影響物體的陰影，對象離地面越遠陰影越大，模糊值越高。

不同于美國網(wǎng)頁設(shè)計系統(tǒng)采用了6種不同的高度，antdesign中我們采用了代表四個不同高度級別的陰影來適配界面中的元素。這四個不同的陰影各自分布在不同的高度層級，屬性也有所不同。

零級：物體緊貼地面，投影與物體完全重疊，在界面中不對此層定義陰影值。如：篩選框等；

一級：物體位于低層級，此時物體被操作（懸停、點擊等）觸發(fā)為懸浮狀態(tài)，當(dāng)操作完成或取消時，懸停狀態(tài)反饋也跟隨消失，物體回歸到原有的層級中。如：卡片 hover 等；

二級：物體位于中層級，此時物體與基準(zhǔn)面的關(guān)系是展開并跟隨，物體由地面上的元素展開產(chǎn)生，會跟隨元素所在層級的移動而移動。如：下拉面板等；

三級：物體位于高層級，該物體的運動和其他層級沒有關(guān)聯(lián)。如：對話框等。

三、陰影的應(yīng)用

1. 真實的反饋

模擬真正狀態(tài)下的陰影，Ant Design中通過對其變化過程進行三層拆分，讓原本生硬的陰影變的更加柔和。

上圖展示了不同級別陰影的從低到高不同層級變化過程。

2. 光源方向的一致性

陰影的偏移由組件的位置決定，確保同一套組件在光源方向的一致性。

陰影在物體不同的位置代表的含義也不一樣，這里我們按照光源方向的不同總結(jié)了三個方位。

陰影向左：主要應(yīng)用于右邊導(dǎo)航欄、抽屜組件或固定表格欄陰影向右：主要應(yīng)用于左邊導(dǎo)航欄、抽屜組件或固定表格欄陰影向下：主要應(yīng)用于組件內(nèi)部或組件本身，是比較常規(guī)場景的用法

四、寫在最后

陰影的規(guī)范其實并不是所有的web組件都對其進行詳細描述，隨著業(yè)務(wù)場景的復(fù)雜化，我相信大家也會逐漸對其重視起來。

以上就是我對陰影的部分思考與總結(jié)，期待與你一起交流一起進步~

參考資料：

https://ant.design/docs/spec/shadow-cn

本文由 @江鳥的設(shè)計生活 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議