数极客首页

重新认识控件(三)【选择框】

重新认识控件(三)【选择框】

最近总想着,“憋”出一篇“大”文章,但是事实上越是想憋,越是憋不出个满意的,索性写写小的观察和总结。也许写的内容不周全,但是自己写的舒心和惬意

定义

我自己的定义中,就是“单选框”和“复选框”的统称;

操作行为,就是点击选中,和点击取消选中;

单选框在选择组中只能选择一个,复选框在选择组中能选多个

一般样式如图:

重新认识控件(三)【选择框】

复选框和单选框

并且在不同浏览器下,显示的样式不太一样。但可以通过前端开发,使得它们在各个浏览器下保持一致的样式;

要注意的设计细节

一般来说,选择框前部的镂空图形,是暗示当前元素可以选择的。正是因为这个原因,操作选择框时,人会倾向于点击图形。但是由于图形本身所展示的区域较小,根据费茨定律,这是不利于人去完成点击的。所以在这个地方的理想效果是,暗示其实际的可点区域,或者至少增大其实际可点的区域。

下图就是选择框细节做到位的例子

重新认识控件(三)【选择框】
qq 邮箱列表头部的选择框,其实际的可操作区域,比看到的大

重新认识控件(三)【选择框】

百度云文件夹列表中,给予了 hover 的反馈,暗示“整行”都可以点击

当然,图形后面紧挨着的那段文字,是可以点击的,这是个常识,我就不多说了。

上篇:重新认识控件(二)【Web传图控件】

作者:@德川亮;via:简书

给大家推荐我国新一代大数据用户行为分析与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合分析用户行为数据和业务数据,可以自动监测网站、APP、小程序等多种渠道推广效果分析,是增长黑客们必备的互联网数据分析软件。数极客支持实时多维分析、漏斗分析、留存分析、路径分析等十大数据分析方法以及APP数据分析网站统计网站分析小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据分析模型,是用户行为分析领域首款应用定量分析与定性分析方法的数据分析产品

发表评论

评论已关闭。

相关文章