微醫的前端體驗優化之路

狗蛋看了個人文章並重構了手上的項目，然而前端的重構帶來的表現只停留在代碼層面，上級也感覺不到重構先後帶來的差別。

此文簡述微醫前端如何優化用戶體驗

現狀

迴歸到3年前，狗蛋剛踏入前端大門，他也只是個懵懂的切圖仔，然而隨着node和各類終端的興起，前端在各個領域也都有了一席之地。 每一個人都在想着作自動化，工程化，微服務，中間層，畢竟kpi嘛。 那些高大上的東西卻讓狗蛋愈來愈模糊，當時選擇前端的初心不正是由於離用戶最近嘛！

---

關聯

爲什麼有螞蟻金服體驗部？

用戶放棄一個產品只須要1秒，加載時間每增長1秒，那都意味着金錢和用戶的流失。

如今的競品實在太多了，用戶的口味也刁鑽了，若是咱們能幫助用戶，優化流程，有良好的應用體驗，價值便從技術上升到了產品層次

若是能夠量化重構代碼先後的數據，例如：

經過優化某塊代碼，優化用戶30%的註冊時間

具體到業務裏，就是節省了用戶30%的掛號時間

聽起來就狂拽炫酷叼霸天，狗蛋直接走上升職加薪之路.

---

架構

微醫架構部前端團隊根據在業務上的時間歸類出業務單元，賦予了前端們優化的業務的能力。

吹了那麼多，怎麼作呢？

答案：經過AOP（面向切面編程） 的形式上報業務單元。

首先前端得瞭解本身的產品（這也是不少前端的不足之處，不夠深刻產品），關注每一個業務模塊的入口和出口，總結出業務的流程，在業務裏埋點，計算出這個業務的總體時間並經過大數據分析出大多數用戶的操做時間和習慣。

---

解構

找的都是網圖，若有雷同純屬巧合

案例一

操做過於複雜

經過對用戶停留時間的分析，發現此業務單元過於複雜，用戶老是在摸索如何使用。
複製代碼

優化：操做引導提示

結果： 使用時間總體前移

案例二

重複性操做過多

重複的內容過多，容易勸退用戶，搜索功能篩選條件複雜
複製代碼

優化：快速操做、默認操縱

靈活利用localStorage,保存近期操做數據自動填充

1.記錄重複性的表單

2.記錄近期搜索條件

結果：流程耗時都往降低了

優化前

優化後

案例三

接口查詢時間超過1s

已經優化過的接口響應時間在1秒左右，然而用戶進入頁面看到加載動畫時間超過1s實際上是能夠感知到等待時間的，尤爲是頁面模塊少的時候

利用localStorage,達到秒開的感知程度

這裏的秒開是指用戶等待接口相應時間並渲染界面的時間

這個操做我稱之爲錯覺數據，保存了相對變化不大的舊數據先填充頁面給用戶一種秒開的錯覺，以後在變動

具提要看業務的狀況實施，這種方案通常在數據對用戶影響不大且改變較少的狀況下酌情使用，例如管理後臺的表格

結果：訪問量增多

其實還有不少優化的方案和須要造的輪子等待咱們去開拓

---

將來

微醫前端們有了本身的不可替代性，也有了屬於本身須要深挖的體驗方向

• 符合本身公司用戶體驗的UI框架
• 優化本身業務的前端業務架構師
• 能與產品、UI一塊兒剖析的大數據
• 提供具備說服力的前端晉升通道

---

若是以爲不錯，請素質四連，點贊、關注、轉發、評論，畢竟要恰飯的嘛