`
xuedong
  • 浏览: 298785 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

交互设计中细节提升用户的满意度

    博客分类:
  • css
阅读更多

      在第一个瞬间,也就是当一位浏览者刚刚打开我们网站的时候,他最先可能是想看看这个网站的名字及其功能; 而下一个瞬间可能就开始移动手中的小鼠标到自已感兴趣的东西上点点。再然后则可能是寻找从哪里注册等等。然而在这些瞬间中怎么样才能让浏览者找到快感,提升他的满意度呢?

1、按钮的鼠标按下状态

我们知道按钮有未动作、鼠标经过、鼠标按下、弹起四种状态,但是现在大多数网站的按钮都只设计了未动作、鼠标经过这两种状态,其中更有不管你小鼠标怎么蹂躏它都只有一种状态者。这里我不是说这些做法不好,只是觉得如果我们在设计的时候加上鼠标按下状态会提升浏览者的满意度,让他们在点击之中获得快感。就像我们平常进行的开关灯操作一样,当手指放在开关面板上按下,伴随着“啪”这个轻脆声音,开关被按下,灯亮了。


上图中百度一下的鼠标按下状态加深了颜色,google搜索则直接将底色置灰,从视觉上给了浏览者最直观的感受这个按钮我按下了。

2、鼠标经过也可以这样

我们在设计的时候,为了让浏览者更好的理解文字表述的含义或当前所处的状态都会给文字配上相应的一个icon,当鼠标经过的时候通常的做法就是直接改变颜色和改变一下方向。但是淘宝首页处理极具创新,原来鼠标经过也可以这样。

ps:以上效果用Firefox 或 chrome 查看
上图中搜索后面的小三角在未动作的是指向下方的,当鼠标经过的时候小三角顺时钟旋转180度指向下方,鼠标离开后逆时针旋转180回到原位;淘宝天下前面的icon在鼠标经过的时候顺时针旋转35度,鼠标离开后逆时针旋转35度回到原位。这种处理方式让浏览者摆脱了枯燥的浏览,这个瞬间心情愉悦。

3、弹出层也有新花样

弹出层是我们浏览网页时经常会遇到的东东,它的好处我就不说了,这里我提出来是想说说它们出现和消失的方式。通常的作法是当浏览者触发之后给一个半透明遮罩层,弹出层与之一同出现。迅雷7就来了一个新花样。

上图中当我们点击皮肤设置(黄色小衣服)按钮之后,会看到时皮肤主题这个弹出层以180度水平旋转这个“高难度动作”登场,当我们点击关闭按钮时,它又以放大加渐隐“风骚”离去。和平常弹出层直来直往的方式相比,让我们在那一瞬间感受到愉快、兴奋。当然并不是所有的弹窗加上这样的效果就会提升满意度,效果的加强伴随而来的是过程时间的增加,在这里需要处理好的是平衡性的问题,在枯燥的一系列操作中,动态效果的点缀会使人眼前一亮,频繁的滥用只会产生视觉疲劳。

除了上面所说的按钮、鼠标经过的状态、弹出层还有很多细节比如:下拉菜单出现的方式可以由浅变深、由小变大等等,我这里就不一一列举了。每一个细节,每一个瞬间都有可能加强也可能摧毁浏览者对某个产品或公司的信心。我们在工作中应该注重每一个交互细节,它们对于完整的用户体验来说,都是不可或缺的一部分。只有不断的改进创新,才能提升用户的满意度。

 

 

 

文章作者:IceSun
本文地址:http://www.iscss.tk/?p=85
版权所有 © 转载时必须以链接形式注明作者和原始出处!

分享到:
评论

相关推荐

    精品资料(2021-2022年收藏的)瞬间的快感之细节提升用户满意度.doc

    设计师们致力于通过细节的打磨,实现用户满意度的飞跃提升。从按钮的鼠标状态设计到弹出层的动态效果,再到下拉菜单和加载动画的创新,每一个交互环节都是一个潜在的改进点,能以“瞬间的快感”累积成用户的整体满意...

    移动交互设计

    在移动交互设计中,用户体验(User Experience, UX)是一个非常重要的考量因素,它关系到用户对产品满意度和使用效率。 古腾堡法则(Gutenberg Principle)是印刷设计中的一个重要原则,在移动交互设计中同样适用。...

    交互原型设计:高保真界面交互效果.pptx

    交互原型设计是UI/UX设计过程中的关键环节,它旨在创建一种近似最终产品的用户体验模型,以便在实际开发前测试和验证设计概念。...这样的设计不仅能帮助团队在早期阶段发现潜在问题,还能确保最终产品的用户满意度。

    浅析视觉心理学在APP界面交互设计中的应用.pdf

    如同square网站那样,适时的提示信息能给予用户安全感,提升使用满意度。设计师需注重每一个细节,通过视觉引导,让用户在无形中自然地进行交互,避免强迫感,创造顺畅的用户体验。 总的来说,视觉心理学在APP界面...

    软件观念革命--交互设计精髓5_observeoqg_软件交互精髓5_交互设计_

    5. 交互模型与交互细节:书中可能深入讨论了各种交互模型(如直接操作、命令行、图形用户界面等)及其细节,如控件设计、反馈机制、错误处理等,这些都是提升用户体验的关键。 6. 可用性评估:为了确保设计的有效性...

    2.1交互设计1

    交互设计是构建用户体验的核心环节,它关注用户与产品或服务之间的互动方式,旨在提升使用效率、满意度和情感连接。在2.1交互设计1的基础上,我们深入探讨2.2交互设计中的关键点,包括注册并发送信件流程、树洞功能...

    交互设计(一)实验报告3.docx

    通过实验学习,设计师可以更好地掌握用户需求,创造出既美观又实用的交互设计,从而提升产品的易用性和用户满意度。在这个过程中,心理学提供了分析用户行为和动机的工具,是构建优秀交互设计不可或缺的一部分。

    App应用程序交互设计与平面设计基础研究.pdf

    这对于提升应用的市场竞争力,以及增强用户的满意度和忠诚度都至关重要。 深入理解和掌握交互设计和平面设计的知识,对于App开发来说是一门必修课。设计师需要对用户体验的每一个细节保持敏感,不断测试和优化设计...

    互联网交互设计方法--教程

    互联网交互设计方法是构建高效、用户友好的网络产品不可或缺的一部分,它主要关注如何通过界面设计提升...设计师需要灵活运用各种方法,结合实际项目特点,以确保设计出的产品能够满足用户的期望,提高他们的满意度。

    【产品经理工具包-设计规范】-阿里巴巴交互文档规范.zip

    这个压缩包中的核心文件是“【产品经理工具包-设计规范】-阿里巴巴交互文档规范.pdf”,它详细阐述了产品经理在进行产品设计时需要遵循的原则、步骤和细节,旨在帮助产品经理和设计师更好地协作,打造用户友好的产品...

    产品经理和交互设计的那些事.pdf

    在互联网产品的设计与开发过程中,产品经理和交互设计师扮演着至关重要的角色。他们的合作不仅影响着产品的成功与否,更直接决定了...这种合作模式是互联网产品获得成功的重要保证,也是提升用户满意度与忠诚度的关键。

    Android应用开发者应该知道的交互设计知识s.pdf

    ### Android应用开发者应掌握的交互设计知识 #### 一、交互设计的概念 **交互设计**是一种专注于提升用户体验的技术,旨在让产品易于使用、高效且令人...这对于提升用户满意度、增强应用的市场竞争力具有重要意义。

    互联网交互设计方法.pptx

    总的来说,互联网产品的交互设计是一项综合性的任务,需要结合用户需求、产品特性以及技术实现,通过自然语言法、结构图法和任务走查法等手段,创建出既直观又高效的用户界面,从而提升用户的满意度和产品的市场竞争...

    交互设计的流程.doc

    通过对交互性能的客观测试(如功能性、可靠性等)以及基于用户的主观评价(如满意度)进行评估,可以及时发现问题并加以改进。 综上所述,交互设计是一个复杂而精细的过程,需要综合考虑用户需求、系统功能以及外部...

    UI交互设计:电商购物流程的UI交互设计.pdf

    在电商购物流程的UI交互设计中,购物流程的细节设计对于用户体验有着重大影响。首先,购物流程中的按钮设计是区分不同电商平台类型的关键。C2C(Customer to Customer)平台,如淘宝、拍拍,通常设有“直接购买”和...

    互联网产品的交互设计方法.docx

    【互联网产品的交互设计方法】 交互设计在互联网产品中扮演着至关重要的角色,它能显著提升产品的可用性。...同时,设计过程中要兼顾信息架构和交互细节,确保产品的整体一致性,提高用户满意度。

    Java_XPopup20版本重磅来袭2倍以上性能提升带来可观的动画性能优化和交互细节的提升功能强大交互优雅动画丝滑的.zip

    这在移动设备上尤为重要,因为动画的平滑度直接影响到用户对应用的满意度。 再者,交互细节的提升让Java_XPopup 20变得更加人性化。开发者们可能注意到,新版本对点击反馈、滑动灵敏度、触摸手势等进行了细致的调整...

    交互视觉设计师岗位职责交互视觉设计师职责任职要求.docx

    1. **细节优化**:交互视觉设计师需要关注设计的每一个细节,不断追求超越常规,力求在每个环节都达到甚至超过120%的满意度。这意味着他们不仅需要满足基本的功能需求,还要在用户体验上精益求精。 2. **设计创新**...

    2014网易交互设计笔试题.pdf

    这涉及到对用户需求的理解、设计原则的应用、以及如何通过设计提升产品的可用性和满意度。考生可能需要提及人本设计、信息架构、交互模式、反馈机制等概念,同时展示他们的创新思维和问题解决能力。 接下来的题目则...

Global site tag (gtag.js) - Google Analytics