在第一个瞬间,也就是当一位浏览者刚刚打开我们网站的时候,他最先可能是想看看这个网站的名字及其功能; 而下一个瞬间可能就开始移动手中的小鼠标到自已感兴趣的东西上点点。再然后则可能是寻找从哪里注册等等。然而在这些瞬间中怎么样才能让浏览者找到快感,提升他的满意度呢?
1、按钮的鼠标按下状态
我们知道按钮有未动作、鼠标经过、鼠标按下、弹起四种状态,但是现在大多数网站的按钮都只设计了未动作、鼠标经过这两种状态,其中更有不管你小鼠标怎么蹂躏它都只有一种状态者。这里我不是说这些做法不好,只是觉得如果我们在设计的时候加上鼠标按下状态会提升浏览者的满意度,让他们在点击之中获得快感。就像我们平常进行的开关灯操作一样,当手指放在开关面板上按下,伴随着“啪”这个轻脆声音,开关被按下,灯亮了。
上图中百度一下的鼠标按下状态加深了颜色,google搜索则直接将底色置灰,从视觉上给了浏览者最直观的感受这个按钮我按下了。
2、鼠标经过也可以这样
我们在设计的时候,为了让浏览者更好的理解文字表述的含义或当前所处的状态都会给文字配上相应的一个icon,当鼠标经过的时候通常的做法就是直接改变颜色和改变一下方向。但是淘宝首页处理极具创新,原来鼠标经过也可以这样。
ps:以上效果用Firefox 或 chrome 查看
上图中搜索后面的小三角在未动作的是指向下方的,当鼠标经过的时候小三角顺时钟旋转180度指向下方,鼠标离开后逆时针旋转180回到原位;淘宝天下前面的icon在鼠标经过的时候顺时针旋转35度,鼠标离开后逆时针旋转35度回到原位。这种处理方式让浏览者摆脱了枯燥的浏览,这个瞬间心情愉悦。
3、弹出层也有新花样
弹出层是我们浏览网页时经常会遇到的东东,它的好处我就不说了,这里我提出来是想说说它们出现和消失的方式。通常的作法是当浏览者触发之后给一个半透明遮罩层,弹出层与之一同出现。迅雷7就来了一个新花样。
上图中当我们点击皮肤设置(黄色小衣服)按钮之后,会看到时皮肤主题这个弹出层以180度水平旋转这个“高难度动作”登场,当我们点击关闭按钮时,它又以放大加渐隐“风骚”离去。和平常弹出层直来直往的方式相比,让我们在那一瞬间感受到愉快、兴奋。当然并不是所有的弹窗加上这样的效果就会提升满意度,效果的加强伴随而来的是过程时间的增加,在这里需要处理好的是平衡性的问题,在枯燥的一系列操作中,动态效果的点缀会使人眼前一亮,频繁的滥用只会产生视觉疲劳。
除了上面所说的按钮、鼠标经过的状态、弹出层还有很多细节比如:下拉菜单出现的方式可以由浅变深、由小变大等等,我这里就不一一列举了。每一个细节,每一个瞬间都有可能加强也可能摧毁浏览者对某个产品或公司的信心。我们在工作中应该注重每一个交互细节,它们对于完整的用户体验来说,都是不可或缺的一部分。只有不断的改进创新,才能提升用户的满意度。
分享到:
相关推荐
《用户体验与UI交互设计》教学课件6.3Axure交互基础实例—用户登录.pdf《用户体验与UI交互设计》教学课件6.3Axure交互基础实例—用户登录.pdf《用户体验与UI交互设计》教学课件6.3Axure交互基础实例—用户登录.pdf...
基于分布式认知理论对自助服务终端界面交互活动进行分析和建模, 确定人机交互过程中交互活动和信息呈现之间的关系, 并在此基础上提出基于用户认知能力的自助服务终端界面交互设计方法。采用这种方法, 设计人员首先要...
课程内容包括了前期的产品规划,跨平台交互设计,微交互的应用及细节体验,用户体验与用户分析,产品经理工作流程立项、项目启动后产品上线,还有产品设计的需求挖掘,精品分析等内容,都是结合了时下互联网最新的...
人机交互设计大作业,人机交互大作业,人机交互作业。 人机交互设计大作业,人机交互大作业,人机交互作业。 人机交互设计大作业,人机交互大作业,人机交互作业。 人机交互设计大作业,人机交互大作业,人机...
Web中的用户体验是指用户在访问平台的过程中的全部体验,它包括平台是否有用,疑惑或者bug程度,功能是否易用、简约,界面设计和交互设计是否友好等方面。用户体验的核心是UCD,即“以用户为中心的设计”。
21世纪什么最贵——用户。现在的软件不是只实现功能的时代了,良好的用户体验将成为你打开成功之门的钥匙。
ChatGPT技术在文本生成中的用户交互与用户满意度研究
交互设计的思想交互设计的思想交互设计的思想交互设计的思想交互设计的思想
用户体验交互视觉设计方法(完整版)
在细节设计启动前,拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧!APP设计规范指对APP界面进行风格统一,对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计...
书中包含了作者十多年来对交互设计的一些深刻理解,对如何做好交互设计有很强的实践价值。在《交互设计指南(原书第2版)》第3-8章中,贯穿了一个能够广泛应用于各种项目的通用设计流程,能够帮助新手设计师按序将所有...
鼻祖中的鼻祖,为用户体验和交互设计提供高效思路。
微交互设计提升用户体验的小巧妙.docx
B端系统交互设计的细节.docx
以教育类电子产品的现状为背景,通过研究教育产品设计存在的问题,并分析教育的本质,提出教育产品的功能是推动学生的学习动机,并从学习策略和交互设计两个方面论述了教育产品如何设计可提升学习兴趣。借鉴认知心理...
用户界面设计--有效的人机交互策略
课程让我对React框架有了更深入的了解。通过学习React的基本原理、组件化开发和虚拟DOM的概念,我掌握了...通过迭代设计和用户反馈的循环,我能够逐步改善livegoods房屋海选平台的用户体验,提高用户的满意度和忠诚度。
交互设计体验周workshop资料--移动产品设计中的交互
如何设计新型自拍交互方法使得用户在自拍过程中能够自由、实时地控制相机是自拍相机交互界面的关键问题。提出利用基于视觉的运动手势交互界面的新方法,使自拍过程中用户只要挥一挥手臂就可以实现与自拍相机的交互...