陰影
陰影為物體的深度和移動方向提供了重要視覺線索。陰影是區(qū)分不同表面的位移視覺線索阳谍。一個物體的高度決定了其陰影的形態(tài)蛀柴。
不正確1:完全沒有陰影螃概,完全沒將漂浮按鈕從背景的表面中區(qū)分出來
不正確2:清晰的陰影表明,漂浮按鈕和藍色頁是獨立的元素鸽疾。但是兩者的陰影太相似吊洼,看起來兩者處在同一高度上。
正確:漂浮按鈕的陰影更柔和制肮,擴散更大冒窍,表明其處在更高的高度上;而藍色頁是陰影邊緣更清晰豺鼻。
在運動中综液,依據(jù)陰影提供的重要視覺線索,用戶能分辨物體的運動方向儒飒,以及不同表面之間的距離是增大還是減小了谬莹。
元素的參考陰影
下面元素陰影應被用作標準參考。
在筆記本中届良,懸浮按鈕的高度可以是:
停留狀態(tài)陰影:0dp
按下狀態(tài)陰影:2dp
物體關(guān)系
物體的層級
如何組織物體慢显,或者說物體的收納,在app應用中決定了物體相對其他物體運動的方式欠啤。物體可以獨立于其他物體運動荚藻,也可能在層級中受制于其他物體。
所有物體在層級關(guān)系中都能用父級和子級來描述洁段∮τ“子”元素在層級中歸屬于“父”元素。所有物體都是系統(tǒng)或其他物體的“子”元素祠丝。
父-子 具體規(guī)則
- 每個物體都有一個父級
- 每個物體可能有若干個子級
- 子級物體從父級物體遺傳外觀特性疾呻,如位置、旋轉(zhuǎn)写半、縮放和高度
- 同層級的物體互為兄弟
例外情況
- 歸屬于系統(tǒng)的子級物體岸蜗,如重要UI元素,可獨立于其他物體運動叠蝇。例如璃岳,漂浮操作按鈕不隨著內(nèi)容滾動而移動。其他類似元素包括:
- 應用的側(cè)邊導航欄
- 操作條
- 對話框
交互
物體在層級關(guān)系中的位置決定了其與其他物體交互的方式
例如:
- 子級物體與父級物體在Z軸上的距離為最小,其他物體無法位于兩者之間
- 在滾動卡片集合中铃慷,所有卡片互為兄弟单芜,串聯(lián)移動∶度撸卡片集合控制了這些卡片的運動缓溅。
卡片隨著卡片集合上下滾動。漂浮操作按鈕保持不動赁温,因為他的父級沒有滾動。
高度
如何規(guī)定物體在Z軸上的高度淤齐,取決于你想表達的內(nèi)容層級股囊,也取決于某個物體是否要獨立于其他物體運動。