Axure功能非常强大,即便是应对高保真原型图,复杂的交互也完全能够胜任,当然在画原型图时也不需要过多的纠结于交互的细节,保证内容和逻辑即可。
下面举例说一说Axure使用的一些技巧,都是在不断的使用过程中总结出来的。以下操作都是在Axure8.0中完成的。下文并不是关于动态面板、中继器的分享,而是基础却又很常用的小众经验技巧。
快速添加原型头像
使用PS制作好png格式的原型头像,复制到Axure这种方法是可以的,但是太耗时。下面介绍一种1秒制作的方法:
图像是可以有圆角的,如果圆角半径正好是图像的一半,生成的图像就是圆形。也就是说把正方形图片的圆角拖动到最大就能实现圆形头像了,超级简单吧。
快速复制样式
Axure其实也是有格式刷的,但是比起office要多出了2步,需要选择复制哪些样式和选中组件后确定应用样式。
有一个相对简单的样式复制方法,如两个不同颜色的文本一和文本二,分别为绿色和红色,且文本一为粗体了。选中文本一,在选择字体颜色工具,该工具的颜色就会自动变为绿色,再选择文本二就可以直接由红色设置为绿色。这种方法可以选择复制的样式种类,即挑选一部分样式复制。
手绘风格
Axure原型图有2种风格,分别是线框和手绘。在页面样式编辑器中可以选择启用手绘模式,在设置好草图力度,这个时候看到的原型就有手绘开通的风格了,当然了这个一般是不需要设置太大的,否则效果也不是很理想。
静态页面内容居中显示
Axure生成的原型图在浏览器默认是居左显示的,如果想要居中显示简单设置一下就可以了。将页面排列选项设置为居中,在浏览器中显示效果就是居中了,但是在Axure中显示还是不变的。
导出页面为图片
因为Axure生成的是静态页面,在不同浏览器中显示的效果不一定相同,如360浏览器中显示效果就相对较差,推荐使用火狐浏览器查看文件(谷歌浏览器因为一些大家都知道的原因是没有办法直接安装插件的)。
这个时候是可以导出某个页面或者全部页面为图片,然后查看就很方便了。如果是低保真没有交互的原型,图片拖入浏览器中可以保证没有任何的兼容性问题, 毕竟只是一个图片。
矢量图标
使用一些矢量图标可以快速地在原型上表现出功能,比如说wifi图标、微信图标。这些图标是专门绘制的,支持高比例的放大且可以自由填充颜色,能很大程度减轻PM的工作量。
快捷键
诸如Ctrl+C,Ctrl+V,Ctrl+S这样的快捷键就不需要再赘述了。这里重点说的是一个快捷键Ctrl+G,它的作用是将元素组合,使用频率非常高。比如在画一个后台列表页面,如果将一行数据复制多行且对齐,直接框选再复制拖动是可以的,比较浪费时间且不容易对齐。直接将内容组合之后再复制就相对简单一点。
其他的快捷键如Ctrl+减号、Ctrl+加号用来缩放,Ctrl+K用来锁定,每个人根据习惯自己选择使用就好。
万能组件
这里说的万能组件就是矩形,它可以帮我们实现绝大多数效果, 比如心形、箭头、对话气泡等效果。通过自定义形状还可以自由设置,制作更多其他的图形效果。
下面举例说明简单选项卡制作的流程:
(1)添加矩形,取消下边框显示;
(2)添加直线,对齐;
(3)添加文本。
这样一个简单的选项卡就制作好了。当然利用动态面板也是可以实现复杂的选项卡的,效果也比较好,如下图所示,这里就不做说明了。
工作画面快速移动
当画面很大时,比如高度有3000px,为了选取不同位置的组件,不得不使用垂直与水平滚动条来定位,操作起来也不方便。
其实有更方便的做法,按住键盘的空格键,此时鼠标光标会切换成手形,可以自由地拖动整个页面,任意滑动。这个操作不好截图,这里就不放图了。
类似的小技巧还有很多,掌握这些对于原型图的设计有很大帮助,包括适合自己的元件库。自己绘制了一套元件库,有兴趣的同学可以沟通交流下。