微医的前端体验优化之路

狗蛋看了个人文章并重构了手上的项目，然而前端的重构带来的表现只停留在代码层面，上级也感觉不到重构先后带来的差别。

此文简述微医前端如何优化用户体验

现状

回归到3年前，狗蛋刚踏入前端大门，他也只是个懵懂的切图仔，然而随着node和各类终端的兴起，前端在各个领域也都有了一席之地。 每一个人都在想着作自动化，工程化，微服务，中间层，毕竟kpi嘛。 那些高大上的东西却让狗蛋愈来愈模糊，当时选择前端的初心不正是由于离用户最近嘛！

---

关联

为什么有蚂蚁金服体验部？

用户放弃一个产品只须要1秒，加载时间每增长1秒，那都意味着金钱和用户的流失。

如今的竞品实在太多了，用户的口味也刁钻了，若是咱们能帮助用户，优化流程，有良好的应用体验，价值便从技术上升到了产品层次

若是能够量化重构代码先后的数据，例如：

经过优化某块代码，优化用户30%的注册时间

具体到业务里，就是节省了用户30%的挂号时间

听起来就狂拽炫酷叼霸天，狗蛋直接走上升职加薪之路.

---

架构

微医架构部前端团队根据在业务上的时间归类出业务单元，赋予了前端们优化的业务的能力。

吹了那么多，怎么作呢？

答案：经过AOP（面向切面编程） 的形式上报业务单元。

首先前端得了解本身的产品（这也是不少前端的不足之处，不够深刻产品），关注每一个业务模块的入口和出口，总结出业务的流程，在业务里埋点，计算出这个业务的总体时间并经过大数据分析出大多数用户的操做时间和习惯。

---

解构

找的都是网图，若有雷同纯属巧合

案例一

操做过于复杂

经过对用户停留时间的分析，发现此业务单元过于复杂，用户老是在摸索如何使用。
复制代码

优化：操做引导提示

结果： 使用时间总体前移

案例二

重复性操做过多

重复的内容过多，容易劝退用户，搜索功能筛选条件复杂
复制代码

优化：快速操做、默认操纵

灵活利用localStorage,保存近期操做数据自动填充

1.记录重复性的表单

2.记录近期搜索条件

结果：流程耗时都往降低了

优化前

优化后

案例三

接口查询时间超过1s

已经优化过的接口响应时间在1秒左右，然而用户进入页面看到加载动画时间超过1s实际上是能够感知到等待时间的，尤为是页面模块少的时候

利用localStorage,达到秒开的感知程度

这里的秒开是指用户等待接口相应时间并渲染界面的时间

这个操做我称之为错觉数据，保存了相对变化不大的旧数据先填充页面给用户一种秒开的错觉，以后在变动

具提要看业务的状况实施，这种方案通常在数据对用户影响不大且改变较少的状况下酌情使用，例如管理后台的表格

结果：访问量增多

其实还有不少优化的方案和须要造的轮子等待咱们去开拓

---

将来

微医前端们有了本身的不可替代性，也有了属于本身须要深挖的体验方向

• 符合本身公司用户体验的UI框架
• 优化本身业务的前端业务架构师
• 能与产品、UI一块儿剖析的大数据
• 提供具备说服力的前端晋升通道

---

若是以为不错，请素质四连，点赞、关注、转发、评论，毕竟要恰饭的嘛