Ant Design React 陰影

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

高度

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

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

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

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

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

光源

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

陰影值

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

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

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

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

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

常用陰影設計表

第一層：

第二層：

第三層：