为什么前端工程师需要关注设计

在很久之前我就说过同样的话，表达过我觉得做为前端工程师而言设计素养的重要性，今天我想聊天为什么我有这种观点

泛化的设计

实际上生活中设计是中无处不在的，大到建筑工程、工业设计，小到网页设计、产品设计。我认为设计的本质就是 理解你（或者你的用户）内心想法的一个过程 ，在完成了一个物件的物理功能后，你需要考虑它的适用场景及多数用户的实用需求

我在北京呆了很多年，你要问我对北京的印象是什么颜色，我会毫不犹豫的告诉你「蓝色」。有的人会认为是雾霾的灰色、有的人会认为是天安门的红色。为什么我的印象是蓝色呢，因为在北京无论你去哪儿都会选择公共交通，所有的交通标识牌都是蓝背景加白前景色，环路上的路标、地铁标、普通道路的路标，到处都会有蓝色的标识牌。使用蓝色的好处在于 标识性强 ，尤其对我这种视觉异常的人特别友好。但是却缺乏美感，因为要照顾大多数人的体验

我也常去西安，你要问我对西安的印象是什么颜色，我也会告诉你是「暗红」。西安的地铁标识牌就是这种暗红，我也不太确定这种颜色准确的叫法，赤红或者朱红？总之这种颜色和西安这个城市的调性很搭。无论是古城门上的各种架梁、门柱、瓦石的着色，还是现代的地铁标识颜色，到处都有暗红色的设计。西安地铁标的设计虽然说是和整个城市的气质具有一致性，但是 识别性很差 ，尤其城市里面绿化比较好，树木多的时候绿色和这种红色标识交错在一起是很难分辨的

从这个例子中我们可以了解到，其实设计并不是那种只存在于理论或者艺术世界里面的东西，大多数的设计都源于生活。都表达了人们对于生活的思考与理解

狭义的设计

狭义点讲前端工程师（程序员）们的日常是程序设计或者软件设计。有一个关于用户体验的真相是：大多数用户当他们不喜欢你的产品时，他们会 直接离开并放弃 。用户的选择是正向的，他会因为你的软件好用选择，但  并不一定 会因为你的软件不好而批评反馈。所以我一直认为很多所谓的为了提高用户体验的调查问卷并没有什么作用。相反的很多反馈都是没有经过深思熟虑，或者是很个人的需求，这反倒会影我们的判断

所以说代码设计的的好不好，交互是否流畅，体验是否极致。这个门槛的最后一步就在前端

当然后端也很重要，后端的重要性是我们在这聊设计聊体验的前提。「仓廪实而知礼节」，很多前端在知乎提问类似「Node.JS 和 Java 相比…」的话题的时候却从来没想过这个问题，不过这个话题就不细聊了

前端需要关注设计，原因有二：

一、离用户更近。这个毫无疑问，前端在整个软件的系统栈里面是最顶部一个元素，他们写出来的代码第一用户是自己，一个功能好不好用前端会有第一知觉。同时这个也依赖于工程师对于设计体验的素养。很多东西是没法区分 逻辑上的好坏 ，同时有些东西应该是 不言而喻 的：

页面的链接到底应该在当前面页打开还是新页签

这就是一个典型的没法从逻辑上区分好坏的问题。当然所有页面都新窗口打开肯定是不对的。我认为 <base target="_blank"/> 在任何时时候都不应该被使用。看看自己每天使用的浏览器 tab 页的个数就明白了。实际使用的时候要根据用户的场景、喜好、链接去向内容、技术实现等各方面因素综合考虑，*一刀切* 的做法绝对是错误的

弹出层、hover 提示 应该是尽量少的使用

这就是不言而喻的，因为在 PC 端用户的鼠标是最常用的输入设备。鼠标的 mouseover 事件会产生很多误操作，浮层的显示这会骚扰用户的视觉。当然技术上我们可以通给 mouseover 事件添加延迟的方式来避免误操作的机率，但是我认为这是一种 *打补丁* 的解决方法，因为当一个提示信息足够重要的时候，任何延迟都是错误的，更何况打补丁还有副作用

最近刚好发现一个笔记类应用「www.notion.so」，初次使用的时候感觉真的非常棒。设计精美、交互流畅、动画细腻，好的产品不就应该是这样的么

但是当你深入使用的时候你会发现这个页面上充满了各个的 hover 效果，提示信息、状态切换等。它几乎在所有的图标上都加了 功能提示或快捷键的 hover 提示，这个在我看来就非常的骚扰用户。就比如左侧菜单的收起按钮使用了左箭头的图标「＜」，这种图标就是不言而喻的，不需要再用 tooltip 来提示

二、审美需求。这一点其实上是所有人都需要关注的，很多程序员在使用 macOS 一段时间后就再也没法忍受 windows 的界面了。单从审美诉求这一项讲，macOS 体现出来的简洁、专注是 windows 系统没有的。结合上面的问题可以思考下：*为什么 macOS 系统的鼠标 hover 的交互很少？*我觉得应该是操作系统给用户带来的那种稳定、可靠的感觉。当你专注的做一件事情的时候最好不要有任何形式的打扰，像系统通知、气泡提醒什么的应该完全被禁止

很多人会认为程序员不需要审美，因为他们实现功能就行了。事实上甚至很多程序员也可能是这么想的。但是他们并没有意识到一点，即使是那种特别不关心审美的人也有基本审美的需求，或者说一个长像其丑无比的人也有基本审美的需求，爱美之心人皆有之。只是程序员这类群体写代码太久就会进入特别专注的状态，只在乎代码，忘了其它一些同样有价值的东西

我想表达的意思并不是说这样不好，而是我认为在专注技术的前提下了解一些设计方面的东西会让我们理解别人（用户）的想法，这其实也是一种与外界的沟通形式，也能弥补程序员天生的弱点

设计的规则

很多对设计一知半解的人会说一句别人经过实践总结出来的真理：

Rules are meant to be broken — 规则就是用来被打破的

在《写给大家看的设计书》中就讲过这个问题，我是比较同意作者的观点，即：打破规则的前提应该是你足够了解规则是什么，意味着什么

同时书中开篇分享了另外一个观点，我也很赞同：

当你能叫出一个东西的名字后，这个东西就无处不在了

这个估计很多人都会有这种体验，某一天某个人说了一个你以前从来没听过的词儿，然后你觉得这个词很新鲜，接着在后来一段时间内这个词就会不段的出现在你的周围

作者的意思是，其实就是设计在很多人眼中遙不可及并不是因为它很高深，而是你没听过、没见过一些设计规则

后面的东西就不聊了，读者有兴趣可以读下原著，书中提到的几个原则至今都在我的脑海里：亲密、对齐、重复、对比

封面图： https://www.pexels.com/photo/black-pencils-and-design-word-6444/