1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 设计管理 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

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

时间:2020-06-27   分类:设计管理    作者:网络   来源:网络整理   点击:149

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

九分网络

本文来自九分网络

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

www.9fen.net

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

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

手动输入

  1. 输入框Input

内容采集来自9fen.net

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

内容采集来自9fen.net

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

copyright 9fen.net

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

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

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

九分网络

九分网络

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

内容采集来自9fen.net

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

九分网络

带按钮的输入框最常使用的场景就是搜索框了。 www.9fen.net

设计B端后台,必须搞清楚这些组件(一) www.9fen.net

九分网络

  2. 自动完成AutoComplete 内容采集来自9fen.net

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

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

copyright 9fen.net

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

www.9fen.net

  3. 数字输入框InputNumber 内容采集来自9fen.net

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

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

九分网络

本文来自九分网络

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

设计B端后台,必须搞清楚这些组件(一) 内容采集来自9fen.net

copyright 9fen.net

点击选择

  1. 单选框Radio

www.9fen.net

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

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

本文来自九分网络

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

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

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

copyright 9fen.net

  2. 多选框Checkbox 内容采集来自9fen.net

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

九分网络

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

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

标签: 后台产品设计 后台界面 后台系统设计 后台设计 组件设计

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----