赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
2.3K 0 0

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 也能实现自动标注!

这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压缩包。
  • 无法批量添加代码,页面较多时比较繁琐。

小贴士

由于 Axure 会将部分元素例如圆形、多边形、线形作为图片展示而非使用 CSS,因此对于这些图形,标注工具只能读取其尺寸,无法读取颜色边框等信息。下面介绍曲线救国的方法。

  • 圆形:以创建直径为10px的圆形为例,先创建一个边长为10px的正方形,给这个正方形设置5px圆角即可;
  • 线段:通过设置高度为1的矩形实现。

小结

  • 如果网速非常快/可科学上网则可使用方法2;
  • 如果无法访问外网或网速比较普通,则可使用方法1
  • 法使 Chrome/QQ浏览,则使法3;
  • 目前 Axure 的自动化尺寸标注还存在一些缺陷,需要在原型设计时随时注意。

参考资:

[1] srm985.axure-redline-tool.[EB/OL].github, 2018-06-04 [2018-07-09]. https://github.com/srm985/axure-redline-tool

[2] Sean McQuay. [EB/OL].Sean McQuay, [2018-07-09].https://www.seanmcquay.com/index.htm

欢迎关注作者的微信公众号:「无界社」

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

设计的路上,我们都在努力成为一名优秀的设计师,我们似乎都被类似「如何成为一名优秀设计师」的文章吸引,情不自禁地点击进...
原型设计
一般来说,文字的实际占位在页面中并不是紧贴文字可视边界,是有一定的额外边距的,所以对于标注稿中的文字部分来说,开发往...
4px网格设计
编者按:Nick Babich 这两年文章产量比以前低了不少,不过素质和出发点倒是一直非常发人深省。在文章结尾的 One More Thing ...
产品设计
Cezary Ołowski :如今各大公司在产品功能竞争上,比起之前口若悬河的宣传,现在更多的是将功能直接展示出来。相信你也有过这...
交互原型
编者按:完整的 UI 设计流程到底是怎样的?从需求到产品上线,要经历多少个阶段,每个阶段有哪些应该掌握的基础知识,本次优...
UI 设计
一个互联网产品从构思到落地,大致分为以下环节:发现商机 – 市场调研 – 头脑风暴 – 产品策划/功能设计 – 原型绘制 – 交互设...
切图工具
怎么样的原型图才算是专业的原型图呢?文章总结了一些经验,希望对你有所帮助。 本篇文章(原型上篇)重点内容: 清晰的...
交互设计
编者按:本文是一篇写给新手的科普指南,从切图的发展史到基础知识,以及常见的术语解释,都有详细的说明,非常适合刚入门的 ...
切图工具