• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 沿着这7个思路,你可以正确的使用动效取悦用户

沿着这7个思路,你可以正确的使用动效取悦用户

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含App设计,ui设计,动效设计,经验分享,转场动效等相关知识,希望在学习及工作中可以帮助到您

当我们在探讨产品设计细节的时候,会频繁地提及“愉悦”这个词。必须承认,愉悦的体验,是优秀产品中所潜藏的魔法。在设计时候,如何构建出愉悦的体验,也是需要努力实现的核心要点。目前,在网站和APP这两类产品当中,设计师主要是通过动效和微交互来强化体验,其中动效所起到的作用至关重要。

为何愉悦的动效很重要

现如今,数字化的服务和产品已经深入到我们生活的方方面面,可以说各种网站和APP已经成为我们现代生活的基础设施了。如今数字产品设计依然是首先聚焦到可用性上,因为首先要通过产品帮助用户达成目标。但是在可用性达成之后,用户体验设计所需要做的事情还有很多。良好的设计是吸引人的,良好的设计是令人愉悦的。Stephen Anderson 曾经说过:“在体验设计的过程中,为用户提供满足感已经是一种常态,而愉悦感则是我们所追求的目标。”这句话其实点明了一个事实:动效对于体验设计很重要。

何时使用愉悦的动效

就像其他的元素一样,动效应该对整个用户流程起到支撑的作用。愉悦的动效能够让用户更快乐地使用产品,而不会影响整体的可用性。愉悦的动效能够通过两种方式提升UX:

·强化娱乐和参与感。有趣的动效能创造良好的第一印象,并且引起用户的关注。它能让产品更加难忘,并且具备更强的传播性。

·让设计更富于情感。有趣的动效能够让产品更加人性化,能让用户与产品更容易产生共鸣。情感化设计的目的是创造幸福感,我想你是希望用户在在使用你的产品的时候,感到快乐的。

接下来,我们分享7种借助动效取悦用户的方法。

1、等待加载时保持用户的愉悦感

考虑到目前的存储技术和硬件的计算力,用户总会在不同的环节不可避免的面对加载过程。当我们不能缩短加载过程的时候,可以试着让用户的这个等待过程更加有趣。为了确保他们不会在等待的时候无聊,最好是借助动效让用户分心,从而降低他们对于时间的敏感度。这些动效可以是有趣的,也可以是出人意料的。

2、创造良好的第一印象

当人们判断一个事物好坏的时候,第一印象非常重要。好的第一印象能够让用户对产品或者服务产生兴趣,主动的推进新用户流程,甚至能够优化使用过程中的心境。想要打造好的第一印象不仅仅要依靠良好的可用性,还需要足够的个性化的设计作为支撑。如果你的应用界面看起来和其他的同类产品不一样,这本身会在用户第一次打开的时候,给他们一个暗示:这个产品有其他产品不具备的新特性。新用户首次打开APP的时候,引导界面结合动效能够给用户以不错的第一印象。

3、让界面更加生动有趣

动效常常和微交互结合起来,在交互前给用户以提示,在交互完成后给予反馈,见缝插针地加入,令界面逻辑得以完善,也让体验更加有趣。精细的动效不仅可以提升产品的可用性水平,而且能让界面的趣味性更强。

4、让交互更加富于情感

如今的UI设计越来越讲究情感化的设计了。正如同Aarron Walter 在他的《设计情感》中所说的:“个性和情感是我们被一部分人吸引,而没有被另外一部分人吸引的原因。”个性和富有性格的动效是和用户建立情感联系的重要渠道,它不仅让用户感到产品设计的用心,而且能让他们体会到这个产品背后有设计师的服务。

5、帮助用户从意外和错误中恢复过来

错误和意外其实会经常发生的。当错误发生的时候,不仅会影响到产品的体验,而且会直接影响到用户的实际生活。无论这些错漏和意外是怎么产生的,怎么同用户沟通,怎样处理它们都会直接影响用户的情绪,以及你的APP和用户之间的关系。这个时候,精心设计的动效能够将失败的情境转化为快乐的时刻。当你的UI界面中需要报错或者404专业的页面的时候,可以给动效一个机会。

6、让复杂的任务看起来更加简单

用好了动效,能让一个复杂的任务变成一次令人着迷的旅程。依然是经典的MailChimp,你可以看看他们是怎么来做的。MailChimp 的设计师将它的功能精心的包裹在了幽默的构思和流畅的动效当中,当你想要发出你的第一封邮件的时候,精心设计的引导流程和有趣的动效一路陪伴着你,帮你舒缓面对未知时的紧张。MailChimp 的动效设计非常具有同理心,在这种设计思路下,借助动效让复杂的任务看起来非常简单。

7、提升交互的质感

每个人都希望能够被认真对待,无论对方是人还是APP。和现实生活一样,当你发现APP和它背后的设计者在花费时间精力帮你解决问题,你的期望被认真对待了,那么你会觉得和这个产品的互动更有意义。

人们会忘记你所说的话,忘记你所做的事,但是不会忘记你给他们所带来的感受。 —— Maya Angelou

不要低估改善用户体验的乐趣,那些令人喜爱的产品和让人觉得勉强接受的产品之间所差的可能就是那一点愉悦感和体验。

当然,想要你的产品能和用户构建起情感联系,那么在此之前它至少要超过及格线,将基本工作做到位,然后借助动效和微交互,将愉悦的体验注入其中,强化功能和体验,这才是正确的设计方式。

【这些最佳实践帮你在UI设计上更上一层楼】

  1. 《网页设计中,如何突破栅格的限制又保持协调?》
  2. 《帮你搞定长滚动网页的设计最佳实践》
  3. 《觉得自己学了假设计?真正的新用户引导应该这么设计》
  4. 《老生常谈!设计高素质的UI应该掌握这7个关键属性》
  5. 《这8个要点,能让你的网页首图抓住用户注意力》

原文地址:webdesignerdepot
原文作者:NICK BABICH
优设译文:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

优设大课堂

您可能想查找下面的文章:

  • 手机APP用户界面设计的10点建议
  • 关于音乐播放App(应用软件)的分析与重设计 如何设计出漂亮的音乐播放界面
  • 写给新手的APP结构指南:首页相关(上)
  • 基础科普!重复与突变在产品设计中的应用
  • 超全面的导航设计基础知识总结(一)
  • 写给UI新手的APP结构指南:注册和登录
  • 用户体验是一种过程,而不是结果
  • 超全面的移动端UI 设计规范整理汇总
  • 感觉设计不舒服但又不知道原因?可能是这8个常见的交互细节问题
  • 这个帮你改善睡眠的APP,是这样设计出来的

相关文章

  • 2017-08-06新手建站入门教程 建站需要的条件和工具
  • 2018-08-23自学体系第一课!写给新人设计师的界面排版原则(上)
  • 2018-08-23亿万好评的QQ国际版,今年可能会用这两个新的视觉设计方案
  • 2018-08-23为何如今的产品总给人千人一面的感觉?
  • 2018-08-23布局太死板?6个小技巧让你的网页设计活力十足!
  • 2017-08-26浅谈React
  • 2018-08-23为什么在App设计中,应该慎用左右横滑设计?
  • 2017-08-06网页宽度自动适应手机屏幕宽度的实现代码(viewport)
  • 2017-08-06分享8款提高网页设计出色的CSS工具
  • 2018-08-23网易设计师:图表设计,远不止“好看”这么简单

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 人工智能如何影响设计师的工作?这篇总结超全面!
    • 优设首发!800M高质量的iPhone X+8展示模板免费打包下载
    • 网页设计心得 高效编写网页代码
    • 高性能网站优化指南
    • 5个关键词,写出“有故事感”的文案
    • 让传达更有效!7个提升数据可视化的实用技巧
    • 提高网页加载速度的初步简单技巧方式
    • 超全面!聊天机器人的界面交互设计实战经验总结
    • 页面重构技能-Javascript、CSS篇
    • 实战改版经验!我们是怎样设计Foursquare Swarm 5.0的?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有