设计师要懂的开发知识

设计师需要懂代码吗？好像并没有必要。但作为设计师了解一部分的前端知识，对于自身的设计流程改进和团队帮助都会大有裨益。

很多时候很多设计师并不了解前端知识，在满足需求进行设计的时候（低保真和高保真）很少有时候会思考到真正到开发层面上会有什么样的问题。我曾经和很多前端工程师交流过，他们合作过的很多设计师是不具备开发的思维的，一味的考虑页面的绚丽而从不在开放的层面上进行更多的思考。

在设计上很好做的一些小元素在实际的开发中往往会有比较麻烦的实现，这意味着开发团队不得不为了设计师所谓的交互or视觉需求（很多时候还不见得对整个产品有多么大的帮助，视觉糖等等）而花费更多的时间。在项目多排期紧的大环境下，很多设计师这样的做法还是有些欠考虑。

所以作为一名设计师，如果你比较了解前端的知识，你就会在一开始的设计就考虑开发团队的需要，慎用无意义的视觉糖设计，更好的帮助开发团队节约他们的开发成本。在说明需要掌握的前端知识前，设计师拥有开发的思维是非常重要的。

开发思维

开发思维，顾名思义，就是站在开发的角度来进行设计，这要求作为设计师更多的体谅开发团队进行设计（而不是要求你要有开发团队的脑回路和美感，你们也见到了很多开发工程师的美感简直是可怕）

1.设计组件化，复用性思维。

开发组件化在近来大行其道，因为本身拥有良好的适用型和封装性，非常多的前端框架（也包括其他语言的框架）都比较强调组建化的概念。很多开发工程师会不停的复用一些组建，或者对一些组建进行自我的修改以方便整个项目的需要，这样的好处是大大的减少了开发的时间，工程师并不需要花时间去造新轮子，做好拿来主义就可以了。

设计组件化的思维很类似，由于很多互联网产品比如移动端网页，比如APP我们经常会有很多类似的页面布局或者相联系的功能，当我们保持了设计元素组件化，对于开发团队会减少他们的理解成本和开发成本。

我们很多时候强调的设计规范实际上和这个思路有关系，但是设计组件化更多的是考虑到一些具体的控件比如按钮，卡片化设计，通知设计等等。在很多情况下为开发团队在不同的开发场景需要提供一种或者几种设计元素或者组建就可以解决很多设计开发沟通成本的问题。

2.位置和尺寸一样重要

我见过很多UI设计师的切图方式，很多图片的标注只是标注了主要元素的尺寸（长宽），而并没有为前端开发提供不同元素的位置（position）。而这样会给前端带来非常多的困扰，因为前端工程师并没有很准确的去预估两个不同的网页元素之间的距离应该是多少（毕竟前端工程师没有像素眼）。

由于在网页开发中的CSS盒子模型，很多APP或者网页设计中不同元素的距离，不同元素和画布的距离是通过CSS的代码控制的。举个例子：

由于中间的文字的css设定了相应的margin值，所以这段文字和另外两个段落会出现边距的效果，而这就是设计稿里面我们做出来的间距。

这是一个简化的版本,它代表了这个元素和周边的css位置。很多时候前端工程师的代码需要把他们写出来，这些元素才会形成和我们设计稿上一样的布局，而如果你没有给前端工程师很好的标注，他们就只能去自己测，会浪费掉很多的时间。

我建议大家可以去W3C School的网站上去跟着敲一遍，你就会对HTML和CSS的位置有一个大概的了解，也就会知道为什么我会强调位置和尺寸并重。

Sketch有一个插件叫Marketch，他会把你当前页面所有不同元素的主要CSS代码通过js生成为一个index的网页，开发想知道具体的位置和尺寸，只要上这个网页点击不同的元素就会知道了，Zeplin也可以做到这样的效果，但是他是收费的而且国内的网速并不给力。

Marketch

Zeplin

3.理解HTML，CSS，JS三个概念（重要！）

我们大部分见到的形形色色的网页都是通过这三种语言来进行编写的。知乎有位答主胖胖小对这三者的有一个很好的回答。

HTML

HTML是一种标记语言，他是大部分网页的骨架，所有的设计元素都会需要工程师写一些既定的代码来实现他们，比如说列表和表格，或者是其他的div元素。

这些元素可以嵌套其他的元素也可以被嵌套，你可以把它想像成一层一层的样子。

比如Material Design 热衷的卡片化设计，这个卡片化设计你可以把它想象成外面一个大盒子，里面上下两个小盒子，上面的盒子放图片，下面的盒子放文字。在未来的运营或迭代工作中，他们分管不同的内容，不会出现矛盾。

如图就是个典型的卡片化设计。

CSS

但是如果一个网页仅仅只有HTML是不能满足大部分用户的需要，因为一个纯粹的骨架实在是不够好看，我们需要让这个骨架有血肉，有皮肤才能不会让用户感到难受。

一个没有CSS代码帮助的网页大概是这样。

这是一个知乎的没有CSS帮助的网页，他显然就过于赤裸裸了，但是你会发现所有的相关网页活动（关注，点赞，链接跳转）都是可以实现的，他们只是不好看罢了。

CSS的主要作用就是对网页的美观进行优化，我们很多漂亮的设计实现，实际上是通过CSS来进行控制的，所以相关的代码我非常建议大家去了解一下。这会帮助你在设计的时候第一时间就会考虑到他的CSS代码会是怎么样的。

CSS是通过不同的选择器对HTML进行控制的，比如类选择器class。

Html <p class="text1">Capagemini is the best!</p> Css .text1{ font-size:16px; font-family:Georgia, Microsoft Yahei; color:#02abdf; }

由于类text1 通过css的代码控制了这段html代码的三个属性（参数） font-size,font-family和color（颜色），由于CSS代码的存在，浏览器在加载的时候会让这段html的文字出现了颜色和字体的变化。

至于这个类（class）叫text1，你不用过多的纠结，这只是给类起一个名字，让它更容易被记住和使用，如果你愿意你给这个控制文字的类起名叫“sadasdjaklsdjl1”也没人管你，但是和你一起工作的前端小伙伴可能会把你吊起来活活打死。

在任何一项代码中都会有定量和变量的思路，所有的变量都是可以进行自我命名的，而定量的大部分代码是相对比较固定的，我们通过很多固定的套路来使用这些代码背后隐藏的功能（如果仔细的来讲这些编程的理论和具体实现可能会花很大的篇幅，而我想你也不会有耐心去看）。

Javascript –Js

Js的全称是Javascript，它的历史我就不和大家赘述了，总之是个牛人用了十天就创造出来的语言。Javascipt里面有个Java，我们知道Java也是一个很著名的编程语言，那么这两者的关系是什么呢？

Java 和Javascript的关系就像雷锋和雷峰塔的关系，也像老婆和老婆饼的关系。怎么理解呢？说白了Java和JavaScript是两门不同的编程语言，他们没有任何的血缘关系。

HTML和CSS的搭配会创造出一个静态网页，但是静态网页的意义就是他真的就是一个安静的美男子或者美女子，他不会很主动的为用户作出很多交互的功能和后台信息的推送。

在技术日新月异的今天，通过不停的按F5来刷新的方式实在是让人难以接受，所以Js的出现很好的帮助网页解决了这些可交互需要的问题，他会帮助网页生成很多小动画，可交互型，弹出框，模态，警告，信息展示的效果。举个栗子：

Medium的网页会有通知的选项，大部分的社交类或者博客类的网页都会有这个功能，但是如果这是一个静态网页，用户需要了解他的新的信息，他需要通过这个icon跳转到一个新的页面上去，这样的做法的确不是很合适，我们对于这个通知的期望应该是类似于Facebook那样会有一个下拉的框里面包含了我们需要看的信息，这就足够了，如果进行额外的跳转就会产生坏的用户体验。

当你在Medium里点击这个icon的时候，他会出现一个下拉框如图

而这样的交互行为就是通过js来控制的。

很多时候大部分看来比较酷炫的网页效果都是可以通过js来实现的（通过操作DOM，DOM就不过多赘述，你大概知道就可以了），但是js的发展非常快，Javascript可以做到的东西就非常多了。Js是前端里面真正意义上的编程语言，它包含所有编程语言的大部分特性（变量，函数，字符串，运算等等），由于这样的特性它的创造力就可以更强，在短短几年出现了非常多的优秀的js开源代码和库来方便从业者进行使用。

另外的几个概念

HTML5

H5这个概念以讹传讹被大家当成了一种在微信广为流传的比较酷炫的移动端小页面。所以我猜HTML5的贡献者和从业开发人员在面临这样的尴尬境地，我猜他们的内心是这样的。

HTML5并不是一个技术，而是一个标准。标准是什么，就是一个代码编写的规范，因为HTML的代码最终是通过浏览器进行渲染，然后实现了网页。而之前的HTML4.01 标准由于有很多冗长的代码和缺乏对新内容的支持（音频，视频等）的原因，大家觉得这样不行，于是优秀的开发人员设定了一个新的标准，HTML5 对于很多新的元素提供了支持，在代码上进行了冗余的删改，但是这个标准依然在发展。

HTML5 对于很多元素的支持，让前端工程师可以做出一些很酷炫的那种移动端小页面（典型的比如网易天天做的那种微信疯狂转发的页面）。

HTML5的生成是可以通过一些三方软件（易企秀）通过拉拽生成，但是这样的页面容易受到限制，因为很多元素都已经被定死了，另外一种就是原生的自己写，所以这种所谓的H5开发和就是一个实际的网页开发，他们本质上并没有什么区别，也不是什么可以解决一切的黑科技。

具体场景的应用也需要去考虑，由于我们常说的H5很多是移动端的，有很多网页并不适合通过移动端来进行编写，比如网页后台，比如toB的产品，而最适合Html5开发的页面应该是小轻快的网页，有快速收集用户需要，信息的填表网页，有营销宣传的广告小网页，至于里面放多么刺激的视频和动感的音乐理论上并没有太多区别。

最后给大家看一下这名前端工程师的怨念，来自知乎答主王德福。

我也希望大家作为设计师，不要和那些搞营销的一样天天H5H5挂在嘴边，你会容易被前端工程师鄙视的。

CSS3

和HTML5 一样，CSS3也算是CSS的升级版本，它提供了更多的样式支持，比如阴影，比如圆角，比如帧动画，所以很多时候新的CSS3的一些代码所渲染出来的东西很像是js做的（他们会动）。

如果说CSS是皮肤血肉的话，那么CSS3就是更好看的皮囊了，大部分主流的浏览器对于CSS3都有很好的支持。

近

几年比较流行的一些设计由于CSS3的支持可以更好的变成酷炫的网页元素，比如在以前一个元素如果有阴影通过老的CSS写出来是很痛苦的。

移动端网页开发

移动端网页的应用非常多，移动端网页的好处显而易见，开发者只要做出一套网页基本可以应对不同的设备（iPhone和安卓手机等），开发团队不需要iOS开发人员和安卓开发人员了，而这种移动端网页的功能和效果往往并不差，这都帮助了移动端开发成为重要的网页开发需求点。

移动端网页开发理论上就是具有更好适配移动设备的网页开发，大部分代码和功能和传统的网页开发需要并没有什么不同。

移动端网页开发最主要的技术了解就是对于适配的思考，在实际开发中，依然会出现不同设备的适配问题，而且和系统版本，使用浏览器是有关的，出现各种各样的bug都是有可能的，作为设计师，我们在和开发沟通的时候要记下开发碰到的一些问题，在相关项目的未来开发有更好的改进。

移动端适配主要分为几种：

• Boostrap等前端框架
• Flexbox，Viewpoint的CSS支持
• Rem适配

使用Boostrap等响应式前端框架，Boostrap是Twitter团队开发的一个前端框架，他对与HTML CSS和JS进行了相应配套的支持，在实际开发上，开发团队只需要使用Boostrap的库，对内容和相关需要的CSS进行修改就可以快速完成一个响应式的网页了，减少了很多开发的时间。但是如果比较复杂的页面是不推荐团队使用Boostrap的。

Flexbox，和Viewpoint实际上都是CSS支持的功能，但是使用的相对来说还是比较少。

Rem适配是移动端网页常用的方式，rem的思路你可以把它想象成一个变量，前端开发规定rem=X值 那么在开发工作的时候很多字体和元素的长宽大小都可以通过几 rem来计算，这样在不同的分辨率下用这样的一个思路就不会出现多种适配的可能，只要用rem的思路来进行计算就可以了。举个例子：

h2{ font-size：24px； font-size:2.4rem /* 24/10=2.4 */ }

这个例子中1rem=10px，而像素在不同的分辨率和设备下往往代表了不同的长度。

理论上来讲，优秀的前端开发工程师都会对rem进行良好的适配，作为设计师，我们需要在开发之前就和工程师进行沟通，来划定你设计稿上的像素值（PX）究竟换算为多少rem，保持单位的统一，会帮助开发团队更好的进行工作。

总结

以上几点只是前端知识中比较基础的知识，前端技术也在日新月异的发展（比如近年比较火的Python，此处不再展开）。对于设计师来说要非常精通这些开发技术还是比较困难的也没有必要。因此，个人认为设计师掌握了以上基础知识，且有一定的开发思维足够了。这样在做设计的时候就会考虑一定的技术实现性去选择最优的设计方案，而不会随意发挥。毕竟设计，不是艺术。

本文主要讲述设计师要了解的开发知识，后续还会有系列文章《设计师要具备的产品思维》，敬请期待。

原文作者：Karnaca，原文有修改