Material Design的設(shè)計語言與動效設(shè)計探析

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

一、前言

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

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

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

二、Material Design的核心理念

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

（一）實(shí)體感

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

（二）深思熟慮

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

（三）動效設(shè)計

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

三、Material Design設(shè)計語言的概念

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

（一）虛擬世界

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

（二）“紙片化”

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

（三）“平臺的無縫鏈接”

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

四、Material Design的動效設(shè)計特點(diǎn)

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

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

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

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

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

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

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

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

五、結(jié)語

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

參考文獻(xiàn)：

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

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

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

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

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

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

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

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

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

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