Material Design的設計語言與動效設計探析

吳政興，朱曉菊（湖南工業大學 包裝設計藝術學院，湖南 株洲 412007）

一、前言

在Google發布Material Design之前，旗下所有產品線的設計都風格迥異。又因為Android開源的屬性，許多的硬件廠商都把Android ROM作為產品預裝第一選擇，并且做了大量定制化與本地化的修改。而這樣的狀況產生了大量嚴重的問題，比如用戶體驗因為設計規則的不統一而產生偏差，使用產品的學習成本提高；第三方軟件的開發質量良莠不齊；下載渠道不規范、不安全等等。這使得Android的生態系統變得雜亂，用戶體驗難以達到較高的水準。

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

到了2014年的Google I/O,谷歌發布了新一代的Android L。通過對前幾年努力成果的整合，帶來了全新的設計語言：物質化設計（Material Design）。Material Design的到來，展現出了谷歌在統一其設計和體驗上的決心。

二、Material Design的核心理念

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

（一）實體感

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

（二）深思熟慮

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

（三）動效設計

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

三、Material Design設計語言的概念

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

（一）虛擬世界

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

（二）“紙片化”

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

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

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

四、Material Design的動效設計特點

用戶體驗和交互設計發展到今天，動效設計逐漸滲透到了整個設計流程中的每一個環節，它在傳統的視覺與界面設計之外的部分，通過給用戶提供更豐富的信息關聯的形式來完善信息傳達的方式。提供正確的引導和沉浸式的體驗，用戶在進行操作之后，需要得到適當的反饋，這正是交互的核心理念，動效則成為填補其中空檔的最好方式。好的動效設計可以帶來平滑的過渡與切換、高效的反饋機制、沉浸式的操縱感和體驗感、有效的引導以及創新的體驗。

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

（一）真實的動作

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

（二）響應式的交互

響應式的交互可以建立用戶的信任，引起用戶的注意。點擊屏幕時，系統會立即在觸點上繪制出可視化的圖形讓用戶感知到，比如使用麥克風，鍵盤輸入時，會出現漣漪。用戶能清晰地感知到進行操作時設備的變化。

（三）有意義的轉場

對于普通的用戶來說，很容易被從A到B的變換過程所吸引。這時候謹慎的編排動畫對于在進行多步驟操作時引導用戶注意力起到了重要作用；在版面變化和元素重組時避免造成困擾。完全新的元素需要有詳細的引導；與場景無關的元素應該被恰當的移除。動效設計應當優先服務于功能。

五、結語

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

參考文獻：

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

[2] 吳儉濤.移動應用界面中的動效設計的運用與探究[J].藝術與設計（理論），2015，127（09）：40.

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

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

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

[6] 盛振.手機移動應用動效的情感化設計研究[J].現代裝飾，2016(02)：151.

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

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

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

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