美文网首页产品设计师的笔记产品经理PMskill
重新认识控件(三)【选择框】

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

作者: 德川亮 | 来源:发表于2014-11-27 01:02 被阅读355次

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

定义

我自己的定义中,就是“单选框”和“复选框”的统称;
操作行为,就是点击选中,和点击取消选中;
单选框在选择组中只能选择一个,复选框在选择组中能选多个
一般样式如图:


复选框和单选框

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

要注意的设计细节

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

qq 邮箱列表头部的选择框,其实际的可操作区域,比看到的大 百度云文件夹列表中,给予了 hover 的反馈,暗示“整行”都可以点击

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

相关文章

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

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

  • iOS 的一点小记载 (三)

    frame和bounds的重新认识 frame以父控件 内容的左上角为坐标原点, 计算出的控件自己 矩形框的位置和...

  • iOS开发常见注意事项(二)

    frame和bounds的重新认识 frame以父控件 内容的左上角为坐标原点, 计算出的控件自己 矩形框的位置和...

  • iOS开发常见问题-frame和bounds

    frame和bounds的重新认识 frame以父控件 内容的左上角为坐标原点, 计算出的控件自己 矩形框的位置和...

  • 十一论剑之iOS项目实战(三)

    frame和bounds的重新认识 frame以父控件 内容的左上角为坐标原点, 计算出的控件自己 矩形框的位置和...

  • 11月7日C#学习总结

    今天学习了列表框控件、组合框控件、单选按钮控件、复选按钮控件、分组框控件。 列表框控件:列表框底部添加项:Add(...

  • 11.7

    今天学习了列表框控件、组合框控件、单选按钮控件、复选按钮控件、分组框控件。。。。。

  • 11.7

    第七章的列表框控件、组合框控件、单选按钮控件、复选按钮控件、分组框控件。

  • combotree(树形下拉框)

    含义 树形下拉框结合选择控件和下拉树控件。它与combobox(下拉列表框)类似,但是将下拉列表框的列表替换成了树...

  • combogrid(数据表格下拉框)

    含义 数据表格下拉框结合了可编辑文本框控件和下拉数据表格面板控件,该控件允许用户快速查找和选择,并且该控件提供了键...

网友评论

  • truelie:但在实际的列表中,往往会有全选、撤销等交互细节。
  • d615438808ae:@德川亮 是的,百度云做的更像windows下习惯的桌面操作,包括快捷键,挺方便。
  • 德川亮:@七号猪圈 后面百度云的例子就是的~
  • d615438808ae:说实话,邮箱的勾选都很难用。要是有ps图层眼睛那种能连着点一篇的就好了
  • 德川亮:@沈晓马 哈哈,我也是前段时间研究这东西才发现的~~
  • shenxiaoma:原来QQ邮箱的点击区域要大一点,我都没发现……

本文标题:重新认识控件(三)【选择框】

本文链接:https://www.haomeiwen.com/subject/ygiitttx.html