SuperAPI AI 工具集

toggle-switch-patterns

设计与创作

查看项目

更新于 10-16 05:07

技能介绍

用途:这是一份界面设计参考,用于在表单和设置界面中选择并实现布尔型输入控件,包括开关(Toggle switch)、复选框(Checkbox)、单选按钮组(Radio group)等。

主要能力:提供控件选择对照表,按需求给出推荐控件及理由。例如:需要立即生效的开关用 Toggle switch;需要随表单提交的开关用 Checkbox;从少量选项中选一个用 Radio group;从大量选项中选一个用 Dropdown;从少量选项中选多个用 Checkbox group;从大量选项中选多个用 Multi-select dropdown。

使用规则:开关应立即生效、无需保存按钮;标签描述开启状态(如“Enable notifications”而非“Disable notifications”);清晰展示当前状态(颜色、位置、可选 ON/OFF 文字);最小尺寸 48px 宽、24px 高,移动端更大。复选框用于选择不会立即生效的场景;父复选框在子项状态混合时使用不确定状态;相关复选框应分组,超过 7 个改用多选下拉。单选按钮组应始终显示全部选项,选项过多则改用下拉;应预选一个选项,不要全部未选;优先垂直布局,仅 2-3 个短选项时可用水平布局。

适用场景:设置面板、偏好配置、表单中的布尔与单选/多选输入设计。

限制:资料未提供具体代码实现、框架示例、无障碍细节或平台差异说明。