前端工程师如何为用户提供最快最优质的访问体验_CSS学习

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/3/4 7:11:18 共计：3598 浏览

前端工程师如何为用户提供最快最优质的访问体验？

影响用户体验的点一般包括以下几个：

网站本身内容的价值：这是核心，用户有需求才有访问；

UI对用户的吸引度：第一印象很重要；

交互对用户的友好度：操作的流程度？使用起来是否简单？

网站的打开速度：打不开我怎么看？

从前端工程师的角度，我们能做的主要在第3和第四点上。

与用户的交互

关于交互这块，我并没有太过深入的研究，但如果把我自己看做一个用户，我觉得可以从以下几个方面尝试去做优化：

简单化：交互流程尽可能简单，能1步搞定就不要2步；

状态可见：清楚明确的状态可以让用户操作前，更好地预知结果，以便省去多余的反复试错过程，比如提交或加载数据的loading进度条。

尊重用户习惯：比如用户习惯了某个图标代表设置的意思，这时候就不要为了追求设计的新鲜度贸然去更换

重点突出：整个页面不能千篇一律，不然用户找不到重点还有可能产生视觉疲劳。

指引：当发布新功能或流程中出现一些异常的时候，需要有明确的指引告诉用户下一步该做什么。

访问速度

加载性能我们一般从几个维度去衡量

白屏时间：在这个时间段，整个页面就是一张白板，什么也看不到。

首屏时间：在这个阶段，在访问设备的可视窗口区域已经渲染完毕，用户能看到部分内容。

可交互时间：用户可以执行点击、提交等与页面交互的操作。

针对性能这块我们常见优化方案有：

1、加载优化：

减少HTTP请求CDN缓存资源压缩合并加载不阻塞按需加载、预加载、非首屏异步加载无cookie域名http2

2、js和css执行优化

减少重绘和回流尽量使用事件代理，避免批量绑定事件使用touchstart、touchend代替click避免CSS表达式尽量避免使用DataURL

3、渲染优化

尽量使用CSS3动画使用requestAnimationFrame动画代替setTimeout使用canvas或WebGLGPU加速函数节流（throttle）和防抖（debounce）: 针对高频事件，如滚动条

以上就是我的个人见解了，如果觉得有帮助的话，不妨加个关注点个赞哦！也欢迎对前端有兴趣的同学一起交流。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。