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所提出的理念就是让用户把屏幕背后的世界理解为一个与现实世界相关联的空间，通过构建系统化的动效并且将屏幕后的空间进行合理运用，形成了实体隐喻。现实物理世界中的种种现象在用户深层的认知中留下了深刻的印象，利用对于虚拟世界中的元素进行类似光影质感动感的精细处理，模拟出真实的视觉体验，可以大幅降低用户的陌生感和理解难度。而正是光影、质感、动感这三点是用户理解交互逻辑、空间关系、运动规律的基础。

（二）深思熟虑

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对于移动设备交互设计的独到的思维方式。■

参考文献：

[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.