您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

设计B端后台,必须搞清楚这些组件(一)

原创文章 分类: 经验/观点 版权:
2764 50 19 0
2019-01-28
16.5
编辑推荐

原文链接:http://t.cn/Etcpasc


感谢「海盐社」的小伙伴:@小火焰 @QQQ 对于这篇分享整理总结给予的帮助,希望对大家会有一些帮助。感谢你们。

Image title

我们在设计诸如CRM(客户关系管理)、OA(办公自动化)等面向B端用户的后台界面时,往往会被各种各样错综繁杂的组件弄得晕头转向,不知该如何选择。有时好不容易选完之后,又会发现有更合适的组件,导致反复修改设计稿,降低了工作效率。


那么在对比了几个常用的组件库(Ant Design / Element / iView)并结合自身的工作经验之后,我选择了一些常用的组件,来和大家简单总结下它们的使用场景以及可能出现的误区。


在Ant Design的组件库中,分为了通用、布局、导航、数据录入、数据展示、反馈、其他这七大类组件。今天先来看看数据录入中的相关组件,我将其又分为了手动输入以及点击选择两大类。(评分、上传等特征明显的组件就不在此赘述了。)


Image title

输入框Input


输入框是数据录入中最常见也是最基础的组件,在需要用户输入内容的时候即可选用。

Image title

除了常规的输入框,带前/后缀、带图标、带按钮的输入框也是较常用到的。


在输入内容中头/尾是相对固定的时候,我们就可以采用带前/后缀的输入框来减少用户手动输入,比如网址输入框就可以加上后缀。

Image title

有时候为了帮助用户了解输入内容的类型,可以在输入框中加上图标,比如输入用户名或密码的时候。

Image title

带按钮的输入框最常使用的场景就是搜索框了。

Image title


自动完成AutoComplete


自动完成其实是输入框Input的一项功能,但是Ant Design和iView中将其单独拎出来了,为了避免大家搞混,我们这儿也单独讲。(Element中在输入框-带输入建议)

顾名思义,自动完成就是辅助用户输入。在输入一部分内容后,提供相关的备选项,不仅可以减少手动输入,还能更精准的输入。常见的使用场景就是搜索框了。

Image title


数字输入框InputNumber


数字输入框特用于需要输入范围数值的场景(电话QQ等号码不宜使用)。右侧的步进器则可以帮助用户精准控制数值的增减。

Image title

当然作为输入框的一种,也可以加上前/后缀来减少固定内容的输入,比如%或者货币单位(¥、$、元、円)。

Image title


Image title

单选框Radio


单选框顾名思义就是在一组选项中仅可选择一个时使用。

Image title

由于单选框的选项都是平铺展示的,所以选项不宜过多,当选项较多时建议采用选择器Select(后文会提到)。


按钮形式的单选框也可以被当作标签页Tabs来使用(标签页Tabs的本质其实就是单选框)。

Image title


多选框Checkbox


多选框则是在一组选项中需要选择多个时使用。

Image title

同样,由于是平铺展示,选项不宜过多。


多选框不同于单选框Radio的是,它可以单独使用,来表示两种状态之间的切换,类似于开关Switch。区别在于开关Switch会直接触发改变状态,多选框则一般用于状态标记,需要配合提交操作使用。

Image title


选择器Select


选择器也是数据录入中很常见的组件,它以下拉菜单的形式来呈现选项(选项较少时建议采用单选框Radio多选框Checkbox平铺展示)。

Image title

除了单选,还有多选的形式。

Image title

上文输入组件中提到的自动完成AutoComplete,其实也是选择器的一种衍生方式——带输入的选择器。



级联选择Cascader


级联选择是指,在选择器Select选项数量较大时,采用多级分类的方式将选项进行分隔,便于用户选择。比如地址选择,就可以按省市区一层层分类。

Image title


穿梭框Transfer


多选框Checkbox选项过多时,除了选择器Select的多选形式,还可以用穿梭框的形式来呈现。相比于选择器Select,穿梭框占据更大的空间,当然也可以展示选项的更多信息。

Image title


日期选择器DatePicker


当需要录入日期的时候,可以选用日期选择器。用户从弹出的日历面板中直接选取即可。

Image title

当然,需要录入一段时间的时候,也可以同时选择开始日期和结束日期。

Image title


时间选择器TimePicker


时间选择器与日期选择器DatePicker几乎一样,从弹出面板中选择时间即可。

Image title

时间选择器和日期选择器DatePicker还可以组合使用。

Image title


滑块Slider


滑块的使用场景类似于数字输入框InputNumber,需要在某个范围内录入数值。不同的是,它可以直接选取而不用手动输入。

Image title

当然,也可以和数字输入框InputNumber配合使用。

Image title

还可以选择某个区间,比如价格区间。

Image title

当数据选项较少或者离散(不连续)时,还可以采用分段的形式。

Image title


Image title

今天主要讲了数据录入的相关组件,共11个:

输入框Input:最基础组件,除常规外,还有带前/后缀、带图标、带按钮的形式。

自动完成AutoComplete:输入框Input的一项功能,提供备选项辅助输入。

数字输入框InputNumber:录入范围数值,带步进器精准控制,还可带前/后缀。

单选框Radio:只能选择一个,选项不宜过多,按钮形式可做标签页Tabs

多选框Checkbox:可多选,选项不宜过多,单个使用可做开关Switch

选择器Select:以下拉菜单的形式呈现更多选项,可单选/多选,可带输入。

级联选择Cascader:选项数量较大,采用分类的方式将选项分隔。

穿梭框Transfer:可多选,展示选项更多的信息。

日期选择器DatePicker:选择日期,可以选择一段日期。

时间选择器TimePicker:选择时间,可以与日期选择器DatePicker组合使用。

滑块Slider:录入范围数值,可与数字输入框InputNumber组合使用,可选择区间,可用分段的形式。


想进一步了解的小伙伴可以移步各大组件库的官网,里面有各个组件更详尽的呈现形式及使用方法。

Ant Design:http://t.cn/RClMDfd

Element:http://t.cn/Et5YQE0

iView:http://t.cn/R3aImLu


注:

1、文中标粗部分均特指某一种组件。

2、各组件库组件中文名各有不同,以英文名为准。

海舟HZ

日格一物,格物致知。知行合一,意诚心正。

191粉丝/26关注

小有见解首页新秀收藏家lv.2
如何让用户对你的设计印象深刻巧用Keynote,为你的演示锦上添花

海舟HZ

海舟HZ

日格一物,格物致知。知行合一,意诚心正。

小有见解首页新秀收藏家lv.2

扫描二维码
去手机端查看海报

海舟HZ

TA已经获得4枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN