vs使用教程(visualstudio入门教程)

编辑导语:在产品设计中，小细节也可能会影响用户的实际体验，比如选项组件，其交互状态相对简单，但涉及到设计层面，产品设计师需要考虑的因素很多。本文总结了单选、多选、拨动开关等选项元素的细节和设计技巧。有兴趣的话，来看看吧。

在UI设计中，无论从效率还是视觉的角度，组件元素在界面中总是扮演着极其重要的角色。其主要功能是提高应用程序的可用性和易用性，从而帮助用户轻松完成任务。

选项看起来是一个很简单的组件，交互状态只有选中(填充)、未选中(描边)和未选中(灰显)。然而，在真正的设计过程中，它比你想象的要困难得多，它的视觉风格、元素大小和选项数量都是至关重要的因素。

一个好的选项永远不会缺少细节，尽管它看起来并不复杂。其实要考虑的因素很多，因为不仅关系到用户体验，还涉及到界面交互逻辑的一些问题。需要结合不同的使用场景，合理的将各种选项应用到界面上，细节也不能忽视。

本文将重点介绍单选、复选选项、拨动开关三个选项元素的设计细节和使用场景，希望能够帮助设计新手避免选项设计的误区，为用户创造更好的操作体验。

一、单选：独一无二1. 什么是单选？

收音机按钮源自老式汽车收音机上的收音机频道开关按钮。当一个按钮被按下时，它变成被选择的状态，其他的会弹出。用户可以通过这种方式在不同的电台之间快速切换。

在UI设计中，单选是指当界面中有两个或两个以上的选项，并且所有的选项都是互斥的，用户只能从选项列表中选择其中一个来使用，最后的结果总是唯一的，即使是重复选择之后。单选框有两种状态:选中和未选中(很少可选)，当前状态主要通过填充和笔画交换的样式反馈给用户。

单项选择是一种比较简单的模式，至少包含两个选项。为了提高操作效率，需要尽可能的将所有选项展示给用户，让任务快速完成，而不需要不必要的操作和思考。

如果是必选项，最好提供一个与当前用户匹配或者选择率最高的选项作为默认值。即使默认值是错的，也不会对用户有什么影响，因为用户已经需要操作了，但是一旦匹配到对应的用户，就可以省略这一步，默认值是经过多方面的分析和反复推敲后预设的，只会有利无害。

2.单选组件样式1)按钮类型

按钮式适合选项少，文案短的场景。它可以平铺在界面中，也可以呈现在弹出窗口中。比如买衣服，品牌、尺码、颜色都可以设计成纽扣款式。

2)循环组合

未勾选的圆圈都是浅灰色的笔画。经查，安卓普遍使用笔画改变主色+内点填充，iOS更多使用笔画改变填充+勾号图标组合。

其实无所谓。真的不用担心是用点组合还是勾组合样式。同一款产品只要风格统一，用户在后续的操作中就不会因为这两种表达方式的不同而受到影响。

3)挂钩

勾号样式经常出现在弹出窗口列表选项中，只有选中后才会出现“”标记，比循环组合对用户更有指导意义。

在单个任务中，当您第一次进入选择页面时，列表中没有标记(默认选项除外)。条件选定后，你将自动进入下一个任务流程，无需任何其他操作。当您再次返回选择列表时，系统会将最后一次选择标记为参考。此外，这种风格在选项数量和字数上也不会太受限制。

4)选择器

通常以弹出的形式作为表单项出现，适用于二级和三级联动选项。例如，选择一个包含许多相关选项的选项组，如地址(省/市/地区)、日期(年/月/日)和时间(小时/分钟/秒)。

3.单项选择的使用标准首先要保证单项选择组件的可用性，所有单项选择都要清晰地呈现给用户，避免嵌套或隐藏二级单项选择，否则会影响结构的识别。

其次，要保证可读性，收音机组件的布局要符合用户的认知。在选项较少、标签较短的情况下，多行多列的按钮布局比较常见，比如电商APP的商品属性选择；如果标签较长，使用圆形图标，单列多行显示挂钩样式，如选择退款原因；联动选项需要根据关联的层级数在选择器中多列显示，比如三级联动地址，省市区三列并列。

如果选项随意平铺，标签/图标上下排列，会造成视觉混乱，内容紧凑，出现一些不可预知的问题。

4.提供默认选项。如果可能的话，尽量给用户提供一个默认选项。这个不是随便定的，需要多方面分析综合决定。

举个例子，如果你的产品属于社交类型，而且大部分是男性用户，那么如果你设置男性为默认性别选择，这类用户可以直接跳过这一步，节省了大量用户的运营成本。即使面对的是女性用户，这也不影响需要手动选择的步骤。

默认选项要设置合理，切不可乱用，否则一些“懒”用户不会更改默认选项，导致后续数据分析的准确性。

第二，检查:循环。1.什么是支票？Check-check操作不会像单选一样造成信息遮挡，也不会像拨动开关一样造成强烈的视觉干扰。通常，它包含一个或多个选项供用户选择。选项的条件不是互斥的，用户可以根据选项的限制选择其中的一个或多个。

1)选择一项

有些设计师把多选理解为多选，不分对错。我想说明的是，多选只是选择多选的一种方式。在现实设计中，有很多场景是不受限制的。我们可以把选中/未选中理解为“是/否、同意/不同意、打开/关闭……”等等。

比如“用户服务协议”必须存在于注册页面，单个选项可以重复操作；管理系统或B端的批量操作和权限设置，选择其中一个进入下一个操作流程。

2)选择多个项目。

强制多选一般设置拟选数量的下限和上限。比如第一次进入某些app，需要选择个性化定制标签，通常最少3项，最多6项；还有在问卷中填写多选时，至少选择两个选项，没有上限等等。这些都是复选中的真选择题。

2.相比单选，签到的使用条件需要配备一个提交按钮，提交后会记录选中的信息。

对于批量选项操作，复选框的操作效率远高于拨动开关。比如在某些页面上，开启/关闭几个权限，每个权限由一个单独的拨动开关控制，这完全没有问题，但是涉及到几十个权限的控制。这种批量操作使用复选框肯定是最好的选择，只要用户能知道操作后会发生什么。

3.常见使用场景1)标签选择

个性化标签选择是最常见的。当标签文字和选项数量较少时，外观和大小完全相同的标签按钮分多列显示，有助于用户浏览，也可以节省页面的垂直空空间。用浅色描边/主色填充或明暗等级来区分选中/未选中状态。有些产品还会在选中的状态上加一个小图标(，+/-)，这样区分会更明显。

这样，切记标签不能太长，否则可能会造成文字断裂或容器拥挤，不利于用户阅读。

2)列表选择

当选项太多，标签不同时，适合使用列表选择。WEB端常见的是圆角矩形勾选填充，比如管理系统的商品列表；在移动端，有更多的原型需要检查和填充，比如购物车。当然没有明显的定义，所有页面都可以有统一的风格。

4.未定状态和单选视觉风格的唯一区别是多了一个未定状态。常见于管理系统或者B端。当一个选项有多个子选项时，只选择部分子选项，而不是全部子选项。此时父代的状态是不确定的，即未定。

三、拨动开关:日夜1。什么是拨动开关？拨动开关就像生活中控制灯泡的开关。它是一个按钮，在两个互斥的选项中总是有一个默认值，操作会立即生效。操作后必须是相反的选项，如开/关、是/否、同意/不同意等。

2.拨动开关的使用指南。拨动开关必须在思想上清晰，让用户在操作前就能知道操作后会发生什么。使用它们时，应遵循以下原则:

用于操作后立即生效的场景；标签和按钮是两个分离的视觉焦点，当用户有可能产生疑惑、或标签不足以言明时，需增加辅助文字予以说明；主要用于控制全局，权重较高，针对单个任务流程的控制，请使用单选/复选；默认就是开启/关闭状态，若存在子级，父级关闭的同时将子级隐藏（避免置灰）；当操作有风险时，必须给予明确的提示；避免大面积使用，如果存在太多需要开启/关闭的条件，建议使用复选；3. 背景与文案

拨动开关的背景通常只有两种状态。拨动开关关闭时呈灰色(所有衣服都是普通的)，打开时呈绿色。也有很多产品将其设置为品牌色，颜色风格可以统一。

辅助文案有两种。第一类是当前状态反馈，比如获取设备“消息推送已开启/关闭”的通知权限。这种反馈可以在应用中灵活运用，特别是在关闭状态下，可以起到指导作用。第二种是标签辅助提示，比如手术后的收益或者风险，告诉用户会发生什么，让用户提前有一定的心理预期。

4.无线电控制的纠缠1。单选框vs复选框是单选框还是复选框，似乎是最好的定义。笔者查阅了很多资料，得到的信息是“使用radio需要选择一个选项，使用check需要选择多个选项”，答案出奇的一致。好像什么都说了(是真的)，什么都没说(一个设计师什么都懂)。当我们仔细分析的时候，会发现不止如此。

当PC端有两个相反的选项(如是/否、同意/不同意、通过/失败)时，除了两个单项选项外，还可以使用复选框，特别是在权限控制中，必须勾选。

另外，在移动终端注册登录过程中，用户服务协议也是复选框(同意/不同意)最具代表性的用例。除了这些特殊的使用场景，其他大部分都是直接选择。

2. 单选框vs拨动开关

当只有两个选项时，单选和拨动开关的使用被一些设计者混淆了。笔者就遇到过这样一个设计案例，一个产品呈现一个任务，只有性别(男/女)和O2O接机方式(上门/接机)两个选项，带拨动开关。操作后，通过左右移动开关上的滑块+文案辅助来确定当前选择的条件。

在我看来，这种方法是不可取的。最大的弊端是在当前状态下，用户不知道另一个选项是什么，需要通过猜测或试错来确定，这无疑增加了完成任务的难度，打破了用户对常见操作的固有认知。

至于什么时候使用拨动开关，在上面3-2“拨动开关使用指南”中有详细解释。此外，使用无线电盒可以解决设计中80%的无线电选择和拨动开关的选择性问题。

3. 单选框vs下拉列表

更少的选项可以用单选框(性别选择)和按钮(标签)直接呈现在当前页面上。当用户需要从大量选项中选择时，PC端可以使用下拉列表，移动端则使用操作栏的弹出窗口或者跳转到新的页面供用户操作。这方面其实没有明确的边界，需要根据使用场景和选项的属性，根据实际情况灵活变化。

五、必备常识和使用技巧1. 选项的几种状态

单选、复选和拨动开关有不同的状态。设计师在设计之前，需要清楚的知道这些状态的含义以及不同的使用场景，避免在后续的使用中给用户造成困扰。

2.符合用户认知的控件风格。首先，选项框的风格要符合用户的认知，不能为了所谓的差异化和个性化而打破用户的固有认知，这会带来额外的认知负担。

比如常见的单选/复选方式有两种:圆形填充+签到(PC端)和圆角矩形填充+签到(移动端)。虽然这不是唯一的办法，但至少不会出错。虽然鼓励在常规设计思维之外做出改变，但一切都是以不增加用户难度和提供更好的用户体验为前提，否则还不如保持不变。

3.注意对齐按钮的类型。不用说，文本与容器上下左右居中。列表中只有两种对齐方式，选项框在前，文本和选项框左对齐，这种方式可以用于单选/多选；选项框在后面时，文字左对齐，选项框右对齐，这种方式大多是单选；拨动开关全网统一，标签左对齐，开/关右对齐。

4.清晰简短的标签选项标签要清晰简短，直接表达核心意思，尽量避免负面表达，避免用户误解。拨动开关等极化选项，当用户不知道对面选项的内容时，可以用副标题来描述，让用户在操作前有一定的心理预期。

5. 批量选择、节约操作成本

虽然赋予了所有用户选择的权利，但是面对不同的场景，需要提供一个“全选”的操作，帮助用户一次性完成多次重复操作，降低操作成本。

比如:B端的内容管理，批量操作可以节省大量时间，减少重复操作造成的错误概率；c是最有代表性的购物车，第一次进入一些应用时的个性化标签选择。

6.为移动终端设置触摸热点。不要在点击区域直接使用选项框的范围大小，而是单独设置热点范围。众所周知，移动应用中使用最频繁的是thumb。相对而言，需要有足够大(非绝对)的操作区域，供手指准确交互，避免无效操作或操作失误。用文字标签、选项框和每个选项区周围的空白作为触摸热区，操作起来会简单很多。

不及物动词结语在本文中，作者主要总结了单选、多选、拨动开关的使用规范和常见问题，但设计规范只是基于产品本身的一个标准，是为了约束后续视觉统一性而存在的规范性参考。

在实际设计中，这些设计规范并不是唯一的。它们需要根据产品的特性和使用场景灵活变化。设计出最适合自己产品的控件才是最重要的。

遵循设计规范只是最基本的标准，创意只能来源于在遵循规范的同时跳出规范。这离不开我们平时的积累，研究各种产品优秀的设计细节，在其他产品的亮点中找到与自己产品的平衡点并加以融合。这是我们学习和总结的最终目的。

#专栏作家#

沙漠之鹰；微信官方账号:能量眼，人人都是产品经理专栏作家。致力于产品需求的驱动，产品体验的挖掘，用设计的手段给受众带来更好的体验，就是好看，好用。

本文由人人作为产品经理原创发布，未经允许禁止转载。

题目来自PEPEPELS，基于CC0协议。