选择器是在原型设计时常用的一种设计之一。平时大家都是一级，如果是多级的选择器，如何处理？这篇文章，我们看看作者分享的经验。

Axure 选择器是一种在交互设计中常用的组件，这期内容，我们来探讨 Axure 中选择器设计与交互技巧。

OK，这期内容正式开始

下拉列表选择输入框元件

创建选择输入框所需的元件

1. 在元件库中拖出一个矩形元件。

2. 选中矩形元件，在样式窗格中将按钮元件的宽设置为 300，高设置为 35，输入文本 " 请选择分类 " 字号 14，字体颜色灰色（#AAAAA）, 文本左侧对齐，线段填充颜色灰色（#AAAAA）线宽为 1, 圆角半径 5，边距左右侧 10。

3. 在 iconfont 搜索向下 icon，选中向下 icon，复制 SVG 代码，粘贴到画布上。

4. 选中向下 icon 元件，在样式窗格中将按钮元件的宽设置为 10，高设置为 5，字体颜色灰色（#AAAAA）,icon 参考文本居中对齐。

5. 选中矩形文本框和向下 icon 元件组合，并创建为动态面板。

创建下拉选择列表所需的元件

1. 复制两个 " 请选择分类 " 矩形元件在元件，在样式窗格中将矩形元件线宽设为 0, 字体颜色设置为黑色（#333333）输入 " 男频，女频 "。

2. 选中 " 男频，女频 " 元件设置为动态面板。

3. 选中 " 男频，女频 " 动态面板，剪切粘贴到 " 请选择分类 " 动态面板容器中。

创建交互

创建 " 请选择分类 " 的交互状态

双击动态面板，选中 " 请选择分类 " 元件，在交互窗格点击新建交互，添加单击时显示 / 隐藏分类 " 男频、女频 " 动态面板，显示动态面板逐渐 300 毫秒。

2. 点击添加动作，选择设置选中，" 请选择分类 " 元件值为真。

3. 选中 " 请选择分类 " 元件，添加鼠标悬停的样式，线段颜色为灰色（#0052D9），获取焦点的样式，线段颜色为蓝色（#0052D9）。

创建 " 下拉选择列表 " 的交互状态

1. 双击动态面板，选中分类 " 男频女频 " 元件，在交互窗格点击新建交互，添加单击时显示 / 隐藏分类 " 男频、女频 " 动态面板，隐藏动态面板逐渐 300 毫秒。

2. 添加动作，设置文本，" 请选择分类 " 富文本。

3. 编辑富文本 [ [ This.text ] ] ，设置字体 14 号，字体颜色为黑色（#333333）, 点击确定。

3. 添加动作，设置选中，" 请选择分类 " 为 " 假 "。

4. 选中 " 男频 " 元件，添加鼠标悬停的样式，线段颜色为浅灰色（#F7F7F7）选中样式为灰色（#F3F4F5）。

同理设置女频选项。

6. 隐藏 " 男频、女频 " 动态面板。

预览交互

点击预览，在预览页面鼠标下拉列表选择输入框可以选择对应的选项。

带清除的下拉列表选择输入框元件

在以上基础上创建清除按钮元件

1. 双击 " 请选择分类 " 动态面板，选中向下 icon, 将向下 icon 单独转换为动态面板。

2. 双击向下 icon，在 iconfont 搜索删除或者关闭 icon，复制 SVG 代码，粘贴到向下 icon State2 状态中。

创建 " 清除 " 按钮的交互状态

1. 双击向下 icon 动态面板，点击 Stste2，选中清除按钮，点击新建交互，单击时，设置向下 icon 动态面板到 State 1。

2. 添加交互动作，设置文本 " 请选择分类 " 为 " 请选择分类 "。

给 " 择输入框 " 添加情形判断交互状态

1. 双击动态面板，选中 " 请选择分类 " 动态面板，在交互窗格点击新建交互，选择鼠标移入时，将鼠标移入时交互拖到第一个。

2. 选择鼠标移入时，启用情形判断，点击添加条件，情形 1：如果 文字于 请选择分类 !=" 请选择分类 " 点击确定，添加动作，设置动态面板 " 向下 icon" 动态面板到 State2 。

3. 选择鼠标移入时，启用情形判断，点击添加条件，情形 2：如果 文字于 请选择分类 ==" 请选择分类 " 点击确定，添加动作，设置动态面板 " 向下 icon" 动态面板到 State1 。

4. 点击新建交互，选择鼠标移出时，设置 " 向下 icon" 动态面板到 State1 。

5. 删除单击时选中 " 请选择分类 " 为 " 真 " 交互。

点击预览，在预览页面鼠标下拉列表选择输入框可以选择对应的选项，点击清除按钮（X），可以清除所选项。

单选多级下拉列表选择输入框元件

在以上基础上创建多级下拉元件

1. 双击 " 请选择分类 " 动态面板，选中 " 男频、女频 " 矩形框

2. 将 " 男频、女频 " 矩形框宽度值设置为 80，添加向右符号。

3. 选中 " 男频、女频 " 元件，右键转为动态面板，并命名为一级分类。

4. 双击一级分类动态面板，从元件库中拖入一个内联框架，将内联框架宽值设置为 80，高值设置为 200，选中内联框架右键转为动态面板，并命名为二级分类。

5. 选中内联框架动态面板右键设置滚动条为垂直滚动，并拖动高值遮住水平滚动条。

6. 复制男频矩形框，双击二级分类内联框架动态面板粘贴到 State1 补充男频二级分类，State2 补充女频二级分类。

创建 " 一级分类 " 下拉列表的交互状态

1. 双击动态面板，选中男频矩形框，在交互窗格点击新建交互，添加单击时显示 / 隐藏分类 " 男频、女频 " 动态面板，显示动态面板逐渐 300 毫秒。

2. 添加动作，设置二级级分类面板到 State1。

3. 添加动作，设置 " 请选择分类 " 选中为假。

4. 添加动作，设置 "" 请选择分类 " 文本为 " 男频 "

5. 同理配置女频矩形框，也可直接复制男频交互，将添加动作，设置二级级分类面板到 State1，改为 State2，添加动作，设置 "" 请选择分类 " 文本为 " 男频 "，改为女频。

创建 " 二级分类 " 下拉列表的交互状态

1. 双击动态面板，选中二级分类都市矩形框，在交互窗格点击新建交互，添加单击时显示 / 隐藏分类 " 分类 " 动态面板，隐藏动态面板逐渐 300 毫秒。

2. 添加动作，设置 " 请选择分类 " 选中为假。

3. 添加动作，设置 "" 请选择分类 " 文本为 " 男频 / 都市 "

5. 同理配置男频、女频所有二级分类矩形框，也可直接复制都市交互，添加动作，设置 "" 请选择分类 " 文本为 " 男频 / 都市 "，修改 " 男频 / 都市 " 字段。

6. 选择二级分类，分类动态面板依次隐藏。

预览地址：https://6jjy6g.axshare.com

本文由 @PM 大明同学 原创发布于人人都是产品经理。未经作者许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务