切图与标注

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

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

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

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

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

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

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

图标不建议做 Sprite 图,而是采用Web Font,推荐 Iconfontopen in new window

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

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

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


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


更新日志:

  • 2015-07-14

(本篇结束)

CC BY-NC-ND 4.0

Last Updated: 2021/7/10下午8:54:57
Contributors: xianghongai