基础类组件为设计者提供了设计规范原子级的设计指南，从布局、颜色、图标等层面规范了产品的界面语言，指导设计者从0开始搭建产品界面

基础类组件为设计者提供了设计规范原子级的设计指南，从布局、颜色、图标等层面规范了产品的界面语言，指导设计者从0开始搭建产品界面。

1. 设计原则

• 整体性：在组件使用上要考虑整体，例如相同类型的目标对象用同一种颜色表达。
• 合理性：根据业务场景合理选用组件，例如使用虚线按钮用于界面直接添加操作内容。
• 协调性：在界面排版上，要保证界面的协调性，比如图标使用需要保持视觉一致和协调。

2. 图标

图标是B端产品界面中不可缺少的组成部分，图标品质的优劣，直接影响到界面整体的美观度和识别度。

线型图标：页面操作区，建议使用线型图标。

面型图标：导航区可考虑使用面型图标。

3. 颜色

色彩可以影响我们对物体的感受，可以帮助物体传达更为形象的含义。

在B端产品界面中，色彩的使用可以让界面更生动，同时可以辅助界面相关要素的含义传达，相比用户通过阅读文字来理解界面信息，色彩可以帮助用户更快速地理解信息。B端产品色彩体系可为了主色、功能色、中性色和其他色。

• 主色：主色可以传播产品的特性，及确定产品的主基调。主色的应用场景包括主要按钮、重要信息提示、操作状态等。
• 功能色：功能色通常使用在产品内的信息状态中，例如成功、失败、警告、提醒等。
• 中性色：中性色被大量使用在产品界面的文字、边框、分割线等场景中。中性色可以保持产品界面整体的稳定和专业。
• 其他色：除了主色、功能色、中性色，在产品界面上还会需要使用到其他颜色来支持产品界面的设计。

4. 按钮

召唤用户在页面上进行操作：

• 主要按钮：用于主行动点，推荐一个操作区域只有一个主按钮。
• 次要按钮：常规按钮，用于非主要动作。如果不确定选择哪种按钮，次按钮永远是最安全的选择。
• 虚线按钮：常用于界面直接添加操作内容。
• 文本按钮：用于最次级的行动点，或在需要使用文字按钮的地方，如表格中的操作列。
• 链接按钮：用于作为外链的行动点。
• 图标按钮：图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面，如表格右上方的导入、导出按钮。
• 图标+文字按钮：图标并不能完全表达清楚含义的时候，可使用图标+文字的方式，提高按钮识别效率。
• 组合按钮：当两个按钮是互斥的时候，如界面视图的不同展现“树视图、拓扑视图”。
• 下拉按钮：当按钮的数量过多，且动作属于一类，可将其形成一组按钮。
• Block按钮：在引导性场景中，可将按钮适当放宽。