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

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

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

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

界面中的物體通過不同的陰影讓元素很自然的呈現(xiàn)出錯(cuò)落有致的感覺。因?yàn)樗拇笮∽屛覀儗?duì)界面中的層級(jí)有著不同優(yōu)先級(jí)的認(rèn)知，降低了我們對(duì)界面理解的約束，以便用戶快速上手。

一、陰影的定義

1. 為什么需要使用陰影

界面中因?yàn)椴僮?，?huì)使得一個(gè)物體與另外一個(gè)物體因?yàn)槲恢玫母淖兌兊帽砻嬷丿B。當(dāng)表面之間的不透明度或者對(duì)比度不足時(shí)，很難區(qū)分不同表面之前的差距，也就是不知道哪一個(gè)表面在另一個(gè)表面的前面。

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

有三種處理方法：

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

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

2. 陰影的影響因素

陰影來源于現(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軸位置的偏移，控制著頂部和底部的陰影模糊：調(diào)整陰影顏色的模糊或者羽化擴(kuò)展：控制著陰影的大小以及前景與后景之間的距離

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

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

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

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

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

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

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

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

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

三級(jí)：物體位于高層級(jí)，該物體的運(yùn)動(dòng)和其他層級(jí)沒有關(guān)聯(lián)。如：對(duì)話框等。

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

1. 真實(shí)的反饋

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

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

2. 光源方向的一致性

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

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

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

四、寫在最后

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

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

參考資料：

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

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

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