Material Design 谷歌設(shè)計(jì)語言—— 高度與陰影 之高度

高度與陰影

質(zhì)感設(shè)計(jì)中的物體與現(xiàn)實(shí)物理世界中的物體具有相似特點(diǎn)

在現(xiàn)實(shí)世界中,物體可以和其他物體堆疊起來,或貼在其他物體上,但不能穿過其他物體。物體有投影,會(huì)反射光線。

質(zhì)感設(shè)計(jì)將運(yùn)用這些特點(diǎn),從而建立起把用戶所熟悉的空間模型,并在應(yīng)用中一以貫之。

高度

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

停留高度

所有物質(zhì)元素都有停留高度。元素在一個(gè)應(yīng)用中的停留高度應(yīng)一致不變;但元素在不同平臺(tái)、不同設(shè)備上的停留高度可以不同

動(dòng)態(tài)高度差

動(dòng)態(tài)高度差指,一個(gè)原件從原始的停留高度,運(yùn)動(dòng)到目標(biāo)高度,之間的高度差

高度(安卓)

高度是指兩個(gè)平面在Z軸上的相對(duì)高度,或距離。

詳細(xì)描述:

- 高度的測(cè)量單位與X軸和Y軸的單位相同,用密度獨(dú)立像素來描述。因?yàn)槲镔|(zhì)元素有厚度(所有物質(zhì)厚度均為1dp),高度的測(cè)量是從一個(gè)表面頂部到另一個(gè)表面頂部。

- 所有子物體的高度都是相對(duì)父物體的高度。

- 展示的圖像和數(shù)值適用于安卓應(yīng)用。


兩個(gè)物體的多種高度

停留高度

所有物體,無論面積大小,都有一個(gè)停留高度,或者叫做不變化的默認(rèn)高度。當(dāng)一個(gè)物體高度變化了,應(yīng)該盡快回到停留高度。

筆記本停留高度比鼠標(biāo)和不可觸控環(huán)境低2dp

元素高度:

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

- ?元素在不同平臺(tái)或不同設(shè)備上的停留高度可能會(huì)不同,取決于環(huán)境的深度。例如,電視機(jī)的環(huán)境深度比筆記本要大得多。同樣的,電視和筆記本的環(huán)境深度都比手機(jī)的大得多。

響應(yīng)高度和動(dòng)態(tài)高度差

一些類型的元素有響應(yīng)高度,也就是這些元素的高度會(huì)根據(jù)用戶輸入指令(如,常態(tài)、懸浮和按下)或者系統(tǒng)事件而發(fā)生變化。這種高度變化通常通過動(dòng)態(tài)高度差來實(shí)現(xiàn)。

一個(gè)元素運(yùn)動(dòng)到目標(biāo)高度后,與它本身的停留高度之間的差值,稱之為動(dòng)態(tài)高度差。

當(dāng)輸入事件完成或取消后,該元素應(yīng)盡返回到停留高度。

避免高度干擾

元素從停留高度運(yùn)動(dòng)到響應(yīng)高度,可能會(huì)與其他元素發(fā)生碰撞。因?yàn)槲矬w不能相互穿透,元素應(yīng)采用某種方法來避免高度干擾,如基于元素基礎(chǔ),或用整體應(yīng)用布局。

在一個(gè)元素水平上,元素可以移動(dòng)或者在發(fā)生碰撞干擾前移除掉。例如,將FAB放置到卡片的一側(cè),這樣當(dāng)用戶抽取卡片時(shí),F(xiàn)AB高度不會(huì)干擾。


元素高度對(duì)比

下列圖標(biāo)比較了停留高度和動(dòng)態(tài)高度差


在這張圖標(biāo)中,僅元素的高度和高度布局是精準(zhǔn)的,其他尺寸和布局僅為演示。


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


這一個(gè)舉例應(yīng)用,其布局中有一個(gè)開放式導(dǎo)航欄,其橫截面圖表演示了該應(yīng)用中元素沿著Z軸的分布
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容