跳到主要内容

切图与标注

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

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

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

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

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

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

输出切片方式有很多,目前最新版CC非常便捷,选择要导出的组和图层,鼠标右键 导出为,进行“缩放设置、文件格式、图像大小、画布大小”配置后导出即可,并且还可以复制图层CSS样式;也可以选择切图插件,如 Cutterman

图标不建议做 Sprite 图,而是采用Web Font,推荐 Iconfont

方便接下来编码读取页面元素信息 (尺寸、文字、色彩、间距、位置、属性),强烈建议“标注”,推荐 ParkerInkPxCook

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

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


从设计稿提取了基础资源,接下来可以搭建工程目录了。


更新日志:

  • 2015-07-14