為什麼前端工程師需要關注設計

keelii發表於2019-02-26

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

泛化的設計

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

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

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

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

狹義的設計

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

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

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

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

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

頁面的連結到底應該在當前面頁開啟還是新頁籤

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

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

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

最近剛好發現一個筆記類應用「www.notion.so」，初次使用的時候感覺真的非常棒。設計精美、互動流暢、動畫細膩，好的產品不就應該是這樣的麼

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

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

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

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