美文网首页UI交互设计手册产品经理PM
高效技能!如何对设计稿进行标注说明

高效技能!如何对设计稿进行标注说明

作者: 吕杰爵 | 来源:发表于2015-11-08 10:29 被阅读825次

从事互联网工作的同学们,平时或多或少都会有标注图片的需求。一般情况下,我们会用QQ截图进行标注。但对于图片数量、图片尺寸较大的项目,QQ截图并不能符合我们的要求。像产品原型、UI设计稿、广告图,往往文件较多,需要标注的除了箭头、文字之外,往往还要对设计稿添加尺寸、色值标注。在正式邮件中使用QQ截图进行标注也会显得不够专业。

我们需要高效、专业的设计稿标注方式。

在网上找到很多相关软件,诸如 PxCook、Dorado 等,各有优缺点。最终我选择了 Markman 马克鳗 搭配 Photoshop批处理 完成这个任务。

选择 Markman 马克鳗 的原因,主要因为它能够进行文字标注,箭头带 45° 倾角,在文字较多的情况下不容易重叠。而 PxCook 的标注线只能是垂直或水平的直线,Dorado 则不支持文字标注。

Markman 马克鳗 ¥60 一年,不过也可以免费使用,但部分功能不支持。 它可以直接打开 PSD 文件,当然 PNG、JPEG 文件的支持也不在话下。Markman 马克鳗 收费版还支持多次修改调整标记文件(会生成相应的标注文件)。马克鳗还有一些其他特点,比如设计稿自动刷新、支持 Retina@2x 图片标注、标注样式自定义等。

但在使用过程中发现一个问题,在给尺寸较小的图片(手机截图)进行标注时,不能把过多的标注信息放在图片内容中,否则会覆盖掉图片内容,能添加的标注信息区域也极其有限。这时候我们就要调整图片的画布大小。

如果这种小尺寸图片较多,我们需要对图片的画布进行批处理。前文提到使用 Photoshop批处理 完成尺寸调整。下面说一下具体的操作步骤:

1.Alt+F9 打开 Photoshop 的动作窗口,点击窗口下方的“创建新动作”按钮,在“新建动作”按钮中填写相关信息,并点击“记录”,这时候动作窗口下方的小红点变成红色,表示开始录制动作。

2.手动打开一张图片,Alt+Ctrl+C 打开画布大小调整窗口,调整定位和宽度完成画布大小调整。Ctrl+S保存图片,Ctrl+W关闭当前图片。然后点击动作窗口中的“停止播放/记录”按钮,动作录制就完成了。


3.最后,依次点击“文件 - 自动 - 批处理”,在打开的批处理窗口中进行如下操作。点击“确定”后,将自动批量进行文件画布调整。


稍等片刻,所有图片右侧将增加空白区域。这时候,再使用 Markman 马克鳗 在空白区域进行标注说明即可。

个人觉得,标注软件应该加入调整画布大小功能,但试过的几个软件都没有发现这一重要功能。如果你有找到比这更高效的方式,欢迎在评论中告知。


相关文章

  • 高效技能!如何对设计稿进行标注说明

    从事互联网工作的同学们,平时或多或少都会有标注图片的需求。一般情况下,我们会用QQ截图进行标注。但对于图片数量、图...

  • Sketch设计稿的标注

    标注目的 通过对设计稿的标注,让开发同事很清楚的知道设计稿中每个元素的属性,确保按设计规范实现。 标注内容 一、尺...

  • Mac电脑 MarkMan软件?如何拾取颜色?

    一、 MarkMan用途 是一款Mac平台上高效的标注工具,MarkMan以用于设计稿的标注与测量,极大节省设计师...

  • markman 前端页面标注工具

    一、Markman介绍 Markman 是一款高效的设计稿标注、测量工具,是一款既有爱又给力的长度标注神器!设计师...

  • 好用的工具

    markman【我的Android进阶之旅】 高效的设计稿标注及测量工具Markman介绍https://gith...

  • 电脑软件

    1. limitPNG 图片压缩 2. markman 高效的设计稿标注、测量工具 3. iSparta Webp...

  • 产品开发流程

    产品经理:项目需求说明 UI设计师:产品结构图+原型图+交互设计说明+页面流程图;psd效果图;标注稿+psd+切...

  • Zeplin的使用

    Zeplin工具: Zeplin是一款标注工具 ,用于设计师和前端开发的桥梁,设计稿在工具上可以自动换算,提高效率...

  • APP规范标注稿的相关

    【系列文章】 盒饭君带你一稿设计适配双端 (375的标注,讲得同样很清晰) 到底用pt还是px标注呢? 对设计图做...

  • iOS字体字号对应的设计ps PX字号

    在做项目时,会遇到设计师给的设计稿标注字体大小是用px标注的情况。为了方便快速查询到设计稿的字体大小对应iOS端字...

网友评论

  • 宁静的夜:试试“白板”这款应用呢
    吕杰爵:@crazygit 挺好的一个工具,但是要注册才能一起标记。

本文标题:高效技能!如何对设计稿进行标注说明

本文链接:https://www.haomeiwen.com/subject/cjechttx.html