2017 Material design 第一章第四節《高度和投影》

D27發表於2017-07-24

四、高度和投影(Elevation and shadows)

Material design中的material物件的特性與現實物理世界中的物體特性相似。

在現實物理世界中,一個物體可以疊在另一個物體上面,但是物體間不能相互穿過。同時,物體也能投射投影和反射燈光。

Material design借鑑了現實物理世界中物體的特性,並將其運用在虛擬的三維空間裡面的material物件上。這種借鑑現實物理世界的做法不僅有利於幫助使用者理解,還能統一各應用間的體驗。

高度(Elevation)
高度的計算方法是從一個material物件的頂面到另一個material物件的頂面。高度的大小可以暗示使用者兩個material物件間的距離大小以及投影的深淺。

預設高度(Resting elevation)
所有的material物件在空間中都有其自己預設的高度。在應用中,這些元件(material物件)的預設高度是這樣的,但到了不同的平臺或是裝置上的時候,預設高度可能就會出現變化。

高度的動態補償(Dynamic elevation offsets)
高度的動態補償就是一個元件(material物件)從其預設高度朝著目標高度所做的位移變化。


高度(Android) (Elevation (Android))

高度取決於沿z軸兩個面之間的距離,或者說是深度。

說明:
高度(z軸)的測量單位和x、y軸上的測量單位是一樣的,都是dp(density-independent pixels)。因為material的厚度是1dp,所以對兩個material物件間高度的計算是從一個material物件的頂面到另一個material物件的頂面。
在material物件中,一個子物件的高度與其父物件的高度相關。
下圖是Anndroid應用中的例子。

不同參照物下2個material物件的高度
不同參照物下2個material物件的高度

預設高度(Resting elevation)
無論大小,所有的material物件都有一個預設高度,這個預設高度是不會改變的。當一個material物件的高度產生了變化,之後它會馬上回到預設高度。

電腦桌面端(Desktop)的各元件預設高度比下圖所列值小2dp,目的是適應帶滑鼠以及非觸控式螢幕的裝置環境。

高度(dp) 元件
24 對話方塊,選擇器
16 抽屜導航, 右抽屜導航, 模態底部sheet
12 浮動按鈕(FAB)
9 子選單(每個子選單+1dp)
8 底部導航欄, 選單, 卡片(選擇狀態), 抬起按鈕 (按下狀態)
6 浮動按鈕(預設狀態), Snackbar
4 應用欄
3 重新整理指示器, 快速入口 / 搜尋欄(滾動狀態)
2 卡片(預設高度)*, 抬起按鈕(預設高度)*, 快速入口 / 搜尋欄(預設高度)
1 開關

元件高度:(Component elevations)
在不同的應用中,各元件的預設高度不變。舉個例子,在一個應用中浮動按鈕(floating action button)的預設高度是6dp,到了另一個應用中一樣也是6dp的預設高度。
在不同的平臺和裝置中,各元件的預設高度可能不同,這取決於人們觀看的距離。舉個例子,因為TV有著比電腦桌面(desktop)更大的螢幕尺寸,所以觀看TV的距離比觀看電腦桌面的距離要更遠。同理,觀看TV和電腦桌面的距離比觀看手機的距離要遠。

高度響應和高度的動態補償(Responsive elevation and dynamic elevation offsets)
一些元件的高度會作響應,換句話說就是當使用者輸入反饋(比如正常狀態、聚焦狀態和點選狀態)或一些系統事件的反饋時,這些元件的高度會因此而改變。這些元件的高度變化主要是通過高度的動態補償實現。

高度的動態補償就是一個元件(material物件)從其預設高度朝著目標高度所做的位移變化。它能確保各元件變化以及元件型別的一致。例如,所有可點選的元件被點選後都會有相同高度的位移變化。

一旦使用者輸入事件完成或者被取消,這些元件就會返回到預設高度的位置上。

避免高度變化衝突(Avoiding elevation interference)
當一個元件的高度在位移變化的時候,有可能會遇到其他元件也在變化。因為material物件之間是不能夠相互穿過的,所以我們要避免各元件在高度變化的時候發生衝突。

在元件處於相同高度的時候下,元件可以根據情況提前移動或者直接消失。舉個例子,浮動按鈕(floating action button,以下簡稱“FAB”)會在使用者選擇卡片(cards)之前消失或移離螢幕,抑或者當snackbar出現時浮動按鈕移動位置。

在佈局層面上,通過設計應用的佈局可以減少元件間相互衝突。舉個例子,將浮動按鈕(FAB)置於螢幕的一側,當使用者選擇卡片(cards)的時候就不會和浮動按鈕產生衝突。

各元件間高度的對比(Component elevation comparisons)
下圖是各元件間預設高度和高度的動態補償的對比。

在上圖中,只有所列元件高度方面和其之間的對比是確定的。元件相關的其他方面和其整體的佈局只作說明參考
在上圖中,只有所列元件高度方面和其之間的對比是確定的。元件相關的其他方面和其整體的佈局只作說明參考

以上圖為例,圖中該應用的頁面佈局裡面包含了卡片(cards)和浮動按鈕(FAB)元件。右邊是該頁面的橫截面圖,其中展示了各元件的高度資訊
以上圖為例,圖中該應用的頁面佈局裡面包含了卡片(cards)和浮動按鈕(FAB)元件。右邊是該頁面的橫截面圖,其中展示了各元件的高度資訊

以上圖為例,圖中展示了一個被使用者開啟的抽屜導航選單(Nav drawer)。右邊是該頁面的橫截面圖,其中展示了各元件的高度資訊
以上圖為例,圖中展示了一個被使用者開啟的抽屜導航選單(Nav drawer)。右邊是該頁面的橫截面圖,其中展示了各元件的高度資訊

投影 (Shadows)

為了引導使用者理解material物件的深度和運動方向,投影提供了重要的視覺暗示。投影是唯一能夠區分面與面(material物件)之間關係的視覺線索。一個material物件的高度決定了其投影的效果。

沒有投影存在,你根本不清楚浮動按鈕(FAB)和背景是否是分開的。
沒有投影存在,你根本不清楚浮動按鈕(FAB)和背景是否是分開的。

不可行

雖然有投影存在,我們也知道浮動按鈕(FAB)和藍色卡片是分開的兩個元件。但因為兩個元件的投影相似,所以會誤以為兩個元件處於同一高度。
雖然有投影存在,我們也知道浮動按鈕(FAB)和藍色卡片是分開的兩個元件。但因為兩個元件的投影相似,所以會誤以為兩個元件處於同一高度。

不可行

圖中,浮動按鈕(FAB)的投影比其他元件的投影更為柔和且面積更大,這樣我們很容易就能看出浮動按鈕的高度比藍色卡片的高度要高。
圖中,浮動按鈕(FAB)的投影比其他元件的投影更為柔和且面積更大,這樣我們很容易就能看出浮動按鈕的高度比藍色卡片的高度要高。

可行

在運動方面,投影不僅能為material物件運動的方向提供視覺暗示,還能展示material物件之間的高度變化(距離增加還是減少)。

圖中是藍色的material物件的前後變化。因為沒有投影暗示material物件的高度,所以你根本不清楚其尺寸在增加還是高度在增加。
圖中是藍色的material物件的前後變化。因為沒有投影暗示material物件的高度,所以你根本不清楚其尺寸在增加還是高度在增加。

不可行

圖中是藍色的material物件的前後變化。前者因為投影清晰且面積較小,所以高度較低。後者反之。
圖中是藍色的material物件的前後變化。前者因為投影清晰且面積較小,所以高度較低。後者反之。

可行

圖中是藍色的material物件的前後變化。兩者因為投影一致,所以很容易能看出material物件是尺寸在變化。
圖中是藍色的material物件的前後變化。兩者因為投影一致,所以很容易能看出material物件是尺寸在變化。

可行


元件的投影規範
以下是各個元件的投影參考。如果在Material design規範中其他地方出現了與這些投影參考規範不同的元件投影,請與這裡為準。

應用欄(App bar)
4dp

凸起按鈕(Raised button)
預設狀態(Resting state): 2dp
按下狀態(Pressed state): 8dp

在電腦桌面端(desktop)上:
預設狀態:0dp
按下狀態:2dp
點選查閱關於 凸起按鈕 的更多資訊。

浮動按鈕(Floating action button (FAB))
預設狀態:6dp
按下狀態:12dp

卡片(Card)
預設狀態:2dp
凸起狀態(Raised state):8dp

在桌面電腦端上的情況,請前往 內容佈局 查閱更多資訊。

選單和子選單(Menus and sub menus)
選單:8dp
子選單:9dp(每增加一個子選單+1dp)

對話方塊(Dialogs)
24dp

抽屜導航選單和右抽屜(Nav Drawer & Right drawer)
16dp

底部模態sheet (Modal bottom sheet)
16dp
譯者注:
1.sheet是Material design語境中的詞語,可以粗淺的認為是“紙片”的意思。如果換成正常的說法應該是對話方塊的意思,只不過官方為了配合語境而另作設定。
2.什麼是「模態」,請點選瞭解

重新整理指示器(Refresh indicator)
3dp

快捷入口/搜尋欄
預設狀態:2dp
滾屏狀態(Scrolled state):3dp

Snackbar
6dp
譯者注:同樣是Material design語境中的詞語,不好表達故不做翻譯。

開關(Switch)
1dp

物件關聯 (Object relationships)

物件層級
在一個應用中,你如何去組織物件直接決定了物件移動的時候與其他物件之間的關係。比如該物件是否能夠獨立移動,還是說移動的時候受到其他物件約束。

所有物件之間都是以父子關係存在的。「子」級物件從屬於它的「父」級物件。一個物件能成為整個系統或者另一個物件的子級物件。

譯者注:這裡討論的物件就是material物件。material物件在「應用」中的表現就是我們熟知的一個個元件。

關於父-子級物件:
每個物件都有一個父級物件
每個物件都有不同數量的子級物件
子級物件繼承父級物件的屬性,如位置、選擇、縮放和高度。
跟子物件處於同一層級的子級物件的級別相同。

例外
一些物件從屬的父級物件是root,比如重要的UI元件,它的移動獨立於其他物件。舉個例子,浮動按鈕不會跟隨滾屏而移動。除此之外,還包括以下元件:

  • 側邊導航選單
  • 操作欄
  • 對話方塊

相互作用
一個物件如何作用於另一個物件,取決於他們在父子層級中的位置。
舉例說明:
子級物件和父級物件在z軸上的距離是最近的;其他非子級物件不能在父-子級物件之間插入。
一個正在移動的卡片(card)集合,他的所有子級卡片都跟隨著移動。這個卡片集合控制著它的各個子級卡片移動。

抬起按鈕(子級)跟隨父級sheet滾動離開螢幕。
抬起按鈕(子級)跟隨父級sheet滾動離開螢幕。

因為整個卡片(card)集合跟隨螢幕滾動而移動,所以其各個子級卡片也會隨著螢幕滾動而移動。浮動按鈕之所以沒有跟隨螢幕滾動,是因為其父級物件沒有因此滾動。
因為整個卡片(card)集合跟隨螢幕滾動而移動,所以其各個子級卡片也會隨著螢幕滾動而移動。浮動按鈕之所以沒有跟隨螢幕滾動,是因為其父級物件沒有因此滾動。

高度
如何決定某個物件的高度(即它們在z軸上的位置)取決於你想表達怎樣的內容層級,以及當一個物件需要移動的時候是否獨立於其他物件。

相關文章