Axure设计：自定义样式的复选框

自定义“复选框”样式设计步骤

Axure自带的复选框组件虽然功能简单，但外观平庸。在完成了对“单选按钮”的自定义设计后，我们可以仿制一款更具个性化的“复选框”样式，并分享给大家。以下是设计步骤：

1. 新建两个矩形，分别命名为“矩形A”和“矩形B”。

2. 设置“矩形A”：

- 尺寸大小为90*30；

- 边框颜色：CCCCCC；

- 圆角半径：5；

- 选中时，边框颜色：5FB878。

3. 设置“矩形B”：

- 尺寸大小为60*30；

- 边框颜色：CCCCCC；

- 填充色：CCCCCC；

- 字体颜色：FFFFFF；

- 圆角半径：5（仅左上角和左下角）；

- 选中时，边框颜色：5FB878；

- 选中时，填充色：5FB878；

- 命名为：label4。

4. 另外新建一个“勾选”样式的图标，设置如下：

- 尺寸为12*10；

- 填充色：CCCCCC；

- 隐藏；

- 选中时，填充色：5FB878；

- 命名为：tick。

5. 按照布局方式将“矩形”和“图标”放置在一起，并组合成一个整体，命名为“option”。

交互动作设置

针对“组合：option”，我们需要设置交互动作来增强用户体验：

1. “组合：option”的“鼠标移入时”交互：

- 判定条件：当“矩形：label”不是“选中”状态时；

- 动作：显示“图形：tick”，动画无，弹出效果。

2. “组合：option”的“鼠标单击时”交互：

- case1：

- 动作：设置“组合：option”的选中状态为“切换”方式，显示“图形：tick”。

- case2：

- 判定条件：当“矩形：label”不是“选中”状态时；

- 动作：触发“组合：option”的“鼠标移入时”动作。

以上交互设置看似简单，实际操作起来可能稍显繁琐，但这种细致的设计能够提升用户体验。如果本文对您有所帮助，请不妨投个票或点赞支持一下哦。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。