赞助商
立即赞助

从四个部分,帮你完全掌握单选框的设计方法

UI设计3年前 (2021)发布 流光
3.5K 0 0

单选框是常常见表单元素。它常被用来从组互斥相关选项选择个单独选项。击个未选单选框时,它会被选,其他按钮则会变成未选状态。

发展历史

单选框命名(Radio)来于旧收音上物理按钮,时被用来在频率和预电台切换。个按钮被按下时,所有其他按钮都会弹出,使被按下按钮成为唯处于「按下」状态按钮。

从四个部分,帮你完全掌握单选框的设计方法

该概念后来被用在磁带录音、盒录音以及大名鼎鼎「随身听」上。

从四个部分,帮你完全掌握单选框的设计方法

计算出现后,施乐公司提出了GUI概念, Xerox Star 8010工作站是第个在图形用户界上使用单选框设备。

从四个部分,帮你完全掌握单选框的设计方法

后来被Apple Lisa,Apple Macintosh以及Microsoft Windows采用,成为了标准用户界组件,沿用至今。

从四个部分,帮你完全掌握单选框的设计方法

何时使用

当用户需要在一组互斥的选项中进行单一选择时使用单选框;果要进行个选择,推荐使用多选框

从四个部分,帮你完全掌握单选框的设计方法

当选项数目2-7之间时使用单选框;如果选项超过7,推荐使用下拉框。

从四个部分,帮你完全掌握单选框的设计方法

如果两含义相反的选项,如「同意」「不同意」,「接受」「拒绝」,建议使用一多选框或者关。

从四个部分,帮你完全掌握单选框的设计方法

如果每选项都同的优先级,推荐选项时,使用单选框;如果需向用户推荐某选项,可以使用下拉框。

从四个部分,帮你完全掌握单选框的设计方法

提供的选项用户不很熟悉?如果用户看了第一选项就能预见到所的内,如「周一」,那么后的选项「周二到周日」,这种况下就不需将所的选项都展示出,可以使用下拉框简化界面。

从四个部分,帮你完全掌握单选框的设计方法

行为交互指南

1. 选项

在设计单框的项时,要充分考虑户的实际情况,给的项要覆盖到有的情况。例如,要考虑到户进行择的情况,这时需要供一个「无」的项。

从四个部分,帮你完全掌握单选框的设计方法

同样,给的项有可都符合户的情况,如果有的项户都可会,就需要供一个「它」项。

从四个部分,帮你完全掌握单选框的设计方法

有项应该满足「互斥」的原则,因此项之间要避免存在交集。例如,在一个年龄的择设置上,如果供的项为「20-30岁」和「30-40岁」,那么如果户好30岁该如何择?

从四个部分,帮你完全掌握单选框的设计方法

项覆盖要全面,现遗漏。如果遗漏某种情况,户可无法进行择。例如,在一个年龄的择设置上,如果供的项为「20-30岁」、「31-40岁」、「40岁上」,那如果户小于20岁该如何择?

从四个部分,帮你完全掌握单选框的设计方法

默认选项

为单选框代表了组互斥选择,所以默认情况下是要选择个单选项。如默认情况没有选择,用户进选择后,法返回默认情况,这违反了「可撤销做」交互原则。

从四个部分,帮你完全掌握单选框的设计方法

将第个选项作为默认选项,这符合用户认知。如将第个或其他选项作为默认选项,用户会以为出现了问题并感到疑惑。这时需要调选项序,确保第个选项为默认。

从四个部分,帮你完全掌握单选框的设计方法

为默认选项是第个,此需要选择最安全,最有可能选项作为默认选项,提前预判用户操作,提升选择效率。

从四个部分,帮你完全掌握单选框的设计方法

选项排序

选项排序影响用户操,因此需要遵守一定原则。一般情况下,按逻辑顺序,选择概率由高到低;或者按照复程度排序,由简单到复;也以按照操风险排序,将最安的操放在前边,由风险最低到最高进行排序。

从四个部分,帮你完全掌握单选框的设计方法

排列对齐方式
默认情况下,推荐竖直排列。竖直排列相对于水平排列而言,容易读取和定位,可以提高用户的浏览效率,所有的选项进行左对齐,不用受制于选项的标签文字长短。

但竖直排列会占用较多的垂直空间,如果垂直空间受限,可以考虑水平排列。水平排列的时候,注意每选项之间的间距,间距尽一点,不然用户会分不清单选按钮的文字到底还后。

从四个部分,帮你完全掌握单选框的设计方法

交互区域

选框的面积较,用户在点击的候会比较困难。可以通过扩大点击的交互域来提高易用性,将标签文字也置为可点击,增加操作域的面积,方便用户操作。

从四个部分,帮你完全掌握单选框的设计方法

文字标签

每个项都要配合相应的字标签来指示该项代表的含义。字标签需要简洁明了,一般使短语而是句子,因此需要句号来结尾。

尽量保证每个文字标签用语的表达的一致性,不要出现有的用名词,有的用动词的情况。

从四个部分,帮你完全掌握单选框的设计方法

仅体现每个选项之间的差异,不用重复选项之间相同的部,将重复部提出来放在整个选项的上方。

从四个部分,帮你完全掌握单选框的设计方法

保证选项尽量简洁,如果需要解释说,可以在选项下方使用独一行文字。

从四个部分,帮你完全掌握单选框的设计方法

如果标签文字无法进行简,必须使用多行文字,将选按钮文字顶对齐。

从四个部分,帮你完全掌握单选框的设计方法

状态

每个项都有中和未中两种情况,每种情况对应了3种交互状态,分别为默认、悬浮和禁。

从四个部分,帮你完全掌握单选框的设计方法

上就是我对单框的总结,分为定义、发展历史、使场景和行为交互个分。中难免有遗漏和错误,大一起来讨论!

欢迎关注作者公众号:「瓦力UX」

从四个部分,帮你完全掌握单选框的设计方法

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

最近一直在恶补关于结构化思维的知识,作为一名视觉设计师的我,经常使用发散思维的方式来工作和思考。虽然在工作中常常能冒...
结构化思维
QQ-自习室是一款以学习为特色,基于手机QQ平台的陪伴型多人直播产品,简单来说就是一个线上的自习室。作为疫情期间诞生的创新...
QQ自习室
竞品桌面研究分析 1. 探索范畴 这次的探索范畴主要是针对L3及L4级别自动驾驶车辆的车外交互场景及设计路径探索,以及针对当...
交互设计
怎样的交互设计才算清晰完整,下面是从实际项目中总结出来的一些经验,分享给大家,共同学习进步。 产品交互设计稿和研发结果...
交互文档
如何从众多的设计点中找到一个清晰的设计主线呢?只需从3个方面切入。 小明的设计故事:身为设计师的小明,刚刚遇到下发的设...
业务目标
很多 UI 设计师和我交流,想学交互设计,也有一部分也想转交互。 如何从入门到精通,这里我以自己的亲身经历说说交互从入门...
交互设计
网易UEDC – 张书超 : 在过去一年多的时间里,我有幸参与了电视端大屏幕的项目。在不断的尝试、探索和设计中,也收获了一些关...
交互设计
推荐算法出现之前,寻找信息的主场景是通过搜索获取。 用户通过搜索框,输入目标的关键词进行查询。这一过程是用户的主动行...
交互设计