--- title: 旅程定制 description: 直接在 IDCloud 门户中配置流程的视觉形象——徽标、颜色、背景和按钮形状——并提供实时预览。 canonical: https://developer.unico.io/zh-CN/dual-api/product-guide/portal-idcloud/settings/journey-customization locale: zh-CN generated_by: markdown-export --- **旅程定制**功能让您可以将品牌的视觉形象应用到 Unico 身份验证流程中——无需提交工单, 无需依赖支持团队,效果立即可见。 您可以设置徽标、背景颜色、按钮颜色与形状,以及内容颜色。发布后,该配置会立即对您分支上 启动的后续流程生效。 :::info **适用对象:** 使用 Web Journey 且采用 iFrame、重定向或 SDK 集成模式的客户。 **终端用户的变化:** 他们在身份验证过程中看到的界面现在会呈现您的品牌风格。 **查找位置:** IDCloud 门户 → 侧边栏**设置** → **定制**选项卡。 ::: ## 开始之前 ### 访问权限 您的用户账号需要有访问 IDCloud 门户**设置**区域的权限。如果侧边栏没有显示齿轮图标,请让 您的账户管理员为您授予访问权限。 ### 配置的生效方式 | | | | :- | :- | | **适用范围** | 定制配置按**分支**和**集成模式**分别生效。iFrame 与重定向/SDK 拥有独立的配置——发布其中一个不会影响另一个。 | | **生效时间** | 发布后立即生效,适用于**从该时刻起启动**的流程。已在进行中的流程将保留之前的外观。 | | **如果您未进行定制** | 流程将加载 Unico 的默认主题。 | | **流程版本** | 预览基于**Web Journey v3.0**设计。在其他版本中,预览可能无法准确反映实际效果——如遇此情况,请联系 Unico 更新您的版本。 | ### 需要准备的内容 - **徽标**采用 PNG 格式,建议使用透明背景,高度不超过 **60 px**,大小不超过 **100 KB**。 - 您品牌颜色的**十六进制代码**(例如 `#1B3FA0`)。 ### 您的集成中可配置的内容 除了集成模式之外,界面上显示的内容还取决于您集成的**Web Journey 版本**。这是"我看不到这个 字段"最常见的原因: | 功能 | 1.0 iFrame | 2.0 iFrame | 3.0 iFrame | 1.0 重定向 | 2.0 重定向 | 3.0 重定向 | | :- | :-: | :-: | :-: | :-: | :-: | :-: | | **徽标** | ✅ | 不存在 | 不存在 | ✅ | ✅ | ✅ | | **背景颜色** | — | — | — | — | — | ✅ | | **按钮背景颜色** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | **按钮文字颜色** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | **按钮边框圆角** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | **内容颜色** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | 简而言之:**背景颜色仅在重定向模式的 Web Journey v3.0 中可配置**,而在 iFrame 模式下,徽标 仅存在于 Web Journey v1.0 中。颜色和按钮形状适用于所有组合。 :::info 如果您不知道自己所使用的版本,请咨询您的对接负责人或 Unico 支持团队。 ::: ## 分步说明 ### 步骤 1 —— 打开定制选项卡 在 IDCloud 门户中,点击侧边栏中的**齿轮图标(设置)**。界面将直接打开**定制**选项卡。 设置界面包含三个选项卡——**定制**、**Webhook** 和 **QR 码**。本指南介绍第一个选项卡。 ![设置界面,侧边栏中的齿轮图标已高亮显示](/img/product-guide/journey-customization/en/01-settings-tab.png) *已选中定制选项卡的设置界面。* ### 步骤 2 —— 选择集成模式 在左侧栏中,选择 **iFrame** 或 **重定向或 SDK** —— 表单字段会根据所选模式发生变化。 您可以在界面上识别出三个区域:左侧的**模式选择器**、中间的**表单**,以及右侧的**实时 预览**,它会在您发布之前对每一项更改做出反应。 **如果您同时使用两种模式,则需要分别配置。** 它们是独立的配置——先调整并发布其中一个, 然后对另一个重复操作。 ![完整的定制界面:模式选择器、表单和预览](/img/product-guide/journey-customization/en/02-integration-model.png) *iFrame / 重定向或 SDK 选择器、表单和预览。* ### 步骤 3 —— 上传徽标 :::warning 适用于**重定向或 SDK**。在 iFrame 中,仅适用于 Web Journey v1.0。 ::: 点击**添加徽标**并选择文件。要求:**PNG** 格式,最大高度 **60 px**,最大大小 **100 KB**。 **请使用透明背景的 PNG 图片。** 这样徽标就能适配任何背景颜色——如果 PNG 图片带有白色 背景,一旦背景被设置了颜色,就会出现一个明显的矩形。此外,建议优先使用横版徽标:可用 空间宽而短。 ![添加徽标字段,包含格式、高度和大小要求](/img/product-guide/journey-customization/en/03-customization-form.png) *"添加徽标"字段,包含格式、高度和大小要求。* ### 步骤 4 —— 设置颜色 表单中共有四个颜色字段,分别归类在**背景**、**按钮**和**内容**下: | 字段 | 在流程中出现的位置 | 默认值 | 可用性 | | :- | :- | :- | :- | | **背景颜色** | 流程界面的背景 | `#F2F2F7` | 仅**重定向模式的 Web Journey v3.0** | | **按钮 → 背景颜色** | 操作按钮的填充色(例如"拍摄自拍照") | — | 所有版本 | | **按钮 → 文字颜色** | 按钮内的文字 | — | 所有版本 | | **内容颜色** | 标题和描述(例如"身份验证") | `#000000` | 所有版本 | 对于以上任意字段,您可以**输入十六进制值**(例如 `#1B3FA0`),或**点击字段左侧的颜色 样块**打开可视化选择器。对于背景和内容字段,只要保持为空,流程就会使用字段中以占位符 形式显示的默认值。 **背景颜色以渐变方式呈现,而非纯色。** 您设置的色调是渐变的顶部颜色,流程界面会朝着屏幕 底部逐渐变暗。非常深的色调会导致底部几乎变黑——如果您想要均匀的效果,请选择中等到浅色 的色调。 **将品牌主色用作按钮背景色。** 这是用户需要首先找到的元素;如果它不够醒目,流程的转化率 就会下降。 **将这四种颜色作为一组来选择,而不是逐一选择。** 它们会相互影响:深色背景配黑色内容颜色 会使流程无法阅读,浅色按钮放在白色卡片上则可能直接消失不见。先设置好全部四种颜色,然后 再在预览中检查效果(步骤 6)。 ![背景颜色、按钮颜色和内容颜色字段,以及预览中的效果](/img/product-guide/journey-customization/en/04-colors.png) *背景颜色、按钮背景/文字颜色和内容颜色字段,以及预览中的效果。* ### 步骤 5 —— 配置按钮 三个字段控制流程的操作按钮(例如"拍摄自拍照"): | 字段 | 作用 | | :- | :- | | **背景颜色** | 按钮的填充色 | | **文字颜色** | 按钮内文字的颜色 | | **边框圆角** | 圆角大小,以像素为单位 | **边框圆角**的参考值: - 0 → 矩形按钮,直角边框 - 8 到 16 → 略微圆润的边角 - 24 或更大 → 药丸形状(完全圆润) 超过按钮高度一半的数值不会再改变效果——药丸形状是极限。 **将品牌主色用作按钮背景色。** 这是用户需要首先找到的元素——如果它不够醒目,流程的转化 率就会下降。同时,请保持边框圆角与产品其他部分一致,让流程感觉像是您应用的延续,而不是 第三方网站。 ![边框圆角字段,预览中显示按钮效果](/img/product-guide/journey-customization/en/05-button-border-radius.png) *背景颜色、文字颜色和边框圆角,预览中显示按钮效果。* ### 步骤 6 —— 在移动端和桌面端检查预览 右侧的预览会随每次更改而更新。使用顶部的**移动端 / 桌面端**选择器来检查两种格式的效果。 如果您输入了无效的颜色值——例如颜色名称或不完整的十六进制代码——该字段会显示**红色 边框**,且该值不会应用到预览中。请先修正后再继续。 **务必在移动端模式下进行验证。** 大多数终端用户是通过手机完成验证的;这是最重要的格式。 并且要检查三组对比度:按钮文字与按钮背景、按钮与流程卡片、内容颜色与背景颜色。常见的 情况是在白色卡片上配置白色按钮,导致按钮直接消失不见——预览的存在正是为了在您发布之前 发现这类问题。 ![预览面板中的移动端 / 桌面端选择器](/img/product-guide/journey-customization/en/06-live-preview.png) *移动端 / 桌面端选择器,以及高亮显示无效值的颜色字段。* ### 步骤 7 —— 发布 一旦出现待处理的更改,**发布**按钮就会变为可用状态。 - **发布** 会保存配置并将其应用到流程中。 - **取消** 会放弃您所做的所有编辑,并将字段恢复到上次发布的状态。 - 要**恢复为 Unico 默认设置**,请清空颜色字段(让占位符重新出现)、移除徽标,然后发布。 **没有版本历史记录。** 如果您发布了错误的配置,解决方法是调整数值并重新发布——没有一键 恢复到之前版本的方式。这正是为什么上一步检查预览很重要。只要您尚未发布,点击"取消"即可 解决问题。 ### 步骤 8 —— 注册允许的域名 :::warning 仅适用于 **iFrame** 模式。 ::: 在 iFrame 模式下,流程以嵌入方式在您自己的页面中运行。出于安全考虑,只有在此处注册的 域名才能加载它。 1. 点击右上角的**配置域名**。 ![已高亮显示的配置域名按钮](/img/product-guide/journey-customization/en/07-configure-domains-button.png) 2. 侧边面板列出了**已注册的域名**,每个域名都带有**编辑**(铅笔图标)和**删除** (垃圾桶图标)操作。 ![显示已注册域名列表的配置域名面板](/img/product-guide/journey-customization/en/08-domains-list.png) 3. 要添加域名,请点击**创建域名**,输入域名,然后点击**保存**。 ![创建域名表单](/img/product-guide/journey-customization/en/09-create-domain.png) 请输入包含协议的域名(例如 `https://yoursite.com`)。 **该列表是一项安全设置,单独保存。** 它通过面板自身的**保存**按钮生效,而不是主界面的 **发布**按钮。同时也要注册您的测试和预发布域名,并移除不再使用的域名——这份列表决定了 谁可以嵌入您的流程。 ## 常见问题 **更改会应用到已经在运行的流程吗?** 不会。已发布的配置仅适用于发布之后启动的流程。 **为什么我看不到徽标和背景字段?** 有两种可能的原因。第一:您可能选择了 **iFrame** ——在 iFrame 模式下,流程嵌入在您自己的页面中,该页面已经提供了背景和品牌标识。第二:您的 **Web Journey 版本**可能没有开放该字段。背景颜色仅存在于重定向模式的 Web Journey v3.0 中,而 iFrame 中的徽标仅存在于 Web Journey v1.0 中。请查看"开始之前"中的表格。 **我的徽标上传时被拒绝了,为什么?** 请检查三项要求:**PNG** 格式、高度不超过 **60 px**、 大小不超过 **100 KB**。 **屏幕底部的背景看起来太暗。** 这是正常现象——背景以渐变方式呈现,从上到下逐渐变暗。请 选择较浅的基础色调。 **预览与我的实际流程不一致。** 预览基于**Web Journey v3.0**设计。如果您的集成使用的是其他 版本,效果可能会有所不同——请联系 Unico 评估版本更新事宜。 **我发布了错误的配置,该如何恢复?** 重新打开界面,调整数值(或清空以恢复默认值),然后 重新发布。没有版本历史记录。如果您尚未发布,只需点击**取消**即可。 **是谁更改了我账户上的定制配置?** 该界面不显示此类历史记录。要了解是哪位用户在何时进行 了最后一次更改,请联系 Unico 支持团队。 ## 快速参考 ```text IDCloud 门户 └─ 设置(侧边栏齿轮图标) └─ 定制选项卡 ├─ iFrame ............... 按钮(背景色、文字颜色、边框圆角) │ 内容(内容颜色) │ + 配置域名 └─ 重定向或 SDK ......... 徽标(PNG,60 px,100 KB) 背景(颜色,以渐变方式呈现) 按钮(背景色、文字颜色、边框圆角) 内容(内容颜色) 实时预览 · 移动端 / 桌面端 · 取消 · 发布 ```