3个方法让你的Axure 也能实现自动标注谷歌浏览器扩展程序法-易看设计

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

一、浏览器扩展程序法

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

难度系数：一颗星

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

步骤：

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

图片[1]-3个方法让你的Axure 也能实现自动标注谷歌浏览器扩展程序法-易看设计 - 专业设计师平台

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

图片[2]-3个方法让你的Axure 也能实现自动标注谷歌浏览器扩展程序法-易看设计 - 专业设计师平台

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

图片[3]-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 页面。

图片[4]-3个方法让你的Axure 也能实现自动标注谷歌浏览器扩展程序法-易看设计 - 专业设计师平台

图片[5]-3个方法让你的Axure 也能实现自动标注谷歌浏览器扩展程序法-易看设计 - 专业设计师平台

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

图片[6]-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>

图片[7]-3个方法让你的Axure 也能实现自动标注谷歌浏览器扩展程序法-易看设计 - 专业设计师平台

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

查看效果。

图片[8]-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>

图片[9]-3个方法让你的Axure 也能实现自动标注谷歌浏览器扩展程序法-易看设计 - 专业设计师平台

保存后刷新浏览器即可。

优点：无需联网

缺点：

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