1. 概述
适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FineVis 的相关功能。
本指南旨在帮助用户利用现有功能，通过简化流程、快速复用和高效工具，快速制作高质量的可视化模板，从而提升项目的交付速度和质量。
在开始 FVS 模板开发之前，用户需要明确模板的开发需求，具体的需求明确与设计指引可以参考：明确需求与设计。需求明确后，用户可以结合本文提供的具体步骤，进行高效的模板开发。
2. 判断制作路径
通过合理选择制作路径，用户可以大幅度提升工作效率，减少重复工作，本章节将帮助用户快速判断适合的制作路径。根据不同的需求和场景，用户可以选择整套模板复用、组件复用或自定义制作。
在模板制作中，资源复用是首选策略，旨在通过现有资源的层层筛选，最大程度减少重复工作，并确保效率与一致性。以下是评估资源复用可能性的步骤与方法。
1）浏览可用资源
资源市场模板：优先查看 FVS资源中心的在线资源中是否存在能够直接满足需求的整套模板。若模板覆盖需求的 70% 以上，即为最优的复用选择，具体见下文评估资源比例的推荐方法。
组件资源：如果整套模板无法满足需求，但某些组件可以满足核心功能和视觉要求，可以通过组件拼装的方式制作模板。
本地资源：检查历史项目或团队资源库中是否有类似的模块、组件或布局，可以复用后进行局部调整。
2）评估资源复用比例
在浏览资源后，结合以下四个维度评估模板或组件的复用适配度：
内容匹配度：模板是否包含与需求相符的核心数据类型与指标
风格一致性：模板主色调等是否符合品牌规范或项目需求
注：色系差异可通过主题样式管理功能进行快速调整。
核心组件支持度：模板中是否包含复杂组件（如三维模型或动态图表）；模板是否是围绕这一核心组件进行设计
注：若核心组件符合，建议优先考虑复用模板，再进行拼装、调整。
功能满足度：模板是否具备需要的交互功能，如联动筛选、动态高亮
3）选择路径
可根据资源适配程度选择对应路径，如下表所示：
适配程度 | 适用场景 | 推荐路径 |
|---|---|---|
| 高度匹配 |
| 整套模板复用（高度复用） |
| 部分匹配 | 模板不完全满足需求，但需求复杂度低、个性化需求少 | 组件拼装路径（部分复用） |
| 不匹配 |
| 自定义路径 |
3. 模板制作
注：以下步骤为仅为建议流程，可以根据个人习惯和实际需求调整执行顺序。
3.1 模板设计与调整
在设计新模板时，需要先进行基础的创建和布局规划。这些步骤可以帮助快速搭建模板的基本框架，通过科学的布局规划和组件复用，可以显著提高工作效率，并确保模板的结构清晰、易于管理。不同制作路径的步骤有所区别，具体如下文所示：
3.1.1 高度复用
直接复用模板是最快捷的制作方式，既能保持风格统一，又能快速响应业务需求变化，是模板制作的首选路径。
帆软提供了大量官方案例，让用户上手开发大屏模板不再是难题。
1）筛选模板
通过 FVS 资源中心的「在线资源」或「资源中心」里的历史模板找到适配的模板，可根据行业、业务场景等进行筛选。资源中心的使用可参考：FVS资源中心 。
推荐使用套件包，覆盖多种常见场景，风格统一且兼具美观与实用性。资源套件覆盖样式（文字、颜色、布局）、组件、素材、模板等四大资源，组合使用同一风格系列的各类组件，轻松、高效搭建风格「一致性」的模板。
2）调整组件
根据需求和草稿对模板内容进行删改，建议优先通过资源库寻找可复用的素材，快速完成制作。具体方法请参见：组件资源复用 。
注：建议选择同一风格色系主题的，可以减少不必要的样式调整成本。
3）调整视觉
在完成模板基础结构后，可以根据需求调整视觉风格，提升模板整体一致性与美观性。
| 类型 | 说明 |
|---|---|
| 全局替换 | 当需要整体调整模板风格（如改变主色调或字体）时，使用 FVS模板样式管理 可以快速完成全局替换。 优势：操作简单且高效，一次性应用到整个模板，减少重复劳动。
|
| 局部调整 | 针对图表的具体样式，大小布局进行调整，具体可参考 FVS组件样式属性 优势：可以对特定组件进行精细控制和个性化定制 建议：图标、背景等素材同样可以优先使用套件包
|
3.1.2 部分复用
部分复用的核心是根据需求设计规划布局后利用现成组件资源快速搭建，适合在模板无法完全满足需求，但可以通过组件拼装和局部调整来完成的场景。
1）新建模板
点击设计器左上角「文件>新建可视化看板」，创建一张空白看板，可自定义模板名称和尺寸。如下图所示：
注：建议在新建模板时使用 模板样式管理功能 ，提前定义主题样式或选择内置主题，这样可以大幅减少后续每个组件的单独颜色调整时间，提高效率，并确保风格统一。
2）规划布局
使用 辅助线工具 对画布进行分区，便于调整组件大小与对齐。
注：若已有布局草图，可使用 图片组件 导入草图作为背景参考，方便后续组件的精准拖拽。
3）复用组件
寻找合适的组件资源，可直接添加至画布使用。
套件包，如晨曦蓝套件包：种类丰富，风格统一，适用于大部分场景。
资源市场组件：通过主题和标签筛选符合需求的组件或复制其他模板当中的组件。建议优先“官方严选”
本地资源组件：复用历史项目中的组件或模块。
注：建议选择同一风格色系主题，可以减少不必要的样式调整成本。
4）样式调整
针对图表的具体样式，大小布局进行调整，具体方法请参见： FVS组件样式属性 。
注：图标、背景等素材也建议优先使用套件包。
3.1.3 自定义路径
自定义路径适用于需求高度复杂或设计高度个性化的场景，但制作成本相对较高。
1）新建模板
点击设计器左上角「文件>新建可视化看板」，创建一张空白看板，可自定义模板名称和尺寸。
注：建议在新建模板时使用 模板样式管理功能 ，提前定义主题样式或选择内置主题，这样可以大幅减少后续每个组件的单独颜色调整时间，提高效率，并确保风格统一。
2）规划布局
使用辅助线工具对画布进行分区，便于调整组件大小与对齐。
注：若已有布局草图，可使用图片组件导入草图作为背景参考，方便后续组件的精准拖拽。
3）添加组件
添加所需的图表、文本框、图片等组件。
3.2 模板优化与功能设置
在完成模板的基本创建和布局规划后，还需要对模板进行优化和功能配置。步骤如下：
1）建立图层管理与分组规范
在处理多分页或复杂模板时，良好的图层管理与分组规范能够显著提高效率，特别是在后期复用或调整模板时。具体可参考第 4.2 节
2）替换数据源
将模板中使用的默认数据替换为实际业务数据，使模板的展示内容与场景匹配。具体方法请参见：数据集快捷替换 。
3）设置交互
为提升用户体验，可为模板添加交互功能或其他高级效果。具体方法请参见：FVS组件交互属性 。
4）预览并调整
完成模板制作后，预览并进行细化调整，确保最终效果符合预期。
4. 搭建规范
4.1 辅助工具
在模板制作中，合理使用辅助工具可以有效提升制作效率，优化组件的排列与布局，为模板呈现提供更好的视觉效果。以下为 FVS 中常用的辅助工具及其应用场景：
1）画布辅助线
通过在画布上添加辅助线，可以轻松对齐组件。组件在移动时会吸附到辅助线位置，确保排列整齐、美观。具体方法请参见：画布辅助线 。
2）快捷键
FVS 提供了多种画布快捷键，熟练使用快捷键可以在常规操作中节省大量时间，显著提升制作效率。
注：快捷键都是针对组件的，对分页不生效。例如选中分页，无法使用快捷键删除，只能单击鼠标右键点击删除。
3）组件对齐
组件对齐功能可以帮助快速调整多个组件的位置，使其保持在同一水平或垂直线上，从而形成整齐的排版布局。具体方法请参见：组件对齐 。
4.2 图层管理与分组规范
在模板设计中，图层和分组的有效管理不仅能提升工作效率，还能在项目扩展或后期调整时减少不必要的工作量。
4.2.1 图层管理
| 操作 | 建议 |
|---|---|
图层命名 | 为每个图层设置清晰的名称，如「页面1大标题-标题组件」、「左侧图表区-折线图」。 |
图层顺序 | 将重要组件放置在上层，辅助信息放在底层，如背景图层。 使用“置顶/置底”功能快速调整图层顺序。 |
图层锁定 | 锁定完成的组件，避免误操作导致样式或位置变动。 常用于背景图、固定标题等无需修改的组件。 |
图层隐藏 | 临时隐藏某些图层，专注调整特定区域，避免干扰。 |
4.2.2 组合
在 FVS 中，将多个组件合并为一个组合，可以整体调整位置、大小或添加特效。
1）建立模块化逻辑：将关联组件分组，如左某一区块的所有图表，如通过多种图表组件构成的某一指标卡模块。
2）优化命名：使用清晰的分组命名（如“左上销售数据区”），建议根据区域+功能命名，减少团队成员理解成本。
3）在组合上增强动态效果：如对分组整体添加 动画、设置 3D旋转 等，减少重复配置，提高设计效率。
4.3 快速调整模板样式
模板样式管理是提升效率的重要工具，最大优势在于统一、灵活、高效。使用 FVS模板样式 可以快速调整模板整体风格，减少手动修改的工作量。
1）提前定义主题样式
使用内置主题样式作为基础，或根据需求自定义主题样式。
在制作模板前设定主题样式，新增的组件会自动匹配主题样式，可以减少组件样式的调整时间，避免后续重复调整。
2）灵活应用样式调整
在需求变化时，可以通过切换模板样式一键调整模板中的配色等核心视觉要素，快速适配新的业务需求。
4.4 常用组件搭配
1）指标卡类
在数据展示中，指标卡组件是展示核心数据的强大工具，适用于仅需呈现一两项关键指标的场景。通过直观的数字和简洁的设计，指标卡能够迅速吸引用户的注意力，有效强化核心信息的传递。
FVS 提供了多种实现指标卡的方法，满足从内置组件到完全自定义的需求。
| 实现方式 | 示例及场景 | 说明 |
|---|---|---|
内置指标卡组件 |
|
|
资源中心指标卡 |
| 资源中心提供了多种风格和设计思路的指标卡资源，可通过标签、分类快速找到适配的指标卡模板。 注：推荐资源使用晨曦蓝等主题、官方严选的指标卡资源。 |
自定义指标卡（通过组件组合实现） | 当内置和资源市场无法完全满足需求时，可通过富文本、图片、标题和各类图表组件组合实现高自由度设计。不建议使用表格进行制作。 | 示例：富文本 + 图片组件实现入库信息的指标展示。 通过 FVS 的动态值功能，富文本组件可直接绑定数据字段，实现动态展示。
|
2）绝对画布
绝对画布是 FVS 提供的灵活容器组件，适用于固定区域内滚动预览的场景，是实现复杂布局的有力工具。
容器式布局：将多个组件整合到画布中，形成模块化管理。
滚动预览：超出画布范围的内容支持滚动查看，适合在有限的页面展示更多内容。
区域冻结：支持“预览时置顶显示”，可实现部分内容固定于顶部。
善用绝对画布可以实现在布局上的较多需求，比如：
在移动端布局下有限的屏幕空间内，嵌套多个功能模块。将「风险监测」、「质量诊断」等模块放入绝对画布中，实现模块内滚动查看，顶部导航固定。
4.5 我的资源管理
资源管理是提升模板制作效率的重要手段，帮助用户积累和复用常用的模板、组件、图片及其他资源，以应对不同业务场景的需求。
具体内容请参见：应用复用-资源中心 。
资源管理的相关建议如下：
从小型组件积累（如指标卡），逐步扩展到模板资源。
调整复用资源至通用标准，减少后期调整成本。
将资源管理融入团队协作，形成统一设计语言。
4.6 PC端模板转换为移动端
PC 端与移动端的模板设计通常存在差异，用户需要花费额外的时间和精力来为移动端重新制作模板。
因此在制作 FVS 模板时，可以通过一些制作习惯和细节调整，确保一张模板在 PC 端和移动端均可正常浏览。
具体内容请参见：FVS如何快速将PC模板转换为移动端模板 。
5. 检查、测试与发布
在发布模板之前，需要对模板的各个方面进行全面检查，确保内容、样式和交互符合预期。这一步骤可以避免发布后的返工。
布局与对齐：确保组件间的间距一致、布局合理，并符合用户的视觉习惯。
数据源：验证所有数据源是否正确加载，数据展示是否与业务逻辑匹配。
交互功能：如果模板中有交互设计，确保所有按钮、下拉菜单、联动效果等交互功能都能正常运行。
跨平台兼容性：在不同终端（PC、大屏、移动设备）展示时，建议在发布前测试模板在不同分辨率下的表现，确保一致性。
关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等情况。
检查结束之后即可保存模板进行预览，具体方法请参见：FVS模板预览与挂载 。
