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