10個細節提高後臺系統的用戶體驗

要說程序員最開心的事情是什麼，不是錢多活少離家近，而是能用本身喜歡的技術，作一個排期不緊的舒坦項目。最近我就接手了這樣一個項目，使用了webpack+vue全家桶，以及其餘一些業界前沿技術。不過今天不聊技術方面，先聊聊我對交互方面的一些思考。儘管它只是一個後臺系統。

說到後臺系統（管理系統、ERP系統），我也作過不少了，無一不難看、難用。由於這類系統不是給終端用戶使用，對交互要求不高，也沒有UI設計，有時候連PM也沒有，全憑程序員胡搞。

我對後臺系統卻一直有一個心結，儘管它的用戶只是少數的羣體，可是他們使用系統的時間卻很長，有時候一天要用它工做五六個小時。並且系統的好用與否，直接影響工做效率，搞很差還影響心情，我可不想讓他們邊工做邊罵娘。因此此次趁時間充裕，我也嘗試用本身的理解來打磨這個後臺系統，儘可能讓它友好些，溫暖些。

 

舒服的界面

後臺系統通常是選擇現有的UI框架，好比bootstrap。但用了框架並不意味着在界面上就萬事大吉了。你還得有本身的思考，如何用這個工具把界面作的舒服。

讓界面舒服的核心因素是什麼？配色？圖案？仍是炫酷的動畫效果？都不是。

長時間以來，我都堅持這個觀點，界面溫馨的核心因素是——間距。沒錯，就是這個不起眼的間距。不信你找一些案例來觀察下。一致、整齊、恰到好處的間距，老是讓界面看起來舒服。而那些難看的界面，問題老是出在間距的失調上，有些甚至是元素緊貼沒有間距。

因此，除了bootstrap的柵格系統外，此次我定義了不少css類來進行間距控制，把間距進行分類，全局統一。

另一個讓界面操做起來溫馨的因素就是：統一有序。好比，全部的提交按鈕都應該是一個顏色，全部表格中的操做按鈕都是一個樣式，全部的返回按鈕也是一個顏色。

還有一點重要的是，在一個視圖中，不要出現兩個以上的主要按鈕，不然用戶就會有一絲絲猶豫。所謂主要按鈕就是諸如表單提交等重要功能按鈕。bootstrap給按鈕起的primary這個名字很好，因此不要濫用primary按鈕。

界面佈局的細節有不少，須要心思細膩一些來感覺，原則就是讓用戶舒服。

 

監聽窗口調整

bootstrap已經作了自適應，但仍是那句老話，這並不表明萬事大吉。好比縱向滾動條會在不合適的時機出現，緣由是你給主內容區設置了最小高度。

爲何要本身監聽窗口調整呢？這取決於後臺系統的性質，它是人用來辦公的。既然是辦公，屏幕上就不會只開一個瀏覽器窗口。不少時候還得開word、excel等其餘軟件。有些時候用戶確定會把瀏覽器窗口縮小到必定尺寸來與其餘窗口並列。這時候若是橫向滾動條、縱向滾動條都出來了，那簡直讓人抓狂。

因此要照顧到這個場景，在調整窗口的時候進行監聽，確保窗口縮小到必定閾值仍是可以無痛操做的。window.onresize嘛，幾行代碼就搞定了。

 

遮罩的取捨

我說的遮罩，就是那種半透明的蒙層，一般咱們會在發起ajax請求的時候給遮上，並配以loading圖案，禁止用戶在發送請求期間進行其餘操做。

有時候我在想，咱們是否濫用了遮罩。ajax的本質是異步請求，是爲了避免讓耗時操做阻塞掉當前頁面，而咱們用了ajax，卻又拿遮罩把頁面給蓋住，這豈不是違背了咱們使用ajax的初衷。

另外一方面，遮罩的出現、消失，會給人閃爍感，傷眼睛。尤爲是請求時間較短的時候，就知感受忽然閃了一下，實在沒這個必要。

但咱們也要作區分，好比提交操做，爲了不點擊快了重複提交，咱們仍是須要給遮上。其餘的請求，例如請求數據列表，就徹底沒必要遮罩了。還有其餘常見的，如異步請求樹形組件的數據、多級菜單的數據、suggest功能，都是不須要遮罩的。

另外想說的一點是，一些彈框組件，在遮罩到時候，會把body加上overflow:hidden;樣式，爲了不彈框後面的頁面還能滾動。這樣的反作用是，body的滾動條會隨着遮罩而消失、出現，給頁面形成抖動。因此我把這個也給去掉了，彈框就彈框，不要修改原有的滾動條。

 

過渡效果的捨棄

彈框、下拉菜單、遮罩等效果我都是沒有加過渡的，也就是說都是瞬發的。

這一塊我是這麼考慮的，畢竟後臺系統的功能仍是平常辦公，效率應該是首要考慮因素，淡入淡出、滑入滑出等過渡效果會有時間消耗。儘管動畫給人的趣味性多一些，可是終年累月看這些動畫，估計也沒啥新鮮感了吧。反而會以爲浪費時間，用戶在進行一系列習慣成型的操做，還非得等你的過渡效果結束，因此乾脆就去了吧。

因此我就這麼設計了，全部界面視圖發生突變的地方，都是直入直出，給用戶一種乾淨利落的操做感。

 

用圖標而不是字符

曾經有一段時間，前端圈子裏對字符模擬圖形特別熱衷，經典的如字母X模擬叉號、border模擬三角形、特殊字符模擬菱形等。目的就是爲了避免使用圖片，省去http請求。這一技能被不少前端工程師如數家珍，並做爲炫技經常使用姿式。

然而大概是兩年前的一次經歷，改變了個人這一觀念。當是我作了一個彈框，右上角的關閉按鈕，我用了字母X模擬並洋洋得意。我老大（資深PM）看了後跟我說把X換成圖片吧，用字符感受有點廉價。

沒錯，就是「廉價」這個詞，深深入在了我腦海中，也讓我開始感覺「有品味」究竟是什麼樣的體驗。因此我以後不多用字符再去模擬圖形。

如今更多的選擇是字體圖標，bootstrap提供了不少內置的，因此我在這個系統中大量使用了它們。

 

登陸失效的檢查

做爲使用後臺系統工做的人，最怕的是什麼呢？莫過於填了半天表單，點提交的時候，提示說登陸失效，而後跳轉到了登陸頁面。你填的數據都沒了。

因此爲了解救用戶的這一痛苦體驗，我特意作了登陸失效的捕捉。若是後端返回的信息是登陸失效，前端會彈出登陸窗口，讓用戶在彈窗中完成登陸，而後還能繼續操做原來的頁面。

 

基本的快捷鍵

儘管只是個小小的後臺系統，基本的快捷鍵仍是要有的。好比，有些用戶填完賬號和密碼，本能的就去敲回車登陸了。若是這時候他發現回車沒反應，心裏會有一絲失落感。

因此比較基本的快捷鍵功能是要提供的，好比Enter提交、Tab切換、Esc收起菜單。有保存功能的頁面，能響應Ctrl+S也是極好的。

 

增大點擊響應區域

這個原則應該是比較普及的，好比一個<a>標籤，若是隻有一兩個字，就比較難點中。通常會給<a>加上display:inline-block; width: 100%;來擴大響應區域。

另一細節很容易被人忽略，就是<label>標籤與<input>標籤的綁定，讓<label>的for屬性等於<input>的id，那麼用戶在點到<label>標籤的時候輸入框也會得到焦點。

 

本地存儲

對於一些相似「常量」的數據，好比用戶列表啦，配置列表啦，徹底能夠存儲在本地，localStorage用好了，能讓你的系統響應更加絲滑。

若是擔憂本地數據的過時問題，能夠給附加一個tag來標記，若是須要更新新的數據了，則修改代碼中的tag值就能夠了，若是本地存儲的tag值不一致，則去服務端請求新的數據。

 

零白屏時間

既然是用來平常工做的系統，白屏的等待時間也是讓人忍不了的，因此我用了先後端分離架構，前端使用vue-router作路由，配合webpack的打包，點開新頁面的白屏時間基本爲零，由於根本不走請求。

固然這徹底是技術層面的優化了。放全局來看，有些交互問題是存在與技術與產品的邊界的，PM可能會注意不到，因此就靠前端工程師來把握了，讓你的做品在技術層面作到體驗最好，我想這也是前端的價值所在吧。

我所追求無它，只你會心一笑瞬間。