本文转载,更多详细【请戳原文】

Axure是一个设计软件,我第一次用。功能跟sketch类似,有很多业内的设计模板可以拿来套用,对于软件设计是一大利器,入门者推荐。

今天这篇主要讲基于Axure设计出的原型如何查看标注。

设计好原型之后,Axure可以通过上传功能将你的原型上传到云端,通过密码查看的方式与其他人共享。但是共享出来的设计稿并不能查看标注,只能查看大概原型的样子。

做过软件的人都知道标注稿对于设计而言是很重要的环节,直接决定了软件能否正确还原成视觉稿的样子,所以标注是不可或缺的。

怎么让分享出来的Axure设计稿也拥有标注功能呢?

在线添加Axure插件法

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

1. 打开 AxShare 插件页面

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

2. 创建插件

在 PLUGINS 页面中,点击页面左上方的「NEW PLUGIN」按钮。

3. 编辑插件

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

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

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

4. 查看效果

优缺点

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

由于 Axure 会将部分元素例如圆形、多边形、线形作为图片展示而非使用 CSS,因此对于这些图形,标注工具只能读取其尺寸,无法读取颜色边框等细节信息。曲线救国的解决方法请看文末小贴士;

需要网速较快或科学上网,普通网速加载情况不理想,因为 Axure 服务器在国外,且国内的 Axure 托管平台都不支持插件功能。

当然除此之外还有其他方法可以实现标注稿,感兴趣可以继续探索原文:《这3个方法,让你的Axure 也能实现自动标注!》