Material Design 谷歌設計語言—— 高度與陰影 之高度

高度與陰影

質感設計中的物體與現實物理世界中的物體具有相似特點

在現實世界中,物體可以和其他物體堆疊起來,或貼在其他物體上,但不能穿過其他物體。物體有投影,會反射光線。

質感設計將運用這些特點,從而建立起把用戶所熟悉的空間模型,并在應用中一以貫之。

高度

從一個物體前端表面到另一個物體前端表面,可測量得到一個物體的高度,這個高度表示了兩個物體之間的距離及陰影的深度。

停留高度

所有物質元素都有停留高度。元素在一個應用中的停留高度應一致不變;但元素在不同平臺、不同設備上的停留高度可以不同

動態高度差

動態高度差指,一個原件從原始的停留高度,運動到目標高度,之間的高度差

高度(安卓)

高度是指兩個平面在Z軸上的相對高度,或距離。

詳細描述:

- 高度的測量單位與X軸和Y軸的單位相同,用密度獨立像素來描述。因為物質元素有厚度(所有物質厚度均為1dp),高度的測量是從一個表面頂部到另一個表面頂部。

- 所有子物體的高度都是相對父物體的高度。

- 展示的圖像和數值適用于安卓應用。


兩個物體的多種高度

停留高度

所有物體,無論面積大小,都有一個停留高度,或者叫做不變化的默認高度。當一個物體高度變化了,應該盡快回到停留高度。

筆記本停留高度比鼠標和不可觸控環境低2dp

元素高度:

- 元素在app應用中的停留高度保持一致。例如,每個應用中的懸浮按鈕高度都相同。

- ?元素在不同平臺或不同設備上的停留高度可能會不同,取決于環境的深度。例如,電視機的環境深度比筆記本要大得多。同樣的,電視和筆記本的環境深度都比手機的大得多。

響應高度和動態高度差

一些類型的元素有響應高度,也就是這些元素的高度會根據用戶輸入指令(如,常態、懸浮和按下)或者系統事件而發生變化。這種高度變化通常通過動態高度差來實現。

一個元素運動到目標高度后,與它本身的停留高度之間的差值,稱之為動態高度差。

當輸入事件完成或取消后,該元素應盡返回到停留高度。

避免高度干擾

元素從停留高度運動到響應高度,可能會與其他元素發生碰撞。因為物體不能相互穿透,元素應采用某種方法來避免高度干擾,如基于元素基礎,或用整體應用布局。

在一個元素水平上,元素可以移動或者在發生碰撞干擾前移除掉。例如,將FAB放置到卡片的一側,這樣當用戶抽取卡片時,FAB高度不會干擾。


元素高度對比

下列圖標比較了停留高度和動態高度差


在這張圖標中,僅元素的高度和高度布局是精準的,其他尺寸和布局僅為演示。


這一個舉例應用,其布局中有卡片和漂浮按鈕,其橫截面圖表演示了該應用中元素沿著Z軸的分布


這一個舉例應用,其布局中有一個開放式導航欄,其橫截面圖表演示了該應用中元素沿著Z軸的分布
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容