在本篇文章中，我們 一起來學習一下，如何讓你在UI中繪製出更舒服的陰影效果。
首先，咱們談談陰影使用的場景。
我們使用陰影來強調特定的組件，創建深度以在屏幕中來創造一個特別的世界，並給出某些組件的特定狀態。但是，我們在哪裡，以及如何明智地使用它們呢？
場景01.按鈕
我們可以為按鈕使用陰影來顯示一些不同的狀態，例如懸停狀態。也可以在默認狀態下使用它。關鍵在於，使它們在整個按鈕佈局中保持平滑，柔軟和融合。
默認狀態和懸停狀態按鈕
場景02.卡片陰影
卡片是UI中重要且可操作的組件。要使它們具有一定的深度，並將其視覺上放置在最上層，此時我們可以使用陰影。記住！要讓它們漂浮起來。
卡片中的陰影
場景03.特定圖層陰影
如下圖類似的操作會讓用戶去了解有關屏幕上特定元素的其他信息。它們將在幾秒鐘內處於活動狀態，因此您需要使它們清晰並與背景中的元素產生最佳對比。在視覺上，柔和的陰影是非常棒的選擇。
帶有陰影的提示圖形
場景04.活動項目（如開關）
當涉及到活動狀態（例如切換或選定的列表項）時，一種不錯的做法是為它們提供視覺層次結構，例如顏色，當然還有陰影。另外，使它們簡單而柔軟。
兩種不同狀態的開關
場景05.重疊項目
如果要在UI界面中重疊兩個或者多個元素，則需要添加陰影以便讓元素之間具有更多的對比度和深度。
總之，使用陰影的規則就是，是背景與陰影，以及其它UI元素平滑並融合。使用不透明度，模糊數值以及X或者Y軸偏移量，直到獲得更加平滑的陰影位置。另外，不要讓陰影過分誇張，這會分散用戶的注意力。
不同的陰影範圍呈現出不同的效果
基本陰影實現方法
接下來咱們來談談陰影的實現方法。那就是隻增加Y軸偏移，而不去增加X軸偏移，然後將模糊數值（Blur）加倍。這使得陰影有更自然的感覺，而不會顯得生硬。
小技巧：只增加Y軸去獲得陰影
顏色使用
在製作陰影的時候，一定要避免使用純黑色（#000000），使用不太深的灰色，效果會更好。
灰色陰影和黑色陰影
在上圖中，左側使用了具有一定灰度的陰影顏色，右側則使用純黑色加透明度的方式，很明顯，左邊的陰影更加自然。
透明度設定
為了使陰影更加自然，我們需要做如下調整。如果你的背景色是明亮的顏色，那可以將Alpha值設置在15%到40%之間的某個值。但是，如果你的背景色是深色，則需要將Alpha的值設定為5%到15%之間。如下圖，左邊的陰影平滑自然，右邊的陰影則過於銳利和突兀。
25%的Alpha值和90%的alpha值
陰影Y值的偏移量
Y軸決定了陰影的偏移量。如果將Y軸設置為較高的值，那它會離卡片更遠。如果值偏小，則相反。（對於按鈕而言，較少的偏移量效果可能更好。）
不同的Y值偏移量
自然的過渡色
對於有顏色的元素，一種好的做法是為陰影設定與元素相同的顏色，並使其更暗一些。比如下方的藍色按鈕，你可以選擇更深一點的藍色來作為陰影顏色，然後將藍色加上透明度。而不是使用純黑色作為陰影顏色。
彩色的陰影效果
黑暗場景陰影的運用
如果元素具有顏色，並且它處在黑暗的背景下，一般情況下，是不建議使用陰影的。但是如果你一定要用，則可以使用具有小於10%的透明度設定，並且顏色跟隨主色調來。比如按鈕為綠色，則可以為按鈕設定一個更深的綠色陰影，並加上小於10%的透明度數值。如下圖，左側的按鈕陰影很自然，右側的則有一層模糊的效果，顯得不夠漂亮。
黑暗模式下的陰影
關於陰影使用的總結
總結一下，在做陰影的時候，要讓你的投影效果簡單，並且平滑自然。使用透明度數值和柔和的顏色設定，直到調節完美位置。當然，作為可選，你也可以使用X軸來進行陰影設定，以達到水平的深度感。
你學會了嗎？
閱讀更多 優逸客 的文章
