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

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

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

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

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

一. 界面隐喻的类型

1. 视觉隐喻 – 静态

1.1 文字隐喻

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

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

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

1.2 色彩与材质隐喻

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

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

1.3 图形隐喻

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

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

2. 视觉隐喻 – 动态

2.1 人的行为习惯上的隐喻

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

2.2 物体物理属性的隐喻

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

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

精彩推荐

热门教程