基于Material Design设计语言的隐喻设计研究 RESEARCH ON METAPHORICAL DESIGN BASED ON MATERIAL DESIGN LANGUAGE

0

南京信息工程大学 传媒与艺术学院 胡 昆 奚 斌

摘要:隐喻是一种语言上的修辞手法,它用人们熟知的事物去表现另一事物,并在这两者中建立类比关系。现代视觉设计中通过使用这种“类似性”的手法将产品传达给用户,加强用户的操作体验,减少用户对于应用的学习成本。本文通过对Material Design中布局、动效、风格三个方面中隐喻设计的进行分析研究,以习惯养成应用Fabulous为例讨论隐喻设计对移动端设计的影响,旨在为使用者提供参考实践。

关键词:隐喻 材料设计 移动端设计 

中图分类号:J05 文献标识码:

文章编号1003-0069(2017)08-0138-02

Abstract:Metaphor is a language rhetoric. It uses the things people know to show another thing and in the two to establish analogy. Modern visual design through the use of this "similarity" approach to the product to the user, enhances the user's operating experience, and reduces the user's learning costs for the application. This paper analyzes the metaphorical design in the three aspects of material design, dynamic and style, and discusses the influence of metaphor design on mobile design by using Fabulous as an example. It aims to provide reference practice for users. 

Keywords:Metaphor Material design Mobile design

引言

隐喻最早是在人类历史上的第一部史诗《吉尔伽美什》( The Epic of Gilgamesh) ( 公元前 2150 年 - 公元前 2000 ) ,作为文学领域中的一种修辞方法出现。在现代,隐喻更多地被认为是一种思维方式,在人类知识的进化过程中,隐喻传达着人类的文化和思维[1]

一、隐喻设计

隐喻设计是通过象征、类比的手法将复杂抽象的概念简明化、具象化,降低用户学习使用的成本,为用户创造清晰、明了、舒适的操作体验。例如手机应用中音乐的图标设计通过对音乐体系中共同的元素进行符号化,创造符合用户的认知,能为用户传达有效信息的图标。合适的隐喻设计能够消除用户在使用新应用时产生的畏惧感,大大降低用户的使用门槛,提升对信息产品的黏度[2]

隐喻设计表面上是用图形语言去引导用户去理解和使用,但是在它的背后却隐藏着使用者的生活经验和审美体会。例如用户在面对应用界面时,他对看到的图形产生的情感和其他人产生的情感可能截然不同,这里掺杂着用户对于应用界面的想象、认知以及心情等因素。隐喻作为生活中普遍和重要的思想情感表达方式,在设计中也尤为多样。如2016年第一届“中国智造大赛”中获得优智奖的作品“钱椅”(如图1),其设计的灵感来自于中国古代的圈椅,从“方孔钱”的形象发散,“圆”隐喻平等、包容、和谐的道,“方”隐喻尊卑有序、松紧有度、近远有别的理。作者通过“取像于钱,外圆内方”的哲学思想,表达出中国古代包容的精神。椅子的本身看似纤细,但是里面却藏着钢筋,稳定而坚固。使用者座在椅子上即可感受到中国古代人民对万物包容的和谐思想,通过 “钱椅”让使用者感受中国的博大胸怀1。隐喻设计就是这种通过简洁的设计去包含深刻的内涵,让使用者不仅体验了设计带来的舒适和愉悦,而且还体会到产品的精神。同样,隐喻设计在设计的各个领域都起到了这样的作用。

二、Material Design应用中隐喻的表现方式

Material DesignGoogle公司在2015年发布的视觉设计语言,它通过纸片隐喻现实世界中材质的触感,构建系统化的动效和合理化的空间利用,将二者合二为一构成实体隐喻,其中与众不同的触感则是实体的基础,这种熟悉的触感能让用户快速地理解和认知[3]。本节通过对Material Design中布局、动效、风格三个方面进行阐述,分析Material Design的隐喻设计表现手法。

(一)布局

Material Design布局结构的思想源于对印刷品设计理念的提炼,它不同于栅格系统单纯的网格化设计,而是通过在不同尺寸屏幕中使用相同的基准线和栅格线,为用户在结构和视觉上创造一个可识别的用户环境,它给用户提供高度的熟悉感和舒适性,让应用便于使用。

内容上Material Design采用卡片作为载体,利用Z轴凸显应用环境的层次性,通过阴影的深浅表达空间的深度(如图2)。用户使用手机时,手机的屏幕是一个平面,传统的应用布局通常是将页面按类别分割成块状,虽然这样看起来分类清楚,界面清晰,但是这也使得用户在使用时找不到重点。Material Design中通过纸片隐喻思想,利用Z轴和阴影表达界面深度并考虑元素的优先级将最重要的信息呈现在最上方,这样用户在打开应用时可以快速地了解主次关系,同时这种方式也为用户提高了浏览时的效率。同样,在生活中人们也会将相同的东西化为一类,将常用的放在最显眼的位置,这都是生活中常见的生活规律。实质上,人与应用即是实体上的交互,也是情感上的交互,Material Design通过合理化的空间使原本理性的界面情感化、性格化,与用户产生情感层面上的共鸣,这种共鸣使用户感受到这个应用更贴近生活,从而拉近了人与机器的距离感,打破了原有的理性使用户更容易理解和接受,甚至不需要帮助文档就可以轻松使用。

(二)动效

移动端设计中真实的动效隐喻能帮助人们感受到平面中的空间关系、功能以及在整体系统中的趋势。Material Design中的动效能够形象地表现出物体的自然运动规律,在物理世界中物体拥有质量,只有施加给物体力量的时候才会移动,因此物体没法在瞬间开始或者结束动作。动作也不会突然开始或者停止,或者在运动时突兀的变化方向,这些都会使用户感到意外和不和谐。例如Material Design中按钮涟漪效果(如图3),用户点击按钮的任何一个位置,涟漪就会从点击的位置扩散,如同对平静的水面施加动力产生的效果。

Material Design中动效不仅仅是用来装饰,它应该有它独有的内涵,还要表达元素与界面之间的关系。设计师们通过动画效果,将元素关联起来,使他们以协调的方式运动来表现空间上的关系。同时优雅的动画效果也可以引导用户的注意力,与布局的空间层次相互呼应,进一步加强了应用中的主次关系,体现了设计服务功能,功能与设计之间的内在联系。Material Design的动画效果可以存在于所有组件和扩展中,无论从细小的图标还是到核心的场景转换和动作,只要恰到好处并足够出色,同样能打动用户。例如元素在位置或状态之间移动时,动作应该足够快而不是缓慢的,缓慢的动作往往会使人理解为过渡。好比人通常不会慢慢地拿起手机而翻书时则会缓慢些。

(三)风格

Material Design的配色从当代建筑、路标、人行横道以及运动场馆中获取灵感,通过大胆的颜色碰撞和明显的阴影来突出物体,引出意想不到且充满活力的颜色。应用在配色上使用少量的颜色进行搭配,通过选取一种主色和一种辅助色(非必需)相搭配使应用界面更加简洁。主色来确定整个页面的风格走向,辅助色和主色之间形成反差突出元素功能,通过改变颜色的明度和色相区分元素之间层次,使界面在颜色上产生韵律。(如图4)Material Design充分考虑了人眼的色彩视觉感受,即使在全白背景下的字体也不会呈现为全黑,它会在对应的文字中加入透明值,给用户更舒服的视觉体验[4]

手机应用中系统或者UI界面往往通过基本的图形将功能表达出来,这些基本的图形我们称之为图标。由于图标的要显示在不同的设备当中,所以在设计时就要考虑到在最小的尺寸下的可读性。网格是所有图标的基准(如图5),它具有特定的比例以保证图标在任何情况下的视觉一致性,在16世纪,西方学者认为设计是比例,比例在设计美学中有着不可撼动的地位,可以使设计产物更具有条理性和美感[5]

三、Fabulous中隐喻设计的案例分析

Material Design中的隐喻设计主要通过纸化质感和情感引导的方式,将真实的世界隐喻到虚拟的界面当中。Fabulous是一款帮助人们养成好习惯的应用(如图6),用户通过使用应用来制订和实行计划,比如早晨喝一杯水,坚持吃早餐等。用户通过使用一段时间后会养成良好的生活习惯,让自己每天都有好的状态去面对新的生活。Fabulous作为真正关心你的朋友会时刻鼓励你,它会写信给你,在信中亲切称呼你的名字,告诉你最近的进步,已经发生的改变,和下一步努力的方向。Fabulous应用继承了隐喻设计的典范,应用无论在信息传达、行为塑造还是情感引导方面都做得十分优秀。本节通过对Fabulous应用进行分析,阐述Fabulous中隐喻设计的主要表达方式。

(一) Fabulous中纸化质感的表现

Fabulous在布局上遵循了Material Design中的纸化质感的隐喻表现,通过卡片将任务写入以卡片的形式展现任务的条理关系。如应用中有一个“Make Me Fabulous”的功能(如图7),用户只需要5分钟的闲暇时间就可以给自己充电,而用户只要跟随它的引导。用户打开功能时出现五种可供选择的方案,当用户选择一个方案之后,动画跳转到另一个页面,同时这个方案作为背景展现。Fabulous通过这种层级关系很清楚地表达出任务的嵌套关系,使用户不会感觉到碎片化从而更加容易地去完成任务。

Material Design这种纸化质感的核心思想不仅使用户在查看任务时感到井然有序,而且还能给用户带来一种真实的感觉,使原本枯燥无味的任务具有人性化。

(二) Fabulous对用户的情感引导

Jon Kolko2 曾经说过“所谓的交互设计,是人与产品、系统或服务之间创建的一系列对话”[6]。产品应用中如果使用合理的隐喻手法不仅能使原本机械的交互变成人性的、有情感的。Fabulous作为一款优秀的习惯养成类应用,它不同于传统的任务列表应用,而是像一位知心的朋友一样去关心你,它会定期给你写信告诉你最近是否进步,是否有所改变和下一步努力的方向。Fabulous通过人性化的方式与用户培养感情,使用户在对信息收取的被动方式变为主动方式,让用户喜欢上应用而不是被动地去完成任务。

Fabulous还为基础的习惯设计了塔罗牌风格的插画,这种风格可以简洁地传达信息。(如图8)。例如当用户在吃饭时看到绿色就会想起要吃点蔬菜或水果,当看到一只手拿着倾倒的水杯的时候,就会像自己是不是该喝水了,当看到夜幕的时候就会马上入眠。这些简洁的插画明了地表达任务的意图,拉近了用户与应用之间的距离。

结语

应用设计中Material Design提炼隐喻设计的精髓为设计师们提供了一个良好的隐喻设计指引。在未来应用不仅只局限于手机或者电脑屏幕上,设计理念也是如此。隐喻设计能够帮助用户更好地理解应用,使用户更加主动地去使用应用,从而更好地促进应用的发展。隐喻理论之所以能够在交互界面设计中提供重要的理论指导也是由于数字技术不断融入我们的日常生活,人们需要一种连接物质世界和数字世界之间的纽扣,而隐喻则是辨析现实和虚拟对象之间最直接的方法。

本文系南京信息工程大学大学生创新项目“蓝印花布的数字化设计制作研究”(201610300144),江苏省高校哲学社会科学研究项目(项目编号:2015SJB060)阶段性成果。

注释

1“中国设计智造大奖”是中国工业设计领域的首个学院奖。

2 Jon Kolko是奥斯丁设计中心的创始人和主任,一个进步的教育机构,教学交互设计和社会企业家精神。

参考文献

[1] 左美云 . 陆杨 . 互联网产品中隐喻表达的设计研究 [J] . 现代图书情报技术 . 2011 (05) : 20-27

[2] Wells J D.Fuerst W L.Palmer J W.Designing Consumer Interfaces for Experiential Tasks: An Empirical Investigation[J].European Journal of Information Systems . 2005 . 14 ( 3) : 273 – 287

[3] Material Design官方网站 [EB/OL] . https://material.io/guidelines . 2017

[4] 杰夫·约翰逊 . 认知与设计:理解UI设计准则 [M] . 北京 . 人民邮电出版社 . 2011

[5] 徐晓庚 . 设计美学导论 [J] . 装饰 . 2002 (11) : 4-5

[6] 田蕴 . 王浩 . 隐喻在产品界面设计中的应用研究 [J] . 设计 . 2016 (01) : 76-77