如何理解Android 5.0浮動按鈕的陰影變化？

01-16

如圖，這是浮動按鈕觸摸前的陰影，
觸摸後，按鈕陰影變大並向外擴散，如同按鈕浮起來一樣，似乎和常理相反，該如何解釋這種現象？
『浮動按鈕(Raised button)，常見的方形紙片按鈕，點擊後會產生墨水擴散效果。』

重新看了一遍問題，題主問的是如何解釋這種現象。其他答主已經回答了，我做一點補充。

另外，浮動按鈕在MD中指的是Floating Action Button，是這貨：

題主說的是Raised Button。

====================

陰影變化在MD中由Elevation和Shadow兩個部分合作達成，就像題主的圖中所表現得一樣。詳情請查看谷歌MD的Elevation and Shadow頁面（需要科學上網）：https://material.google.com/what-is-material/elevation-shadows.html#

此外，我分享一張MaterialUp上的Showcase，幫助題主理解一下：http://www.uplabs.com/posts/material-elevation-visualization

這個鏈接里的可交互Showcase里形象的展示了Material Design里各個物體的高低關係，我們拿其中的Raised Button為例，就是這貨：

Showcase中將滑鼠指針移到button上，便會顯示Raised Button在非活動狀態下（MD中稱為Resting Elevation或Resting state）的高度，即2dp（如圖），點擊左鍵便會顯示Raised Button在按下狀態下（Pressed Elevation或Pressed state）的高度，即8dp。

==========更多==========

為何變化的不是按鈕的位置，或者為何變化的不是按鈕的位置以及陰影擴散。

的確，如果按照以擬物時代為代表的表現，按鈕在按下之後，應當是按鈕自身凹陷以模擬「按下」這一動作：

非活動狀態：

按下：

按下的時候按鈕文字會產生一定位移，以模擬按下的效果，如圖，較透明的那個是按下後文字的位置：

但是顯然，現在早已不是擬物設計的時代了。無論是現代設計的首創者Windows Phone還是行業推動者iOS 7，上述形式的按鈕已經很少出現，但正如扁平設計並不是扁平的，WP與iOS都有對按鈕按下做出了各自的解決方法。

iOS：

實際上，iOS的應用內按鈕風格十分豐富，也有很多採用高亮色（或主題色）填充按下按鈕式的樣式，也有諸如iOS知乎客戶端關注按鈕的樣式。

手邊暫時沒有WP設備了，唯一一台能活動的還在家裡。文字描述一下吧，WP是結合強調色（通常是主題色）與按鈕的3D凹陷（這一點貫穿整個操作系統）。之所以不提及Windows 10 （Mobile）是因為我覺得Windows 10及其Mobile版本的設計已經遠遠不如WP了，但其3D效果還有些許保留。

==========一些問題==========

至於為什麼在MD的Elevation中，按下按鈕後，卻只有陰影在擴散，按鈕位置（或大小）沒有發生變動，這樣的變化效果的確給我帶來了一些困擾，我最近也在思考這個問題，以下是我暫時想到的：

如果按照MD的賦予屏幕內容（紙張）以空間關係，所有互動應當配合透視關係才能讓MD的空間關係更加可感知，就拿Raised Button為例，它目前是這樣的表現形式：

單純依靠陰影的變化，並不足以體現按鈕在的空間位置，可感知性不強。但是，如果配合透視關係，讓Pressed state的按鈕適當變化體積，按鈕的空間位置以及Elevate動作本身的空間位置都變得可感知了：

但是，顯然，目前的MD並沒有將透視效果納入其中。

==========總結==========

說了這些，回答我想題主心裡已經有了。按鈕的樣式在如今可根據不同設計風格而不同，MD的Elevation and Shadow本身也作為MD的風格而存在，也正如MD的其它內容一樣，設計語言的特色而已。

What"s more，設計語言們依然在發展，Google的是，Apple的是，Microsoft的也是，等等。無論當下的誰，都不是完美的，都有各自的種種問題，這正使設計師們不斷研究並致力於發展它們，致力於為用戶提供更加差異化並且優秀的用戶體驗。

谷歌認為屏幕這種媒介如果用「按下去」作為視覺反饋並不恰當，因為屏幕始終是平的。於是谷歌選擇了用「吸起來」作為視覺反饋，也就是手指碰到屏幕時按鈕被吸到手指上。

不用理解了，過兩個月應該又有新的設計規範了（逃

Material Design 中的所有元素（控制項）都有（海拔）高度。元素（控制項）的（海拔）高度又用相應的陰影大小來反映。陰影大說明（海拔）高度高，陰影小說明（海拔）高度低。

Raised button 觸摸前的陰影較小說明它的（海拔）高度較低。觸摸後，按鈕陰影變大並向外擴散說明它的（海拔）高度變高。

根據 https://material.google.com/what-is-material/elevation-shadows.html 的說法，Raised button 平時的 elevation 是 2dp，按下後的 elevation 升高到 8dp。

可以這樣理解：觸摸後，浮動按鈕被手指頭吸上來了。

或者這樣理解：把（海拔）高度為0視為水底，Raised button 原來在水面之下又略高於水底。觸摸 Raised button 會使其上浮。

代表按鈕積極的響應，浮起可以給人一種按鈕被喚醒的心理反饋

個人感覺這個不是浮動按鈕，而是普通按鈕。

md中提到三種button，浮動按鈕，帶邊框的按鈕，不帶邊框的按鈕(描述的不太準確，具體可以看官方文檔，有三張配圖)。我認為這是帶邊框的普通按鈕，按下後按鈕會浮起，使得陰影變大，因為光源是從上方發出，這是官方md中提到的。縱軸上越高的材料表示越強調，所以浮起是為了吸引注意力起強調作用，而不是像有些人以為的應該被按下去。

至於浮動按鈕，一般是圓的，一般是單個，有些時候可以兩個或者更多，但多個時候應該是並列的，官方舉例為谷歌地圖右下角兩個並列的浮動按鈕。知乎此處右下角已有浮動按鈕，再出現一個，而且隔這麼遠，99%不是浮動按鈕，1%的可能那一定是反md了。