后台系统设计（上篇：选择）

最近在做一个标准版中台（就是展示配置+部分运营数据展示），做的有些吃力，刚好看到了一篇后台系统的组件整理（https://mp.weixin.qq.com/s/tY42iiEih-F1CWat9vQlnw），赶紧做好笔记以备不时之需。

常见类型：

·单选按钮

·复选框

·图标切换

·切换开关

·穿梭框/列表构造器

·下拉菜单

一、单选按钮

允许用户从一组相互排斥的选项中选择一个。通常，将一个选项定义为默认选择。

外观

常规：

分段控件：

在单个选项下，存在多组互斥选项，且互斥选项组之间存在一定关系，可以考虑混用分段控件和常规按钮，由于分段控件在视觉上占用更大的面积，故给人在层级上更加置前。

最佳用法

·只有一个选项或仅仅有两个相互排斥的选项，考虑单个复选框或切换开关等其他非互斥的选择控件；若当前选项过多时，且在有限的屏幕空间下，考虑使用下拉菜单或列表框。

·默认选项最好是大多数人会选择的/你希望用户选择的。但在极少数情况下，默认选项可能会不正确。例如，涉及性别、政治、宗教信仰等，这些情况下可以不提供默认选项。

·在用户与单选按钮交互时，请提供良好视觉反馈，且按钮本身状态提供良好的能供性（默认、悬停、选中和禁用）。

二、复选框

允许用户从非互斥的选项中，选择任意数量的选项（零个、一个或多个）

单个使用时，复选框提供了两个互斥（二元）的操作选项。

外观

常规：

全选操作（未全选状态）：

最佳用法

·复选框用于表示状态的标记，不会直接导致命令的触发，需要最终和命令按钮（如提交、确定等）操作配合，若是直接触发请改用切换开关（切换开关并非绝对情况下都是直接触发命令操作）；若复选选项过多时，且有限的屏幕空间下，请考虑使用复选列表框。

·如果只有一个复选框，可以根据表单格式选择使用标签、文本或组合；如果有多个复选框，标签将描述整个复选框，而文本则是表述各自的选项。

·标签文本使用正面肯定的措辞，以便用户清楚的知道打开复选框将会发生什么。避免使用否定的表达，例如 「同意条款」 而不是 「不同意条款」 或是 「打开通知」 而不是 「关闭通知」 等等。

·在用户与复选框交互时，请提供良好视觉反馈，且按钮本身状态提供良好的能供性（默认、悬停、选中、禁用和未全选状态）。

讨论：仅有两个互斥的选项（二元）是选择单选按钮还是复选框？

具体是要看场景和习惯用法。

复选框和单选按钮之间的主要差别是：

单选按钮给人更加直接的示意，例如开启关闭，而复选只表达一面信息，因此它的反面信息并不是非常直观，甚至对于某些用户而言，并不清楚勾选和不勾选所表达的含义。

习惯用法是遵循互联网产品中的一些默认处理方式，例如，注册中的同意条款就是使用复选框。

三、Icon button 图标按钮

图标按钮可以说是结合了单选按钮、复选框及命令控件的变形形式，性质上存在互斥（单选）和非互斥（多选）。

外观

文档编辑（Word及富文本编辑器）可以说是图标按钮使用的最佳案例，不仅满足多种操作的需求，且节省空间。

排列方式也是图标按钮的常见用法。

四、 Switch 切换开关

用于打开或关闭二元操作的切换选项。

外观

常规：

带文本或图标：

最佳用法

·左/灰为关，右/彩为开。

·切换开关可包括文本或图标，例如「开/on」和「关/off」标签，但不建议标签过长，如果标签太长请考虑使用其他互斥的选择控件。

·切换状态中使用微动画进行过渡，而不是生硬的呈现。

·在用户与切换开关交互时，请提供良好视觉反馈，且切换开关本身状态提供良好的能供性（关闭、开启、禁用）。

讨论：切换开关在用户更改后立即触发命令执行？

此说法并非绝对。

在 B端产品及某些重要情况下，触发开关操作依然需要用户再次确定才会真正触发执行。

五、Transfer 穿梭框/列表构造器

在同一页面上显示 「源」 列表和 「目的」 列表，通过使用按钮或拖拽，直观的在两栏之间移动元素，完成选择行为。

外观

常规：

带搜索，在操作者对选项比较熟知情况下（例如，公司员工），搜索可以快速查找到想要的选项。

最佳用法

·行为上穿梭框是一种复杂、较难认知的一种控件模式，且占用大量的屏幕空间，源选项较少的情况下复选列表框则是一种更为简单的替代方案。但是如果源列表选项过多，又想让被选中的选项更容易被看到，穿梭框则是不错的选择。

项较少

·对于大量的可选项，从易用性角度考虑，可以按照选项常用程度、重要性、字母等进行排列或提供搜索（实时搜索），从而便于用户进行快速选择。

·列表提供全选和多选操作，以便用户能够在列表间移动大量选项。

·实时显示当前被选中列表/ 「源」 列表的数量比及 「目的」 列表的数量。

·若列表框内容大于视窗高度，列表框的高度为：N列表+½列表。

六、Dropdowns 下拉（弹出）菜单

触发操作（点击或移入触点），会出现一个非模态弹框。允许用户从集合中进行选择或执行相应的命令。下拉菜单将多种集合进行了封装，只有在用户需要的时候才显示出来（按需显示），具有节省页面空间及简化当前页面等优点。

外观

常规：

分类：

带搜索：

多选：

执行命令，例如系统导航菜单、表格操作等：

级联：

树形（单选、多选）：

操作（删除、添加等）：

上下文菜单，例如，常见的右键操作及文本选择命令（如剪切、复制和粘贴等）：

下拉选择器。多适用于颜色、日历（日月年）、日期、时间等内容：

最佳用法

·在较小的空间下，对多个选项进行选择或内容较为次要且不需要一直显示时，下拉菜单是不错的选择。若选项较少，考虑使用单选框（当进行单项选择时）或复选框（当进行多项选择时）。

·下拉菜单选项按照某种逻辑顺序排序。例如，按照重要程度或被选择程度（可能性）进行排列。

·对于大多数操作，当单击菜单或以外区域，菜单应该收起关闭；如果点击的菜单项是多选操作，则菜单应保持打开状态。

·禁用菜单项，而不是隐藏，以提高功能的可发现性。

·下拉菜单文本保持简洁扼要，文本内容限制为单行。

·请根据具体情况，定义列表项的最小和最大宽度，以适应其内容。超出最大宽度从末尾截断，并添加省略号，鼠标悬停显示全部文本内容。

·如果没有预先选择，使用占位符（灰色文本）进行操作提示。例如：请选择。如果需要指出所有项目都适用，例如，作为列表过滤器，请将「全部」 作为选项，并将其放置在列表的开头。

·若下拉列表内容大于视窗高度，下拉列表的高度为：N列表+½列表。

·若需要兼容IE8，下拉框除了阴影效果（IE8没有阴影），还要做1-2px的线框描边。

·下拉选择器多适用于颜色、日历、日期、时间等内容，若不可输入请将整个区域作为触发区域。颜色下拉控件应该有允许用户输入的地方，这样用户就可以更加方便直观的输入品牌色或其他需求；对于自定义设置，可提供一部分色卡，这样对于不知如何下手、不知如何搭配颜色的人而言，提供了简单的选择。

关于下拉搜索

下拉搜索有两种情况，下拉单选和下拉多选的情况。

·在单选情况下，我们将搜索放在了原有的框体内，流程如下：用户输入关键字>实时匹配检索出选项>用户点击选项>完成操作。

·在多选的情况下，由于是多选操作，我们将搜索框放在下拉菜单内，这样就不影响原有框体承载选项的问题。

但是该模式极大的复杂了控件及用户的交互行为。同样我们还需要考虑在该检索的关键字下，会产生用户想要的多个结果吗？

例如添加公司人员，通过关键字的检索，基本是锁定单一人员，所以通过关键字来检索进行多选的概率较低，自然可采用如下方案：