揭开隐喻设计面纱-界面隐喻类型与隐喻设计方法

隐喻设计是一种常用却很少有人提及的概念,人们往往身在其中却不知究竟为何物。

简单说,隐喻设计它可以将现实生活中用户熟悉的事物以多种形式映射到界面中,从而使用户不熟悉的概念、陌生且复杂的操作等变得熟悉与简单。

它不等同拟物设计,隐喻是一个大的概念,界面中充斥着不同的隐喻元素。本文将常见的隐喻元素按照视觉、听觉、触觉三种界面交互类型分类,并整理了四种隐喻设计方法,以供大家参考。

界面隐喻的类型

1. 视觉隐喻 – 静态

1.1 文字隐喻

界面中常见的文字隐喻可以分为两种,一种是功能命名类语言,另一种是产品定义类语言

常见的功能命名类语言有:“解锁、导航、登录”等等。功能命名类语言主要是运用隐喻的方法对界面中经常使用的功能进行命名,例如“导航”本义是驾驶某种交通工具从某个地方去往另外一个地方,它可以指引人们路线,设计师将界面中“依据地图行走可以到达目的地”这一功能命名为“导航”,可以和现实生活中人们熟悉的导航本义结合起来,方便记忆。

常见的产品定义类语言有:应用市场中的“市场”、文件助手中的“助手”等等。而产品定义类语言,不仅可以准确表达功能要求,还能传递给用户某种情感。例如,文件助手中的“助手”两个字本义是可以帮助他人的人,设计师将手机中的文件夹定义为“文件助手”,意图是这一功能可以为用户整理文件排忧解难,给用户传递一种被感动的情感。

1.2 色彩与材质隐喻

在界面设计中也有两种形式的色彩隐喻。一种为指示性的设计,运用用户熟悉的某种颜色指示界面中的某种状态,例如QQPC版用绿色icon代表我在线上、红色icon代表忙碌或请勿打扰。另一种为气氛的营造,借用色彩带给用户的某种心理暗示,为产品营造某种氛围,例如支付宝软件整体采用蓝色的风格,可以营造一种安全的氛围。

材质的隐喻可以使界面不再生硬,用户使用起来更加亲切。例如读书APP的阅读界面采用纸质效果,使用户在阅读时更像是阅读一本真正的书。

1.3 图形隐喻

图形是构成界面的重要元素,具有隐喻特征的图形会让一些繁琐并难以理解的操作行为变得轻松且生活化。所以在设计中,设计师需要有效地构建图形隐喻从而表达事物的含义与特征。

常用的图形隐喻非常多,例如界面中锁可以代表“密码”,火箭可以代表“加速”,调色板可以代表“主题”,齿轮可以代表“设置”,地球可以代表“浏览器”,雨伞可以代表“安全”等等

2. 视觉隐喻 – 动态

2.1 人的行为习惯上的隐喻

人的行为习惯上的隐喻是指界面设计中的交互方式模拟用户真实操作生活中的物体时的手势、动作。例如,界面中的手势操作:滑动,放大,缩小,旋转,拖动,抓取等;将垃圾文件放置回收站,将商品放入购物车;手机滑动解锁等等

2.2 物体物理属性的隐喻

物体物理属性上的隐喻是指现实生活中,物体被移动、被操作会表现出一种自然的属性,设计师根据这种属性进行界面隐喻设计。常见界面中物体物理属性的隐喻有:读书软件中翻书书页模拟真实的效果;点击或触摸屏幕时视觉水波效果的反馈; 页面转场的加速度,惯性等物理运动曲线效果等等

3. 听觉隐喻

听觉隐喻元素是指界面系统反馈给用户的某种能够准确映射出这种交互行为的隐喻性声效。例如,将文件放入回收站的音效(当将一个文件放入回收站后系统会模拟纸张被撕开,扔入垃圾桶的音效);当用户读电子书翻页时,纸张的摩擦声的音效;此外还涉及游戏音效:当用户玩游戏植物大战僵尸游戏的时候存在多种听觉隐喻元素,种下植物时植物与地面结合的音效、植物发射子弹打在僵尸身上的响声、僵尸来临时的营造氛围的恐怖音效、最终失败时主人公大脑被吃掉时的叫声,听觉通道上的隐喻音效让整个游戏更加真实、生动。

4. 触觉隐喻

触觉上的隐喻可以理解为,设计师模拟真实世界用户获得的某种触觉体感,为界面提供适当的仿真反馈,从而提高用户体验的方法。常见触觉上的隐喻,例如:iPhone7的home键并非实体按键,但为了保持用户的使用习惯,仿真设计成实体按键的外形并提供用户实体按键的反馈;iPhone的3DTouch可以理解为设计师为了模拟电脑鼠标的右键,为产品提供更多功能的一种移动端快捷方式;此外,在游戏中,撞车时、飞机被击中时的震动反馈也属于触觉上的隐喻形式。

界面隐喻的设计方法

界面隐喻设计方法的本质是设计师通过将界面中某元素和现实生活中的某事物联系起来,挖掘二者之间相似的属性,从而使用户接触到界面中的此元素时,就能够认知这个元素所代表的概念或功能等。针对二者之间相似的属性,具体可以分为概念上的属性、特征上的属性、结构上的属性、行为上的属性等

1. 从概念上进行隐喻设计

例如,现在最普遍的两大电脑操作系统Mac OS系统与Windows系统的“桌面”界面都是由现实生活中的工作桌面的概念映射而来。

2. 从特征上进行隐喻设计

例如,设计师会使用盾牌的图形来表示安全软件,因为盾牌与安全管家等软件同样具有防护的特征。

3. 从结构上进行隐喻设计

例如,网易邮箱大师的“邮箱与文件夹”展开结构与现实生活中抽屉被抽开的结构具有一致性。

4. 从行为上进行隐喻设计

例如,在界面中用户将某文件拖进回收站这一动作模拟了现实生活中人们将废纸扔进垃圾桶。

写在最后

好的隐喻设计可以简单高效地传达一个功能所代表的意义,或能更加匹配用户心智模型从而引导用户进行正确的操作。

本文归纳的隐喻设计类型和隐喻设计方法,希望可以对大家提供一些设计启发。

网易UEDC(公众号)

作者:李扬

(0)

相关推荐

  • 在Affinity Designer设计UI界面

    Affinity Designer操作使用容易上手,比起功能强大的AI和PS来讲很适合初学者,本篇文章通过设计UI界面来带大家熟悉Affinity Designer常用的工具使用,其中我们重点设计图形 ...

  • 设计搜索界面,你需要考虑这20个细节

    这篇文章是我们在设计解决方案以及我们在原型设计时应该考虑的元素清单之前,应该回答的问题集合. 问用户有哪些问题?原型开发时应该考虑什么?什么是界面搜索设计的最佳实践? 根据不同项目,搜索可能是最复杂的 ...

  • 泛泛而谈界面视觉效果的一致性(设计经验谈)

    原来的题目设想为界面视觉效果的统一性,但是"统一"这个词似乎有点敏感,怕触动萌点无数,而我也无意去设定一个什么什么的统一性来侃侃而谈,极为专业而考究,且毕竟是一篇博客文章,怕斩首细 ...

  • 如何用C#设计登录界面

    现在很多网页浏览都需要信息登录,信息登录界面无处不在,下面小编介绍一下如何使用C#设计登录界面 操作方法 01 启动Visual Studio 2017,[文件]菜单下-->[新建]--> ...

  • 【To G设计赋能】重塑政务服务体验设计初探—粤省事小程序设计总结

    导语 粤省事小程序是一个基于移动端的聚合式政务服务平台.作为一个平台型产品,它集成了广东省各地市.各部门的多项民生.政务类服务内容:同时,它也承担着对不同政府部门.合作开发商.公众用户等多个相关主体的 ...

  • 如何添加solidworks焊件缺少的结构构件的尺寸类型?(三种方法)

    solidworks是一款功能强大的三维cad设计软件,该软件非常的好学简单,一直以来非常受机械设计人员的青睐,最近,很多网友向小编反应solidworks焊接中 里面”结构构件“尺寸如何修改?因为类 ...

  • 向客户展示设计想法时常犯的错误及解决方法

    小编:作为设计师,向你的客户或者老板展示设计作品也是你的工作中必不可少的一个环节,甚至可以说是决定项目成败的最后的关键环节.一个优秀的设计师不仅需要有出色的设计能力,还要有良好的沟通和表达能力.如果因 ...

  • win7打开软件界面发现显示不全的恢复方法

    win7打开软件界面发现显示不全的恢复方法 1.首先在win7系统中的空白桌面上鼠标右击,选择"屏幕分辨率"选项; 2.在打开电脑的屏幕分辨率设置窗口之后,我们点击里面的" ...

  • Win7系统开机进入欢迎界面出现黑屏的解决方法

    解决方法: 1.重启机器,直接F8 安全模式启动,可以启动的,直接进入桌面: 2.WIN+R(ALT和Ctrl中间那个键)打开输入命令栏 直接输入cmd 敲击回车 进入DOS界面: 3.在界面下输入n ...