基础基础类组件为设计者提供了设计规范原子级设计指南!

一、基本

基础组件为设计人员提供设计规范的原子级设计指南,从布局、颜色、图标等多个层次规范产品的界面语言,指导设计人员从零开始构建产品界面。

1. 设计原则2. 图标

图标是B端产品界面不可或缺的一部分。图标的好坏直接影响界面的整体美感和辨识度。

线条图标:在页面操作区,推荐使用线条图标。

人脸图标:考虑在导航区域中使用人脸图标。

3. 颜色

颜色可以影响我们对物体的感觉mfc小游戏程序基于对话框,并可以帮助物体传达更多的比喻意义。

在B端产品界面中,色彩的运用可以让界面更加生动,同时有助于传达界面相关元素的含义。与用户通过阅读文字来理解界面信息相比mfc小游戏程序基于对话框,颜色可以帮助用户更快地理解信息。B端产品的色系可以是主色、功能色、中性色等颜色。

4. 按钮

召唤用户在页面上做某事:

二、表格

表单类组件是用户输入数据和系统获取数据的重要途径。多种表单组件类型可以帮助设计人员找到符合业务场景的数据录入方式,帮助用户高效完成数据录入。

1. 设计原则2. 输入框

要输入更少的总字符数,请使用单行文本框。

3. 文本框

要输入较大的字符总数或较长的文本,但不允许用户调整高度,请使用多行文本框。

4. 文本字段

输入较大的总字符数或较长的文本,但允许用户调整高度并使用多行文本字段。

5. 复合输入框

输入内容需要有单位,也可以选择单位,使用复合输入框。

6. 数字输入框

对用户输入的内容有规定,如数字,使用只输入数字的数字输入框。

7. 卡号

输入内容为银行卡号。

8. 身份证

输入身份证号码。

9. 金额框

输入是金额。

10. 单选/多选选择器

允许用户使用单选/多选选择器从超过 5 个选项的列表中选择一个或多个选项。建议的选项按业务需求排序,因此用户可以快速找到它们,并尽可能保持内容完整。

11. 自定义多选选择器

允许用户自定义添加选项。

12. 项目符号选择器13. 树选择器14. 表选择器

单维信息无法让用户做出选择。当需要将更多的数据信息呈现给用户,让用户做出合理的判断时,就使用了可以显示更多数据信息的表格选择器。

15. 级联选择器 16. 日期/时间/日期时间选择器

为用户提供一种直观的方式来浏览和选择日期、时间、日期时间或日期范围。

17. 单选按钮

Radio的所有选项默认可见,方便用户对比选择。选项不宜过多,一般在2-5个之间,同时会选择一个选项。

18. 复选框

当可以多选一组选项时使用复选框。单个复选框可以表示两种状态之间的切换。

19. 滑动输入栏

滑动输入条可以通过连续或间歇的间隔滑动锚点来选择合适的值。可用于调节音量、电脑屏幕亮度、色彩饱和度等。

20. 带数字框的滑动输入栏

当用户需要精确值时,使用带有数字框的滑动输入栏。

21. 开关

用于切换单个选项的状态。在匹配字段和开关本身可以表达清晰状态的情况下,不需要在开关上添加文字。在字段不能表达清楚的情况下,建议添加“禁用/启用”等文字来描述开关中的状态。

22.穿梭箱

穿梭框左侧为待选元素区,右侧为已选元素区。用户点击穿梭按钮,完成两个区域内元素的移动。

23. 带分拣梭

允许用户将常用或重要的元素排序到最前面,并自由调整元素的顺序。

24.直接上传

一般用于不需要预览效果的文件上传,选择文件后直接完成上传动作。文件上传需要明确的文件大小和文件格式。

25. 手动上传

一般用于上传不需要预览效果的文件。同时,选择文件后,需要手动点击页面上的上传按钮,完成上传动作。文件上传需要明确的文件大小和文件格式。

26. 显示缩略图上传

一般用于需要显示预览效果的文件上传,选择文件后直接完成上传动作。文件上传需要明确的文件大小和文件格式。

27.拖拽上传

将文件拖入指定区域即可完成上传。它还支持点击上传。文件上传需要明确的文件大小和文件格式。

28.头像上传

一般上传图片。图片上传需要清晰的图片尺寸和图片格式。

29. 评分

在需要对内容进行分级时使用。

以下会陆续发出(序列化):

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发

请登录后发表评论