爲何前端工程師須要關注設計

在好久以前我就說過一樣的話，表達過我以爲作爲前端工程師而言設計素養的重要性，今天我想聊天爲何我有這種觀點

泛化的設計

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

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

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

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

狹義的設計

狹義點講前端工程師（程序員）們的平常是程序設計或者軟件設計。有一個關於用戶體驗的真相是：大多數用戶當他們不喜歡你的產品時，他們會 直接離開並放棄。用戶的選擇是正向的，他會由於你的軟件好用選擇，但 並不必定 會由於你的軟件很差而批評反饋。因此我一直認爲不少所謂的爲了提升用戶體驗的調查問卷並無什麼做用。相反的不少反饋都是沒有通過深思熟慮，或者是很我的的需求，這反倒會影咱們的判斷

因此說代碼設計的的好很差，交互是否流暢，體驗是否極致。這個門檻的最後一步就在前端

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

前端須要關注設計，緣由有二：

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

頁面的連接到底應該在當前面頁打開仍是新頁籤

這就是一個典型的無法從邏輯上區分好壞的問題。固然全部頁面都新窗口打開確定是不對的。我認爲 <base target="_blank"/> 在任什麼時候時候都不該該被使用。看看本身天天使用的瀏覽器 tab 頁的個數就明白了。實際使用的時候要根據用戶的場景、喜愛、連接去向內容、技術實現等各方面因素綜合考慮，一刀切 的作法絕對是錯誤的

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

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

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

可是當你深刻使用的時候你會發現這個頁面上充滿了各個的 hover 效果，提示信息、狀態切換等。它幾乎在全部的圖標上都加了 功能提示或快捷鍵的 hover 提示，這個在我看來就很是的騷擾用戶。就好比左側菜單的收起按鈕使用了左箭頭的圖標「＜」，這種圖標就是不言而喻的，不須要再用 tooltip 來提示

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

不少人會認爲程序員不須要審美，由於他們實現功能就好了。事實上甚至不少程序員也多是這麼想的。可是他們並無意識到一點，即便是那種特別不關心審美的人也有基本審美的需求，或者說一個長像其醜無比的人也有基本審美的需求，愛漂亮之心人皆有之。只是程序員這類羣體寫代碼過久就會進入特別專一的狀態，只在意代碼，忘了其它一些一樣有價值的東西

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

設計的規則

不少對設計只知其一;不知其二的人會說一句別人通過實踐總結出來的真理：

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

在《寫給你們看的設計書》中就講過這個問題，我是比較贊成做者的觀點，即：打破規則的前提應該是你足夠了解規則是什麼，意味着什麼

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

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

這個估計不少人都會有這種體驗，某一天某我的說了一個你之前歷來沒聽過的詞兒，而後你以爲這個詞很新鮮，接着在後來一段時間內這個詞就會不段的出如今你的周圍

做者的意思是，其實就是設計在不少人眼中遙不可及並非由於它很高深，而是你沒聽過、沒見過一些設計規則

後面的東西就不聊了，讀者有興趣能夠讀下原著，書中提到的幾個原則至今都在個人腦海裏：親密、對齊、重複、對比

封面圖：www.pexels.com/photo/black…

歡迎關注微信公衆號「肆零玖陸」— 以程序員的視角談天說地

公衆號原文：mp.weixin.qq.com/s/7ja6clYvd…

博客原文：keelii.com/2018/12/02/…