為何 Material Design 中的物體被點擊的狀態下，elevation 會增加？

01-05

按照Material Design文檔描述的設計原則，要盡量遵循真實世界的物理規則，所以當一個物體被點擊，它的z軸坐標不是應該變小嘛？
如官方文檔「Objects in 3D space」小節中下圖所示，該如何理解？

在「Objects in 3D space - What is material?」一節中，高度被如此定義：高度是物件沿著Parent所在Z軸上的相對位置。高度是Parent與Child之間的相對數值。

所以在回答這個問題時，可以有一個粗暴的答案：因為Child在展開變為Child View之前，首先要從Parent升高為Child。

其他的回答，無論是水中升起還是玻璃後吸起，都試圖從隱喻的層面上給出解釋。這些都很有趣，我一直也有著類似的理解。但這裡我打算抬一下杠，來更深入地辨析。我現在覺得，Material作為被建構的實體，它既有隱喻的層面，也有反隱喻的層面，換句話說，它有反直覺反經驗的一面。與其說它符合了某些現實，不如說它是數字時代信息呈現方式優化的結果。

現實的經驗是，Parent在上，Child在下，這才是符合直覺的。打開一本書，先是章節目錄，翻下去才是目錄的Detail view，即具體章節的正文。但是在數字時代，經驗被重塑了。點擊頁面中的鏈接，瀏覽器當前標籤的右側出現新頁面的標籤，同時頁面立即切換到新頁面，「向下翻尋內容」的中間步驟被省略了。

iOS 7更進一步用觸摸手勢來連接層級。Detail view page從當前頁右側滑入。iOS基本界面首先是一個橫向的思維導圖，即左側為Parent，右側為Child，這構成了iOS自誕生以來的交互基礎。只是iOS 7進一步給出Z軸上的層級，即頁面右側滑入的同時，處於上級高度。借用剛才書的比喻，你可以把它理解成：省略向下翻走當前頁的步驟，新頁直接從右側出現。

那麼Materail Design式的書籍呢？目錄即章節。因為Material天生我材，目錄上的章節List可以直接向上浮起，展開Detail View變成章節。

Material Design patterns navigational-transitions視頻

再換一個角度補充說明。注意啊，越來越深刻了哦。

我們把按鈕常理解成Launcher（啟動器），按下按鈕，上面不知道什麼地方彈出東西，一下一上的兩個動作產生因果。但在數字時代，尤其是觸摸時代，按下按鈕這一步驟也有了被省略的趨勢，產生交互的不再是按鈕而是內容本身。iOS式的菜單列表，菜單不是Tool Bar或Tab Bar之上的按鈕，而直接呈現在內容的區域並可交互。前面談到的iOS 7主界面，圖標不再是Launcher，而是應用本身。類似的方式，我們也可以說，Material 的特性使它不再視目錄為啟動器，目錄即章節本身。

專欄中的一節，全文在此：舞台上的戲法和天文里的科技：Material Design和iOS 7動效對比分析 - 表面 - 知乎專欄

Material Design 里說過, 手機屏幕是一塊平面, 在這塊平面上你是無法製造凹陷的. Material Design 的物品全部是位於屏幕下方的一個假想空間內, 手機相當於是一個水池, 屏幕是水面.

當用戶觸摸屏幕時, 原先浮在水中或者沉在水底的元素向上浮動來響應觸摸操作, 所以才會產生漣漪動畫和上浮造成的陰影變化.

其實官方解釋就在這個章節的第一小節: http://www.google.com/design/spec/what-is-material/environment.html#environment-3d-world

題主截圖後面也緊跟著解釋: http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html#objects-in-3d-space-elevation

根據「真實世界的物理規則」，一個物體被「按下」時是會下沉。然而隔著玻璃「觸摸」就使得玻璃後面的物體下沉，這是哪個「真實世界」的物理規則？

「觸摸會吸引玻璃後面的物體」和「觸摸會按下玻璃後面的物體」都是「魔法世界」的規則，誰也不比誰更真實。由於玻璃無法提供「按下」的觸覺反饋，某種意義上「吸引」更真實，因為「吸引」是比「排斥」更常見的非接觸作用方式。

與其說是按鈕，不如認為是「被選中」從而突出來。

在一堆紙片里選擇你想要的那張用什麼動作？

拿起或者粘起來。

MD不是以現實的按鈕為藍本的「擬物」，是來自於紙片和所謂「基本材質」隱喻的「擬真」。

另，一直覺得按鈕在移動設備上下沉狀態並不直觀和明顯（被手指遮擋住了）；而升起既有被選中的隱喻，又能在按鈕邊緣外以陰影及時給予動作反饋。這是我的理解，僅此拋磚。

謝邀。簡單地來說（我也說不出更詳細的），物件會因為你的觸摸而被吸引離開原地，所以elevation是正值。

做一隻迎合你的按鈕。

剛剛接觸，個人理解

用戶接近紙張（material）的時候，紙張（material）就會主動接觸用戶，（當你接觸屏幕的時候，會感覺元素向前與你產生接觸完成你的請求）想像手指慢慢向下接觸水面，當你的手指和倒影相遇的時候，你碰到了水面，產生了回應，水面產生了漣漪，與油墨元素的交流都可以這樣處理。

這就是我們經常看到的Button所產生的漣漪效果的原因，同時也解釋了為什麼在我們點擊Button的時候，它的Z軸高度不降反升，因為我們無法隔著屏幕真正接觸到紙片（material）。

圖片來自視頻：https://www.youtube.com/watch?v=YaG_ljfzeUw

如果對MD有興趣，歡迎關注我的公眾號：大喵的設計瓦罐

一起學習