設(shè)計(jì)素養(yǎng)對(duì)前端工程師的重要性

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

泛化的設(shè)計(jì)

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

我在北京呆了很多年，你要問我對(duì)北京的印象是什么顏色，我會(huì)毫不猶豫的告訴你「藍(lán)色」。有的人會(huì)認(rèn)為是霧霾的灰色、有的人會(huì)認(rèn)為是天安門的紅色。為什么我的印象是藍(lán)色呢，因?yàn)樵诒本o論你去哪兒都會(huì)選擇公共交通，所有的交通標(biāo)識(shí)牌都是藍(lán)背景加白前景色，環(huán)路上的路標(biāo)、地鐵標(biāo)、普通道路的路標(biāo)，到處都會(huì)有藍(lán)色的標(biāo)識(shí)牌。使用藍(lán)色的好處在于 標(biāo)識(shí)性強(qiáng)，尤其對(duì)我這種視覺異常的人特別友好。但是卻缺乏美感，因?yàn)橐疹櫞蠖鄶?shù)人的體驗(yàn)

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

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

狹義的設(shè)計(jì)

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

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

當(dāng)然后端也很重要，后端的重要性是我們?cè)谶@聊設(shè)計(jì)聊體驗(yàn)的前提?！?jìng)}廩實(shí)而知禮節(jié)」，很多前端在知乎提問類似「Node.JS 和 Java 相比…」的話題的時(shí)候卻從來沒想過這個(gè)問題，不過這個(gè)話題就不細(xì)聊了

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

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

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

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

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

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

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

motion.so-optmz

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

hovers

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

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

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

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

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

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

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

同時(shí)書中開篇分享了另外一個(gè)觀點(diǎn)，我也很贊同：

當(dāng)你能叫出一個(gè)東西的名字后，這個(gè)東西就無處不在了

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