谷歌發(fā)布Material Design 引領(lǐng)新一輪設(shè)計(jì)趨勢(shì)

什么是Material Design？我簡(jiǎn)單地將它翻譯成“本質(zhì)設(shè)計(jì)”。顧名思義，這是一種考慮事物本質(zhì)的設(shè)計(jì)，將電子屏幕里的UI元素看成是一種不存在于現(xiàn)實(shí)世界的新的材質(zhì)，并賦予它物理特性。因此Material Design并不是去擬物化的設(shè)計(jì)。許多設(shè)計(jì)師把扁平化與擬物化對(duì)立起來(lái)，其實(shí)兩者并不是對(duì)立關(guān)系。就在兩個(gè)月前，Google I/O大會(huì)發(fā)布了Android L并推出Material Design，重新統(tǒng)一了Google的設(shè)計(jì)語(yǔ)言，確立了未來(lái)Google的設(shè)計(jì)方向。那么，我更愿意稱(chēng)Google新的設(shè)計(jì)語(yǔ)言為抽象化。

無(wú)論是蘋(píng)果的設(shè)計(jì)語(yǔ)言，還是Google的設(shè)計(jì)語(yǔ)言，乃至于Windows的Modern UI 和Facebook的Paper設(shè)計(jì)語(yǔ)言，大方向都是一致的，而在細(xì)節(jié)上卻分道揚(yáng)鑣。蘋(píng)果與Google幾乎壟斷了移動(dòng)設(shè)備的操作系統(tǒng)，因此我們談?wù)剰男掳l(fā)布的Material Design中看看有哪些無(wú)線設(shè)備的設(shè)計(jì)趨勢(shì)。

前言已提到Material Design并不是一種去擬物的設(shè)計(jì)，也不是一種強(qiáng)調(diào)擬物的設(shè)計(jì)。我們知道電子屏幕是完全平面化的，不像現(xiàn)實(shí)當(dāng)中的物體是3D的， 。一本書(shū)里每一頁(yè)紙之間的空間關(guān)系是很清楚的，但電子屏幕的所以物體都在一個(gè)平面上。雖然電子屏幕沒(méi)有空間感，但信息內(nèi)容是有空間層級(jí)的關(guān)系。而Material Design的解決方式就是把現(xiàn)實(shí)世界中紙張的特性挪到電子屏幕里，把信息內(nèi)容呈現(xiàn)在這個(gè)虛擬的紙上，紙（信息內(nèi)容）跟紙之間有上下層級(jí)關(guān)系，用投影模擬紙張的空間感。Material Design的投影并不是過(guò)去我們常用的使用圖片或者樣式代碼實(shí)現(xiàn)的投影，而是系統(tǒng)根據(jù)紙張層級(jí)所在位置實(shí)時(shí)渲染的，投影會(huì)隨著紙張的空間關(guān)系而改變大小。

Google幾年前推行的Card設(shè)計(jì)就是模擬紙張物理形態(tài)的一種設(shè)計(jì)方式，但Material Design把它提升到了系統(tǒng)信息架構(gòu)層面的高度。

另外，iOS的模糊效果從本質(zhì)上來(lái)說(shuō)與Material Design的紙張?jiān)O(shè)計(jì)要解決的問(wèn)題是同樣的。通過(guò)模擬景深的效果來(lái)表達(dá)內(nèi)容信息的層級(jí)關(guān)系。

 

過(guò)去我們的頁(yè)面只有X與Y軸，打開(kāi)一個(gè)新的頁(yè)面則是生硬地直接跳轉(zhuǎn)到新的頁(yè)面，并沒(méi)有點(diǎn)出頁(yè)面的空間層級(jí)關(guān)系。而iOS7與Material則強(qiáng)調(diào)Z軸，即頁(yè)面之間的空間層級(jí)關(guān)系。iOS里打開(kāi)一個(gè)app，頁(yè)面將從你點(diǎn)擊的app圖標(biāo)為中心點(diǎn)擴(kuò)散出來(lái)，同樣的設(shè)計(jì)在Android L上也隨處可見(jiàn)。通過(guò)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)告訴我們，這個(gè)頁(yè)面從哪里來(lái)，到哪里去，在整個(gè)APP或者系統(tǒng)里的空間位置是什么。另外，不僅僅是頁(yè)面層級(jí)的動(dòng)畫(huà)過(guò)渡，對(duì)象操作也伴隨著動(dòng)畫(huà)過(guò)渡，從動(dòng)畫(huà)里能感受到操作的過(guò)程變化。例如刪除時(shí)，垃圾桶圖標(biāo)會(huì)有一個(gè)傾倒的動(dòng)畫(huà)，或者通過(guò)指示條的旋轉(zhuǎn)告訴你刪除的過(guò)程。另一方面，過(guò)渡動(dòng)畫(huà)賦予了界面控件一種物理特性，在空間被拉伸、回彈時(shí)模仿了橡皮筋的物理特性。值得一提的是，在轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的設(shè)計(jì)上，F(xiàn)acebooke Paper的非常突出。

   

交互動(dòng)畫(huà)在一些app里已經(jīng)大行其道，特別是Facebook Paper的動(dòng)畫(huà)讓人印象深刻。在以后，交互動(dòng)畫(huà)將成為標(biāo)配，隨之而來(lái)，更多設(shè)計(jì)師把目標(biāo)轉(zhuǎn)移到icon上來(lái)。Icon主要分為入口功能和操作功能，操作功能的icon在完成點(diǎn)擊操作之后，通常會(huì)轉(zhuǎn)為對(duì)應(yīng)的另外一種形態(tài)。如“返回”與“菜單，”“選擇”與“未選擇”，“收藏”與“已收藏”“點(diǎn)贊”與“取消點(diǎn)贊”的狀態(tài)之間切換?，F(xiàn)在的設(shè)計(jì)里，icon在兩種狀態(tài)之間的切換通常顯得生硬，icon動(dòng)畫(huà)將使得點(diǎn)擊之后的反饋更佳強(qiáng)烈，并且讓界面活起來(lái)，性感起來(lái)。

目前HTML5已經(jīng)可以實(shí)現(xiàn)icon動(dòng)畫(huà)的繪制，原理是設(shè)計(jì)師提供svg格式的圖標(biāo)，有前端通過(guò)html+css+js繪制轉(zhuǎn)場(chǎng)效果。svg格式的圖標(biāo)，可以通過(guò)代碼控制圖標(biāo)的每一個(gè)節(jié)點(diǎn)，從而進(jìn)行形狀變形。

阿里巴巴MUX團(tuán)隊(duì)對(duì)外提供了svg格式圖標(biāo)的免費(fèi)下載：http://www.iconfont.cn/

Material Design設(shè)計(jì)語(yǔ)言讓人眼前一亮的除了豐富的交互動(dòng)畫(huà)外，還有大面積使用了鮮艷的色塊。過(guò)去的Android讓人覺(jué)得冰冷科技感，讓人有一種距離感。而新的設(shè)計(jì)采用了與過(guò)去相反的做法，在系統(tǒng)里大面積使用色塊，用色塊來(lái)突出主要內(nèi)容和標(biāo)題，讓界面的主次感更佳突出，也讓原本灰黑色為主的界面擁有了時(shí)尚和活力。色塊的顏色選擇多使用飽和度高、明度適中的顏色，整體擁有比較強(qiáng)烈的視覺(jué)沖擊，但并不會(huì)太刺眼。Action bar也同樣從過(guò)去的灰黑顏色改為彩色，并且讓狀態(tài)欄與之融為一體，這點(diǎn)與iOS7的設(shè)計(jì)非常相似。

 

在Google的宣傳片里，最引人注目的新玩意，就是這個(gè)淘氣的圓形小按鈕了。 從宣傳片里來(lái)看，這個(gè)按鈕的功能并不局限于“新建”“播放”“收藏”“更多”等功能。它于整體界面的配色形成比較大的反差，因此會(huì)讓這個(gè)按鈕在界面里顯得非常耀眼，從這樣的設(shè)計(jì)來(lái)看，這個(gè)按鈕所背負(fù)的任務(wù)將會(huì)是整個(gè)界面的主要操作。雖然有點(diǎn)類(lèi)似與Path里的“+”按鈕，但由于iOS系統(tǒng)本身并沒(méi)有這樣的設(shè)計(jì)，這將會(huì)成為最區(qū)別于iOS的一種交互設(shè)計(jì)，對(duì)交互設(shè)計(jì)師和產(chǎn)品經(jīng)理來(lái)說(shuō)都可能會(huì)成為一種挑戰(zhàn)。

在iOS7的設(shè)計(jì)里，我們已經(jīng)看到了這樣的影子。最典型的便是“返回”按鈕只有箭頭和文案，去掉了原本的按鈕質(zhì)感。Material Design的action bar也同樣采用了這樣的設(shè)計(jì)，直接用icon來(lái)表達(dá)按鈕功能。尤其是Material的鍵盤(pán)設(shè)計(jì)風(fēng)格，最早對(duì)鍵盤(pán)風(fēng)格進(jìn)行極簡(jiǎn)設(shè)計(jì)的是微軟的Windows Phone，Android和iOS相繼跟進(jìn)。而這次Material走得更極端，把鍵盤(pán)的按鈕邊框全部去掉，只保留了英文字母的按鈕。我們不能說(shuō)這樣的設(shè)計(jì)一定是好的，這樣的設(shè)計(jì)可能讓用戶(hù)對(duì)點(diǎn)擊的精準(zhǔn)度無(wú)法更快地判斷，缺乏安全感。好處是在屏幕不大的手機(jī)上，去掉邊框的擁擠感會(huì)給字母更大的空間。

另外，無(wú)邊框按鈕的設(shè)計(jì)也體現(xiàn)在提示框的按鈕上。

如何讓無(wú)邊框的按鈕區(qū)別于內(nèi)容文字，這需要設(shè)計(jì)師除了考慮配色外，還需要考慮按鈕出現(xiàn)的場(chǎng)景，對(duì)設(shè)計(jì)師的在應(yīng)用場(chǎng)景的解讀上也是一個(gè)挑戰(zhàn)。

   

一張與屏幕等寬，豎方向占據(jù)半個(gè)屏幕左右的大圖，去掉action bar，只保留返回按鈕的設(shè)計(jì)，在一兩年前十分流行的summly應(yīng)用上就已經(jīng)非常火了。后續(xù)也有一些應(yīng)用跟進(jìn)這樣的設(shè)計(jì)（例如淘寶），但并沒(méi)有大面積流行起來(lái)。Material Design很大膽地使用了這樣的設(shè)計(jì)。在Google的引導(dǎo)下，這樣的設(shè)計(jì)風(fēng)格將很有可能風(fēng)靡起來(lái)。