这3个方法,让你的Axure 也能实现自动标注! - 优设网 - UISDC

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

2018/11/19 11986评论 6

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

一、浏览器扩展程序法

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

难度系数:★

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

步骤:

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

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

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

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

缺点:

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

扩展程序下载:

另外,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 页面。

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

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

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

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

查看效果。

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

缺点:

  • 由于 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>

保存后刷新浏览器即可。

优点:对带宽要求不高

缺点:

  • 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 的自动化尺寸标注还存在一些缺陷,需要在原型设计时随时注意。

参考资料:

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

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

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

「更多标注工具」

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.cvdgr.cn/axure-implements-automatic-annotation

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

转场动效 设计师 扁平化设计 交互设计师 优设专访 界面设计 优设大课堂 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 AI教程 设计理论 设计师专访 神器下载 字体下载 平面设计 设计趋势 psd下载 用户体验设计 海报设计 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里