在Web设计中，下拉多选器是页面元素中常见的功能组件。为了在产品原型制作中更流畅地说明需求，追求高保真交互性至关重要。这样可以让领导、客户以及开发人员清晰地了解功能，但制作这样的原型并不简单。通常，一个高保真且可复用的组件需要花费大量的制作时间。因此，本文将详细介绍如何利用Axure来制作下拉多选器组件，以提升原型制作的效率和效果。
一、案例预览
预览地址：https://jzgosq.axshare.com
实现效果包括：
- 滚动浏览：当下拉选项内容超出预设高度时，选项列表支持滚动显示，确保用户能够全面浏览所有选项。
- 视觉反馈：选项在选中状态下，边框将高亮显示，且鼠标悬停和选中时会呈现不同的交互样式，提升用户交互体验。
- 状态图标切换：下拉框的箭头图标会根据当前状态进行切换，选中后可显示删除已选项的功能。
- 标签展示：用户在选择框中选中某个选项后，该选项将以标签形式即时展示在选择框上方。
- 取消选择：每个选项标签旁都设有删除图标，用户点击后可轻松取消该选项的选择。
- 自适应高度：选择框的高度会根据已选项的数量自动调整，确保界面整洁且信息展示清晰。
二、设计思路
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十大常用函数教程
