Axure设计之下拉单选框教程(中继器)

在Axure RP中,使用中继器(Repeater)可以实现许多复杂而动态的用户界面组件,比如下拉单选框。本文将详细介绍如何通过中继器创建一个美观且功能丰富的下拉单选框。

一、案例预览

预览地址:https://1zvcwx.axshare.com

实现效果:1、下拉选项超过固定高度可滚动显示;2、选中状态时边框高亮,且选项实现鼠标悬停和选中时交互样式;3、下拉框箭头图标根据状态切换,选中后可删除已选项;

二、设计思路

1. 下拉选项

下拉选项为了后期方便修改和复用,使用中继器,由于数据可动态修改固定高度,使用动态面板。定义好中继器的数据结构,这通常包括几个关键的字段,option(选项文本)、selected(选中状态,0或1)

2. 选择框

选择框使用矩形;内部使用文本框作为提示和选项回显;右侧选择框图标使用动态面板,这里有三种状态(未点击时向下图标、选中时向上图标、以选时删除图标)

3、交互设置

需要设置选择框交互事件和中继器选项的交互事件。

三、重要步骤

1. 创建选择框

拖入一个矩形和文本框作为选择框容器,再拖入动态面板,额外增加两项面板状态作为图标动态切换设置。

2. 创建下拉选项弹窗

拖入一个矩形,并在内部创建一个动态面板作为下拉框的容器,动态面板内部创建中继器。中继器为每个数据项作为下拉选项的视觉表现。

3、设置中继器数据结构

在中继器的样式页面中,设置数据项为option、selected。这些字段将用于动态加载下拉单选框的选项和选中状态。

4、设置交互

设置选择框的交互,控制下拉选项弹窗,以及图标的渲染效果。

设置下拉选项中继器的交互及每项点击时的交互事件。

推荐Axure元件库、可视化大屏模版原型:

Axure高端交互元件库:助力产品与设计-CSDN博客

数据可视化Axure大屏原型制作分享-CSDN博客

关注下方,回复数字666获取元件库。

相关推荐
招风的黑耳21 小时前
我用Axure画了一个富文本编辑器,还带交互
axure·富文本编辑器
招风的黑耳21 小时前
【Axure元件分享】年份范围选择器
axure·年份选择器
结构化知识课堂2 天前
Axure疑难杂症:完美解决文本框读取、赋值、计数(玩转文本框)
axure·验证码·计数器·文本框·文本框赋值·文本框读取·文本框监控
结构化知识课堂3 天前
Axure项目实战:智慧运输平台后台管理端-母版、登录(文本框高级交互)
axure·母版设计·注册登录·垂直菜单·文本框高级交互
招风的黑耳3 天前
ElementUI元件库——提升Axure原型设计效率与质量
前端·elementui·axure
梓贤Vigo7 天前
【Axure高保真原型】纵向图片轮播
交互·产品经理·axure·原型
招风的黑耳7 天前
Axure设计之中继器表格——拖动列调整位置教程(中继器)
axure·动态表格·拖拽列
结构化知识课堂7 天前
Axure项目实战:智慧城市APP(四)医疗信息(动态面板、选中交互应用)
人工智能·智慧城市·交互·产品经理·axure·动态面板
结构化知识课堂7 天前
Axure项目实战:智慧城市APP(七)我的、消息(显示与隐藏交互)
智慧城市·axure·动态面板·显示与隐藏
结构化知识课堂7 天前
Axure项目实战:智慧城市APP(完整交互汇总版)
智慧城市·交互·axure·动态面板·选中效果