axure 颜色变灰色_axure新手教程：原型中你所不知道的设计小技巧总结（1）

最近很多学习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。如下图所示：