随着最近十年前端的飞速发展，前端技术已经成为互联网产品中举足轻重的技术。作为设计师，了解一部分的前端知识，对于自身的设计流程改进和团队帮助都会大有裨益。

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

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

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

开发思维

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

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

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

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

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

位置和尺寸一样重要

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

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

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

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

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

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

Marketch

Zeplin

理解HTML，CSS，JS

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

HTML

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

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

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

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

CSS

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

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

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

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

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

Html

Capagemini is the best!

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也是一个很著名的编程语言，那么这两者的关系是什么呢？

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事无巨细的代码量，他会增加开发的负担以及网页的效能。

所以使用Boostrap这样的库可以很快的做出一些前期的网页或者应用或者小网页，而不用去过多纠结适配的问题，因为他们把很多问题都解决了。但是如果比较复杂的页面是不推荐团队使用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，保持单位的统一，会帮助开发团队更好的进行工作。

以上的这几点只是前端知识中比较基础的知识，而日新月异的前端发展，每天都会大量更新出非常多的前端技术，框架中的新的轮子，对于设计师来说要保持学习还是相对来说比较困难的。因此，我个人认为设计师掌握了这些并且有一定的开发能力和思考就已经是比较优秀的设计师了，而很多UX设计师的硬性标准就是需要有这样开发思维和开发技术知识的储备，只有这样，UX才能真正成为团队中承上启下的粘合剂，进而推动整个团队而并不是一个简单的设计工具。

作者