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

泛化的設(shè)計

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

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

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

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

狹義的設(shè)計

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

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

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

前端需要關(guān)注設(shè)計，原因有二：

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

頁面的鏈接到底應(yīng)該在當前面頁打開還是新頁簽

這就是一個典型的沒法從邏輯上區(qū)分好壞的問題。當然所有頁面都新窗口打開肯定是不對的。我認為 base target=”_blank” 在任何時時候都不應(yīng)該被使用?？纯醋约好刻焓褂玫臑g覽器 tab 頁的個數(shù)就明白了。實際使用的時候要根據(jù)用戶的場景、喜好、鏈接去向內(nèi)容、技術(shù)實現(xiàn)等各方面因素綜合考慮，一刀切的做法絕對是錯誤的

彈出層、hover 提示 應(yīng)該是盡量少的使用

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

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

motion.so-optmz

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

hovers

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

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

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

設(shè)計的規(guī)則

很多對設(shè)計一知半解的人會說一句別人經(jīng)過實踐總結(jié)出來的真理：

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

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

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

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

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