以前端工程師的角度如何有效提升行動裝置網頁的使用者體驗

使用者體驗的提升怎麼也輪到前端工程師來操心 ?

我們來看一個範例

「細節」

前端工程師提升網頁使用者體驗的首要條件

好的體驗都是從細節做起

我們先來看一些例子

hover 補間動畫

＊回饋感

SPA 的過場動態

範例 1 :  https://bandit.co.jp/

範例 2 :  https://apollo-aa.jp/

範例 3 :  https://revel.jp/

範例 4 :  https://nagai-japan.co.jp/

Loading 畫面

* 整個頁面的圖片loading

* 非同步API loading

區塊的收合/展開

畫面載入時的抖動

https://ithelp.ithome.com.tw/articles/10260925

Tab 的 Router

範例 1 :  https://www.climarks.com/eng/

紀錄表單未送出內容

* cookie

* LocalStorage

http://vue-notification.yev.io/

減少滿版彈窗錯誤訊息提示

再來看看效能端的優化

行動裝置載入跟使用流暢度也跟體驗很有關係阿!

https://zh.wikipedia.org/wiki/Gzip

https://ithelp.ithome.com.tw/articles/10270225

減少不必要的 request

考慮各平台的政策限制

例如 Safari 暫存政策 cookie、localstorage 

https://webkit.org/blog/8613/intelligent-tracking-prevention-2-1/

回歸需求面

你不代表所有使用者

使用者體驗會因為產業的不同而有所不一樣！

適時地跟UX設計師提出使用上面的建議

提供自己過往的經驗或是網路上看到其他的解決方案

最後... 不要執著

謝謝大家