Material Design基礎(chǔ) - Light and shadows

1. 光線和陰影

material surface阻擋光源時(shí)會投射陰影几苍。

在material設(shè)計(jì)環(huán)境中翻屈,虛擬燈光照亮UI。關(guān)鍵燈光創(chuàng)建更清晰的方向性陰影妻坝,稱為關(guān)鍵光陰影妖胀。環(huán)境光從各個(gè)角度出現(xiàn),以創(chuàng)建漫射的柔和陰影惠勒,稱為環(huán)境光陰影赚抡。

2. 光源

material環(huán)境中的陰影由關(guān)鍵燈光和環(huán)境光投射。在Android和iOS開發(fā)中纠屋,當(dāng)光源被z軸上不同位置的材質(zhì)表面阻擋時(shí)涂臣,會出現(xiàn)陰影。在web上售担,僅通過操縱y軸來描繪陰影赁遗。

3. 陰影

陰影提供有關(guān)深度、移動方向和surface邊緣的提示族铆。surface的陰影由其標(biāo)高和與其他surface的關(guān)系決定岩四。

3.1. 用法

因?yàn)殛幱氨硎厩嬷g的高度,所以必須在整個(gè)產(chǎn)品中始終使用陰影哥攘。

陰影大小反映標(biāo)高高度剖煌。較高標(biāo)高的曲面有較大的陰影材鹦,而較低標(biāo)高的曲面有較小的陰影。

3.2. Shadows & Motion

陰影為曲面的移動方向以及曲面之間的距離是增大還是減小提供了有用的提示耕姊。
當(dāng)曲面改變形狀或比例桶唐,但其標(biāo)高保持不變時(shí),其陰影不應(yīng)改變茉兰。
當(dāng)曲面更改其標(biāo)高時(shí)尤泽,其陰影應(yīng)該更改。

4. 研究

Material Design對15名低視力參與者進(jìn)行了36次采訪规脸,以更好地了解陰影和輪廓如何影響個(gè)體識別和與組件互動的能力坯约。

研究結(jié)果包括:

陰影和輪廓只是影響用戶識別能力的元素的許多屬性之一。影響元素識別能力的其他屬性包括字體特征莫鸭、標(biāo)高闹丐、顏色、周圍元素之間的布局以及使用上下文黔龟。

使用陰影和輪廓可以提高掃描頁面時(shí)查找組件的難度和速度妇智。

在組件周圍使用陰影或筆劃輪廓可以提高確定是否可以與組件交互的能力。

5. Material Design 系列文章

最新更新以及更多Material Design相關(guān)文章請?jiān)L問 鵬叔的技術(shù)博客空間-Material Design

6. 參考文檔

Material System - layout Light and shadows

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末氏身,一起剝皮案震驚了整個(gè)濱河市巍棱,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蛋欣,老刑警劉巖航徙,帶你破解...
    沈念sama閱讀 212,222評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異陷虎,居然都是意外死亡到踏,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,455評論 3 385
  • 文/潘曉璐 我一進(jìn)店門尚猿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來窝稿,“玉大人,你說我怎么就攤上這事凿掂“槔疲” “怎么了?”我有些...
    開封第一講書人閱讀 157,720評論 0 348
  • 文/不壞的土叔 我叫張陵庄萎,是天一觀的道長踪少。 經(jīng)常有香客問我,道長糠涛,這世上最難降的妖魔是什么援奢? 我笑而不...
    開封第一講書人閱讀 56,568評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮忍捡,結(jié)果婚禮上集漾,老公的妹妹穿的比我還像新娘切黔。我一直安慰自己,他們只是感情好帆竹,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,696評論 6 386
  • 文/花漫 我一把揭開白布绕娘。 她就那樣靜靜地躺著脓规,像睡著了一般栽连。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上侨舆,一...
    開封第一講書人閱讀 49,879評論 1 290
  • 那天秒紧,我揣著相機(jī)與錄音,去河邊找鬼挨下。 笑死熔恢,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的臭笆。 我是一名探鬼主播叙淌,決...
    沈念sama閱讀 39,028評論 3 409
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼愁铺!你這毒婦竟也來了鹰霍?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,773評論 0 268
  • 序言:老撾萬榮一對情侶失蹤茵乱,失蹤者是張志新(化名)和其女友劉穎茂洒,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體瓶竭,經(jīng)...
    沈念sama閱讀 44,220評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡督勺,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,550評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了斤贰。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片智哀。...
    茶點(diǎn)故事閱讀 38,697評論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖荧恍,靈堂內(nèi)的尸體忽然破棺而出瓷叫,到底是詐尸還是另有隱情,我是刑警寧澤块饺,帶...
    沈念sama閱讀 34,360評論 4 332
  • 正文 年R本政府宣布赞辩,位于F島的核電站,受9級特大地震影響授艰,放射性物質(zhì)發(fā)生泄漏辨嗽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,002評論 3 315
  • 文/蒙蒙 一淮腾、第九天 我趴在偏房一處隱蔽的房頂上張望糟需。 院中可真熱鬧屉佳,春花似錦、人聲如沸洲押。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,782評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽杈帐。三九已至体箕,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間挑童,已是汗流浹背累铅。 一陣腳步聲響...
    開封第一講書人閱讀 32,010評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留站叼,地道東北人娃兽。 一個(gè)月前我還...
    沈念sama閱讀 46,433評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像尽楔,于是被迫代替她去往敵國和親投储。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,587評論 2 350

推薦閱讀更多精彩內(nèi)容