APP复选如何用Axure画出来

关注公众号学习移动端组件的原型画法,点击底部“阅读原文”学习视频教程。


咱们先看下Axure画出的原型效果,然后再对该组件进行详细讲解。

APP复选如何用Axure画出来

、组件介绍

名称
复选Checkbox(俗称多选)
作用
获取用户针对某个选择的多个结果
组成
多个复选项
位置
内容区
样式
根据需求而定
交互

①初始状态下可能没有选项被选中。

②点击未选中的选项,变成已选中状态。

③点击已选中的选项,变成未选中状态。

注意事项
同一时间可以有多个选项处于已选中状态。

、实际案例

APP复选如何用Axure画出来

、画出无交互原型

  1. 先画选项背景。从默认元件库拖动“矩形1”到工作区合适位置,尺寸修改为375*40。APP复选如何用Axure画出来

  2. 再画选项按钮。从默认元件库拖动“图片”到工作区合适位置,尺寸20*20,双击导入图片表示未选中状态。APP复选如何用Axure画出来

  3. 再画选项图标。从默认元件库拖动“图片”到工作区合适位置,尺寸30*30。APP复选如何用Axure画出来

  4. 再画选项名称。从默认元件库拖动“文本标签”到工作区合适位置,双击输入名称。APP复选如何用Axure画出来

  5. 同理画出其他的选项。APP复选如何用Axure画出来

  6. 点击“预览”按钮,然后在浏览器中查看原型效果。APP复选如何用Axure画出来

、画出有交互原型

  1. 点击第1个复选按钮,右键点击“交互样式”,切换到“选中”,勾选“图片”然后选择本地图片导入表示已选中状态(请提前从阿里巴巴矢量图标库网站搜索并下载)APP复选如何用Axure画出来

  2. 同时选择第1个选项的按钮&图标&名称,右键点击“组合”成为一个复选项。APP复选如何用Axure画出来

  3. 右侧边栏切换到“交互”,点击“新建交互”按钮,添加事件“单击时”,添加动作“设置选中”,目标选择“当前元件”,设置值为“切换”,点击“确定”按钮。APP复选如何用Axure画出来

  4. 同理对其他的复选项设置相应的交互事件,可以右键交互事件复制粘贴提高效率。APP复选如何用Axure画出来

  5. 点击“预览”按钮,然后在浏览器中查看原型效果。APP复选如何用Axure画出来

Tips:

  • 如果点击按钮切换选中状态,则无需设置组合,仅对按钮设置交互事件。

  • 如果需要默认选中部分选项。请点击相应的复选项,然后右键点击“选中”。

、课后作业

画出该组件的常见交互样式,添加到自己的Axure元件库,方便后续画移动端原型的时候使用。

APP复选如何用Axure画出来

转发到朋友圈,添加微信langzipm获取RP源文件。

点击阅读原文,学习“浪子教你画移动端组件”视频教程,系统化的学习常用移动端组件,从而掌握移动端原型的画法。

来源:浪子讲原型,本文观点不代表自营销立场,网址:https://www.zyxiao.com/p/59585

发表评论

登录后才能评论
侵权联系
返回顶部