这3个方法，让你的Axure 也能实现自动标注！

Axure 制作 toB类项目的 Web端原型比较常见，可以将原型做得非常系统、交互逻辑逼真，适用于大部分测试和演示等场景中。甚至很多设计师直接使用 Axure 制作高保真原型，对于这些设计师，尺寸标注成了一大难题。如今，主流的原型设计工具都标配了自动化尺寸标注功能，然而即使是最新发布的 Axure9 依旧没有这一功能。国内基本上没有 Axure 自动标注的研究分享，大部分设计师还在苦于手工标注尺寸，本文将介绍三种方法为设计师解放双手提供一些思路。

一、浏览器扩展程序法

适用范围：本地预览的HTLM文件

难度系数：★

简介：仅需下载浏览器扩展程序即可。

步骤：

扩展程序下载：以Chrome 为例，前往 Chrome 扩展程序，下载 Prism - Redline Tool。相似插件包括：Visual Inspector by CanvasFlip、CSS Peeper。

这3个方法，让你的Axure 也能实现自动标注！

设置扩展程序：前往安装的扩展程序，点击详细信息，打开「允许访问文件网址」的开关。

这3个方法，让你的Axure 也能实现自动标注！

查看标注：打开 Axure，将原型生成 HTML，浏览器打开需要查看标注的页面，切忌通过 index.html 打开页面（通过 index.html 打开的页面虽然可以查看目录索引，却不支持浏览器扩展程序查看标注）。

这3个方法，让你的Axure 也能实现自动标注！

优点：简单、方便。Visual Inspector by CanvasFlip、CSS Peeper 不仅支持查看标注还可查看并下载页面中的切图、生成调色板。

缺点：

通过 Axure 生成的 HTML文件中自动生成的四个文件（index.html、start_c_1.html、start_g_0.html、start.html）打开的页面扩展程序无法识别显示标注；
由于 Axure 会将部分元素例如圆形、多边形、线形作为图片展示而非使用 CSS，因此对于这些图形，标注工具只能读取其尺寸，无法读取颜色边框等细节信息。曲线救国的解决方法请看文末小贴士；
不支持在线版的 Axure原型。

扩展程序下载：

推荐官方下载。
Chrome插件网盘链接：https://pan.baidu.com/s/1EMbdw1w5ji49yMlvoLRiEA 提取码：t2kw。

另外，QQ浏览器也有同款扩展程序。

二、在线添加Axure插件法

适用范围：在线预览，外网访问。

难度系数：★★

简介：发明这款插件的作者是 Sean McQuay，现为芝加哥 Saggezza 公司的咨询师，从事用户体验、前端开发，领域包括电子商务、酒店、银行。即将上线的新功能：切图功能、生成调色板功能（这两个功能方法一中已经有了）。

首先看下 demo 效果：https://c2fm4c.axshare.com/#g=1&p=%E5%B0%BA%E5%AF%B8%E6%A0%87%E6%B3%A8demo 。

步骤：

打开 AxShare 插件页面：浏览器打开 www.share.axure.com ，登录后，在列表右上方的工具按钮下拉列表中选择「PLUGINS」，进入 PLUGINS 页面。

这3个方法，让你的Axure 也能实现自动标注！

创建插件：在 PLUGINS 页面中，点击页面左上方的「NEW PLUGIN」按钮。

这3个方法，让你的Axure 也能实现自动标注！

编辑插件：给插件命名，并在 Location 中选择「End of the Head」（大意是把插件代码放置在Head标签的末尾），将引号内这段代码复制到「Content」中点击保存。

<script src="https://cdn.jsdelivr.net/npm/axure-redline-tool@latest/web/axure-redline-plugin.js"></script>

这3个方法，让你的Axure 也能实现自动标注！

选择需要标注的页面，点击保存。

查看效果。

这3个方法，让你的Axure 也能实现自动标注！

优点：支持在线预览，便于前端同事更新原型。

缺点：

由于 Axure 会将部分元素例如圆形、多边形、线形作为图片展示而非使用 CSS，因此对于这些图形，标注工具只能读取其尺寸，无法读取颜色边框等细节信息。曲线救国的解决方法请看文末小贴士；
需要网速较快或科学上网，普通网速加载情况不理想，因为 Axure 服务器在国外，且国内的 Axure 托管平台都不支持插件功能。

三、本地插入代码法

适用范围：无法访问外网/网速慢/不能科学上网的情况，适合本地查看。

难度系数：★★★

简介：此方法是参考 Sean McQuay 的方法摸索出来的，可能需要一定的代码基础，如果理解困难的同学可请前端同事自行添加代码后查看标注。

步骤：

首先需要代码编辑器，Windows系统使用 Notepad ++即可，Mac系统推 TextWrangler。

使用代码编辑器打开需要标注的页面的 HTML文件。

在<head>标签的末尾插入以下代码，具体位置为上一个</script>之后，</head>之前，即下图中红框位置。

<script src="https://cdn.jsdelivr.net/npm/axure-redline-tool@latest/web/axure-redline-plugin.js"></script>

这3个方法，让你的Axure 也能实现自动标注！

保存后刷新浏览器即可。

优点：对带宽要求不高

缺点：

Axure 生成的 HTML文件中自动生成的四个文件（index.html、start_c_1.html、start_g_0.html、start.html）插件无法识别显示标注。
由于 Axure 会将部分元素例如圆形、多边形、线形作为图片展示而非使用 CSS，因此对于这些图形，标注工具只能读取其尺寸，无法读取颜色边框等细节信息。
更新不便：当原型更新时，前端同事需重新下载 HTML压缩包。
无法批量添加代码，页面较多时比较繁琐。