可能是因为自己一直对设计师有点小崇拜,年轻的时候也梦想过有一天能够拿着画笔做个艺术生(那时候还不知道有设计师),所以一直以来作为前端程序员和合作过的设计师交流比较顺畅。即便如此,相比于跟其他角色的合作,前端程序员跟设计师虽然在实现着同一个页面,也不得不承认两者思维方式还是有些差别。毕竟程序员脑子里都是逻辑,设计师眼里是美感。也就不怨总有设计师觉着开发不懂审美,开发抱怨设计的东西不考虑实现等等。

前端工程师除了能把设计师(更多是指交互设计师UX,我们这里只讨论Web开发)的设计实现成前端代码,前端工程师需不需要懂一点设计呢?还是“术业有专攻”,你画你的图,我写我的代码呢?

大部分人还是爱在两个领域中间画一条分界线,好比前后端分离以后,前端开发和后端开发最爱争论的就是“这个功能该前端实现还是后端实现?”。而且讨论的结果,往往不是看在哪里实现最优,而是哪里实现最快。在开发和设计中间被画了更深的一条分界线,是前端不懂设计,设计不懂实现!

先抛开问题,现实项目里,我合作过能够写前端代码的UX,也有前端工程师转行做设计的设计师。在我看来,这条线不是不可跨越的,前端开发可以懂一些设计,设计师可以了解一点实现。关键是该去了解什么?

从项目角度出发,前端开发和设计师需要有一套能够相互沟通的设计语言。

举个例子,在项目里经常有这样的对话:

开发: 这个按钮什么颜色?

设计师:蓝色

开发: 色号是多少?

设计师:#49A9EE

这样的对话写出来的代码一定是这样的

.button {
  background-color: #49A9EE;
}

再看一下通过设计语言交流的对话:

开发:这个按钮什么颜色?

设计师:品牌色

代码也相应的根据设计语言实现

.button {
  background-color: $brand-color;
}

前端开发和设计师之间有了设计语言,除了沟通的作用,也有优化项目开发和设计的作用。

从开发角度来看,设计语言就是前端开发的“伪代码”。项目代码逐步增多时,经常令前端开发头疼的是样式的调整。改一个按钮的色号可能意味着要把十几个CSS文件里的background-color: #49A9EE替换,而且还会经常因为隐藏在HTML里面Inline style或者JS里style的修改导致样式得不到统一。Bootstrap拯救了部分样式的统一和规范,但它仍不能够统一项目中全部的设计元素。而设计语言既是在这些UI样式库基础上的扩展,也是项目定制化和规范化的标准。利用设计语言,$brand-color 有了语意,也可以通过它的定义来规范项目中的样式。而这些定义和规范保证了代码的整洁和统一。

从设计角度来看,设计语言也是用户界面的设计规范。在一个网站中,即使开发不去按照设计语言实现,设计规范也是存在的,只是没有被highlight出来。下图是字体颜色在项目中的规范。对设计方面由于能力有限,就不多做介绍了。

Ant Design关于字体颜色的定义

目前比较成熟的关于设计语言的产品有谷歌的Material Design和蚂蚁金服的Ant Design 。Material Design和Ant Design不仅具有严格的设计规范,而且也给出了设计框架。需要指出,Bootstrap虽然使用广泛,但只能作为UI框架。绝大多数的网站有自己的设计风格,因此也应该有自己的设计语言。前端开发和设计师可以参考这些产品的设计规范,在项目中逐渐形成自己的设计语言和设计规范。依据项目中的经验,设计规范越早形成,越能够提高开发和设计效率和质量。一般项目中都会有自己的样式规范Style Guide来指导和统一设计和开发规范,越庞大的项目越是如此。

另外值得一提的是组件化。组件化在项目中不仅作为驱动开发的方式,也是组成设计语言和设计规范的元素。在实现样式规范Style Guide的过程中,组件化越成熟,可复用程度越高,设计语言也越丰富。因此,目前大部分项目,设计语言和样式规范是相辅相承的。