1. 基础知识
基础类组件为设计师提供原子级的设计准则,从布局、颜色、图标等方面规范产品的界面语言,指导设计师从零开始构建产品界面。
1. 设计原则 2. 图标
图标是B端产品界面不可缺少的一部分,图标的好坏直接影响界面整体的美观度和辨识度。
线条图标:在页面操作区域,建议使用线条图标。
脸形图标:考虑在导航区域使用脸形图标。
3. 颜色
颜色可以影响我们对物体的感知并帮助它们传达更生动的含义。
在B端产品界面中,色彩的使用可以让界面更加生动,有助于传达界面相关元素的含义。相比于用户通过阅读文字来理解界面信息,色彩可以帮助用户更快速的理解信息。B端产品的色彩体系可以是原色、功能色、中性色等颜色。
4. 按钮
呼吁用户在页面上采取行动:
2. 形式
表单组件是用户录入数据和系统获取数据的重要途径,丰富的表单组件类型可以帮助设计人员找到适合业务场景的数据录入方式,帮助用户高效的完成数据录入。
1. 设计原则 2. 输入框
要输入较少的总字符数,请使用单行文本框。
3.文本框
要输入大量字符或长文本,但不允许用户调整高度,请使用多行文本框。
4. 文本字段
要输入大量字符或长文本,但允许用户调整高度,请使用多行文本字段。
5. 复合输入框
输入内容必须有单位,或者可以使用复合输入框选择单位。
6. 数字输入框
对用户输入的内容有规定,比如是数字,就使用只允许输入数字的数字输入框。
7. 卡号
输入的内容是银行卡号。
8.身份证
输入的内容是身份证号码。
9. 金额框
输入的是数量。
10.单/多选择器
允许用户从列表中选择一个或多个选项,且选项数量超过5个时,使用单/多选择器。建议选项按照业务需求进行排序,方便用户快速找到,内容展示尽量完整。
11. 自定义多项选择器
允许用户添加自定义选项。
12. 弹出选择器 13. 树形选择器 14. 表格选择器
当单维的信息无法让用户做出选择,需要呈现更多的数据信息给用户以便用户做出合理判断时,可以使用能够展示更多数据信息的表格选择器。
15. 级联选择器 16. 日期/时间/日期时间选择器
为用户提供一种可视化的方式来浏览和选择日期、时间、日期和时间或日期范围。
17. 单选按钮
所有单选选项默认可见,方便用户比较时选择,选项不宜过多,一般在2-5个之间,且至少会同时选中一个选项。
18. 多选框
当可以选择多个选项时,使用复选框。单个复选框可以表示两种状态之间的切换。
19. 滑动输入栏
滑动输入栏可以通过连续或者不连续的区间滑动锚点来选择合适的值,可以用来调节音量、电脑屏幕亮度、色彩饱和度等。
20. 带数字框的滑动输入栏
当用户需要精确的值时,请使用带有数字框的滑动输入栏。
21. 开关
用于切换单个选项的状态。如果开关本身可以用字段清楚表达状态,则无需在开关上添加文字。如果字段无法清楚表达,建议在开关上添加“禁用/启用”等文字来解释状态。
22. 穿梭箱
穿梭框左侧为元素待选区域,右侧为元素已选区域,用户点击穿梭按钮即可完成元素在两个区域之间的移动。
23. 带分拣穿梭箱
允许用户将常用或重要的元素优先排序,并自由调整元素的顺序。
24. 直接上传
一般用于上传不需要预览效果的文件,选择文件后直接上传。文件上传需要明确文件大小、文件格式。
25. 手动上传
一般用于上传不需要预览效果的文件。选择文件后,需要手动点击页面上的上传按钮才能完成上传。文件上传需要明确文件大小和文件格式。
26. 显示上传的缩略图
一般用于需要预览效果的文件上传,选择文件后直接上传。文件上传需要清楚文件大小、文件格式。
27. 拖放上传
将文件拖拽到指定区域即可完成上传,也支持点击上传,文件上传需要明确文件大小、文件格式。
28.上传头像
一般是用于上传图片,上传图片时需要提供清楚的图片尺寸,图片格式。
29. 评级
当内容需要评级时使用。
以下内容将陆续发出(连载):