設計素養(yǎng)對前端工程師的重要性

在很久之前我就說過同樣的話，表達過我覺得做為前端工程師而言設計素養(yǎng)的重要性，今天我想聊天為什么我有這種觀點

泛化的設計

實際上生活中設計是中無處不在的，大到建筑工程、工業(yè)設計，小到網頁設計、產品設計。我認為設計的本質就是 理解你（或者你的用戶）內心想法的一個過程，在完成了一個物件的物理功能后，你需要考慮它的適用場景及多數用戶的實用需求

我在北京呆了很多年，你要問我對北京的印象是什么顏色，我會毫不猶豫的告訴你「藍色」。有的人會認為是霧霾的灰色、有的人會認為是天安門的紅色。為什么我的印象是藍色呢，因為在北京無論你去哪兒都會選擇公共交通，所有的交通標識牌都是藍背景加白前景色，環(huán)路上的路標、地鐵標、普通道路的路標，到處都會有藍色的標識牌。使用藍色的好處在于 標識性強，尤其對我這種視覺異常的人特別友好。但是卻缺乏美感，因為要照顧大多數人的體驗

我也常去西安，你要問我對西安的印象是什么顏色，我也會告訴你是「暗紅」。西安的地鐵標識牌就是這種暗紅，我也不太確定這種顏色準確的叫法，赤紅或者朱紅？總之這種顏色和西安這個城市的調性很搭。無論是古城門上的各種架梁、門柱、瓦石的著色，還是現代的地鐵標識顏色，到處都有暗紅色的設計。西安地鐵標的設計雖然說是和整個城市的氣質具有一致性，但是 識別性很差，尤其城市里面綠化比較好，樹木多的時候綠色和這種紅色標識交錯在一起是很難分辨的

從這個例子中我們可以了解到，其實設計并不是那種只存在于理論或者藝術世界里面的東西，大多數的設計都源于生活。都表達了人們對于生活的思考與理解

狹義的設計

狹義點講前端工程師（程序員）們的日常是程序設計或者軟件設計。有一個關于用戶體驗的真相是：大多數用戶當他們不喜歡你的產品時，他們會 直接離開并放棄。用戶的選擇是正向的，他會因為你的軟件好用選擇，但 并不一定會因為你的軟件不好而批評反饋。所以我一直認為很多所謂的為了提高用戶體驗的調查問卷并沒有什么作用。相反的很多反饋都是沒有經過深思熟慮，或者是很個人的需求，這反倒會影我們的判斷

所以說代碼設計的的好不好，交互是否流暢，體驗是否極致。這個門檻的最后一步就在前端

當然后端也很重要，后端的重要性是我們在這聊設計聊體驗的前提?！競}廩實而知禮節(jié)」，很多前端在知乎提問類似「Node.JS 和 Java 相比…」的話題的時候卻從來沒想過這個問題，不過這個話題就不細聊了

前端需要關注設計，原因有二：

一、離用戶更近。這個毫無疑問，前端在整個軟件的系統棧里面是最頂部一個元素，他們寫出來的代碼第一用戶是自己，一個功能好不好用前端會有第一知覺。同時這個也依賴于工程師對于設計體驗的素養(yǎng)。很多東西是沒法區(qū)分邏輯上的好壞，同時有些東西應該是不言而喻的：

頁面的鏈接到底應該在當前面頁打開還是新頁簽

這就是一個典型的沒法從邏輯上區(qū)分好壞的問題。當然所有頁面都新窗口打開肯定是不對的。我認為 base target=”_blank” 在任何時時候都不應該被使用。看看自己每天使用的瀏覽器 tab 頁的個數就明白了。實際使用的時候要根據用戶的場景、喜好、鏈接去向內容、技術實現等各方面因素綜合考慮，一刀切的做法絕對是錯誤的

彈出層、hover 提示 應該是盡量少的使用

這就是不言而喻的，因為在 PC 端用戶的鼠標是最常用的輸入設備。鼠標的 mouseover 事件會產生很多誤操作，浮層的顯示這會騷擾用戶的視覺。當然技術上我們可以通給 mouseover事件添加延遲的方式來避免誤操作的機率，但是我認為這是一種 打補丁的解決方法，因為當一個提示信息足夠重要的時候，任何延遲都是錯誤的，更何況打補丁還有副作用

最近剛好發(fā)現一個筆記類應用，初次使用的時候感覺真的非常棒。設計精美、交互流暢、動畫細膩，好的產品不就應該是這樣的么

motion.so-optmz

但是當你深入使用的時候你會發(fā)現這個頁面上充滿了各個的 hover 效果，提示信息、狀態(tài)切換等。它幾乎在所有的圖標上都加了 功能提示或快捷鍵的 hover 提示，這個在我看來就非常的騷擾用戶。就比如左側菜單的收起按鈕使用了左箭頭的圖標「＜」，這種圖標就是不言而喻的，不需要再用 tooltip 來提示

hovers

二、審美需求。這一點其實上是所有人都需要關注的，很多程序員在使用 macOS 一段時間后就再也沒法忍受 windows 的界面了。單從審美訴求這一項講，macOS 體現出來的簡潔、專注是 windows 系統沒有的。結合上面的問題可以思考下：為什么 macOS 系統的鼠標 hover 的交互很少？我覺得應該是操作系統給用戶帶來的那種穩(wěn)定、可靠的感覺。當你專注的做一件事情的時候最好不要有任何形式的打擾，像系統通知、氣泡提醒什么的應該完全被禁止

很多人會認為程序員不需要審美，因為他們實現功能就行了。事實上甚至很多程序員也可能是這么想的。但是他們并沒有意識到一點，即使是那種特別不關心審美的人也有基本審美的需求，或者說一個長像其丑無比的人也有基本審美的需求，愛美之心人皆有之。只是程序員這類群體寫代碼太久就會進入特別專注的狀態(tài)，只在乎代碼，忘了其它一些同樣有價值的東西

我想表達的意思并不是說這樣不好，而是我認為在專注技術的前提下了解一些設計方面的東西會讓我們理解別人（用戶）的想法，這其實也是一種與外界的溝通形式，也能彌補程序員天生的弱點

設計的規(guī)則

很多對設計一知半解的人會說一句別人經過實踐總結出來的真理：

Rules are meant to be broken — 規(guī)則就是用來被打破的

在《寫給大家看的設計書》中就講過這個問題，我是比較同意作者的觀點，即：打破規(guī)則的前提應該是你足夠了解規(guī)則是什么，意味著什么

同時書中開篇分享了另外一個觀點，我也很贊同：

當你能叫出一個東西的名字后，這個東西就無處不在了

這個估計很多人都會有這種體驗，某一天某個人說了一個你以前從來沒聽過的詞兒，然后你覺得這個詞很新鮮，接著在后來一段時間內這個詞就會不段的出現在你的周圍