在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ Android/ 高度和陰影
Snackbars 與 Toasts
選擇器
網(wǎng)格
紙片
色彩
手勢(shì)
內(nèi)容選取
準(zhǔn)則
導(dǎo)航過(guò)渡
進(jìn)度和動(dòng)態(tài)
概述
數(shù)據(jù)格式
搜索(Search)
Roboto 字體
副標(biāo)題
Material 屬性
書(shū)寫(xiě)
空狀態(tài)
按鈕
提示框(Dialogs)
開(kāi)關(guān)
導(dǎo)航
單位和度量
列表
度量與邊框
真實(shí)的動(dòng)作
改進(jìn)的操作
底部動(dòng)作條
加載圖片
卡片
工具提示(Tooltips)
菜單
設(shè)備
可達(dá)性
分隔線(Dividers)
高度和陰影
環(huán)境
抽屜式導(dǎo)航
響應(yīng)式交互
Tabs
圖標(biāo)
滾動(dòng)時(shí)的技巧
更新記錄
錯(cuò)誤
影像處理
設(shè)置
滑塊控件(Sliders)
列表控制
圖像
文本框
布局模板
雙向性
選擇控制器
調(diào)色板
自適應(yīng) UI
貼片集
數(shù)據(jù)表
滑動(dòng)刷新
啟動(dòng)屏幕
按鈕:浮動(dòng)操作按鈕
打動(dòng)用戶的細(xì)節(jié)
應(yīng)用結(jié)構(gòu)
有意義的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
字體排版(Typography)
結(jié)構(gòu)

高度和陰影

Material design 中的對(duì)象與現(xiàn)實(shí)生活中的對(duì)象具有相似的性質(zhì)。在現(xiàn)實(shí)生活中,不同對(duì)象可以被堆積或粘貼起來(lái),但是不能彼此交叉。對(duì)象自身塑造了自己的陰影并返回自己的光影。

依據(jù)這些性質(zhì)所構(gòu)造出來(lái)的空間模型對(duì)于用戶來(lái)說(shuō)是非常熟悉的,這一模型也可以被長(zhǎng)期應(yīng)用于移動(dòng)應(yīng)用當(dāng)中。支撐這一空間模型的正是“高度”(Elevation)和“光影”(Shadows)這兩個(gè)概念。

高度(安卓)
陰影
元素關(guān)系

高度(安卓)

高度是在 Z 軸上兩個(gè)不同平面之間的一種相對(duì)深度或距離。

詳述:

  • “高度”的度量單位與 XY 軸的度量單位相同,主要是 DP。由于所有 Material 元素都具有 1 單位 DP 的厚度,所以“高度”度量的是從一個(gè)平面頂部到另一個(gè)平面頂部的距離。
  • 一個(gè)子對(duì)象的高度與其父對(duì)象的高度相關(guān)。

這里是一些與安卓應(yīng)用相關(guān)的圖表和數(shù)據(jù)。

陰影影響
為自定義元素定義“陰影”

http://wiki.jikexueyuan.com/project/material-design/images/3_1.png" alt="" />

兩個(gè)對(duì)象間的多種高度度量

靜止高度

所有 Material 對(duì)象除去大小之外,還有一個(gè)“靜止高度”,或者稱“默認(rèn)高度”,它是不會(huì)變化的。當(dāng)一個(gè)對(duì)象的高度產(chǎn)生變化時(shí),它將會(huì)盡快恢復(fù)到自身的靜止高度。

組件高度

  • 某一元素類型的靜止高度在移動(dòng)應(yīng)用中是一個(gè)常量。(比如,F(xiàn)AB 高度不會(huì)在某一個(gè)應(yīng)用中是 6 dp 而在另一個(gè)應(yīng)用中是 16 dp)

  • 元素在某一平臺(tái)中可能會(huì)存在多種靜止高度,這取決于環(huán)境的深度。(比如,TV 相比于移動(dòng)端和桌面來(lái)說(shuō)就具有更深的層次)

感應(yīng)高度與動(dòng)態(tài)高度偏移

一些元素類型擁有感應(yīng)高度,也就是說(shuō)它們會(huì)根據(jù)用戶的輸入(比如常規(guī)的、關(guān)注的和壓制的)或系統(tǒng)事件來(lái)改變高度。這些高度的變化會(huì)通過(guò)動(dòng)態(tài)高度偏移而不斷生成。

動(dòng)態(tài)高度偏移是某一元素移動(dòng)的目標(biāo)高度,它與該元素的靜止?fàn)顟B(tài)有關(guān)??梢源_定的是高度的變化在事件和元素類型中是持久發(fā)生的。比如說(shuō),所有通過(guò)按壓來(lái)提升的元素相對(duì)于其靜態(tài)高度來(lái)說(shuō)都具有相似的高度變化。

一旦輸入事件完成或被取消,那么元素將會(huì)恢復(fù)到它的靜止高度上。

避免高度沖突

處于感應(yīng)高度的元素當(dāng)它在靜止高度與動(dòng)態(tài)高度偏移之間移動(dòng)的時(shí)候可能會(huì)遇到其他的元素。由于 Material 不能相互交叉,沒(méi)有任何一種方式能夠讓元素之間產(chǎn)生沖突,無(wú)論是基于均元素基礎(chǔ)(per-component basis)還是通過(guò)使用完整應(yīng)用布局。

在某一個(gè)元素水平上,元素可以在它們產(chǎn)生沖突之前提前移動(dòng)或被移動(dòng)。比如說(shuō),一個(gè)“浮動(dòng)動(dòng)作按鈕”(FAB)可以在用戶選擇一張卡片之前消失或移出屏幕,或者它也可以在某一個(gè) “snack bar” 出現(xiàn)時(shí)移動(dòng)。

在布局水平上,你需要通過(guò)設(shè)計(jì)你的應(yīng)用布局來(lái)將產(chǎn)生沖突的機(jī)會(huì)降到最低水平。比如說(shuō),可以通過(guò)將 FAB 置于某個(gè)卡片流的一端來(lái)避免當(dāng)用戶嘗試獲取某個(gè)卡片時(shí)所產(chǎn)生的沖突。

http://wiki.jikexueyuan.com/project/material-design/images/2_0_1.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/2_0_2.png" alt="" />

元素高度比較

下面的圖表對(duì)比了多種元素的靜止高度和動(dòng)態(tài)高度偏移。

http://wiki.jikexueyuan.com/project/material-design/images/3_2.png" alt="" />

在這一圖表中,只有高度的尺寸和元素布局是精確的。其他尺寸和整體的元素布局只是為了說(shuō)明而列出的。

http://wiki.jikexueyuan.com/project/material-design/images/3_3.png" alt="" />

一個(gè)包含卡片和FAB應(yīng)用布局的實(shí)例與它在Z軸上元素高度的橫截面圖表。

http://wiki.jikexueyuan.com/project/material-design/images/3_4.png" alt="" />

一個(gè)包含開(kāi)放導(dǎo)航抽屜的應(yīng)用布局實(shí)例與它在Z軸上元素高度的橫截面圖表。

陰影

“陰影”提供了對(duì)象深度和方向性移動(dòng)的重要視覺(jué)線索。它們是唯一一種標(biāo)示不同平面之間分離程度的視覺(jué)線索。某一對(duì)象的“高度”決定了其具體“陰影”的表現(xiàn)形式。

http://wiki.jikexueyuan.com/project/material-design/images/3_5.png" alt="" />

否。一旦沒(méi)有了陰影,沒(méi)有什么可以標(biāo)示浮動(dòng)動(dòng)作按鈕是從背景層分離出來(lái)的。

http://wiki.jikexueyuan.com/project/material-design/images/3_6.png" alt="" />

否。卷曲的陰影說(shuō)明浮動(dòng)動(dòng)作按鈕與“藍(lán)層”(blue sheet)是兩個(gè)分離開(kāi)來(lái)的元素。然而,由于它們的陰影非常的相似以至于會(huì)被誤認(rèn)為它們?cè)谕桓叨壬稀?/p>

http://wiki.jikexueyuan.com/project/material-design/images/3_7.png" alt="" />

是。更柔和、更大的陰影說(shuō)明浮動(dòng)動(dòng)作按鈕相比于擁有更卷曲陰影的“藍(lán)層”(blue sheet)處于更高的高度之上。

在運(yùn)動(dòng)中,陰影提供了關(guān)于某個(gè)對(duì)象移動(dòng)方向以及不同平面之間距離是否正在增加或減少的有用線索。

http://wiki.jikexueyuan.com/project/material-design/images/3_8.png" alt="" />

否。如果沒(méi)有一個(gè)陰影來(lái)說(shuō)明高度,那么就不能明確一個(gè)方形到底是它的自身尺寸在增加還是它的高度在增加。

http://wiki.jikexueyuan.com/project/material-design/images/3_9.png" alt="" />

是。當(dāng)某一個(gè)對(duì)象的高度增加時(shí)其陰影會(huì)變得更柔和、更大,當(dāng)其高度減小時(shí),陰影會(huì)變得更卷曲。

http://wiki.jikexueyuan.com/project/material-design/images/3_10.png" alt="" />

是。在這一實(shí)例中,連貫的陰影幫助用戶明白某一個(gè)對(duì)象看起來(lái)好像是它的高度在增加其實(shí)是它的形狀在改變。

元素參考陰影

下面的元素陰影應(yīng)被用于標(biāo)準(zhǔn)參考。如果在說(shuō)明中涉及任何關(guān)于下面的參考陰影和元素陰影的不同情況出現(xiàn),那么都?xì)w于參考陰影。

應(yīng)用條

4dp

http://wiki.jikexueyuan.com/project/material-design/images/3_11.png" alt="" />

浮動(dòng)按鈕

靜態(tài):2dp

敲擊狀態(tài):8dp

http://wiki.jikexueyuan.com/project/material-design/images/3_12.png" alt="" />

浮動(dòng)動(dòng)作按鈕(FAB)

靜態(tài):6dp

敲擊狀態(tài):12dp

http://wiki.jikexueyuan.com/project/material-design/images/3_14.png" alt="" />

卡片

靜態(tài):2dp

選中狀態(tài):8dp

http://wiki.jikexueyuan.com/project/material-design/images/3_16.png" alt="" />

菜單和子菜單

菜單:8dp

子菜單:9dp(為子菜單增加 1dp)

http://wiki.jikexueyuan.com/project/material-design/images/3_18.png" alt="" />

對(duì)話框

24dp

http://wiki.jikexueyuan.com/project/material-design/images/3_19.png" alt="" />

導(dǎo)航抽屜和右抽屜

16dp

http://wiki.jikexueyuan.com/project/material-design/images/3_20.png" alt="" />

底部單頁(yè)

16dp

http://wiki.jikexueyuan.com/project/material-design/images/3_21.png" alt="" />

刷新按鈕

3dp

http://wiki.jikexueyuan.com/project/material-design/images/3_22.png" alt="" />

快速查詢/搜索條

靜止?fàn)顟B(tài):2dp

滾動(dòng)狀態(tài):3dp

http://wiki.jikexueyuan.com/project/material-design/images/3_23.png" alt="" />

Snackbar

6dp

http://wiki.jikexueyuan.com/project/material-design/images/3_25.png" alt="" />

切換按鈕

1dp

http://wiki.jikexueyuan.com/project/material-design/images/3_26.png" alt="" />

對(duì)象關(guān)系

對(duì)象層次

你怎樣去組織在某一應(yīng)用中的對(duì)象或?qū)ο蠹先Q于它們?cè)鯓右罁?jù)其他對(duì)象來(lái)移動(dòng)。對(duì)象可以獨(dú)立自主地移動(dòng)或在受到比它更高層次對(duì)象限制的條件下移動(dòng)。

所有對(duì)象都是以“父-子”關(guān)系描述的層級(jí)體系的一部分?!白印痹卦谶@一關(guān)系體系中代表它們“父”元素的下級(jí)元素。對(duì)象可以是這一系統(tǒng)的“子”元素或其他對(duì)象的“子”元素。

“父-子”元素說(shuō)明:

  • 每一個(gè)對(duì)象只有一個(gè)“父”元素。
  • 每一個(gè)對(duì)象可能會(huì)有任意數(shù)量的“子”元素。
  • “子”元素繼承來(lái)自“父”元素的可以轉(zhuǎn)移的屬性,比如位置、循環(huán)、刻度和高度。
  • “兄弟”元素是指與某一對(duì)象處在同一層級(jí)的對(duì)象。

例外

項(xiàng)目以根元素為父元素,比如主 UI 元素,它們相比于其他對(duì)象來(lái)說(shuō)會(huì)自主移動(dòng)。比如說(shuō),浮動(dòng)動(dòng)作按鈕不會(huì)與內(nèi)容一起轉(zhuǎn)動(dòng)。其他元素包括:

  • 一個(gè)應(yīng)用的邊導(dǎo)航抽屜
  • 動(dòng)作條
  • 對(duì)話

交互

某個(gè)對(duì)象與其他對(duì)象交互的方式由它們?cè)凇案?子”層次中所處位置決定。

比如:

  • “子”元素與其“父”元素在Z軸上的分離距離最近;其他對(duì)象不能插入父子元素之間。
  • 在一個(gè)滾動(dòng)的卡片集合中,所有卡片之間都是同層次的“兄弟”元素,因此它們就像坐在同一馬車上的兩個(gè)對(duì)象一樣共同移動(dòng)。它們都是控制它們移動(dòng)的卡片集合對(duì)象的子元素。

高度

你會(huì)如何確定某些對(duì)象的高度(即它們?cè)?Z 空間的位置)取決于你想描述的內(nèi)容層次以及某一個(gè)對(duì)象是否需要相對(duì)于其他對(duì)象自主移動(dòng)。

隨著父表的移動(dòng),升高的按鈕(它的子元素)會(huì)伴隨著它移出屏幕。

隨著卡片集合卷出了屏幕,它的子卡片也會(huì)隨之卷出屏幕。浮動(dòng)動(dòng)作按鈕保留在某一地點(diǎn)因?yàn)樗母冈貨](méi)有被卷動(dòng)。

上一篇:可達(dá)性下一篇:度量與邊框