2.4 选择类表单元件
下拉列表框、列表框、复选框、单选按钮和提交按钮都是常用的选择类表单元件，它们有很多相似之处，也有很多独有的属性，下面分别进行介绍，大家可以对比学习。
2.4.1 下拉列表框
下拉列表框可以有若干个列表项，但每次只能选择其中一个，如图2-65所示。
图2-65
双击设计区域中的下拉列表框，打开“编辑列表选项”对话框，如图2-66所示。各按钮和复选框的功能如下。
①添加一个列表项。
②上移列表项、下移列表项。
③清除选中的列表项。
④清除所有列表项。
⑤一次添加若干列表项，每行一个。
⑥勾选后该项被默认选中，若没有任何一个列表项被勾选，则默认选中第一个。
图2-66
添加列表项后，在属性面板中可以查看列表项的全部内容，也可以单击此处的“列表项”按钮进行编辑，如图2-67所示。
图2-67
2.4.2 列表框
列表框可以有若干个列表项，支持单选、多选，如图2-68所示。
图2-68
双击设计区域中的列表框，打开“编辑列表选项”对话框，使用方法与下拉列表框相同。在该对话框下方勾选“允许选中多个选项”复选框，如图2-69所示，在浏览器中可以选中多个列表项，方法有以下3种。
图2-69
方法1：按住Ctrl键的同时单击每一个需要选择的列表项，单击过的列表项会被选中。
方法2：按住Shift键的同时单击需要选择列表项的首尾，首尾之间的列表项（含首尾项）同时被选中。
方法3：直接拖动鼠标经过每一个需要选择的列表项。
2.4.3 复选框
复选框是默认支持多选的选择类元件，如图2-70所示。
图2-70
在设计区域中直接勾选复选框，则该复选框默认是选中状态，也可以勾选属性面板中的“选中”；在属性面板中可以设置“对齐按钮”为“左”或“右”，一般选择“左”，符合使用习惯，如图2-71所示。
图2-71
2.4.4 单选按钮
单选按钮，从字面上也能看出它只支持单选，并且某个单选按钮一旦选中无法直接取消，只有选中其他单选按钮后才能取消选中，如图2-72所示。
图2-72
拖入几个单选按钮至设计区域，在浏览器中预览效果时会发现并没有实现“单选”的效果，这是怎么回事？要实现所谓的“单选”效果，必须要有一个选择范围，因为Axure不知道是要在某3个单选按钮里实现单选，还是在某4个单选按钮里实现单选。这个“选择范围”就是单选按钮组。
选中若干单选按钮，在属性面板中设置单选按钮组名称（支持中文和英文），如图2-73所示，意味着这些单选按钮在同一时刻只有一个能被选中。如果界面中有若干个单选按钮组，则其名称不能重复，否则就会变成同一个组。此时若某个组里新增了一个单选按钮，只需给这个单选按钮输入（或选择）对应的单选按钮组名称即可。
图2-73
2.4.5 提交按钮
提交按钮，如图2-74所示。与矩形按钮的不同之处在于，提交按钮使用的是浏览器内置的默认样式和交互样式，不能自定义修改，但它可以修改文本样式、改变大小和设置禁用。如果正在制作不需要UI元素的后台界面原型，使用提交按钮是很方便的。
图2-74
2.4.6 设计原则：选择合适的表单元件
要根据不同的用途、不同的需求来选择合适的表单元件，这样才能让产品具有良好的易用性，提升产品的用户体验，进而提升产品的转化率。
1.整体感知
从属性上看，复选框和列表框可以支持多选，而单选按钮和下拉列表框只支持单选，所以可以根据产品需要的功能来选择。
从直观感受上来看，单选按钮和复选框每个选项都要占据一定的空间，而下拉列表框只需要一行的空间，列表框也可以通过滚动条的方式显示更多的选项。如果要设计单选的功能，一般选项较多时选择下拉列表框（如地域的选择），而选项较少时选择单选按钮（如性别的选择）；如果产品需要多选功能，当页面空间有限且选项较多时可以选择列表框，当页面空间不受限制时可以选择复选框。
上述两个方面都是最简单的选择依据，在使用这些表单选择元件时，还需要遵循一定的设计原则。
2.单选按钮的设计原则
设置默认项
因为单选按钮是不能取消选中的，所以一般会设置一个默认选择项，这样可以引导用户做出选择。如果在业务上确实需要空选项的话，可以设置一个“无”选项，如图2-75所示。
图2-75
扩大可单击区域
一般把单选按钮的文本标签部分也作为可单击区域，这样无须精确定位到按钮部分即可成功选中，能够显著提升用户体验。Axure RP自带的单选按钮元件是可以实现这个功能的，只是在交互说明里需要交代清楚，如图2-76所示。
图2-76
排列优先级设置选项顺序
按照用户选择的可能性排列选项的顺序，可能性较大的选项放到前面。
选项的排列方向
如果把选项设计成竖直排列，可以方便用户进行选项之间的对比；如果要水平排列，那么要注意单选按钮部分和文本标签之间的距离，如图2-77所示。
图2-77
3.复选框的设计原则
用肯定的文字作为文本标签
文本框选中状态的样式一般都是一个勾，所以用肯定的文字作为其文本标签是比较符合正常思维的，如“我同意上述条款”。尽量减少使用诸如“不要给我推送消息”这样的否定文字，“勾+否定文字”可能延长用户的反应时间，哪怕是零点几秒，也会给用户带来使用不流畅的感觉，如图2-78所示。
图2-78
此外，选项的排列方向、扩大可单击区域这些同样需要注意规则。
4.下拉列表框的设计原则
联动下拉列表框
当选项的数量非常多，达到一定程度时，可以尝试把选项分类，形成多个联动下拉列表框。虽然用户单击操作的次数多了，但避免了在很多选项中查找的麻烦，提高了效率，如图2-79所示。
图2-79
设置默认项
如果仅仅是在填写表单时作为单纯的选择功能，那么下拉列表框中最好有默认选项，而不是默认空白。
设置“全部”选项
如果下拉列表框是作为筛选功能使用的，会配合数据列表使用，那么应考虑是否需要加入“全部内容”的选项。在页面的筛选区域，一般不会有单独的文本去说明这个下拉列表框的作用，此时可以在第一个选项中设置“请选择……”来说明此下拉列表框筛选的内容，如“请选择年级”，既说明了下拉列表框的作用，并且当此选项被选中时数据列表显示的是“全部年级”，如图2-80所示。
图2-80
移动端的使用
在移动端尽量减少使用下拉列表框，因为在移动端需要先单击下拉列表框，在屏幕下方弹出选项列表，滚动列表并选择，最后关闭选项列表，如图2-81所示。这样的操作已经非常烦琐了，更重要的是移动设备的屏幕本来就很小，选项列表的范围又只是屏幕的一部分，在这么小的区域内滚动并查找目标选项是一件很痛苦的事。
图2-81
5.下拉列表框和单选按钮的对比
下拉列表框里的选项一般都是同一类型的不同备选内容，如河南、河北或山东这些省份的选择，2017或2018年份的选择等；而单选按钮的选项一般表示状态或属性居多，如启用和禁用、打开和关闭、男和女等。
当用户不清楚待选项有哪些，需要直观显示全部的选项内容时，一般使用单选按钮或复选框，如用户喜好、用户标签的选择；当用户已经非常清楚自己的选择时，一般使用下拉列表框，如地域的选择。
当需要多条件组合筛选时，即使是涉及状态、属性的筛选（如启用和禁用、男和女），一般也习惯性地使用下拉列表框而不是单选按钮，因为这样用户选择后可以直观、清晰地看到筛选条件。
6.复选框和单选按钮的对比
如果业务规定是单选并需要空选项，除了给单选按钮增加“无”选项外，也可以使用复选框，通过程序来限制只能选择其中的一个选项。由于复选框可以取消选中，所以无须设置“无”选项。
2.4.7 选择类表单元件在App上的“变体”
以上说的各种表单元件大多适用于电脑端的产品，而移动端因为屏幕尺寸偏小、交互方式与传统的鼠标键盘有所区别等原因，导致移动端关于选择类表单元件会有一些变化，比较典型的是把单选按钮、复选框转化为可选按钮和开关。
1.可选按钮
传统的单选按钮和复选框的可操作区域比较小，在电脑上可以用鼠标操作，如果放到移动设备上，很容易发生单击困难或误操作的情况。为了避免这些问题，移动设备上一般采用“可选按钮”的形式来替代传统的单选按钮和复选框，如选择用户标签、选择话费充值金额等，如图2-82所示。
图2-82
本节通过App的选择用户标签功能来介绍制作可选按钮的方法。
制作步骤
（1）拖入3个“主要按钮”至设计区域，设置填充颜色为#CCCCCC，尺寸为90像素×50像素，修改文本分别为IT男、产品经理和设计师，如图2-83所示。
图2-83
（2）设置按钮选中时的交互样式，如图2-84所示。
①同时选中3个按钮，单击属性面板中的“选中”按钮，打开“交互样式设置”对话框。
②勾选“填充颜色”复选框，设置颜色为#FF6633。
图2-84
（3）选中按钮时高亮显示，如图2-85所示。
①选中第一个按钮，双击属性面板中的“鼠标单击时”事件，打开用例编辑器。
②选择【添加动作>元件>设置选中>选中】。
③在配置动作区域勾选“当前元件to‘true’”复选框。
图2-85
（4）为其他两个按钮的“鼠标单击时”事件添加相同的动作，如图2-86所示。
①在第一个按钮的“鼠标单击时”事件上按快捷键Ctrl+C复制。
②在其他两个按钮的“鼠标单击时”事件上按快捷键Ctrl+V粘贴。
图2-86
（5）设置完成后，按F5键在浏览器中预览效果，如图2-87所示。
图2-87
提示
无须为每个有交互动作的元件都命名，巧妙地运用“当前元件”，可以提高工作效率。
2.开关
开关是移动设备上经常用到的一种元件，表示打开或关闭某个项目或功能，如图2-88所示。
图2-88
需要注意的是，开关的样式要避免产生歧义，图2-89这种样式设计会让用户很难区分开关的状态，虽然绿色和红色的对比很明显，但两种颜色都属于高亮色。一般让开关的打开状态高亮显示，而关闭状态置灰。如果有必要，还可以配合文本来区别开关的两种状态。
图2-89
Axure中并没有动态的开关元件，可以使用动态面板来制作，在后续的章节中会做介绍。