日本不卡在线一区2区三区,国产亚洲精品第一综合不卡

搜索

APP

起點(diǎn)課堂會(huì)員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會(huì)特權(quán)

個(gè)人IP打造特權(quán)

30+門專項(xiàng)技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會(huì)員專屬社群

榮耀標(biāo)識(shí)

發(fā)布

注冊(cè) | 登錄

Material Design：扁而不平

小涵

2015-07-29

1 評(píng)論 4751 瀏覽 18 收藏

10 分鐘

這篇文章本來只是篇寫給同學(xué)看的短文——因?yàn)樗恢闭J(rèn)為“Android 從 4.0 開始就是扁平化設(shè)計(jì)了”….結(jié)果沒想到這么想的人還不少，所以就寫了這么一篇科普文，全篇偏小白，無干貨，敬請(qǐng)放心閱讀。

從 Android Design 說起

仔細(xì)觀察這個(gè)按鈕，你發(fā)現(xiàn)了什么？

這個(gè)按鈕看上去是“扁平的”，對(duì)嗎？但仔細(xì)觀察這個(gè)按鈕，你會(huì)發(fā)現(xiàn)一點(diǎn)——按鈕的周圍有一個(gè)像素的高光存在。

這就是 Android Design 強(qiáng)調(diào)的“擬真”風(fēng)格了?！皵M真”的本意是，保留控件本身的“立體”屬性和光影效果，而去掉了對(duì)材質(zhì)和樣式的模仿。

說白了就是，以上圖的按鈕為例，它有厚度，有光影效果，但它看上去不像任何一個(gè)存在于現(xiàn)實(shí)世界里的按鈕。

Google 在 Android Design 時(shí)代無數(shù)次地強(qiáng)調(diào)了“擬真”的重要性，“厚度”和“光影”這兩個(gè)屬性在大量的控件中都有體現(xiàn)。

“擬真”也成為了 Android Design 與 Windows Phone 代表的“扁平”和 iOS 6（及以下）代表的“擬物”的最大差別，從下圖中可以看出，相同的控件，三種設(shè)計(jì)語言之間的區(qū)別有多大。

綜上所述，在 Android Design 時(shí)期，Google 強(qiáng)調(diào)的是“擬真”設(shè)計(jì)風(fēng)格，這種風(fēng)格代表的是對(duì)“厚度”和“光影”的模擬。

Material Design 時(shí)代到來

從 iOS 7 開始，曾經(jīng)由 Windows Phone 為代表的扁平化設(shè)計(jì)語言開始大行其道，曾經(jīng)“擬物/扁平/擬真”的“三分天下”局面被徹底打破了。對(duì)于“Android 是否要使用扁平化設(shè)計(jì)語言”的討論也從那時(shí)開始出現(xiàn)。然而 Google 選擇了另辟蹊徑，在 I/O 2014 大會(huì)上隨 Android L 推出了代表 Google 全新設(shè)計(jì)語言的 Material Design。

對(duì)于 Material Design 的誤解也從這時(shí)開始出現(xiàn)了，有人先入為主地認(rèn)為 Material Design 是扁平化的設(shè)計(jì)語言，是這樣的嗎？

要回答這個(gè)問題，我想先用之前看到的一個(gè)比喻來說明一下：

假設(shè) iOS 6- 及現(xiàn)在的 Smartisan OS 代表的擬物化風(fēng)格，代表著設(shè)計(jì)語言的一個(gè)極端：

而 iOS 7+ 和 Windows Phone 等代表的扁平風(fēng)格，代表著設(shè)計(jì)語言的另一個(gè)極端：

那么 Material Design 就是從一個(gè)極端走到了另一個(gè)極端，之后往后退了一大步，到了一個(gè)“中間偏右”的位置。

所以，Material Design 同樣即不扁平，也不擬物——但是，它和上文里提到的“擬真”又是不一樣的。簡單來說，正如標(biāo)題所述，扁而不平。

首先談?wù)劇氨狻?，Material Design 里的“Material”實(shí)際上是一種虛構(gòu)出來的材料（這也是為什么它叫 Material Design 吧），這種材料的設(shè)定簡單來說就是是：厚度無限薄，面積無限大，能變換造型，也能按照規(guī)律移動(dòng)。那么既然無限薄了（Google 官方給出的數(shù)字是 1dp），那么厚度問題就自然而然地被淡化了。

不僅薄得不存在厚度問題，同時(shí)對(duì)于光影的詮釋也有所變化，雖然 Material Design 中還存在一個(gè)主要光源和另外的環(huán)境光，但像上文里如此明顯的對(duì)光源的體現(xiàn)你是沒法看出來了：現(xiàn)在他們的作用，主要是為陰影創(chuàng)造條件。

所以，Material Design 扁嗎？當(dāng)然扁了，沒了厚度，還能不扁嗎？

但平不平，又是另外一回事了。

三維的 Material 世界

雖然每一塊 Material 都是扁的，但他們所處的環(huán)境，其實(shí)是一個(gè) 3D 空間。

這意味著什么？所有處于 Material Design 設(shè)置的這個(gè)三維環(huán)境里的控件，都擁有 XYZ 三個(gè)維度。

Z軸維度代表著什么？對(duì)了，是高度。那么 Material Design 里，控件的高度代表著什么？

是層級(jí)關(guān)系。

相信有人一定見過這個(gè)動(dòng)畫，一塊 Material 被抬起之后，其陰影顯得比其他的 Material 都要深：

為什么會(huì)出現(xiàn)這種情況？

如上圖所示，在屏幕里看上去平整的一個(gè) App 界面，事實(shí)上不同控件之間都擁有著層級(jí)關(guān)系。在 Material Design 里，層級(jí)關(guān)系是很重要的，不同控件之間的層級(jí)關(guān)系會(huì)使用陰影作為表示，Google 提供了 5 種深度的陰影用于表示層級(jí)高低。

這種邏輯恰恰符合了現(xiàn)實(shí)世界中的情況——假設(shè)你將兩塊木塊并行排列在同一區(qū)域上，在光源不變的情況下，他們的陰影自然是相同的，當(dāng)你抬起其中一塊木塊的時(shí)候，其所處的高度會(huì)比另一塊高，陰影也會(huì)比另一塊更深。

Google 將這種源于現(xiàn)實(shí)的邏輯大量應(yīng)用于 Material Design 中，例如一個(gè)按鈕，當(dāng)你按下去的時(shí)候其會(huì)向上浮起，而后回落，陰影也會(huì)隨之而變化，這時(shí)候你就像“抬起”了這個(gè)控件，短暫提高了其高度，而后你松開了手指，控件又會(huì)隨著慣性下落。