Ant Design React 陰影

陰影來(lái)源于現(xiàn)實(shí)生活的反映物體與物體之間距離的物理現(xiàn)象。在界面中，我們往往通過(guò)模擬元素的投影直截了當(dāng)?shù)膩?lái)告訴用戶(hù)，元素之間的高度距離與層次關(guān)系。

高度

陰影是由兩個(gè)不同階層的平面產(chǎn)生，且強(qiáng)度由兩者之間的距離決定。所以物體的高度直接影響物體的陰影，對(duì)象離地面越遠(yuǎn)陰影越大，模糊值越高。我們將系統(tǒng)分為無(wú)、低、中、高四個(gè) UI 層級(jí)，各自分布在不同的高度層級(jí)，陰影屬性也有所不同。

第 0 層：物體緊貼地面，投影與物體完全重疊，在界面中不對(duì)此層定義陰影值。如：輸入框等；

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

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

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

光源

陰影的方向是由光源與物體的相對(duì)位置所決定的。假定光源所處高度不變，光源與物體的距離和物體與陰影的距離成正比。光源越遠(yuǎn)，則陰影距離物體越遠(yuǎn)。陰影的方向在界面里通常使用 X, Y 坐標(biāo)軸來(lái)表示。

陰影值

綜上可知。陰影由光照而產(chǎn)生。主要影響其值的是物體高度與光源位置：

1. 在不同高度上時(shí)，投射出的陰影顏色、模糊度、面積都有所區(qū)分。離地面越遠(yuǎn)的物體，產(chǎn)生的陰影顏色越淡、模糊度越高、面積越大；反之則顏色更深、模糊度越低、面積越??；
2. 而投影的方向主要由光源與物體的相對(duì)位置決定。

在 Ant Design 中不同的陰影方向使用在不同的地方：

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

陰影是模擬的真實(shí)世界的反饋，Ant Design 為了更符合真實(shí)陰影，在 4.0 中采用了三層陰影的表達(dá)方式，讓陰影更柔和，更符合真實(shí)狀態(tài)

常用陰影設(shè)計(jì)表

第一層：

第二層：

第三層：