要說(shuō)程序員最開(kāi)心的事情是什么，不是錢(qián)多活少離家近，而是能用自己喜歡的技術(shù)，做一個(gè)排期不緊的舒坦項(xiàng)目。最近我就接手了這樣一個(gè)項(xiàng)目，使用了webpack+vue全家桶，以及其他一些業(yè)界前沿技術(shù)。不過(guò)今天不聊技術(shù)方面，先聊聊我對(duì)交互方面的一些思考。盡管它只是一個(gè)后臺(tái)系統(tǒng)。
說(shuō)到后臺(tái)系統(tǒng)（管理系統(tǒng)、ERP系統(tǒng)），我也做過(guò)很多了，無(wú)一不難看、難用。因?yàn)檫@類系統(tǒng)不是給終端用戶使用，對(duì)交互要求不高，也沒(méi)有UI設(shè)計(jì)，有時(shí)候連PM也沒(méi)有，全憑程序員胡搞。
我對(duì)后臺(tái)系統(tǒng)卻一直有一個(gè)心結(jié)，盡管它的用戶只是少數(shù)的群體，但是他們使用系統(tǒng)的時(shí)間卻很長(zhǎng)，有時(shí)候一天要用它工作五六個(gè)小時(shí)。而且系統(tǒng)的好用與否，直接影響工作效率，搞不好還影響心情，我可不想讓他們邊工作邊罵娘。所以這次趁時(shí)間充裕，我也嘗試用自己的理解來(lái)打磨這個(gè)后臺(tái)系統(tǒng)，盡量讓它友好些，溫暖些。
舒服的界面
后臺(tái)系統(tǒng)一般是選擇現(xiàn)有的UI框架，比如bootstrap。但用了框架并不意味著在界面上就萬(wàn)事大吉了。你還得有自己的思考，如何用這個(gè)工具把界面做的舒服。
讓界面舒服的核心因素是什么？配色？圖案？還是炫酷的動(dòng)畫(huà)效果？都不是。
長(zhǎng)時(shí)間以來(lái)，我都堅(jiān)持這個(gè)觀點(diǎn)，界面舒適的核心因素是——間距。沒(méi)錯(cuò)，就是這個(gè)不起眼的間距。不信你找一些案例來(lái)觀察下。一致、整齊、恰到好處的間距，總是讓界面看起來(lái)舒服。而那些難看的界面，問(wèn)題總是出在間距的失調(diào)上，有些甚至是元素緊貼沒(méi)有間距。
所以，除了bootstrap的柵格系統(tǒng)外，這次我定義了很多css類來(lái)進(jìn)行間距控制，把間距進(jìn)行分類，全局統(tǒng)一。
另外一個(gè)讓界面操作起來(lái)舒適的因素就是：統(tǒng)一有序。比如，所有的提交按鈕都應(yīng)該是一個(gè)顏色，所有表格中的操作按鈕都是一個(gè)樣式，所有的返回按鈕也是一個(gè)顏色。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無(wú)線安全]玩轉(zhuǎn)無(wú)線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問(wèn)題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來(lái)看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式