单选框有选中和未选中两种状态,样式上用填充的圆表示选中,描边的圆表示未选中,通过改变状态来给用户反馈。
常见的样式是按钮在左标签在右,在结合特定的场景使用时,两者的位置可以视情况灵活调换。
单选框设计指南
1. 始终确保良好的可用性
对于这样一个简单的组件,想要做好用好,在设计上有一些不可忽视的细节。
首先要避免在单选框列表中嵌套下一层级的选项,因为使用单选框的目的之一就是为了让所有选项清晰呈现给用户,嵌套过多层级会导致整个结构的混乱。
另外要明确的是,单选按钮不应该是唯一可点击的热区,而是要将按钮和标签一起作为热区,便于用户准确点击操作。
这个选择模块由单选按钮、文字标签和图标共同组成,可操作的范围很大,视觉层次也很清晰,设计得既整洁又实用。
2. 保证可读性
单选框列表的布局要有逻辑性,尽量减轻用户的认知负荷。
用户习惯于上下浏览选项和列表,如果将这些选项水平排布,可能会造成两点问题:一个是浏览时视线移动的不习惯,另一个就是如果选项位置过于紧凑,用户可能不知道每个标签到底对应哪个按钮。
除了列表要垂直布局,标签也需要很简洁。标签越长,用户需要花费更多的时间和精力才能了解整个列表。
3. 提供默认选择
想象这样一个使用场景,我们下载了一个新的设计软件,第一次打开时跳出一个弹窗,提示我们是选择经典布局,还是个性化布局,但是我们对这个软件不是很了解,可能并不清楚这两个布局到底是什么样子。
在这种情况下,最好默认选中其中一个选项,这样做一方面可以减轻用户对于选项的纠结,另一方面还能有目的地引导用户使用。
上一篇:天琥设计培训讲解室内设计
下一篇:按钮设计时需要避免的问题有哪些