让我们一起玩玩，解决一个设计问题！ 我们之前曾经做过一次，当时解决了一个 带有函数的列表 的解决方案。 让我们再来一次，解决电子邮件设置区域的问题。
想象一下，在 Web 应用中可能发生三件事会导致发送电子邮件。 我们希望允许用户决定在这些事件发生时是否接收电子邮件。
我们可以围绕此进行很多设计。 例如，也许我们从最简单的开始，只是一个标题和复选框列表。
这可能完全没问题。 但它是否绝对清晰？ 选中的复选框是否绝对表示“给我发送电子邮件”，未选中的复选框是否表示“不要给我发送电子邮件”？ 我们能否通过颜色和特定文本增加清晰度？
这更清晰还是更模糊？ 我来回思考。
也许我们可以更复杂一些，使用带标签的单选按钮来非常明确地说明电子邮件的开启或关闭。
让我们一起尝试（并赢取奖品）
这些是细节和一些基本的思考，以帮助我们入门。 如果您对围绕此简单概念的设计模式有一些想法，请在 CodePen 上构建它们 并将链接发布在评论中。 我将选择三个最有趣和最成功的想法，并确保它们在六个月内获得最高级别的访问权限 到这场冒险中。
记录在案，这个想法来自 CodePen 本身，我们在那里尝试如何显示这些设置。 它可能会影响该选择。
我认为您给出的第一个示例（基本复选框）最清晰，在网站上最常发现，并且让用户相当确定他们选择了什么。
第二个示例纯粹令人困惑。 不要给我发送电子邮件 - 是的，我想要那个，但它没有被选中，嗯……
第三个 - 清晰，但对于三个设置的列表来说有点过头了。 我可以看到单选按钮适用于长列表，在长列表中，您希望轻松查看哪些选项在“给我发送电子邮件”列中，哪些选项在“不发送电子邮件”列中。
仅供参考
当我看到像您的第二个示例这样的设置时，我总是感到沮丧，其中“给我发送电子邮件……”和“不要给我发送电子邮件……”作为标签的一部分。 复选框通常表示“我同意此短语”，如果标签文本在点击时发生更改，则会完全失效。
如果我的目标是在“发生其他事情时”不接收电子邮件，我可能会倾向于选中“当发生其他事情时，不要给我发送电子邮件”旁边的框，但这与表单试图传达的内容完全相反。
此问题通常可以在 iOS 样式的切换开关上看到，其中“开”和“关”写在按钮本身上。 我永远无法分辨当它显示“开”时是否表示它已打开，或者我是否应该按下“开”按钮才能将其打开。
总结：控件本身就是复选框。 将标签保留在控件之外。
第二个非常令人困惑。
我同意 EstherH 的观点；第二个选项将选项（在 X 发生时给我发送电子邮件）与选项状态（是或否）混淆。 iOS 风格的滑动切换非常适合使状态更明确，而不会混淆，尽管它们在使用指针设备而不是触摸屏时可能不太可用。
第一个。 出于 Esther 上述给出的原因。 它最清晰，并且让用户确切地知道他们做了什么。
切换按钮怎么样？ http://codepen.io/geoffthibeau/pen/1/1
可以进行一些润色。 几分钟内就拼凑出来了。
我也在考虑切换按钮；类似于 iOS 的“开/关”开关的东西似乎对广泛的用户来说非常清晰且熟悉。
显然，当我创建帐户时，它没有应用重写规则。
对此表示歉意。 这是新的链接： http://codepen.io/geoffthibeau/pen/1/1
看，这就是我将如何处理它 - 我唯一担心的就是清晰度/可用性。 我会添加一个清晰的“开”和“关”文本，以确保色盲用户或快速扫描切换的用户更容易理解切换的含义。
否则，我认为这是一个完全可用且熟悉系统。
添加了开/关文本： http://codepen.io/geoffthibeau/pen/1/2
不过，我认为其他人的示例此时几乎相同。
我认为第一个绝对是最好的选择，我只会在我提供电子邮件的替代方案时才使用单选按钮。
Codepen
除非有人想出一些令人难以置信的东西，否则这是我唯一会用在这个系统上的东西。
我认为版本 1 最清晰且功能齐全。 切换按钮非常好，但我仍然认为普通的复选框是最佳选择。 事实上，我认为这个问题主要是因为语言。
不算特别有创意，但我制作的以下代码段似乎运行良好： http://codepen.io/anon/pen/8055/
这个清晰简洁 - 对于普通受众来说，这是我选择的。
在我看过的所有提交中，我最喜欢这个。 它真的非常易于使用，我同意它对公众来说会很清楚。
在这种情况下，人们永远不应该使用颜色。 色盲人士可能无法看到您想要表达的区别。 颜色在不同文化中也具有不同的含义。 避免使用颜色来传达含义。
我的建议是使用第一个选项，但也许可以使文本更明确，使其显示为“是的，当有人执行操作时，我想要接收电子邮件”等。 也许在上面有一行帮助文本，内容为“选中您想要接收电子邮件的选项”。
色盲人士不会看到所有东西都是黑白的（有些人确实如此，但这种情况非常罕见）。 大多数人可以轻松地区分两种颜色，尤其是在它们是两串独立文本时。 此外，此示例中的颜色仅用作提示 - 含义在于文字中。
这或多或少与您的第二种方法相同，但使用了不可见的复选框。 我只是不喜欢它们在每个操作系统上的外观不同。
http://codepen.io/Kukkimonsuta/full/1/3
我喜欢 Lukas 的解决方案，它看起来不错，而且很容易理解。 然而，我最近的经验（我在一家非营利组织工作）是人们不阅读说明（即使是 h2）。
我也喜欢这个。
在千禧年之前
我会做这样的事情
http://codepen.io/pen/8067/1
我用“你必须阅读一些内容并执行某些操作”的方式完成了它。
http://codepen.io/KMB/pen/gdf/1
第二种方案更可取，因为它使选择更明显。一些小技巧，例如更改颜色（虽然我不建议使用红色，因为它很容易与表单中的错误混淆）或在句子后面加上带有绿色勾号或红色“x”的小信封都是可选的。我的图形技能不是很好，所以我就不浪费大家的时间了。
如果表单不是可选的（例如完成注册的第x步），最好有一个预选的“在此选择”或“ – – -”选项，并在提交表单时，如果两个真实选项都没有被选中，则进行错误处理。这有助于让用户做出明智的决定，而不仅仅是继续使用默认选择。
出于设计目的，最好重构短语，以便选择始终放在前面（例如：“[不要发送|发送]电子邮件当……”）。
最后但并非最不重要的一点是，选项中的语言。在否定选项中省略“我”使它更容易与肯定选项区分开来，并且可能产生一些良好的心理效果，因为用户没有被直接称呼。与肯定选项相反。
嘿，我真的很喜欢完成句子的想法，但我想知道它是否会因为单词太多而变得难以扫描。
此外，使用下拉菜单需要对每个选项进行两次点击，而复选框只需要一次。
如果选项有三个或更多，可能会更好。
考虑到很多人在涉及电子邮件设置时非常谨慎，让他们阅读并执行更多操作可能被视为一个优势。
不难想象更多有用的选项（例如“在Github上给我留言”或“在Facebook上给我发垃圾邮件”等）。
阅读和思考，嘘！:-)
这里只是一个提示。我认为如果您必须处理不同的语言，此解决方案可能会导致许多问题。
如果您想强制用户阅读设置，它仍然是一个不错的解决方案，但我更喜欢“一看就懂”的方式。
我同意第二个选项令人困惑，而第三个选项可能有点过头了。第一个选项可以通过不同的文案来改进。
我刚刚更改了措辞，并添加了一个“不要发送任何电子邮件”按钮的占位符，以供那些感觉被垃圾邮件轰炸的人使用。
http://codepen.io/plusplus/pen/1/3
我想我喜欢开头大写的标签，以及用户可以在页面上更快找到的标题（一个单词），然后使用段落来解释标签。
“无电子邮件”链接可以用一个位于列表顶部的魔法复选框代替，该复选框将禁用并隐藏所有其他选项。
http://codepen.io/plusplus/pen/1/4
哦，我还使用了ID进行样式设置。打我吧。（我不会在其他地方这么做）
关于第二个选项，我只想快速说明一点。我患有红绿色盲，红色文本并没有像对非红绿色盲的人那样突出重要性。只是一个想法 :)
我刚刚回去又看了一遍，根本没有看到绿色文本……我以为它是黑色的，哈哈！！
我希望有一个链接到https://css-tricks.cn/group-design-project-list-with-functions/上的条目。
我相信第一个选项是最好的，也足够了。但如果你一定要花哨，我想我会这样做
http://codepen.io/CathyMacars/pen/2/20
干杯：D
我同意复选框是最简单且“不令人困惑”的方式来实现这一点，但稍微修饰一下也没什么坏处
感谢Elijah Millers的精彩切换，我快速制作了一个模拟。
我想这种方法的额外好处是，如果用户关闭了JS，它可以退回到经典的（丑陋的）复选框。
哇，我真的很喜欢这个解决方案，它非常接近我脑海中的想法。感谢漂亮的切换框架（顺便说一下，感谢分享），它运行得非常完美。
一个提示：更改您的标题/文本，使其更清楚地说明这些选项实际的作用（发送电子邮件）。
切换开关，但添加了文本颜色更改。
http://codepen.io/ronaldroe/pen/1/3
不幸的是，在iPad上根本无法使用。
第一个。这是你所需要的。最清晰，最易于使用。
只需匹配您的UI，例如
http://codepen.io/coreyworrell/pen/email-settings/1
有用：在SCSS中，您可以使用rgba中的十六进制颜色。例如，rgba(#000, 0.3)
哦，酷，我以前从未用过它。很高兴知道，谢谢！
更新链接，因为我将其更改为自定义URL：http://codepen.io/coreyworrell/pen/email-settings/1
这是我的：设计挑战参赛作品
我想让它简洁、简单且直观。这比听起来要难得多！
使用的图片是在五分钟内拼凑起来的。不适用于生产环境。但它传达了这个想法。
感谢你的练习，Chris！
这是一个更新。
只是稍微改进了布局。
我的作品使用了大量的图标字体。
http://codepen.io/joshrives/pen/1/10
嗨，图标字体对我来说不起作用（FF 13）。
我想这与您引用字体的http://…方式以及以不同方式实现的同源策略有关。不幸的是，这似乎是CodePen中唯一可能的方式。
http://codepen.io/thomasplevy/pen/6/9
我做对了吗？
如何使用问答结构？例如这样：http://codepen.io/dragn/pen/2/1
足够清晰。文本可能有所不同，例如，它可以是“当发生某些事情时，我们是否应该向您发送电子邮件？是/否”。还可以有一个标题“发送电子邮件时……”以及诸如“这件事发生了？是/否”、“那件事发生了？是/否”之类的问题。
我采用了简单的方法，结合了图标来真正突出显示电子邮件规则的开启和关闭状态。
请告诉我您的想法！
http://codepen.io/ForTheJim/pen/1/18
我真的很喜欢您的示例的视觉效果。
强制性的一项
http://codepen.io/pen/8147/6
非常实用。
啊，版本错了。
http://codepen.io/pen/8147/6
很酷，但在未添加注释的版本中，我花了幾秒鐘才弄清楚該怎麼做。:D
对我来说，操作很清楚，我喜欢这种花哨但不实用的方法。;)
一些说明：您无法撤消您的选择，并且拖动元素在拖放/选择后应该以某种方式吸附到列表中。
为了玩转codepen，我稍微更新了一下。
到目前为止，我真的很喜欢它，喜欢快捷键的风格。肯定会在日常使用中用到它。（codepen，而不是拖动功能）.. ;)
为了玩转codepen，我稍微更新了一下。
到目前为止，我真的很喜欢它，喜欢快捷键的风格。肯定会在日常使用中用到它。（codepen，而不是拖动功能）.. ;)
http://codepen.io/sliver37/full/2/5
糟糕的3G网络… 对不起，重复发帖了。
希望可以在发布评论后10分钟内删除/编辑评论。:S
大家好！
这是我的草稿：http://codepen.io/HugoGiraudel/pen/27/4
所以，我有点将表格方式和切换方式结合起来，将第二个嵌入到第一个中。
据我所知
– 默认未选中（表示“如果跳过此项则不发送电子邮件”），以防止误点击发送按钮并收到数十亿封不需要的电子邮件
– 使用绿色和红色是有意义的，可以避免一些误解
– 表格（行/列）有助于阅读不同的选项
– 即使我没有这样做（时间不够），也可以轻松改进为回退到常规复选框（选中表示“是”，当然）以用于旧版浏览器
无论如何，我想 Chris 的第三个例子（表格 + 单选按钮）清晰明了，可能不会导致任何错误。并且考虑到最干净的方式始终是最好的，我想我们无法做得比这更好。;)
PS：感谢 @Simurai 提供的磨砂金属技巧。
到目前为止，我最喜欢这个。干得好！
我更改了复选框。我认为对于这样的小任务来说，它太多了。^^
http://codepen.io/Veiovis/pen/emailsettings/1
无 JS 的新版本：http://codepen.io/Veiovis/details/emailsettings/4
我同意第一个选项是最佳方法，但我喜欢第三个，所以我使用了它，这是我的看法。
它与原始版本非常接近，我试图通过避免强制点击单选按钮并添加图标/颜色来提高其易用性，以提高清晰度。
这是我的解决方案
我喜欢详细的东西，所以它看起来像自然短语
希望您喜欢这个 :)
只是样式的一点点更新
对不起，HTML 坏了。这个是最终版本！
这是我的代码。
我使用不透明度来突出显示注册选项。
但它可以更改红色/绿色之间的颜色或图标…
代码
http://codepen.io/carlafranca/pen/4/
完整版
http://codepen.io/carlafranca/full/4/1
谢谢
哎呀，刚刚注意到我的代码在 codepen 中被更改为一些下拉菜单，并且在代码中添加了 base64。
在您的网站中使用这样的代码行不好。怎么会这样？！
您没有自己添加它？这将非常奇怪。但它并不危险，它只是一个数据 URI：https://css-tricks.cn/data-uris/
这是我的
http://codepen.io/Druid-of-Luhn/full/form/1
我也喜欢这个。
我认为基本的复选框是更好的解决方案。但是，此问题忽略了最重要的部分，即选项本身的*措辞*。
无论您的解决方案如何，您都需要有清晰、简洁的选项。您可以使用“第三件事”来代替“当某些第三件事发生时”，对吧？
例如，在此评论表单下方是选项：“通过电子邮件通知我后续评论”。这可以替换为“通过电子邮件发送后续评论”或“通过电子邮件发送回复”。
我喜欢你的第三个例子，这是我的代码
http://codepen.io/Rulicimot/full/6/8
足够简单，但仍然需要更多样式……
我喜欢这个。第一个想到“全选/取消全选”选项的人。但这不仅仅是这一点，它是一种简洁的极简主义方法，而不是过于“创意”和花哨。
我喜欢它。感觉如此干净和自然。
这是我的看法：http://codepen.io/karimcossutti/pen/8/8
在我看来，整个句子可点击是一个巨大的优点，而且“从不”选项也应该是必须的。
我相信简单胜过一切。
更新外观
http://codepen.io/anon/full/8225/8
不知道为什么，但这不起作用
http://codepen.io/gregorypratt/pen/email_settings/2
像这个一样
http://jsfiddle.net/gregorypratt/YCrgM/1/
您需要选择 jQuery。
这是我的想法。只是一些简单的滑块开关。
http://codepen.io/anon/full/8293/1
这是我的想法
http://codepen.io/frankspin/full/1/9
做得非常好。
首先选择是否要接收任何电子邮件，然后再向他们展示一堆选项。
我投这个票。
这个真的很棒
我真的很喜欢这个，它很容易理解，布局也很好。我只会稍微设计一下它。
感谢您的反馈
在设计和可用性之间找到一个良好的平衡点总是很困难。作为设计师，您希望使事物变得非常漂亮和闪亮。在这个过程中，您经常会忽略主要问题：用户应该做什么？我期望用户做什么？
因此，不要过度发挥您的设计才能。保持简单、干净且切中要害。
与第三个相同，表格，但使用<label>标签将可点击区域扩展到整个单元格。
http://codepen.io/pen/8317/1
我认为主要步骤是不混合状态。
我的意思是不要这样做
[ ] 当 A 时发送
[ ] 当 B 时不发送
改为这样做
[ ] 当 A 时发送
[ ] 当 B 时发送
始终保持一致。要么是真语句，要么是假语句。
这样用户可以快速识别选项。样式化它们并进行所有花哨的
切换开关、花哨的复选框等很容易。
Sinan
我相信确保用户确实打算取消注册电子邮件列表非常重要，因此我的电子邮件设置包含一些简单的验证码；)
它是 jSFiddle，因为有关如何在 CodePen 上附加外部资源 的文档似乎还没有完整，而且我还没有时间四处查看。如果有人知道如何做到这一点，我很乐意将其迁移。
对于那些在批评之前没有费心查看我的条目的人，这是一个玩笑。当然，您不会使用验证码；我让他们解决复杂的数学问题来取消注册……
静态链接http://jsfiddle.net/sinetheta/vzjrp/
这是我的看法。从设计的角度来看，它看起来不太好，我只是把它当作概念验证和有趣的小实验。
http://codepen.io/alettieri/pen/4/19
感谢您提出这些挑战 @Chris。看看社区想出了什么总是很有趣的。
我觉得很多这些努力都过头了。尤其是所有这些类似 iOS 的滑块……使用台式电脑的人希望看到复选框。如果你开始在台式机和移动设备的 UI 元素之间互换，就会造成混淆。我们不在台式机上使用 iOS 滑块是有充分理由的。
当然，如果你在考虑移动设备，那么也许你会使用它们，但对于台式机使用，我认为它们是大忌。
我不同意添加验证码，我的天哪，如果每次我更改电子邮件中的少量设置都必须进行验证码验证，我明天真的会秃顶的。
我个人认为我们必须在这里采用奥卡姆剃刀原则，最简单的解决方案将是最好的。不要再使用颜色和花哨的东西了，让我们保持简单。
所以我采用了 Chris 的第二个想法，但去掉了颜色，改用不透明度。对于色盲人士来说，不透明度可能更容易注意到，因为对比度发生了明显的变化，而颜色不一定存在这种变化。此外，在 UI 中，通过淡化来显示某个东西被禁用是非常常见的。
所以对我个人而言，我认为这个想法最有效。需要调整 jQuery 以使每个标签可以具有不同的文本，但除此之外……我喜欢它。
http://codepen.io/pen/8450/1
完全同意，我采用了同样的方法。
你甚至可以将其设为单个选项，但保留复选框。
为输入添加一个唯一的类，并使用 jQuery 操作它。
“var $unique = $(‘input.unique’);
$unique.click(function() {
$unique.filter(‘:checked’).not(this).removeAttr(‘checked’);
});”
否定操作令人困惑。用户难道不希望只勾选“不要给我发邮件”的复选框吗？
我不确定我是否理解？你想让标签在未选中时显示“不要给我发邮件”。
你说得对！为每个选项添加特定的颜色是用户理解它的最佳方式。不错！
这是我想出来的
http://codepen.io/AntonNiklasson/pen/email-settings
http://codepen.io/AntonNiklasson/pen/email-settings
这是我的：http://codepen.io/karimcossutti/pen/8/8
与以前的版本斗争了一番 :P
我决定使用自定义复选框，并提供一些高级选项，让用户可以获得更多控制权
http://codepen.io/aklatzke/pen/1/13
我以为我可以在第一个中发布实时代码 –
这是链接：http://codepen.io/aklatzke/pen/1/13
http://codepen.io/pen/8662/1
喜欢这次比赛，谢谢 Chris！
http://codepen.io/pen/8765/3 <- 更喜欢这个，CSS3，无需 JavaScript。
提出了一个有趣的观点，也是我终于开始使用 codepen 的绝佳借口。
这是我的看法；带删除线的标签复选框！
http://codepen.io/JamesMatthews/pen/strike-through-checkboxes/1
http://codepen.io/pen/8792/3
保持简单！
我有点觉得如果我“选中它”，我希望得到一个结果。而不是没有结果。
你不会有两个开关，只是为了一个“打开”另一个“关闭”。
好吧，这是我的两分钱。 :)
附言：我注意到在这个网站上你只有“两个”选项。
“通过电子邮件通知我后续评论。”和
“通过电子邮件通知我新文章。”
我的第三个选项在哪里？它快把我逼疯了！:D lol
这是我的最新版本：滑块和信封的混合。没有使用 JavaScript，但仍然带有输入。
http://codepen.io/Druid-of-Luhn/pen/form/5
这是保持简单是正确做法的例子之一。
我还没有遇到过一个不懂复选框概念的电脑用户，如果有一个，他肯定会被网页设计师想出的任何奇特的东西搞得更糊涂。
你可以在网站设计上疯狂地发挥，但需要用户交互的部分应该尽可能简洁和通用。不要使用颜色编码（色盲怎么办，红绿色实际上是最普遍的色盲类型），不要使用花哨的字体。我也不明白目前流行的开关滑块。
第一次尝试
http://codepen.io/pen/9358/1
玩得开心
伪元素 :after 和 :before
生成内容
计数器
谢谢！
让我们进行更多实验。
想用一个令人难以置信的电子邮件图标动画和自定义复选框做点什么，但是……一天还是 24 小时（直到今年冬至？）；所以，这里有一个第二个版本，尝试不要太烦人的动画
http://codepen.io/pen/10037/3
（这次重置了计数器，一定是在之前的版本中某个过程中删除了这个规则。）
@Baylor Rae': 谢谢你在下面的评论。(不过，我的新尝试在你看来缩进还是不对……抱歉)
我不确定这是否会更好，但如果你将“勾选框”从复选框中取出，并将其作为确认而不是选项，它 *可能* 会更好。
抱歉，链接似乎不起作用，不确定我哪里做错了，好吧，这是可用的副本。
codepen.io/magichat/pen/email-options/
第二种方法真的给了我足够的练习和经验。你知道吗？你不仅仅是复制粘贴。但实际上第一个真的很简单。如果我们没有太多时间，它非常好。
http://codepen.io/pen/9817/4
我认为第一个解决方案最容易理解。在涉及多个可选字段时，它似乎是行业标准。特别是电子邮件设置。
第三个选项也非常清晰 *且易于扫描*。我想这个选项会导致人们花费更多时间阅读每个选项并选择他们想要的选项。
但是，在这种特定情况下，第一个选项是一个有效的选择。除非
有 15-20 个选项，否则它应该很容易让人浏览和
选择他们希望何时收到电子邮件的时间。但是，由于所有复选框都是内联的
彼此之间，很容易错过一个未选中的复选框。
这让我相信 Bart 有 最佳解决方案*。它仍然使用传统的复选框格式，但在选中/未选中时会更改缩进级别，同时无需 JavaScript。
我唯一担心的是缩进方向错误。在我看来，我认为
缩进更多的内容被选中或选择。就像它从
人群中被拉出来，或者它“越过了沙滩上划定的界限”。
因此，我决定制作 Bart 解决方案的自己的版本。http://codepen.io/BaylorRae/pen/email-settings/2
* 如果其他人先做了这个，请回复你的笔的链接。
我真的很喜欢第二种方法。做得很好！
这是我的尝试。我对这些东西还很陌生，还在学习，但对自己的努力感到非常自豪
http://codepen.io/pen/10359/1
Matt
更新一下 – 在选择“改变主意”选项时，复选框 1、2 和 3 保持选中状态。
http://codepen.io/pen/10359/2
抱歉……又做了一些修改。为复选框文本添加了 label 元素 – 更人性化。
http://codepen.io/pen/10359/4
我现在就停下了。保证。
Matt
我知道你没有要求反馈，但我想给你一些建议。
你的代码看起来不错，我没有太多要更改的地方。我注意到的唯一一点是你可以改进你的 jQuery 选择器并添加变量。
你可以使用
$("#controls input[type=checkbox]")选择div#controls内的所有复选框。这将允许你添加更多复选框，而无需每次都硬编码选择器。
此外，将每个 jQuery 对象保存在变量中将防止 jQuery 多次搜索同一元素。在你的示例中，这可能无关紧要，但在完整的网站上是必要的。
以下是修改后的 Javascript 代码。
http://codepen.io/BaylorRae/pen/9/3
只有我一个人无法访问这些 CodePen 链接页面吗？
这些页面中有一半被删除了吗？
例如……
http://codepen.io/BaylorRae/pen/9/3
……带我到……
http://codepen.io/BaylorRae/pen/9
应该写成：“只有我一个人无法访问这些……”