最近很多同学在问交互原型里里的标注怎么做的？
其实很多原型工具可以做到例如Axure、justinmind，但是做起来比较慢且不美观。有没有专业的工具呢？这不我们介绍几款常见的产品。
Specctr
首先是由 Onpixel 开发的 Specctr ，这是一个 Firework 的外挂套件、具有可沿续原本工作环境流程以及跨平台的优点，该程序提供试用以及 Lite 的免费版可以下载
Pxcook 像素大厨
像素大厨师我目前使用的标注工具，为啥选择这个工具呢，就是因为这个工具除了标注功能外，还多了一个 PSD 文件切图，也就是传说中的一键切图功能。只需要你的 PSD 文件是按照官方提供的要求，就可以快速切图。
切图教程
http://www.fancynode.com.cn/tutorial除了常规的标注功能外，像素大厨还有一些有特色的地方，比如 px 和 dp 单位的切换，标注的长度数值可以手动修改（设计稿偷懒神器，慎用）等。同样的像素大厨也是支持多次修改标注文件和实时刷新功能。切图功能能够方便的切出 Retina 双尺寸，需要切出的图层或者图层文件夹只需要加上「.jpg」或者「.png」即可。
Pxcook 像素大厨 http://www.fancynode.com.cn
功能
- 长度标注
- 矩形标注
- 颜色标注
- 文字说明标注
- PSD 文件切片
标你妹
MarkMan 马克鳗
马克鳗我是最早从它们免费 beta 版开始用的，一直用来做设计稿的标注说明非常方便。现在这个工具已经做的非常不错了，已经开始走收费路线了为 ￥60 一年，不过也可以免费使用（部分功能不支持）。
马克鳗支持直接打开 PSD 文件，当然 PNG、JPEG 文件的支持也不在话下，如果是收费版，马克鳗还支持多次修改调整标记文件（会生成相应的标注文件，请勿删除）。马克鳗还有一些其他特点，比如设计稿自动刷新、支持 Retina@2x 图片标注、标注样式自定义等。
MarkMan 马克鳗 http://www.getmarkman.com
功能
- 长度标注
- 坐标、矩形标注
- 颜色标注
- 文字说明标注
网页设计师与WEB前端之间的合作可以说是最常见的状况了，Photoshop、Illustrtor 以及 Flash 等可视化的设计工具与前端HTML有着不同的性质，网页设计师的工作是让网页看起来更美观、排版更协调等、因此利用这些工具方便快速地做视觉上的调整。而WEB前端则是必须设法将这些完成后的设计透过HTML实现出来。尤其在 Flash 日渐式微以及HTML5 蓬勃发展的现在越来越常遇到。
因此，网页设计师最好能在制作完排版设计后，为图像做清楚的标注，让接手的WEB前端更快的进入制作状况，常见需要标示的状况如下所示：
- 预备使用HTML语言制作的按钮等互动组件的色彩、尺寸以及细节等
- 版面上各组件彼此间的距离等
- 其他常见必须标示的环节
因此这张标示图差不多会长这样 (示意)：
但有时候太多信息在画面上也容易造成阅读跟制作上的困扰，因此注意以下几点，会让你的信息传递更明确：
- 将同种类信息摆放在一起、并整齐排列，让人一目了然
- 标注色彩清晰、勿使用会与背景难以分辨的色彩
- 标注与图像本身间预留适当间隔，以不扰乱图像本身为原则
- 切勿重复标注
虽然清楚的标示可以免去很多沟通上的困扰，但是要 Photoshop 跟 Illustrator 中加入这些标示还是个可怕的噩梦，尤其是遇到重复修改的状况时，这件工作真的会让人受不了。其实除了在这些常用绘图软件土法炼钢绘制这些标示图以外，有许 多软件开发者开发了许多好用的小工具，节省大家浪费花费的时间与精力。
MarkMan（马克鳗），使用 Adobe AIR 所开发，因此也有着跨平台的特性，虽然是简体中文，但是所有的按钮都经过图形可视化，接口也相当精简明确，并不会造成使用上的困扰。
原创文章，作者：ioued，如若转载，请注明出处：https://www.iamue.com/13899/
