台系统中,存在大量的组件,合理的应用是做出良好产品的基本功。
本文梳理了常见的「选择」和「输入」,也算是自己长时间产品设计过程中的梳理、认知和总结,自然有不全之处,希望对大家有所帮助。
上篇:选择
允许用户从选项中进行选择操作,用于选择对象或数据,偶有直接触发行为。
常见类型
单选按钮
复选框
图标切换
切换开关
穿梭框/列表构造器
下拉菜单
2. 最佳做法
单选按钮总是以多个(>1)出现,且每个选项都默认直观可见,并在一定情况下需要更多的展示空间。 当只有一个选项或仅仅有两个相互排斥的选项,请考虑单个复选框或切换开关等其他非互斥的选择控件;若当前选项过多时,且在有限的屏幕空间下,请考虑使用下拉菜单或列表框。
由于互斥原因,所有选项间避免重叠。例如:0-20和20-40。
以某种逻辑关系或顺序(如按时间顺序排列、重要顺序等)对选项进行上下或左右排列。
使一个单选选项为默认值,该选项最好是大多数人会选择的或者你希望用户选择的。但在极少数情况下,预选可能会导致不正确假设。例如,涉及性别、政治、宗教信仰等,这些情况下可以不提供默认选项。
标签文本应该简明扼要,并提供上下文,以便用户能够快速理解并做出选择。
为了可读性,请将单选按钮标签文本保留为单行。
不要在选项末尾使用符合。例如,逗号、分号或句号。
将单选按钮图标和文本包含在一起,共为点击区域,以便用户操作。
本文梳理了常见的「选择」和「输入」,也算是自己长时间产品设计过程中的梳理、认知和总结,自然有不全之处,希望对大家有所帮助。
上篇:选择
允许用户从选项中进行选择操作,用于选择对象或数据,偶有直接触发行为。
常见类型
单选按钮
复选框
图标切换
切换开关
穿梭框/列表构造器
下拉菜单
2. 最佳做法
单选按钮总是以多个(>1)出现,且每个选项都默认直观可见,并在一定情况下需要更多的展示空间。 当只有一个选项或仅仅有两个相互排斥的选项,请考虑单个复选框或切换开关等其他非互斥的选择控件;若当前选项过多时,且在有限的屏幕空间下,请考虑使用下拉菜单或列表框。
由于互斥原因,所有选项间避免重叠。例如:0-20和20-40。
以某种逻辑关系或顺序(如按时间顺序排列、重要顺序等)对选项进行上下或左右排列。
使一个单选选项为默认值,该选项最好是大多数人会选择的或者你希望用户选择的。但在极少数情况下,预选可能会导致不正确假设。例如,涉及性别、政治、宗教信仰等,这些情况下可以不提供默认选项。
标签文本应该简明扼要,并提供上下文,以便用户能够快速理解并做出选择。
为了可读性,请将单选按钮标签文本保留为单行。
不要在选项末尾使用符合。例如,逗号、分号或句号。
将单选按钮图标和文本包含在一起,共为点击区域,以便用户操作。