设计师需要了解的前端知识
工作中是不是经常被开发牵着走，如果是，那么欢迎你来看我这篇文章，
前言
在写这篇分享前，小复盘一下我工作的5年。
假如现在的我还在大学，你问我对自己将来的职业规划是什么？我一定思考都不思考的告诉你我想成为一名超级厉害的“前端工程师”。作为一名计算机专业的学生，又最喜欢实训周的网页课，对于自己当时能写出很精美的网页，感到相当有成就感（ps:虽然现在看来那都是什么玩意😂😂）
实习那年我找到一家年龄都是90后的创业公司，担任前端工程师，前端实习经历不到一年，由于公司业务需要一名UI设计师，公司规模比较小，作为公司的唯一的女生这个工作光荣的任务落在我的头上，对于当时的我来说，简直晴天霹雳，啥？？？满头问号，又不得不接下这个任务。
就这样我开始了UI设计师的职业生涯，起初很排斥做设计因为我连PS基础操作都不会，当慢慢开始熟悉起来后，发现自己爱上了这个职业，因为我的画面我做主，就是这么任性。
有大学计算机基础，又有不到一年的前端工作经验，让我能够在UI设计这条路上越走越远，每次在做设计图的时候，我都能知道前端的工作量是多少？可实现程度是什么样的？可以说和前端都是无任何沟通障碍。虽然5年来我一直在设计的学习道路上一路狂奔，但是很快乐、充实。
接下来就让我站在设计师的角度上分享一下，作为UI设计师我们都需要了解哪些前端知识？不足之处勿喷。
为什么要了解前端
背景
很多小伙伴有没有遇到下面场景，让你不知所措。
如果我们知道一些前端基础知识，是不是就可以预先帮我我们避免很多无用的工作，更好的帮我们站在开发和项目的角度上去思考我们的设计稿。
优点
设计师了解前端开发后优势主要有以下：
1、更精准在评估方案落地可行性；
2、制作动效可交互原型方面会更得心应手；
3、可以更高效的和开发沟通；
其实在 10 年前，网页设计师既需要设计也需要编写前端代码，但后来移动互联网让前端技术变复杂，岗位才发生了细分。如今技术发展又趋于稳定，已经有大厂在探索设计师和前端开发是否能重新合并为一个岗位。学会前端开发或许能让自己的职场走得更高更远。
网页分类
页面分类大概分为两大类：动态页面和静态页面
动态页面
动态页面就是，程序使用客户端和服务端，客户端依然使用浏览器（IE、FireFox等），通过网络(Network)连接到服务器上，使用HTTP协议发起请求（Request），所有请求都先经过一个WEB Server来处理。
通俗易懂的说：就是要有前后端配合，让页面数据都是动态，实时的，可交互的。其实我们在做设计图是不会关注动态页面，所以这里我就不做过多赘述，重点我会讲解静态页面部分。
静态页面
在网站设计中，由纯粹HTML、CSS、js构成的网页通常被称为“静态网页”，静态网页是标准的HTML文件，它的文件扩展名是.html，可以包含文本、图像、声音、FLASH动画、客户端脚本等。静态网页是网站建设的基础，早期的网站一般都是由静态网页制作的。
静态页面组成：
Html: 网站上所能看到的所有内容，包含文字、图片、视频等；
CSS: 网站上的颜色、间距等样式相关的范畴;
js: 全称（JavaScript）他的作用用最直观的语言描述，就是类似轮播、各类手势交互等；
html、css相对于0基础的同学来说比较容易理解，但是js就会相对来说难以理解，因为涉及到Dom的操作。对于静态页面大概划分了一下设计师所要花费的大概的时间比例。（仅供参考）
Html
HTML 是用来描述网页的一种语言。
指的是超文本标记语言 (Hyper Text Markup Language)、 不是一种编程语言，而是一种标记语言 (markup language)、标记语言是一套标记标签 (markup tag)，使用标记标签来描述网页。
Html标签
1、HTML 标签是由尖括号包围的关键词，比如 <html>
2、HTML 标签通常是成对出现的，比如 <b> 和 </b>
3、标签对中的第一个标签是开始标签，第二个标签是结束标签
4、开始和结束标签也被称为开放标签和闭合标签
举个🌰：
我们需要了解的标签
我们常常接触到的标签有布局、图像、列表、表格、表单、图形（cnavas）、媒体（视频）等。每一个拿出来，都可以说出很多内容，这里我们主要以了解为主，我就不一一都细细讲解（ps感兴趣的小伙伴可以给我留言、把你想要重点了解的模块私信给我）。
从难易程度上来说【布局】、【图像】标签是相对来说比较容易、独立，下面会对这两个标签做单独介绍。
布局标签：
就是我们经常看到的成对的<div></div>标签，作用是帮助把网站分成一个一个的模块，就像我们做设计时，画的一个个矩形模块，也可以做到模块嵌套模块。
图像标签：
基础图像标签格式：<img src="图像文件存储路径.jpg">，作用是在网页中插入图片。
举个🌰：
说明：假如红色框起来部分为一级，那绿色、蓝色框起来部分属于一级下的二级，黄色、玫红、紫色属于绿色模块的三级，他们都属于布局标签的嵌套，实现页面的布局。
Css
CSS 是一种描述 HTML 文档样式的语言、描述如何显示 HTML 元素。
CSS 指的是层叠样式表* (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素。
就像我们在做设计图时调整的字体、字号、描边、圆角、颜色、阴影等样式设置。
基础语法
CSS 规则集（rule-set）由选择器和声明块组成：
举个🌰：
选择器：指向您需要设置样式的 HTML 元素。
声明块：包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。
盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒子模型在我们做设计时可以说是无处不在也是一个非常重要的知识点，设计工具figma的自动布局，和这个原理很相似
js
js(JavaScript )是 web 开发人员必须学习的 3 门语言中的一门：
HTML 定义了网页的内容，CSS 描述了网页的布局、样式，JavaScript则 控制了网页的行为事件
事件
我们常常能够听到的事件有点击、鼠标划过，聚焦等等。实际上查看过文档的同学应该知道函数可以做到的事件至少80+，还有有很多是我们平常接触不到。
这里我用最常见的点击事件（click）举个🌰：
上面举的列子是最基本的js的应用方法，入门的时候才会这么写，真实网站都是单独会有一个js的文件，html只需要引用js文件即可，方便代码的复用和可维护性。
函数对于没有基础的设计师来说，不是很友善，因为他的语法比较难懂，如果真的很喜欢这个模块的建议还是系统学习比较好。
结语
站在设计师的角度上，对前端知识做了一个简单的分享，为了能够让更多小伙伴能够明白，比较难的语法没有展开给大家一一讲解。感兴趣的小伙伴可以给我留言重点想了解的内容，后面可能还会再给大家分享一下关于前端的小知识呦。
作者：翘舌音
本文由 @翘舌音 原创发布于站酷。未经许可，禁止转载。
