Axure教程——分级下拉选择器

Question

如题所述

Answer 1

分级下拉选择器在原型设计中广泛应用，本教程将指导大家如何使用中继器创建一个二级下拉选择器，以省级行政区选择器为例。制作完成后，选择器将具备以下功能效果。

通过预览和下载原型，了解制作过程。制作步骤如下：

一、材料准备与原型构建：
1. **一级选择器制作**：使用中继器制作选择器，设置选中、默认、禁用样式。增加蓝色文字选中效果，调整尺寸并添加热区覆盖，确保点击功能正常。
2. **中继器转动态面板**：将一级选择器动态面板转换为二级选择器，增加一列用于填写二级选项。二级选项在案例中已为最后一层，无需遮挡和额外交互。
3. **标签文字制作**：通过两个文本标签展示一级和二级选项。设置蓝色下边线显示选中状态，调整为单选组，确保交互逻辑正确。
4. **其他材料**：包括矩形框、上下箭头（默认显示下箭头）、背景矩形等。增加美观的悬停、选中样式，确保各元素协同工作。

二、交互设计与实现：
1. **回显框组合交互**：使用显示交互实现选择器的展开与收起，灯箱效果确保点击空白区域收起选择器。
2. **选择器组合交互**：控制箭头显示与隐藏，实现选项的展开与收起。
3. **一级选择器交互**：中继器加载时设置文本，禁用与选中交互逻辑，处理选项变化，筛选并显示相关二级选项。
4. **二级标签文字交互**：单击事件触发动态面板切换，调整背景矩形尺寸以适应选项数量。
5. **二级选择器交互**：与一级选择器交互逻辑类似，针对不同列设置加载、选中、禁用和回显逻辑。
6. **一级标签文字交互**：允许用户返回一级选择器界面，修改背景矩形尺寸以适应变化。

完成制作后，只需调整中继器表格中的选项信息即可自动生成交互效果。此教程覆盖了从材料准备到交互实现的全过程，使二级下拉选择器的创建过程变得便捷。