组件库是针对不同数字孪生场景的标准化设计资源，包含可复用、可配置、可扩展的视觉元素和交互逻辑。基于统一的设计风格框架，采用原子化设计理念，将复杂的数字孪生界面拆解为图表、控件、布局模板等基础模块。旨在通过基础组件的复用减少重复性步骤，利用标准化流程缩短项目交付周期；建立色彩、布局、动效约束体系，确保多端多场景的视觉一致性；提供数据到视觉的映射规则，支持复杂业务逻辑的可视化表达。
（以下内容均来源于[[《数字孪生视觉语言白皮书》]](易知微 - 数字孪生仿真渲染引擎与可视化应用，感兴趣的朋友可以点击下载完整版。 ）
组件库具备以下意义：
- 确保一致性： 统一设计规范，确保跨平台、跨场景的视觉统一；
- 提升开发效率： 通过可复用组件，减少重复工作，加速开发进度；
- 加速交付： 标准化流程提高适配效率，缩短项目交付时间；
- 提高可维护性： 模块化设计便于后期更新与扩展；
- 资产沉淀： 构建可视化设计资产库，便于资源积累与复用；
- 项目协同： 组件库确保团队成员快速协作，有效支持项目优化。
1 配色规范：
-
概况 定义大屏设计中主色、辅助色、强调色等颜色的使用规则，以及颜色分布占比。
-
意义 确保大屏视觉风格统一，突出重要信息，提升整体美观度。
-
注意点
- 保持颜色对比度，确保信息清晰可读，避免颜色过多或过杂，影响视觉效果；
- 最佳呈现比例为 6：3：1（主色：辅色：强调色）。
2 字体规范：
1) 概况 规范标题、阅读性文字、图表文字等元素的大小、层级、间距、对齐方式及透明度。
2) 意义 提升数字孪生项目中文字的可读性和层次感，增强专业性。
3) 注意点
- 确保文字在远距离观看时依然保持清晰可辨；
- 保证文字风格一致，避免 3 种以上的字体混用，推荐使用等宽数字字体。
3 装饰元素：
1) 概况 包含面装饰、翻牌器装饰、标题装饰、边框装饰等多种装饰元素。
-
意义 美化大屏界面，突出重点信息，增强视觉吸引力。
-
注意点 避免过度装饰，保持与项目整体风格协调，以免干扰关键信息传达。
4图表组件：
1) 概况 涵盖折线图、柱状图、饼图、仪表盘、进度条等可视化组件。
2) 意义 直观展示数据，帮助用户快速理解信息。
3) 注意点
- 图表配色的合理度；
- 字体大小是否适配；
- 鼠标悬浮时浮窗样式的调整；
- 选择与需展现数据特点相匹配的图表类型，确保信息清晰、可读性强。
5 交互组件：
1) 概况 包括选项卡、选择器、下拉菜单、按钮、搜索框等交互式组件。
2) 意义 辅助用户与大屏进行交互，符合认知心理学，提升操作便捷性。
3) 注意点
- 统一各个界面之间的交互逻辑，降低用户的学习成本；
- 通过调整组件展示状态，如：悬停/点击/禁用等隐性配置项，确保信息反馈效率。
6 布局模板：
1) 概况 规定图表大小、间距及分布方案，确保页面整齐清晰。
2) 意义 优化信息呈现，突出重点内容，提升视觉效果。
3) 注意点 根据每个项目中不同模块的划分情况及其间距，建立信息密集区、平衡区、留白区等 不同板块，来区分各视觉密度的层级。
7 框架样式：
1920*1080 标题居中对齐布局「黄金分割布局」
1920*1080 标题居右布局「黄金分割布局」
2560*1080 标题居中布局「三焦点布局」
2560*1080 标题居右布局「三焦点布局」
-
概况 提供不同屏幕尺寸的布局适配方案，如 2560x1080、1920x1080 等。
-
意义 确保大屏在多种移动端上显示效果良好，提升兼容性。
-
注意点
- 兼顾灵活性和可扩展性，适应未来展示设备变化的可能性；
- 边缘安全区最好左右间距各留空 96px 以上，避免内容截断的情况发生。
8 主视觉：
-
概况 调整 3D 地图、2D 地图等地图组件的风格，预设标牌、散点、热力图样式。
-
意义 清晰展示地理信息，提升数字孪生项目的视觉冲击力。
-
注意点 注重地图细节与整体风格融合，确保信息可读性。
易知微基于多年在数字孪生及数据可视化领域丰富实践，沉淀了诸多经验成果，欢迎大家互相交流学习：
《数字孪生视觉语言白皮书》下载地址：easyv.cloud/references/…
《数字孪生世界白皮书》下载地址：easyv.cloud/references/…
《数字孪生行业方案白皮书》下载地址：easyv.cloud/references/…
想申请易知微产品免费试用的客户，欢迎点击易知微官网申请试用：易知微 - 数字孪生仿真渲染引擎与可视化应用
