* 作者：阮臻
* 链接：https://rdc.hundsun.com/portal/article/701.html
*本文建议阅读6分钟，保持学习哟~
当一个项目产品需要制作时,大概流程可以分为3个阶段：原型需求分析期、切图期、动画交互期。这三个时期都需要会什么呢？看本文达妹为你解答。
随着前端技术的不断演变进化，很多东西名字没变，但本质早已今非昔比。“切图”就是其中之一吧。早期“切图”是非常形象的比喻，就是用PS把设计稿图切成一块一块，再用编辑器拼在一起，然后直接导出（那时候叫网页制作无可厚非）。
现在的“切图”是一种思路。看到设计稿，设计师脑子里会迅速形成“切图”思路，哪些平铺、哪些用纯css实现，哪些用png24，哪些合并, UI的层次是怎样的, 模板怎么组织...... 这是现在的“切图”方式，也是前端工程师必备的最基本能力。
当一个项目产品需要制作时,大概流程可以分为3个阶段：原型需求分析期、切图期、动画交互期。
01
原型需求分析期
在确定产品的功能后，项目组需要在设计前组织一次需求会议，为前端工程师、后端工程师、产品设计师做一下产品讲解， 然后各方各自评估下，提出疑难点。
举个例子
一个功能会涉及到类似淘宝类似的配送地址，要求可以作为搜索条件，这个就会涉及到前端的展示，储存（编辑时初始化）效果，和数据结构，而后端可能会涉及到数据库的储存方式，查询方式，从这个功能都可以提出自己的方案，最终合并为最终方案，要求解决前/后端问题，且要达到产品的需求，尽可能地降低开发成本，加快开发速度！
拿到确定好的效果图后，接下来就是要对整体的观察，确定大致的dom结构，原则上遵循从上到下，从左到右，从外到里的顺序。然后思考布局方式，主流方式有浮动（float）、定位（position）、flex。
其中flex是一个非常好的css3布局，但是在移动端很多浏览器不支持display: flex，仅支持display: -webkit-box，所以为了兼容写了三种语法：
? display: -webkit-box;
? display: -webkit-flex;
? display: flex;
就能保证兼容移动端各种主流浏览器，微信端和webview上完美运行。
02
切图期
一. css重置样式
切图前的准备工作，首先是切图前要熟悉公司的重置样式、公用样式、公用库等，因为这样可以使你少写代码。由于不同的浏览器对于html标签的解释各不相同，重置css可以使得html标签在各个浏览器下产生相同的表现效果，最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。
例如
对常用标签的样式进行重置：
▲重置样式按属性可以分为物理性css和功能性css。
物理性css包含了宽高、字体、颜色、边距等常规通用属性样式。
功能性css类似于js的模块化，可以多场景复用的样式。
例如
二. 命名书写规范
CSS书写规范使用CSS缩写属性：比如padding,margin,font等，按照上、右、下、左顺时针顺序书写。这样精简代码同时又能提高用户的阅读体验。
三.CSS命名规范
1. 语义化：“help-guest-regist” 就是 “帮助-顾客-注册”
*出现率高的做成基类+扩展类 ：class="m-list m-list-1” class="u-btn u-btn-hover”
*相同语义的不同类命名 —可直接加数字或字母区分 .m-list-1.m-list-2
2. 长名称或词组可以使用中横线来为选择器命名
3. 不建议使用“_”下划线来命名CSS选择器
*比如使用_tips的选择器命名，在IE6是无效的
*能良好区分Java变量命名(JS变量命名是用“_”)
四.切图质量标准
切图质量的好坏可以从如下几个方面来判断：
? 业务角度：制作完的HTML网页还原度高，甚至做到像素级还原；
? 技术角度：图片体积小（减少网络传输）、图片数量少（减少请求数量）；
? 配合角度：便于后续制作HTML，特别是制作自适应屏幕的网页。
一般来说，图片总是比字符形式的HTML/CSS体积大，因此总体原则是能用HTML/CSS实现的就不切图。
常见的比如：
1.纯色背景色：用CSS2的background-color来实现；
2.渐变背景色：用background-image配合CSS3的渐变属性（线性渐变linear-gradient、径向渐变radial-gradient）来实现；
3.边框颜色：用CSS2的border-color来实现，另外边框线型可以用border-style实现，如果边框颜色特别花哨甚至有精妙的图案，那就只能用图片加border-image来实现；
4.背景投影/阴影：用CSS3的box-shadow实现，可以实现不同样式颜色的阴影；
5.椭圆等不规则图形：这个难度相对较大，用CSS3的圆角（border-radius）、变换（transform）来实现，当然我个人对于一些图标喜欢用SVG来做，SVG的语法和CSS、HTML极其类似，入门学习（点击直达）https://w3school.com.cn/svg一小时左右即可。
五.图片格式的选择
常见的网络图片格式有：JPG/JPEG、GIF、PNG、SVG，对于这些图片格式的比较如下表（每种格式不考虑同种格式版本的差异）：
以下是自身从实践中总结的几个要点：
1.logo统一切成png透明度的。
2.一般情况下临时图、ad、banner图用jpg格式，色彩丰富的、大图切成jpg。
3.在保证图片的画质情况下，图片的大小越小越好。
4.颜色较少的都用png，用png8还是png24需看图片具体透明底情况，半透明的切成png24。
5.尺寸小的，色彩不丰富的和背景透明的切成gif或者png8的。
（IE6不支持PNG24透明度图片，需做兼容处理或切成PNG8）
6.PS中裁剪完成后ctrl+shift+alt+s 进行保存为web可用格式。
7.一般来说SVG格式的体积最小，但是IE仅IE9及以上原生支持。
上述原则有时候不能一概而论，经常需要把图片存成多种格式、多种颜色位数进行实际比较，在色彩和体积之间找到一个平衡点，其中每张图片尽量不要大于100kB。
六.css雪碧图
从网页体积来看，切图必然是切得小一些更好，比如能切1像素宽然后repeat的，就不要切出一长条。重复的图形能切一个循环，就不要切n个循环。图片越小，存储量越小，对网络的负担也相应会小。
但是如果一堆小图片在一个网页中加载，会产生大量的HTTP请求，从而拖慢网页加载速度，这时候就需要考虑把小图片合并为大图片，只进行一次加载，可以有效的减少http请求数量，加速内容显示，从而提高效率。
所谓css sprite，就是把网页中一些零星背景图片整合到一张图片文件中，再利用CSS的背景图片定位（background-position：x定位点 y定位点）到要显示的位置，因此也叫“图片拼合”技术。
如：.div{ background:url(abc.jpg) no-repeat -30px -50px;}。
具体怎么切，其实还需要看网页布局，因此切图和HTML静态页面制作不能割裂开来，否则切但的图和静态页面不在一个频道上，会导致返工。
在此推荐一款工具自动生成sprite：TexturePackerGUI，可以快速拼合出雪碧图，并且生成出对应css，使用非常方便。
03
动画交互期
高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，总结为以下几点：流量、功耗与流畅度。
在PC时代我们更多的是考虑体验上的流畅度，而在移动端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。
关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。JS动画是通过JS动态改写样式实现动画能力的一种方案，在PC端兼容低端浏览器中不失为一种推荐方案。
而在移动端，我们选择性能更优浏览器原生实现方案：CSS3动画。
▲CSS3中的三种动画:
1.tranform形变动画：2d转换。
2.transition缓动动画：property duration timing-function delay（css过渡，使变化以渐变形式呈现）。
3.animation逐帧动画：KeyframesName duration timing-function delay iteration-count direction play-state fill-mode（引用关键帧，并设计动画时间，@keyframes：css动画关键帧为动画设计过渡画面）。
要对一个dom进行2d转换，比如放大缩小、平移、旋转，就可以使用transform属性，transform可以设置的变形有：scale（放大缩小）,translate（平移）,rotate（旋转）,skew（斜切，即扭转）,matrix（以像素精度控制变形效果）。
例如
div { transform:scale(2,4) translate(20px,20px) rotate(30deg); }
要对一个变形进行过度渐变处理，就可以使用transition属性。transition属性声称任何css属性都可以过度处理（过度对象设置为all），但实际引用中需要测试。例如对上例的变形进行过度处理：div{ transition:transform 2s; }
▲transition的优点在于简单易用，但是它有几个很大的局限:
1.transition需要事件触发，所以没法在网页加载时自动发生。
2.transition是一次性的，不能重复发生，除非一再触发。
3.transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
4.一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
所以，CSS Animation就是为了解决这些问题而提出的，结合关键帧@keyframes和animation属性，
例如
div{ animation:myfirst 2s;}
@keyframes myfirst{
0%{background:red;}
50%{background:blue;}
100%{background:yellow;}
}
在此推荐一款强大的预设css3动画库：Animate.css。内置预设了丰富的css3动画效果，使用引入也非常方便，可以基本满足日常需求并且快速制作出理想的动效。
完成以上3个阶段的工作，整个切图的骨架基本思路就已经完成啦，剩下的就是在实践过程中不断的添砖加瓦，结合项目的具体需求，搭建起前端开发的坚实地基吧！如果你也想成为月入过万的web前端工程师，点击阅读原文赶快报名达内web前端免费训练营~
达内web前端免费训练营：专为零基础、跨行人员设置的HTML基础、CSS基础、Java基础，特别适合意图在互联网时代，通过掌握技术快速实现自己高薪梦想的学员，如果你也想加入高薪一族，点击“阅读原文”报名达内2017年4月份免费课程~，就有机会获得达内精品免费在线学习（TMOOC.CN）会员卡哦~名额有限，先报先得！给自己一个接触互联网高薪技术的机会。
达内上市集团
40万学员的共同选择
QQ咨询：2421473554
评论列表