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

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

2019/02/11 9700评论区

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

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

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

手动输入

  1. 输入框Input

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

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

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

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

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

  2. 自动完成AutoComplete

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

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

  3. 数字输入框InputNumber

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

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

点击选择

  1. 单选框Radio

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

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

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

  2. 多选框Checkbox

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

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

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

  3. 选择器Select

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

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

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

  4. 级联选择Cascader

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

  5. 穿梭框Transfer

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

  6. 日期选择器DatePicker

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

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

  7. 时间选择器TimePicker

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

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

  8. 滑块Slider

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

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

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

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

总结

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

  • 输入框Input:最基础组件,除常规外,还有带前/后缀、带图标、带按钮的形式。
  • 自动完成AutoComplete:输入框Input 的一项功能,提供备选项辅助输入。
  • 数字输入框InputNumber:录入范围数值,带步进器精准控制,还可带前/后缀。
  • 单选框Radio:只能选择一个,选项不宜过多,按钮形式可做标签页Tabs。
  • 多选框Checkbox:可多选,选项不宜过多,单个使用可做开关Switch。
  • 选择器Select:以下拉菜单的形式呈现更多选项,可单选/多选,可带输入。
  • 级联选择Cascader:选项数量较大,采用分类的方式将选项分隔。
  • 穿梭框Transfer:可多选,展示选项更多的信息。
  • 日期选择器DatePicker:选择日期,可以选择一段日期。
  • 时间选择器TimePicker:选择时间,可以与日期选择器DatePicker 组合使用。
  • 滑块Slider:录入范围数值,可与数字输入框InputNumber 组合使用,可选择区间,可用分段的形式。

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

欢迎关注作者的微信公众号:「海盐社」

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/tob-backstage-component-1

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

优设专访 转场动效 设计师 扁平化设计 优设大课堂 交互设计师 界面设计 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 设计师专访 平面设计 AI教程 设计理论 神器下载 用户体验设计 字体下载 海报设计 设计趋势 psd下载 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 用户体验 酷站 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里