单选和多选混在一起怎么判断，单选多选按钮

本文主要提供单选和多选控件的设计细节。尽管这是一种非常常见的控制设计，但有很多事情需要记住。能够提炼和总结共性的一般规则，对每个人来说都是有价值的。

控制元素在我们的产品设计中发挥着重要作用，无论是在个性化内容还是用户体验方面。为特定内容选择正确的控件可能比您想象的更困难。控件的高度、宽度、样式和选项数量都是重要因素。

为了解决这个问题，这里有一个决策树。

单选选项卡选项分段选项卡通常由两到六个单选选项组成。它非常适合图标、数字和短词等导航形式，被设计为水平容器，可容纳等距的单选内容。

图标、短语、价格

优点：所有选项都排列在一栏，充分利用垂直空间，设计风格非常直观美观。

缺点：不适合长单词、短语或价格。如果您希望这些成为选项，则需要缩短文本。由于水平空间非常有限，您可能需要决定如何截断文本，即使只有几个选项。

（译者注：为什么底部导航栏的数量最好是2 到6 列？根据iOS 规范，太多的选项卡会使应用程序变得复杂，并且很难查找信息。太多的选项会导致信息太少，并且可能切断界面之间的信息流并使其难以快速访问也会产生问题。

请参阅iOS 规范https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/。也有人说，按钮的大小决定了点击时的舒适度，按钮的数量也影响用户的记忆和学习成本。知乎https://（见www.zhihu.com/question/31103224）

列表中的单选按钮原始单选按钮具有圆形轮廓，垂直方向，并且在包含六个以上选项的列表中使用时放置在列表项的开头。 iOS 随后在列表末尾添加了一个复选标记，以创建一个新的经典案例。一些现代设计的设计使得选择内容采用在列表选项外部划出的框的形式，以节省水平空间。

Android Web vs iOS vs Strokebox 模式

优点：腕式收音机提供了更多的内容空间。易于阅读、容纳多个文本、换行和添加图像。

缺点：容易占用空间，不适合在垂直高度有限的页面上使用。

一个有趣的事实是，单选按钮的灵感来自于旧的单选键设计，按下一个按钮会弹出其他按钮。

多项选择的标签选择标签选择通常在从3 到6 个选项中进行多项选择时使用，并且最好在使用一两个短单词或数字时使用。该设计通常类似于一个小按钮，背景颜色区分“开”和“关”。

Google DesignGuidelines（译者注：参见Google官方指南，里面列出了很多标签设计的实用原则https://material.io/design/components/chips.html#filter-chips）：我们建议最好将标签放在所选的之前标签。我会添加一个复选标记，但我认为颜色足以区分和节省水平空间。

短词标签、带省略号的多词标签和换行符标签

优点：节省空间。标签堆栈的具体样式由文本的长度决定。给人一种轻松有趣的印象。

缺点：这种形式与选项卡选项形式有同样的缺点，不能很好地处理长单词。不建议对文本进行换行或调整文本大小，因为这会使用户阅读变得困难。此外，使用多行标签使得快速扫描每个标签变得非常困难。

当多选选项超过六个时，通常会使用多选列表复选框。设计风格通常在列表的开头设计一个矩形边界框。

列表中的复选框

优点和缺点：与单选按钮相同的优点和缺点。

设计特定组件很容易陷入困境，因此我认为最好开始全面思考。然后做出最佳决策，使用最能促进一致性、差异化和层次结构的选择设计。

水平选项卡和标签可选背景是选项卡和标签控件之间最大的区别。连续的背景可以帮助用户理解他们需要选择一个，而分离的背景则表明他们可以选择多个。

统一和不均匀的风格

选项卡控件和标签控件的设计应在视觉上彼此相似，但与文本框和按钮不同。此外，应该使用不同的视觉风格来实现不同的交互层次结构。

不同风格的风格和相同风格的风格

单选选项列表和多项选择列表由于有多种形式的单选按钮可供选择，我认为最好将单选选项分组并检查选择，以便于比较。 iOS 列表复选框和笔画突出显示都是非常美观的设计，但当它们与多选框放在一起时看起来不一致。

（译者注：最左边的单选框样式和位置都比较一致，中间的上下对勾可能会让人混淆。不过最右边的框的高亮设计，左边的checkbox太大了.)

Android Web、iOS 与替代模式

最后但并非最不重要的是图像放置。选择控件通常放置在列表项的开头，但有些人想知道当列表项有照片时，将选择控件放置在前面还是后面更好。

在这里，我决定将控件保留在开头，因为它是必需的，而图像是可选的或可以添加。 （译者注：如果你的设计规范在左侧有可选控件，则应确保其他控件位于左侧以保持一致性。）

结束位置和开始位置的图像

最后，另一个很棒的选择控件是选择器（https://developer.apple.com/design/human-interface-guidelines/ios/controls/pickers/）。当短单词较多且垂直控制受限时可以使用。建议仅放置文本，但它的使用在Android 和iOS 上都相对要求较高且复杂。

原文：https://medium.com/tap-to-dismiss/select-to-proceed-996d19c8a7a4

作者：林赛·贝瑞

译者：彩云天空，公众号：彩云翻译设计

本文最初由@ayayunsky 发表在《人人都是产品经理》上。它禁止未经授权的复制

标题图片由Unsplash 根据CC0 协议提供