快好知 kuaihz

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

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

定义

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

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

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

一般样式如图:

复选框和单选框

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

要注意的设计细节

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

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

qq 邮箱列表头部的选择框,其实际的可操作区域,比看到的大

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

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

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:重新认识控件【选择框】  控件  控件词条  重新  重新词条  认识  认识词条  选择  选择词条  
交互

 关于快速原型的一点纠结

 作为一个交互设计师和工具控,我对原型设计应该用什么工具这个话题一直很感兴趣。工作至今,陆续使用过很多不同类型的原型工具,从最基本的纸笔,到Axure RP/O...(展开)

交互

 场景化营销驱动金融产品迭代设计

从微信红包到手Q红包,腾讯的互联网金融从起航到现在,一直携带着很强的社交化基因。基于微信和QQ这两大社交网络平台,社交化能帮助金融产品进行社会化营销。产品通过好...(展开)

交互

 改版设计的思路(上):发现问题

做改版设计大体思路很简单,只需要做好两件事:发现问题与解决问题。今天我们先来搞定第一件事:发现问题。给你下面这样的网站首页,让你找视觉层面的问题,你会怎么阐述?...(展开)