为何前端工程师须要关注设计

博客原文

在好久以前我就说过一样的话，表达过我以为作为前端工程师而言设计素养的重要性，今天我想聊天为何我有这种观点

泛化的设计

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

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

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

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

狭义的设计

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

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

固然后端也很重要，后端的重要性是咱们在这聊设计聊体验的前提。「仓廪实而知礼节」，不少前端在知乎提问相似「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 — 规则就是用来被打破的

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

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

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

这个估计不少人都会有这种体验，某一天某我的说了一个你之前历来没听过的词儿，而后你以为这个词很新鲜，接着在后来一段时间内这个词就会不段的出如今你的周围

做者的意思是，其实就是设计在不少人眼中遙不可及并非由于它很高深，而是你没听过、没见过一些设计规则

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

欢迎关注微信公众号「肆零玖陆」— 以程序员的视角谈天说地