交互界面设计(人机交互界面设计案例)

       本文作者归纳了隐喻设计类型和隐喻设计方法，与你分享，enjoy~

       隐喻设计是一种常用却很少有人提及的概念，人们往往身在其中却不知究竟为何物。简单说，隐喻设计它可以将现实生活中用户熟悉的事物以多种形式映射到界面中，从而使用户不熟悉的概念、陌生且复杂的操作等变得熟悉与简单。

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

       1.1 文字隐喻

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

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

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

       1.2 色彩与材质隐喻

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

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

       1.3 图形隐喻

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

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

       2.1 人的行为习惯上的隐喻

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

       2.2 物体物理属性的隐喻

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

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

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

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

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

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

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

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

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

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

       作者：李扬，网易CC交互设计师，东南大学专业设计系毕业，职场新人，参与多款游戏相关产品的交互设计工作。希望可以成为一名有想法、有创造价值的设计师。

       本文来源于人人都是产品经理合作媒体@网易UEDC，作者@李扬

       题图来自 Pexels，基于 CC0 协议