陰影元件化，解決安卓不統一問題

發現問題

兩端的開發陰影實現有差異，陰影效果不規範。

陰影元件化

元件化的目的，全域性設計陰影規範統一，避免重複造輪子。兩端統一。

三端實現方式

Web

CSS box-shadow

不佔位支援修改陰影偏移量、顏色透明度、模糊半徑陰影尺寸（擴充套件）和內外陰影。

iOS

UIView陰影設定

不佔位支援修改陰影顏色、陰影偏移量、陰影透明度、陰影模糊半徑引數。

Android

1. elevation（元件屬性）

優點：繪製效率高，使用自帶的api不用新增多餘的drawable檔案，並且支援 translationZ 動畫方便實現點選的動畫效果；不佔位缺點：低版本不顯示，方向顏色不可控，自帶的屬性設定引數有限；注意：View要帶透明度，否則是沒有效果；

2. CardView（元件自帶）

優點：CardView是自帶陰影的是Materail設計的元件，效率高；不佔位缺點：陰影方向顏色不可控；注意：CardView模擬的光源在螢幕中心正上方陰影顯示角度會有所差異；

3. shape（作為背景繪製所以會佔位，它的繪製原理是一層層的由深到淺的形狀作為陰影

）優點：顏色方向可控制；佔位缺點：沒有模糊效果陰影不自然有點生硬（較弱的陰影不太容易看出來）；注意：佔位的陰影要考慮預留出陰影的空間；

4. SCardView

同CardView顯示效果，可透過程式碼調整邊角光源調整陰影方向和顏色，但需考慮版本相容性問題；

5. 自定義View

理論上我們想要的陰影效果都可以實現，但是如果脫離了系統原生屬性就需要考慮的太多；自定義陰影針對特殊的載體樣式和陰影，程式碼實現較為複雜，繪製成本較高，非必要情況下不建議；

切圖陰影

除程式碼實現方式外移動端還常用切圖的方式實現陰影，切圖的方式要分場景，例如特效按鈕或卡片；

在移動端開發中也常有用點9（Android）的方式來實現陰影，其實就是在CardView下方用png圖片做背景。

在使用切圖做背景陰影的時候需要注意：

為減少記憶體 安卓點9切圖拉伸區域夠用就好，不宜過多的拉伸區域；

iOS png拉伸位置不可在圓角處；

切圖的好處就是能在較低版本上顯示，因為elevation屬性在Android5。0之前是沒有效果的，當然5。0以前的裝置基本上已經淘汰，如果應用不考慮這些較低版本還是比較建議使用程式碼實現。

iOS和Android設計規範中陰影有所差異，我們知道Material Design中的材料寬度是自由可變的，陰影是由相對高度Z軸來決定的，因此我比較建議我們透過Material Design中自帶的屬性來elevation解決陰影問題，CardView是自帶陰影的是Materail設計的元件，可透過設定elevation屬性值來修改陰影效果，而且在Material Design中elevation屬性決定了控制元件的權值，控制元件會根據權值來決定其顯示的層級。

Material。io Elevation

其實用心去細調安卓透過自定義陰影最終總能達到和iOS視覺呈現效果一致的陰影，但是我們需要解決的問題是：

是否佔位和視覺一致。

什麼是陰影占位？

在我們設計的過程中基本不會考慮佔位問題，因為設計稿陰影是不佔位的。

舉個例子

當開發中陰影占位的時候，我們預留的間距是需要大於等於陰影距離的。

所以我們看到當陰影占位的時候很多情況下是無法滿足我們的設計需要的，因為在大多數情況下卡片如果在一起的話陰影是超出間距的。

因此我們需要

陰影不佔位。

當陰影不佔位時設計時則不需考慮陰影是否預留空間，並且也更符合物理現狀，影子是一個虛的東西，不需要空間。

CSS和iOS的陰影是不佔位的，Android中只有使用Elevation不佔位；並且繪製效率高，也就是使用了Material Design的常規陰影，常規陰影透明度不可控，並且是透過深度Z來控制陰影那如何才能和iOS一致呢？下面先簡單介紹下如何制定陰影的規範再根據例項來解決安卓陰影如何和iOS一致的問題。

如何制定常規陰影規範

什麼是陰影？

影，又稱影子、陰影（英語：shadow）是一種物理現象，是光線被不透明物體阻擋而產生的黑暗範圍，與光源的方向相反。在光源固定的情況下，影子反應了物體離我們的距離。在螢幕中則是直接透過模擬控制元件的影子來告知使用者其距離及層級。

光源

陰影的方向決定了光源的位置，在螢幕中雖然我們可以自定義光源的位置，但使用者都已習慣了在螢幕上方。

高度

人們視覺所關注的資訊總是由大到小，由深至淺；

在移動端設計中，我們把陰影設定為低，中，高3個層級：

在同一個平面中選擇其陰影層級，設計師根據控制元件所佔螢幕比例來決定陰影級別。

強度

根據卡片是否為純白色底來決定陰影強度，也就是陰影透明度，非純白色情況下透明度為常規的2倍呈現。

陰影引數

具體的引數根據應用風格調性及實際情況來定，僅做參考。

如何解決Android陰影效果

在Android裡的陰影總是這樣的

我們發現透過Z軸和Y軸的控制其實能很接近我們想要的效果，僅僅只需要調低透明度即可，然而Elevation並不支援自定義透明度。

前面提到過點9圖的陰影原理其實就是下邊貼張圖片做陰影，因此是否透過該原理分為兩層，底層做陰影調整透明度，頂層做卡片能否達到這樣的效果？

我們來測試一下：

我們發現透過調整Z軸陰影值及底層透明度陰影效果是可以和設計稿視覺效果保持一致的，其實安卓的陰影也可以很通透很清秀，也可以不佔位。根據我們的設計稿效果調整好相同視覺效果的引數進行封裝成元件即可。

其實在很多產品中也會使用分層陰影的方式；

例如Facebook的這個通知型別圖示陰影，當網路情況特別差的時候這個區域的陰影是預先加載出來的，說明陰影和上層是分開的。

THX