radio单选组件
视频及原型文件下载:https://study.163.com/course/courseMain.htm?courseId=1209770824&share=2&shareId=400000000540015
定义:应用于列表中两个或两个以上互斥的选项,用户必须从中至少选定一个。
交互原则:
1、将单选框只用于设置,单选框更改设置,而不是像使用行动按钮那样来执行命令。
2、选项应该易于理解且容易区分,单选框存在的一个最大可用性问题是选项中包含模糊、误导、难懂的内容,用户一般很难理解。例如:男、女、不确定。
3、始终提供一个默认的选项。
4、垂直展示列表,水平排列的单选框选项不易于用户快速浏览定位。
5、将整个标签选项作为点击区域,单选框所占空间很小,所以,根据菲茨定律,它们很难被点击。为了扩大点击区域,我们应让用户不仅能点击那个圆点,还可以点击整个选项。用户可以通过点击圆点和跟随其后的选项完成选择。
6、使用单选框代替下拉列表,如果选项少于7个,应考虑使用单选框。
7、避免嵌套,使用单选框时应尽量避免与其他单选框或checkbox嵌套。
交互说明:
1、【默认状态】:默认单选框是哪个选项是选中的,例如:默认单选框组中,默认选中“已提交”;
2、【状态改变时】:单选框选中的状态发生改变时,会影响到哪些元素,例如:会员选择字段选项“其它”时,下面加载显示输入框,输入具体的内容;
3、【单选框组中的选项枚举】:将所有的选项枚举出来,告诉研发同学,具体的数据内容或来源,例如:会员类型为:金牌会员、银牌会员、铜牌会员;
使用场景:
1、选项低于五个时,且为单选;
2、和select的区别是选项全部展示出来。
例如:boss直聘填写个人信息时,性别选择男女时,就是一个radio单选组件。
视频及原型文件下载:url.cn/5DBHMuo