无废话网页重构系列——（4）切图与标注

本篇讲从设计稿中提取基础资源和信息：切图与标注。

合格的设计师，会使每一个元素组基于矩形层，造成一个个单元，并作好图层分类及命名，不在‘组’上使用蒙版，按照栅格化模块化设计，考虑各组件的复用性、扩展性和兼容性。

遇到不合格的设计师，那就把设计稿退回去，深刻交流沟通。

不建议设计师切图，由于要考虑到图形压缩格式、编码实现方式及图形替代方案。

不要直接用Adobe Photoshop/Fireworks划切片范围导出切片。

采用lower_snake_case命名规则修改要导出的组或图层名称，命名方式为模块/组件_用途_状态，毫不用表象的具体词汇，如大小尺寸、颜色、形状、新旧之类。推荐Renamy进行批量命名。

输出切片方式有不少，目前最新版CC很是便捷，选择要导出的组和图层，鼠标右键导出为，进行“缩放设置、文件格式、图像大小、画布大小”配置后导出便可，而且还能够复制图层CSS样式；也能够选择切图插件，如Cutterman。

图标不建议作 Sprite 图，而是采用Web Font，推荐Iconfont。

方便接下来编码读取页面元素信息（尺寸、文字、色彩、间距、位置、属性），强烈建议“标注”，推荐Parker、Ink、PxCook。

也能够使用Zeplin、蓝湖等在线产品设计协做平台，它们提供了标注切图、页面逻辑、批注讨论、原型演示、版本管理等丰富的功能。

各类列表配图、焦点轮播图、详情页用图、Banner，产品设计阶段应已按宽高比指定了多种尺寸，推荐用Placeholder、temp.im占位。

---

从设计稿提取了基础资源，接下来能够搭建工程目录了。

（本篇结束）

许可协议：自由转载-保持署名-非商业性使用-禁止演绎 (CC BY-NC-ND 4.0)

By 小可 from https://xinlu.ink/tech/pro-web-reconstruction-4-generate-assets.html