首页 > 建站资源 > 网站运营 > 交互设计:三种界面交互类型,四种隐喻设计方法

交互设计:三种界面交互类型,四种隐喻设计方法

时间:2018-07-09    来源:人人都是产品经理

3. 听觉隐喻

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

4. 触觉隐喻

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

二. 界面隐喻的设计方法

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

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

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

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

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

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

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

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

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

三. 写在最后

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

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

关于作者

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

相关推荐
网站的分页设计如何做得让用户体验更愉悦?
WEB产品设计须理清脉络 引导用户做正确选择
用户注意力与交互设计的简单分析
13个国内知名互联网公司的产品设计团队博客网址
网站页面重构中如何创建良好的用户体验
互联网产品设计之影响用户体验的4个因素
交互设计的细节分析之分页设计
以移动应用设计为例讲解符合用户预期的设计思路
什么是响应式网页设计?
20大UI设计原则 设计师必备宝典
新浪潮下产品交互设计的三个新趋势浅析
如何在6个月内自学成才成为一个互联网设计师?
产品设计中认知心理学分析其交互设计
案例分析情感化设计对用户体验的影响
B2B行业网站导航菜单的易用性设计原则
细说用户体验设计背后的“黑暗模式”
10条有效提高网站可用性的经验技巧分享
互联网产品设计理念:产品即有机生命体
遵循用户需求的设计:最美APP的9条闪光定律
扁平化交互设计让用户体验更棒
如何让网站更“值得点击”?五大用户体验要点可搞定
从电商网站应用设计中学到的九个成功秘诀
作为一个顶尖产品经理必备的6大特征!
60个以小见大的互联网产品设计细节汇总
对话谷歌交互设计师:Google是怎么做设计的
细节决定成败!提高用户登录体验的5个细节
VXPLO:一款快速实现网页交互设计的工具?
网站设计的10大金律:帮你更好的留住用户!
我与交互设计这十年:交互之外的那些事儿
2014年八个最棒UI设计灵感:你最中意哪个?
Web APP与原生APP有哪些交互设计区别?
访谈:关于锤子科技 你不曾了解的有趣一面
戏说“愉悦”强迫症:真的交互设计满足需求
产品实用技巧:交互说明中容易忽略的几件事
华为总监:18条交互设计和心理学之间的联系
百度官方出品!2015-2016交互体验趋势

精彩推荐

热门教程