Meterial Design 按鈕陰影疑惑?

1. 按鈕按下時應該離 base layer 更近,為什麼 elevation 反而提升了,陰影更加柔化了,如下圖:

(已解決)

2. 官網給出的 reseting state of raised button is 2 dp. 假設屏幕解析度就是 160 dpi. 那麼就是 2px. 這個 2px 在編程上怎麼實現。比如前端的 box-shadow: offset-x offset-y blur-radius spread-radius 這四個數值該怎麼設置。有統一的標準嗎,還是每個公司都不一樣。

3. 對於 Material Design 官網給出的交互效果演示視頻,我們可以用什麼軟體做出來?AE嗎?還有什麼其他類似的軟體。

4. 對於不同 elevation 導致的 transformY 的移動是否是 -((ele2 - ele1) * 2 + 1); 比如初始是1,懸浮時為3,這樣 transformY 為 -((3 - 1)* 2 + 1)= -5 。

這是我做的 Demo: A Pen by JoeyQiang 不知道理解的對不對,望朋友指證。

謝謝~


在 Material Design 中按鈕被觸發時是上浮的,就好像小紙片被靜電吸附上來了一樣。


MD里的控制項脾氣比較大,你一按它,它就反抗,頂你,這是力的反饋。哈哈。

給用戶呈現的是該控制項處於激活狀態。可以修改兩個屬性,一個是elevation 靜止(初始)狀態的高度,一個是translationZ,基於初始狀態的偏移量。做動畫用,按下時2dp,鬆手時0dp,一個selector搞定.陰影是由系統根據Z軸大小進行渲染,越高,陰影範圍越大,越柔和。

其實我覺得Z軸先減少再增加效果會更好。


推薦閱讀:

誰能介紹下web前端工程化?
前端開發中提到的「腳手架」到底指什麼,CLI?gulp 和 gulp-cli有什麼區別
web前端之路?
CSS的復用代碼,是多添加點類好?還是增加點代碼量好?
Win10 發布後,大公司前端會怎麼發展?

TAG:前端開發 | UI開發 | MaterialDesign |