什么样的计划标注稿更易于前端完成？
在上一篇文章中小白以前解说了笔墨标注，具体见什么样的计划标注稿更易于前端完成？-（笔墨篇）。
以下内容针关于web计划的标注基本知识，前端专业人士与计划妙手可忽略此文。
一、关于图片
在网页计划中稀有的有图标、不端正图形、图片、GIF动图。
1.格式
在网页计划中，图标与不端正图形通常用png格式，图片通常用jpg格式。以下是种种格式的特性分析：
图片来自网络
2.控制图片的体积
关于软件而言，图片越多，体积越大，约莫就会形成多次网络哀求、占用较大的宽带资源与数据空间。关于用户来讲，约莫会分明感知到图片加载的等候历程，我们必要在图片质量与体积之间寻觅均衡点，尤其是区分率较高、颜色较为丰厚的高质量拍照素材，我们在导出成web可用的素材时应该在图片的精密度不低落的条件下变小图片体积。但是即使怎样优化，我们也难以意料种种网络要素，以是通常我们除了提供图片素材本身，也会提供加载形态时的计划。除此，存放在办事器里的图片也约莫被删除、大概找不到。总之，我们要思索图片加载失败大概丧失的计划。
举个例子，我们在淘宝网站中看到的banner图，如下，像素尺寸1130×500，实践的文件轻重仅有几十KB。假如你的网站图片素材较多，请一定别忘了紧缩体积这件事。
3.变小图片的使用
假如前端可以用代码完成的简便几多图形，圆角、徐徐、暗影等。我们就无需提供图片素材了，除非完成出来的后果丑爆了、十分影响用户体验。举个例子，前端css样式里有跟photoshop对应的投影后果、如投影颜色、不纯透度、投影角度、投影的偏移轻重、投影的含糊轻重等（请注意就不要使用种种图层叠加后果了哦，不然前端依照你的标注完成显现的投影后果跟预期偏差很大哦），有责任心的前端小伙伴一定能完成寻常的投影需求。
除此，同一图标素材的不同形态：默许、悬停、按下（网页通常不必要按下后果）、禁用，我们往常必要提供4张素材。但是，经过纯透度（opacity）（请注意photoshop图层里后果里的是不纯透度值，发起标注的时分转换成纯透度值哦，）的处理，且在不影响用户体验和计划的目标情况下，我们便可以只使用一张图片就能搞定控件的多种形态，从而变小图片的使用和网络哀求。
将网页中的图标与图形整合在一张图片文件中（俗称雪碧图），前端小伙伴会定位到对应的地点上。如此做的利益是变小了网页的http的哀求次数，也变小了图片的总体积（单独一张雪碧图比很多张小图的总轻重还要小，低落了办事器存储压力）。直看法说，假如每张图单独提供，你约莫会发觉图片显现的比笔墨晚一些，会不那么流利（一闪一下，如此做法的网页很多，各位可以自行去察看）。如此做的缺陷是假如图片有窜改，计划师必要花精力更新、维护好图片文件哦。
为了便利前端的小伙伴精准定位，我们必要把小图片排划一了，并标注出图片之间的间距。假如网站触及到的图标与图形比力多，可以依照内容大概交互模块拆分为几张图。各位看下网易云音乐里的素材。
来自网易云音乐
来自网易云音乐
4.图标字体iconfont与SVG格式图标
如今较为盛行的办法是使用图标字体化iconfont，望文生义，就是把图标处理成字体来表如今屏幕上。使用字体图标可以不受屏幕区分率的限定，由于前端可以控制、调停图标的轻重、颜色和更多的样式后果，并且不会变含糊哦。以是很多网页开发都在实验这种办法了。
那计划师怎样制造字体文件呢？起首用AI制造矢量图标（直接黑或白单色就可以啦），做好后另存为SVG格式（一种图标字体文件啦），SVG格式可以使用欣赏器掀开预览后果；然后掀开制造图标字体网站 https://icomoon.io/，导入本人SVG文件，就能天生一个字体文件紧缩包，把这个包包丢给前端就可以了。
给各位百度了一个该网站天生图标字体的教程。
固然icomoon这个网站还可以找到一些无偿可供使用的SVG图标，除此，各位也可以使用阿里的iconfont网站上传维护本人的SVG图标。
但是iconfont有几个缺陷：
- 跟笔墨一样，只能支持单色哦。
- 字体文件体积较大，影响页面的加载速率，尤其是包含数百图标的字体，却使用了此中几个，岂不是很糜费？
- 既然是字体文件，不同欣赏器渲染出来的后果就会有差别，说白了，样式可调停的空间越大，就越难控制最初体现出来的后果。相反欣赏器也会将其视为字体举行抗锯齿处理，偶尔后果并没有想象中的那么明晰锐利（相对与纯图片后果照旧有上风的）。
那既然图标字体有这么多的成绩，那么为什么不直接使用SVG格式呢？毕竟图标字体也是经过SVG封装构成的，如此我们就可以制止字体带来的一些缺陷，同时可以保存矢量图形的优点。关于前端来讲，可以直接调用SVG格式的图片，跟调用png、jpg图片一样的。既然只是提供SVG格式，那么在AI中制造图标时分，可以多实验几种颜色了。今后提供一张SVG图片，就可以实用在不同尺寸必要的场合。 怎样去发觉网页中图标对否使用了SVG格式呢？你可以右击图标，点击“查察元素”。假如看不懂，最笨最直接的办法就是用力的扩大，看看有没有产生含糊。
以是呢，照旧要依据具体情况接纳具体的战略的，比如淘宝网站里很多单色图标都是使用图标字体完成的。
二、怎样标注
1.图标与图形
（1）不端正图形的标注
前端能写出来的图形，我们直接标注尺寸就行，假如是不端正图形，我们必要把不端正的局部切图提需求前端。假如端正局部的图形尺寸是随内容扩展的，那我们还要分析端正。举个例子，如下
（2）图标与笔墨组合的标注
图标与笔墨的组合通常是标题大概按钮。必要标注出图标与笔墨的间据，图标与其他盒子的间距。假如图标充任了背景，尽力提供与地点盒子一样的尺寸，变小前端不休位移对地点的事情。
2.图片素材
（1）安稳尺寸的图片标注
比力常规，直接标注出长与宽，与其他盒子的间距即可。
（2）必要缩放、裁切的图片分析
在做图片悬挂后果时，可以会略微的缩放图片的尺寸，在制造素材的时分我们必要提高最大尺寸的那张图，然后必要标注出别的一张图的缩放比例。如图：
（3）背景图片
在网页计划中较为盛行的是接纳背景大图，直接铺满的那种。假如是可拼接的图形还好，你只需提供一个单位的素材即可。假如是高品格素材，如上文所述，我们必要控制图片的体积轻重，依据不同的屏幕区分率提供不同尺寸的素材。大概控制图片体积的基本上，直接提供一张1920px宽度的背景图片。比如唯品会页面的banner图片处理，当屏幕区分率变小时，背景图片边上的局部就被裁切。
底下是淘宝一网店首页banner图，当屏幕区分率变小时，背景图片长宽会等比例变小。
你以前看完了吗？渴望对你或多或少有些协助。
作者：小白，微信群众号：小白的交互计划。
本文由 @小白 原创公布于各位都是产物司理。未经允许，克制转载。
