前端應該注重用戶體驗

作前端也有一段時間了，對於實現各類需求來講已是遊刃有餘了，代碼的質量和可擴展性都能把控。目前最缺少的就是所謂的用戶體驗。

用戶體驗提及來是一個比較模糊的概念，可是又是實實在在地決定着用戶用起來爽不爽。最近寫了不少中後臺系統，不少人都認爲這種中後臺系統沒什麼技術含量（使用現成的UI框架寫寫表單，table作一作增刪改查），我想說的是任何產品若是想作好，都必須重視用戶體檢。

另外一個劣勢是大部分公司對於這類產品，都缺少產品和ui資源提供大力的支持，因此說，提高用戶體驗的大部分工做都落到前端身上了。

1. 典型的中後臺應用，大多數是對錶格的增刪改查，有以下改進

• 最基本的頁面的每一個ui組件要能使用正確，合理，在使用select的時候不要使用input，在使用aotucomplete的時候不要使用selec等
• 頭部添加菜單解釋說明，一個菜單標題只有簡簡單單的幾個字，用戶一開始用起來可能都不知道該菜單是幹說明用的，增長的解釋說明能很好的幫用戶瞭解該頁面功能
• 操做按鈕的歸類，以前通常將增長，刪除，修改，導出表格，搜索，搜索條件等都放在一塊，這樣給人一種很雜亂的感受，如今將這些控件分爲兩類（搜索條件和搜索按鈕，增刪導出刷新等操做按鈕）。其中 增刪導出刷新等操做按鈕 放到頭部菜單裏，和下面的 搜索條件和搜索按鈕 區分開來。
• 對於複雜的搜索條件，劃分爲基礎查詢條件和所有查詢條件，基礎查詢條件涵蓋用戶經常使用的幾個搜索條件，其他高級搜索條件先隱藏，經過 顯示所有 按鈕顯示所有搜索條件。這樣體驗具備層次感，並且用戶不會由於一大堆條件輸入框而感到厭煩。
• 對於表格，若是查詢數據爲空，則顯示 暫無數據； 若是是後臺報錯，則顯示 網絡異常，請點擊按鈕刷新，以前都是經過提示框顯示接口報錯等。這樣的好處有兩點，一是若是用戶想嘗試從新獲取數據不用再點刷新整個頁面了，二是提示框會打斷用戶聚焦的視線，對於用戶來講是很差的體驗。當表格的列數不少時，操做一欄要固定住，方便用戶操做。
• 左側菜單樹，當菜單過多時，增長搜索框，能夠快速定位到該菜單頁面，方便用戶操做。
• 避免所有頁面loading，只用局部loading
• 封裝重複邏輯，好比table的分頁，大量表單等

1. 大數據項目的一些用戶體驗優化的點

• 指標卡片 加問號圖標，用tooltip顯示指標的含義；包括頁面上一些文案，若是含義難懂的均可以加tooltip
• 可點擊的元素鼠標變成手型
• 前端緩存優化（用戶點擊過的圖標數據緩存起來）
• 表單要儘量簡單，負責的表單會讓用戶失去耐心
• 下拉框若是選項比較少，能夠直接用radio來代替，用戶能夠省一步點擊下拉框的操做
• 查詢圖表的時候須要填時間區間，能夠放一些常見的時間區間給用戶選擇，好比今天/昨天/上週/上月/前三月, 避免用戶去手動選擇兩個時間框

1. 通用

• 當前用戶登陸後被其餘用戶擠下線，選擇用全屏提示框+肯定按鈕提示用戶。此類通知屬於一級重要，必須確保用戶知道該重要通知，肯定按鈕是爲了強行讓用戶瀏覽該重要通知的。產品提出自動跳轉到登陸頁面，用一行小字提示，讓用戶看到該重要通知的可能性大大下降。實在不妥。
• 前面說 的table 顯示三種狀態：有數據/無數據（no data）/網絡異常，點擊刷新，這三種其實適用於不少的展現數據的組件，好比圖表組件。