影响用户体验的点一般包括以下几个:
网站本身内容的价值:这是核心,用户有需求才有访问;
UI对用户的吸引度:第一印象很重要;
交互对用户的友好度:操作的流程度?使用起来是否简单?
网站的打开速度:打不开偶怎么看?
从前端工程师的角度,大家能做的主要在第3和第四点上。
与用户的交互
关于交互这块,偶并没有太过深入的研究,但如果把偶自己看做一个用户,偶觉得可以从以下几个方面尝试去做优化:
简单化:交互流程尽可能简单,能1步搞定就不要2步;
状态可见:清楚明确的状态可以让用户操作前,更好地预知结果,以便省去多余的反复试错过程,比如提交或加载数据的loading进度条。
尊重用户习惯:比如用户习惯了某个图标代表设置的意思,这时候就不要为了追求设计的新鲜度贸然去更换
重点突出:整个页面不能千篇一律,不然用户找不到重点还有可能产生视觉疲劳。
指引:当发布新功能或流程中出现一些异常的时候,需要有明确的指引告诉用户下一步该做什么。
访问速度
加载性能大家一般从几个维度去衡量
白屏时间:在这个时间段,整个页面就是一张白板,什么也看不到。
首屏时间:在这个阶段,在访问设备的可视窗口区域已经渲染完毕,用户能看到部分内容。
可交互时间:用户可以执行点击、提交等与页面交互的操作。
针对性能这块大家常见优化方案有:
1、加载优化:
- 减少HTTP请求
- CDN
- 缓存
- 资源压缩合并
- 加载不阻塞
- 按需加载、预加载、非首屏异步加载
- 无cookie域名
- http2
2、js和css执行优化
- 减少重绘和回流
- 尽量使用事件代理,避免批量绑定事件
- 使用touchstart、touchend代替click
- 避免CSS表达式
- 尽量避免使用DataURL
3、渲染优化
- 尽量使用CSS3动画
- 使用requestAnimationFrame动画代替setTimeout
- 使用canvas或WebGL
- GPU加速
- 函数节流(throttle)和防抖(debounce):针对高频事件,如滚动条
以上就是偶的个人见解了,如果觉得有帮助的话,不妨加个关注点个赞哦!也欢迎对前端有兴趣的同学一起交流。