课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
用户体验是随着互联网的不断发展而逐渐被程序员和设计师看中的一个用户需求,而今天我们就通过案例分析来了解一下,过场动画对用户体验的影响力。
一、用户体验
用户体验(UE/UX)是指一个人使用一个特定产品、系统或服务时的行为、情绪与态度,还包含用户对于系统的功能、易用和效率的感受,因此用户体验在本质上可以视为一个人对于系统的主观感受与主观想法。
用户体验是动态的,由于不断变化的使用情况、不停变化的各个系统,以及变化发生背后的情境与脉络,因此它是随着时间而不断地变化着。
1)Loading动画
有一份调查指出,用户能够忍受加载的长时间在:6到8秒。8秒是一个临界值,如果加载时间在8秒以上,大部分访问者终会选择放弃,除非他一定要打开那个页面。
加载动画就是为了弥补服务器加载过慢的问题而设计的。
一个好的加载动画可以从两个层次分析,一个层次是满足用户心理基本需求,缓解用户烦躁情绪,二个层次是给予用户惊喜感,增加用户对产品的好感度。
2)过渡动画
过渡动画是为了在结构中插入或者删除一个视图时表现的不突兀,让用户可以感受到那段过程。
3)记住用户习惯
记住用户习惯包括在页面刷新后定位到之前滚动的位置,缓存表单中的输入信息等,其实就是保留用户的操作痕迹。
4)骨架屏
骨架屏(SkeletonScreen)是一个页面的空白版本,通过这个空白版本来传递一种信息,即页面正在渐进式的加载中。
骨架屏的布局能与页面的视觉呈现保持一致,这样就能引导用户的关注点聚焦到感兴趣的位置。
二、工具
1)ChromeDevtools
Chrome浏览器为开发人员提供了专业的开发者工具。不但能模拟网络连接,还能查看内存、研究重绘以及资源请求等功能。
1.Elements:页面元素面板,可查看或修改DOM结构,以及元素的样式。
2.Console:控制台面板,可打印日志,或断点调试。
3.Sources:资源管理面板,包括JavaScript、CSS、图像、视频等。
2)webpack
webpack是一个静态模块打包器,此处的模块可以是任意文件,包括Sass、TypeScript、模板和图像等。
webpack可压缩图像、JavaScript、CSS等文件,并且能合并JavaScript、预处理Sass并将其合并。
借助webpack还能实现TreeShaking剔除未引用的代码,利用CodeSpliting把代码分离到不同的bundle中。
【免责声明】:本内容转载于网络,转载目的在于传递信息。文章内容为作者个人意见,本平台对文中陈述、观点保持中立,不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请在707945861群中学习了解。