要說程序員最開心的事情是什么，不是錢多活少離家近，而是能用自己喜歡的技術(shù)，做一個(gè)排期不緊的舒坦項(xiàng)目。最近我就接手了這樣一個(gè)項(xiàng)目，使用了webpack+vue全家桶，以及其他一些業(yè)界前沿技術(shù)。不過今天不聊技術(shù)方面，先聊聊我對交互方面的一些思考。盡管它只是一個(gè)后臺系統(tǒng)。
說到后臺系統(tǒng)（管理系統(tǒng)、ERP系統(tǒng)），我也做過很多了，無一不難看、難用。因?yàn)檫@類系統(tǒng)不是給終端用戶使用，對交互要求不高，也沒有UI設(shè)計(jì)，有時(shí)候連PM也沒有，全憑程序員胡搞。
我對后臺系統(tǒng)卻一直有一個(gè)心結(jié)，盡管它的用戶只是少數(shù)的群體，但是他們使用系統(tǒng)的時(shí)間卻很長，有時(shí)候一天要用它工作五六個(gè)小時(shí)。而且系統(tǒng)的好用與否，直接影響工作效率，搞不好還影響心情，我可不想讓他們邊工作邊罵娘。所以這次趁時(shí)間充裕，我也嘗試用自己的理解來打磨這個(gè)后臺系統(tǒng)，盡量讓它友好些，溫暖些。
舒服的界面
后臺系統(tǒng)一般是選擇現(xiàn)有的UI框架，比如bootstrap。但用了框架并不意味著在界面上就萬事大吉了。你還得有自己的思考，如何用這個(gè)工具把界面做的舒服。
讓界面舒服的核心因素是什么？配色？圖案？還是炫酷的動畫效果？都不是。
長時(shí)間以來，我都堅(jiān)持這個(gè)觀點(diǎn)，界面舒適的核心因素是——間距。沒錯，就是這個(gè)不起眼的間距。不信你找一些案例來觀察下。一致、整齊、恰到好處的間距，總是讓界面看起來舒服。而那些難看的界面，問題總是出在間距的失調(diào)上，有些甚至是元素緊貼沒有間距。
所以，除了bootstrap的柵格系統(tǒng)外，這次我定義了很多css類來進(jìn)行間距控制，把間距進(jìn)行分類，全局統(tǒng)一。
另外一個(gè)讓界面操作起來舒適的因素就是：統(tǒng)一有序。比如，所有的提交按鈕都應(yīng)該是一個(gè)顏色，所有表格中的操作按鈕都是一個(gè)樣式，所有的返回按鈕也是一個(gè)顏色。
還有一點(diǎn)重要的是，在一個(gè)視圖中，不要出現(xiàn)兩個(gè)以上的主要按鈕，否則用戶就會有一絲絲猶豫。所謂主要按鈕就是諸如表單提交等重要功能按鈕。bootstrap給按鈕起的primary這個(gè)名字很好，所以不要濫用primary按鈕。
界面布局的細(xì)節(jié)有很多，需要心思細(xì)膩一些來感受，原則就是讓用戶舒服。
監(jiān)聽窗口調(diào)整
bootstrap已經(jīng)做了自適應(yīng)，但還是那句老話，這并不代表萬事大吉。比如縱向滾動條會在不合適的時(shí)機(jī)出現(xiàn)，原因是你給主內(nèi)容區(qū)設(shè)置了最小高度。
為什么要自己監(jiān)聽窗口調(diào)整呢？這取決于后臺系統(tǒng)的性質(zhì)，它是人用來辦公的。既然是辦公，屏幕上就不會只開一個(gè)瀏覽器窗口。很多時(shí)候還得開word、excel等其他軟件。有些時(shí)候用戶肯定會把瀏覽器窗口縮小到一定尺寸來與其他窗口并列。這時(shí)候如果橫向滾動條、縱向滾動條都出來了，那簡直讓人抓狂。
所以要照顧到這個(gè)場景，在調(diào)整窗口的時(shí)候進(jìn)行監(jiān)聽，確保窗口縮小到一定閾值還是能夠無痛操作的。window.onresize嘛，幾行代碼就搞定了。
遮罩的取舍
我
