当前位置: 首页 > article >正文

Axure设计之下拉多选框制作教程A(中继器)

如何使用Axure制作动态交互的下拉多选器组件?相信Web设计中多选器时长会在页面元素中被使用,产品原型制作为了更加流畅的说明需求,需要追求原型的高保真交互性,能让领导、客户还有开发人员清楚的知道功能,然而制作这样的原型并不简单,往往一个高保真可复用的组件需要花费很长的制作时间。本文将详细介绍如何通过Axure制作下拉多选器组件。

一、案例预览

预览地址:https://idn9x0.axshare.com

实现效果:

1、下拉选项超过固定高度可滚动显示;

2、选中状态时边框高亮,且选项实现鼠标悬停和选中时交互样式;

3、下拉框箭头图标根据状态切换,选中后可删除已选项;

4、选项选中后在选择框中显示选项标签;

5、每个选项标签的删除图标点击之后可取消选择。

二、设计思路

1. 选择框

选择框使用矩形;内部使用文本框作为提示;右侧使用向下箭头图标;选中选项回显使用中继器,每项可删除。

2. 下拉选项

下拉选项为了后期方便修改和复用,使用中继器;外层使用动态面板控制下拉框显示范围。定义好中继器的数据结构,这通常包括几个关键的字段,option(选项文本)、`checked`(选中状态,0-未选中,1-已选中)

3、交互设置

需要设置的交互有:选择框单击时、下拉选项中继器每项加载时、下拉选项单击时、选中选项中继器每项加载时、选中选项删除按钮单击时。

三、重要步骤

1. 创建选择框

拖入矩形和文本框作为选择框容器,箭头图标作为下拉标识。

2. 创建下拉选择弹框

拖入一个矩形,作为下拉选择弹框,可自行设置样式。

3、设置选择框和下拉选择弹框的交互

当选择框单击时设置下拉选择弹框显示,下拉标识旋转至向上角度。


当下拉选择弹框隐藏时设置,下拉标识旋转至向下角度。

4、创建下拉选项中继器

拖入一个中继器,定义中继器列“option”、“checked”,并添加一些选项数据。

5、设置下拉选项中继器的交互

设置中继器每项加载时交互,这里主要是控制选项的选中效果。

6、创建回显已选项中继器

可以直接复制下拉选项中继器,改变布局方式为水平。

7、设置回显已选项中继器的交互

设置中继器每项加载时交互,这里主要是已选项的显示以及矩形的动态宽度等。


点击选项删除图标时,改变两个中继器的数据列“checked”值的改变。

8、设置下拉选项中继器的选项单击时交互

当下拉选项点击时,设置两个中继器的数据列“checked”值的改变。

友情提示:该组件已上传CSDN,有需要可查看文章头部资源地址下载。

 --- End·往期推荐---

Axure移动端高保真动态交互元件库:加速原型设计的全能工具箱-CSDN博客

数据可视化大屏产品设计方案(附Axure源文件预览)-CSDN博客

智慧水务:解锁供水行业的未来密码,引领数字化转型新篇章

Axure原型设计秘籍:解锁高效设计与开发的宝藏工具

Axure Web端交互元件库:从Quick UI到700+组件的飞跃

Axure十大常用函数教程 

 

原文地址:https://blog.csdn.net/u010709330/article/details/146229663
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/584483.html

相关文章:

  • 【后端】【django drf】django自动导出优雅的api文档的写法
  • Ultravox:融合whisper+llama实现audio2text交互
  • ubuntu20.04
  • 汉桑科技IPO:潜藏两大风险 公众投资者权益或受损
  • 食品饮料制造行业的现状 内检实验室系统在食品饮料制造行业应用
  • 高效数据集成:金蝶云星空与管易云采购订单案例分析
  • 使用RabbitMQ实现流量削峰填谷
  • 【从零开始学习计算机科学】数据库系统(六)DBMS事务管理
  • 什么是物理信息神经网络PINN
  • 文件解析漏洞练习
  • Android app:layout_constraintHorizontal_bias=“0“属性详解
  • WPF 性能优化策略:提升应用的运行效率与流畅度
  • spring boot3.4.3+MybatisPlus3.5.5+swagger-ui2.7.0
  • 【GPT入门】第20课 文心千帆注册与API调用
  • 【工具变量】中国地级市科技金融试点政策名单数据(2000-2024年)
  • 【Academy】跨站点脚本 XSS ------ Cross-site scripting
  • uniapp APP使用web-view内嵌 h5 解决打包发版浏览器有缓存需要清除的问题
  • LLaMA:开放且高效的基础语言模型
  • 深度学习 模型和代码
  • mysql进阶——数据类型一篇详解