吳政興，朱曉菊（湖南工業(yè)大學(xué) 包裝設(shè)計(jì)藝術(shù)學(xué)院，湖南 株洲 412007）

一、前言

在Google發(fā)布Material Design之前，旗下所有產(chǎn)品線的設(shè)計(jì)都風(fēng)格迥異。又因?yàn)锳ndroid開(kāi)源的屬性，許多的硬件廠商都把Android ROM作為產(chǎn)品預(yù)裝第一選擇，并且做了大量定制化與本地化的修改。而這樣的狀況產(chǎn)生了大量嚴(yán)重的問(wèn)題，比如用戶體驗(yàn)因?yàn)樵O(shè)計(jì)規(guī)則的不統(tǒng)一而產(chǎn)生偏差，使用產(chǎn)品的學(xué)習(xí)成本提高；第三方軟件的開(kāi)發(fā)質(zhì)量良莠不齊；下載渠道不規(guī)范、不安全等等。這使得Android的生態(tài)系統(tǒng)變得雜亂，用戶體驗(yàn)難以達(dá)到較高的水準(zhǔn)。

2011年，拉里佩奇成為CEO后，Google的整體風(fēng)格從過(guò)去的放任、自由變得緊密、整合。一個(gè)名為“kennedy”的項(xiàng)目正式啟動(dòng)，該項(xiàng)目聚集了Google全公司的設(shè)計(jì)師，針對(duì)旗下產(chǎn)品進(jìn)行重新設(shè)計(jì)，志在找到一種共同的設(shè)計(jì)語(yǔ)言，最終創(chuàng)造了“卡片式設(shè)計(jì)”，這便是Material Design的前身。2012年開(kāi)始，Google讓設(shè)計(jì)師從產(chǎn)品的早期開(kāi)發(fā)就參與進(jìn)去，通過(guò)整合技術(shù)與設(shè)計(jì)能力，和對(duì)于多屏幕、跨設(shè)備的交互思考，最終通過(guò)設(shè)計(jì)的手段讓不同設(shè)備上的用戶體驗(yàn)得到高度統(tǒng)一。而這種跨越不同設(shè)備，不同尺寸的設(shè)計(jì)經(jīng)驗(yàn)，適用在了之前一直碎片化割裂化的Android平臺(tái)上。

到了2014年的Google I/O,谷歌發(fā)布了新一代的Android L。通過(guò)對(duì)前幾年努力成果的整合，帶來(lái)了全新的設(shè)計(jì)語(yǔ)言：物質(zhì)化設(shè)計(jì)（Material Design）。Material Design的到來(lái)，展現(xiàn)出了谷歌在統(tǒng)一其設(shè)計(jì)和體驗(yàn)上的決心。

二、Material Design的核心理念

Material Design作為一種全新的設(shè)計(jì)語(yǔ)言，具有三條核心理念。第一，要通過(guò)設(shè)計(jì)手段體現(xiàn)出實(shí)體感；第二，所有的設(shè)計(jì)必須經(jīng)過(guò)深思熟慮；第三，合理的動(dòng)效設(shè)計(jì)。

（一）實(shí)體感

通過(guò)巧妙設(shè)計(jì)表達(dá)的實(shí)體感，總而言之就是一種隱喻。Google所提出的理念就是讓用戶把屏幕背后的世界理解為一個(gè)與現(xiàn)實(shí)世界相關(guān)聯(lián)的空間，通過(guò)構(gòu)建系統(tǒng)化的動(dòng)效并且將屏幕后的空間進(jìn)行合理運(yùn)用，形成了實(shí)體隱喻。現(xiàn)實(shí)物理世界中的種種現(xiàn)象在用戶深層的認(rèn)知中留下了深刻的印象，利用對(duì)于虛擬世界中的元素進(jìn)行類(lèi)似光影質(zhì)感動(dòng)感的精細(xì)處理，模擬出真實(shí)的視覺(jué)體驗(yàn)，可以大幅降低用戶的陌生感和理解難度。而正是光影、質(zhì)感、動(dòng)感這三點(diǎn)是用戶理解交互邏輯、空間關(guān)系、運(yùn)動(dòng)規(guī)律的基礎(chǔ)。

（二）深思熟慮

Material Design雖然被稱作一門(mén)全新的設(shè)計(jì)語(yǔ)言，但是它實(shí)際的內(nèi)核卻從未脫離傳統(tǒng)的設(shè)計(jì)基本規(guī)律，也符合人們基本的審美情趣。為了視覺(jué)設(shè)計(jì)的美觀，借鑒了許多曾經(jīng)傳統(tǒng)的平面設(shè)計(jì)如排版、比例、色彩等基本的要素。這些要素不僅僅是愉悅用戶的基石，也可以通過(guò)它們達(dá)到合理構(gòu)建層級(jí)、突出視覺(jué)焦點(diǎn)的目的。通過(guò)對(duì)色彩，字體，布局的深思熟慮，構(gòu)建出鮮明、形象的用戶界面，讓用戶沉浸其中。Material Design是個(gè)以功能為導(dǎo)向的設(shè)計(jì)語(yǔ)言，會(huì)根據(jù)用戶行為凸顯核心功能，從而提供良好的引導(dǎo)。

（三）動(dòng)效設(shè)計(jì)

動(dòng)效設(shè)計(jì)必須符合平面設(shè)計(jì)與視聽(tīng)語(yǔ)言的雙重標(biāo)準(zhǔn)，其核心在于詳盡地說(shuō)明事物發(fā)生的過(guò)程和內(nèi)在原理。其根本應(yīng)該是服務(wù)于場(chǎng)景之間的轉(zhuǎn)化，讓用戶能通過(guò)動(dòng)效充分了解其操作所帶來(lái)的變化，并且在一定的時(shí)刻起到提醒用戶、吸引其注意力的作用。動(dòng)效的合理和有意義是其第一要?jiǎng)?wù)，清爽、高效、明晰是優(yōu)先的要求，過(guò)多華麗繁復(fù)的設(shè)計(jì)只會(huì)適得其反。

三、Material Design設(shè)計(jì)語(yǔ)言的概念

維基百科對(duì)于語(yǔ)言的定義是“就廣義而言，是用于溝通的一套方法，尤其符號(hào)與處理規(guī)則……”那么從設(shè)計(jì)角度考量，“設(shè)計(jì)語(yǔ)言”就是把設(shè)計(jì)作為一種“溝通的方式”，用于在特定的范圍和場(chǎng)景內(nèi)，做適當(dāng)?shù)谋磉_(dá)，進(jìn)行特定的信息傳遞。Apple的特有的設(shè)計(jì)語(yǔ)言就是扁平化，而Google的設(shè)計(jì)語(yǔ)言就是Material，可以翻譯成材料化的設(shè)計(jì)。而要真正理解Material design的設(shè)計(jì)語(yǔ)言，就得從以下幾個(gè)方面去觀察。

（一）虛擬世界

Google界面設(shè)計(jì)理解成為搭建一個(gè)屏幕后的虛擬世界。Android部門(mén)高級(jí)主管Matias Duarte在2014年的發(fā)布會(huì)上這樣說(shuō)到：“如果像素不僅僅有顏色而有深度會(huì)怎樣？”過(guò)去設(shè)計(jì)師在進(jìn)行界面設(shè)計(jì)的時(shí)候，通常只理解到平面的程度，設(shè)計(jì)元素和信息的定位也只有X和Y兩條軸線，而這樣則會(huì)使得界面設(shè)計(jì)最終趨于同質(zhì)化。而從MD的角度去考慮，屏幕后是一個(gè)具有深度的虛擬世界，則在X、Y兩條軸之外增加了一條Z軸，這樣則大幅的擴(kuò)大了界面設(shè)計(jì)的可能性。設(shè)計(jì)元素和信息的排列不只靠上下順序、大小對(duì)比來(lái)調(diào)整，也可以通過(guò)前后放置、疊加來(lái)排列與區(qū)分。

（二）“紙片化”

MD的前身是“卡片式設(shè)計(jì)”，Google的設(shè)計(jì)師把界面設(shè)計(jì)中的各種信息與承載信息的設(shè)計(jì)元素統(tǒng)一理解為虛擬世界中的卡片。按照Google的說(shuō)法就是：“像紙張一樣?！边@樣的理念來(lái)源于對(duì)生活的實(shí)際場(chǎng)景的觀察與思考。在現(xiàn)實(shí)工作當(dāng)中，辦公桌上的信息就是通過(guò)紙張呈現(xiàn)的。這種設(shè)計(jì)理念符合日常生活所形成的習(xí)慣，使用戶感覺(jué)更加熟悉和親切。

（三）“平臺(tái)的無(wú)縫鏈接”

無(wú)縫的平臺(tái)連接。Google許多的產(chǎn)品適用于智能手機(jī)、PC、平板等等大小不同尺寸的設(shè)備，屏幕大小也有較大區(qū)別，這樣使得產(chǎn)品的交互設(shè)計(jì)和信息分布都得隨著平臺(tái)的轉(zhuǎn)化而進(jìn)行更改，統(tǒng)一用戶體驗(yàn)難度很高。2014年4月Accel Design大會(huì)期間，Google高管杜瓦迪提出觀點(diǎn)：“將用于移動(dòng)設(shè)備的應(yīng)用程序作為單獨(dú)的應(yīng)用程序自行設(shè)計(jì)是一個(gè)錯(cuò)誤的做法。不應(yīng)該為不同的屏幕規(guī)格創(chuàng)建不同的產(chǎn)品，而是使用一種統(tǒng)一的設(shè)計(jì)方法開(kāi)發(fā)一款可以跨多種屏幕的產(chǎn)品：桌面、智能手機(jī)、車(chē)載解決方案、智能手表。當(dāng)人們整天都在所有這些不同的屏幕之間切換時(shí)，他們應(yīng)該能夠繼續(xù)使用一個(gè)特定的程序。這點(diǎn)不僅適用于產(chǎn)品的視覺(jué)外觀，也適用于其功能集。如果一個(gè)人開(kāi)發(fā)了一個(gè)打車(chē)應(yīng)用程序，而它能在7英寸的屏幕上運(yùn)行，但不能在2英寸的屏幕上運(yùn)行，這是不行的?！倍鳰aterial Design當(dāng)中“紙張”的概念，并不受物理世界的局限，它可以隨時(shí)根據(jù)需要進(jìn)行變換，例如可以通過(guò)變大而呈現(xiàn)更多內(nèi)容，也可以縮小折疊進(jìn)行信息的縮略、排列，并且作為信息發(fā)送或者分享給其他用戶，這樣使得其設(shè)計(jì)的兼容性得到大幅度的提升。用戶在不同設(shè)備上使用同一款產(chǎn)品時(shí)，所遵循的交互邏輯是一致的，大大降低了用戶的學(xué)習(xí)成本，整體體驗(yàn)變得更流暢。

四、Material Design的動(dòng)效設(shè)計(jì)特點(diǎn)

用戶體驗(yàn)和交互設(shè)計(jì)發(fā)展到今天，動(dòng)效設(shè)計(jì)逐漸滲透到了整個(gè)設(shè)計(jì)流程中的每一個(gè)環(huán)節(jié)，它在傳統(tǒng)的視覺(jué)與界面設(shè)計(jì)之外的部分，通過(guò)給用戶提供更豐富的信息關(guān)聯(lián)的形式來(lái)完善信息傳達(dá)的方式。提供正確的引導(dǎo)和沉浸式的體驗(yàn)，用戶在進(jìn)行操作之后，需要得到適當(dāng)?shù)姆答?，這正是交互的核心理念，動(dòng)效則成為填補(bǔ)其中空檔的最好方式。好的動(dòng)效設(shè)計(jì)可以帶來(lái)平滑的過(guò)渡與切換、高效的反饋機(jī)制、沉浸式的操縱感和體驗(yàn)感、有效的引導(dǎo)以及創(chuàng)新的體驗(yàn)。

而Material Design將動(dòng)效設(shè)計(jì)提升到了系統(tǒng)級(jí)別，讓動(dòng)效設(shè)計(jì)成為其底層設(shè)計(jì)語(yǔ)言當(dāng)中不可或缺的一部分。比如，Material Design中，對(duì)界面中所有元素或者控件的移動(dòng)都進(jìn)行了規(guī)范，讓其運(yùn)動(dòng)軌跡符合客觀的運(yùn)動(dòng)規(guī)律，控件的進(jìn)出，卡片的滑動(dòng)以及界面之間的跳轉(zhuǎn)，都是經(jīng)過(guò)了深思熟慮和雕琢過(guò)的。動(dòng)效的速度、位移、時(shí)長(zhǎng)都有考量，讓用戶在操作界面當(dāng)中所有元素都像在用手觸摸一個(gè)真實(shí)存在的物品。對(duì)于Material Design的動(dòng)效設(shè)計(jì)，大致可以三個(gè)方面的特點(diǎn)：真實(shí)的動(dòng)作，響應(yīng)式交互，有意義的轉(zhuǎn)場(chǎng)。

（一）真實(shí)的動(dòng)作

感知一個(gè)物體的形態(tài)可以幫助理解如何去控制它，觀察其運(yùn)動(dòng)規(guī)律，我們可以初步判斷它的大小、軟硬、輕重。而在Material Design的設(shè)計(jì)規(guī)范里，動(dòng)作不僅僅為了美觀，也表示它在空間中的關(guān)系、功能和整個(gè)系統(tǒng)中的趨勢(shì)。在真實(shí)的物理世界里，不存在勻速運(yùn)動(dòng)和急停急起，如果動(dòng)效設(shè)計(jì)不遵循客觀規(guī)律，就會(huì)使得用戶感到意外和不適應(yīng)。有加速和減速的效果則會(huì)讓用戶感到自然和愉快。并且界面設(shè)計(jì)中元素的大小、所含信息重要性也要作出區(qū)分，小的按鈕會(huì)比大的板塊和控件運(yùn)動(dòng)得更快更輕盈。

（二）響應(yīng)式的交互

響應(yīng)式的交互可以建立用戶的信任，引起用戶的注意。點(diǎn)擊屏幕時(shí)，系統(tǒng)會(huì)立即在觸點(diǎn)上繪制出可視化的圖形讓用戶感知到，比如使用麥克風(fēng)，鍵盤(pán)輸入時(shí)，會(huì)出現(xiàn)漣漪。用戶能清晰地感知到進(jìn)行操作時(shí)設(shè)備的變化。

（三）有意義的轉(zhuǎn)場(chǎng)

對(duì)于普通的用戶來(lái)說(shuō)，很容易被從A到B的變換過(guò)程所吸引。這時(shí)候謹(jǐn)慎的編排動(dòng)畫(huà)對(duì)于在進(jìn)行多步驟操作時(shí)引導(dǎo)用戶注意力起到了重要作用；在版面變化和元素重組時(shí)避免造成困擾。完全新的元素需要有詳細(xì)的引導(dǎo)；與場(chǎng)景無(wú)關(guān)的元素應(yīng)該被恰當(dāng)?shù)囊瞥?。?dòng)效設(shè)計(jì)應(yīng)當(dāng)優(yōu)先服務(wù)于功能。

五、結(jié)語(yǔ)

設(shè)計(jì)語(yǔ)言的統(tǒng)一帶來(lái)了上下一致的美觀，智慧、精美的動(dòng)效設(shè)計(jì)帶來(lái)的是令人愉悅的體驗(yàn)，這兩者的緊密結(jié)合共同組成了Material Design。總之，Material Design的到來(lái)不僅是一次簡(jiǎn)單的設(shè)計(jì)革新，更不能以一種設(shè)計(jì)風(fēng)格來(lái)概括。具體來(lái)說(shuō)，它是一種全新的設(shè)計(jì)語(yǔ)言，代表著Google對(duì)于移動(dòng)設(shè)備交互設(shè)計(jì)的獨(dú)到的思維方式?！?/p>

參考文獻(xiàn)：

[1] 楊旺功．論動(dòng)效設(shè)計(jì)在用戶界面中的應(yīng)用與維度分析[J]．藝術(shù)與設(shè)計(jì)（理論），2016，134（05）：47.

[2] 吳儉濤.移動(dòng)應(yīng)用界面中的動(dòng)效設(shè)計(jì)的運(yùn)用與探究[J].藝術(shù)與設(shè)計(jì)（理論），2015，127（09）：40.

[3] 譚浩.基于意象的交互界面動(dòng)效設(shè)計(jì)方法研究[J].包裝工程，2016(06)：53.

[4] 劉力嘉.手機(jī)移動(dòng)應(yīng)用的動(dòng)效設(shè)計(jì)淺談[J].通訊世界，2016(15)：151.

[5] 許玨偉.移動(dòng)應(yīng)用界面動(dòng)效易用性研究[J].工業(yè)設(shè)計(jì)，2016(06)：60.

[6] 盛振.手機(jī)移動(dòng)應(yīng)用動(dòng)效的情感化設(shè)計(jì)研究[J].現(xiàn)代裝飾，2016(02)：151.

[7] 孫浩.動(dòng)效作為一種微體驗(yàn)在APP設(shè)計(jì)中的應(yīng)用研究[J].現(xiàn)代裝飾，2016(01）：106.

[8] 周睿.啟動(dòng)時(shí)態(tài)界面中動(dòng)效的交互設(shè)計(jì)研究[J].包裝工程，2015（08）：83.

[9] 胡佳妮.中國(guó)傳統(tǒng)元素在手機(jī)交互設(shè)計(jì)中的應(yīng)用[J]. 美與時(shí)代，2015(12)：107.

[10] 明蘭.基于用戶體驗(yàn)的旅游景區(qū)APP界面設(shè)計(jì)研究[J]. 科技資訊，2016(32)：187.