最近很多学习axure的新手小伙伴常遇到一些难题,本教程将汇集出现频率最多的一些原型难题。
在绘制高保真原型图时,axure里面的单个元件有时无法满足我们的设计要求,需要借助不用元件间的配合来实现精美的交互效果。下面给大家分享原型实战中最常见到的几种案例:
案例一:登录页面圆角输入框的高亮效果,效果图如下:
1、问题分析:
账号和密码输入框的边框为圆角且边框色能变化,而axure 8 的文本输入框不支持圆角、边框和间距等样式。(axure 9版本已经支持这些样式,使用axure 9的小伙伴请忽略此案例)
2、解决办法:
使用同等大小的矩形和文本框结合的方法。将矩形放于底部,输入框放于上面并隐藏边框。如果想增加输入框的文本间距效果,可以缩短输入框的宽度。
3、交互分析:
鼠标未点击文本框时,矩形边框为灰色边框。
鼠标点击文本框时,矩形边框为蓝色边框,呈现选中的效果。
4、实现步骤:
选择【文本框】,增加【获取焦点时】的交互事件,设置【矩形背景框】为选中ture状态;同时,增加【失去焦点时】的交互事件,设置【矩形背景框】为取消选中false状态。
接下来,只要设置【矩形背景框】的选中交互样式即可,将边框颜色设置为【蓝色】。
案例二:侧导航的图标变化效果,效果图如下:
1、问题分析:
当侧导航的图标为图片形式时,没办法使用交互样式,鼠标移入和移出时无法变化颜色。
2、解决办法:
将图标转为动态面板,再增加状态state2,放入另一张图标。利用【动态面板】的状态切换实现变色效果。
3、交互分析:
鼠标移入【侧导航一】矩形时,矩形变为蓝色,且文字和图标都由黑色变为白色。
鼠标移出【侧导航一】矩形时,矩形变为灰色,且文字和图标都由白色变为黑色。
4、实现逻辑:
选择黑色【图标】,右键转为【动态面板】,增加状态state2,放入另一张白色图标。
选中【侧导航矩形】,设置交互样式,增加【鼠标悬停】和【选中】的样式,将填充色改为蓝色,文字改为白色。
接下来,再次选中【侧导航矩形1】,添加【鼠标移入时】的交互事件,勾选对应的【动态面板图标1】,选择其状态为:state2。再添加【鼠标移出时】交互事件,勾选对应的【动态面板图标1】,选择其状态为:state1。如下图所示: