要說程式設計師最開心的事情是什麼，不是錢多活少離家近，而是能用自己喜歡的技術，做一個排期不緊的舒坦專案。最近我就接手了這樣一個專案，使用了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可能會注意不到，所以就靠前端工程師來把握了，讓你的作品在技術層面做到體驗最好，我想這也是前端的價值所在吧。
我所追求無它，只你會心一笑瞬間。