摘要：随着软件行业的迅速发展，各种软件产品更是形形色色，用户不再满足软件对其所需要的功能实现，更追求一种使用过程中的心里感受，因此用户体验足够好的才能走向最前端。用户体验的定义有很多，用一种比较简单的说法就是“用户对访问网站的感受”。本文主要从用户体验角度出发，从网站的构建到数据渲染完毕的过程提高用户体验。
关键字：加载速度、动画、用户体验、布局
一个好的网站离不开对用户体验的追求。因为良好的用户体验才能增加用户在网站的停留时间、使用效率等等。而用户体验取决于HTML+CSS的页面布局和样式渲染，JavaScript的动画效果，以及网站的加载速度。合理的利用这些功能才能提高用户体验。
1 HTML+CSS
HTML+CSS是网站的结构和样式。清晰的视觉效果是网站结构的重点，HTML的标签和布局能让用户了解到这部分是标题、图片、音乐还是视频。CSS是修饰网站的作用，网站中所有内容的表达方式都是通过字体表达，字体的类型、大小和样式都会给予用户不同的体验。网站每块内容的大小、间距、背景颜色都是通过CSS来控制。
HTML+CSS的布局更能提升用户体验，比如超链接的打开方式对应的用户体验也不同，鼠标的移入、点击时、点击后和未点击时的CSS字体颜色都不同；表格的标题和内容的区分，表格内容以不同的背景颜色区分每一行，以此提高可读性；表单的内容在激活时添加聚焦的样式，让用户能清楚地知道在操作哪个位置。比如公司的HIS5项目，当表格数据量多的时候，对作废、冲销、结算等不同状态的数据添加不同的底色，以及正在编辑的表格添加底色和聚焦样式。很多网站喜欢把导航定位在顶部或者底部，这样方便用户在浏览过程中时刻能够知道网页的大概内容，还有把置于顶部的小图标设置在右下角，方便用户浏览到底部时一键回到顶部。
2 JavaScript
javaScript是网站和用户之间的交互，也是网站动态功能，动态功能能够影响用户的行为，引导用户的注意力以及对用户的动作进行反馈，从而提升用户体验。那么网站有哪些地方需要加上动画效果呢，以下列举3个常用地方：
1.网页加载时的等待。页面加载时，在渲染页面样式代码和表格数据加载时可能由于数据量大，导致用户只能看到空白的页面，如果有的用户比较有耐心可能会等等，可大部分用户可能会觉得加载速度太慢，或者页面没有加载就直接退出，这样对用户体验来说是十分不友好的，如果在等待页面加载时加上一个最简单的旋转动画，能让用户清楚地知道页面正在加载中。
2.模块和模块之间的显示和隐藏。在网页中经常会看到部分内容被隐藏，当点击全文时展开全部内容，在展开内容的过程中就可加上简单的动画效果，如滑动等方式，可让用户看起来更舒服；或者促发弹窗动态显示隐藏内容的时候可让图片或者内容以淡入淡出的方式显示出来。
3.图片和文字的结合。网站的整体效果固然重要，但是小细节也是不容忽视。网站的图片跟文字是比较枯燥的，但是如果当用户浏览到某个位置，给图片加上缩放功能，文字漂浮等效果，或者图片和文字的结合效果，让自己的网站更有特点，更能提高用户阅读的积极性。
在用户操作过程中，利用反馈来进行相应的效果。在用户操作前、操作时跟操作后所展示的效果让用户明白进行了什么操作，并且在用户执行成功还是错误的操作时给予相应的提示，让用户通过效果和文字提示等方式立刻就能明白这个动作的含义。
3 加载速度
加载速度对于网页来说是至关重要的。如果一个网站的加载时间太长，足以让用户失去耐心。可能原因是因为代码量或者数据量太大，用户可不关心数据和代码的加载量，用户需要的是能迅速看到网站的内容。因此尽可能提高网页加载速度会让用户体验更好。而加载速度是由两个方面决定的，一个是前端代码和图片的渲染，另一个是对数据的请求。
3.1前端代码
前端代码的优化可以有效提升页面渲染速度。首先是代码质量问题，在开发前对文件的构建和命名，开发时对公共部分的合并，降低服务器请求次数，开发后对HTML、CSS、JS文件和图片进行压缩，对图片进行预加载或者懒加载以至于不会出现部分空白图片。文件的引入顺序也影响着用户体验，因为用户需要能够迅速看到网站内容，因此需要先行加载HTML、CSS文件，让用户能看到网页的大部分内容，之后再逐渐加载其他文件。
3.2 数据请求
前端是通过AJAX发送请求获取后端数据。AJAX的核心就是“异步加载，局部刷新”。也就是对某一块内容进行局部刷新，不需要刷新整个页面，最经典的例子就是表单。用户在填写完某一项表单数据后（在未点击提交就已经异步提交了请求并且已经返回数据更新了部分页面），这就给了用户很直观的感受，如果等用户全部填写完毕后再提交请求后返回给提示用户名字太长必须要有字母和数字组合，或者密码只能有数字等提示，用户又要重新重头开始填写，要多花费几倍时间来重复同一操作，这样很不利于用户体验。现在的QQ、微信和微博在用户评论和转发后也不需要刷新整个页面，操作后立即对某块数据进行更新，从而提高用户体验。His5的表格数据量相对较大，因此大部分都采用滚动加载或者分页加载的形式加载数据，否则当用户搜索的数据量大时有可能会导致长时间的等待或者页面崩溃，这样大大影响了工作效率。
4 总结
综上所述，一个用户体验好的网站，要有不但简约大气的设计，适当的动画效果还要加载速度够快。盲目追求丰富多彩的页面设计和酷炫的效果反而会影响用户体验。必须经过用户不断体验后的反馈再进行不断的改善才能真正提高网站的用户体验。
原创文章，作者：交互精选，如若转载，请注明出处：https://www.iamue.com/35085/
