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

2018-7-16 博博

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

互联网er的早读课 2018-07-14 18:46:25

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

来源：网易UEDC（ID：NetEase_UEDC）

编辑：Juvae

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

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

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

界面隐喻的类型

1. 视觉隐喻 - 静态

1.1 文字隐喻

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

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

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

1.2 色彩与材质隐喻

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

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

1.3 图形隐喻

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

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

2. 视觉隐喻 - 动态

2.1 人的行为习惯上的隐喻

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

2.2 物体物理属性的隐喻

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

3. 听觉隐喻

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

4. 触觉隐喻

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