App 个性化工具

更新时间：2023-09-15 09:11:03下载pdf

本文介绍了如何使用 App 个性化工具，为您打造个性化的品牌专属 App。

什么是 App 个性化工具

App 个性化工具 是帮助您对 OEM App 进行快速自定义配置的一款产品。涂鸦提供更开放的 App 自定义框架及能力，支持您对 App 的主题配色、风格皮肤、页面及组件样式、产品功能等多方面进行自由配置。涂鸦也提供了多套 App 样式及主题模板供您快捷配置。
通过 App 个性化工具，您可以用更低的成本、更快速地搭配出符合您 品牌表达、产品品类特性、App 定位 的智能 App。

如何开通

开通 App 个性化工具 有两种方式：

直接购买 App 个性化工具。
升级或直接开通购买 OEM App 高级版，包含了 个性化工具 在内的多项增值服务，比单独购买更超值。

详细权限

App 个性化工具 详细权限如下表：

支持功能	免费权限	个性化搭建权限
样式模板	仅支持通用版	支持多套，如工具版、商城版等
主题风格	仅支持经典白	支持多套，如：
主题色	支持单色配置	支持全局适配
背景色	支持单色配置	支持全局适配
深色模式	不支持	支持
页面组件：首页	仅支持一套组件皮肤	支持更多业务组件支持组件自由选用及排序支持多套组件皮肤支持背景图替换
页面组件：配网	支持标准模式、平铺模式与多级模式	支持标准模式、平铺模式与多级模式
页面组件：场景	仅支持一套组件皮肤	支持多套组件皮肤、支持背景图替换
页面组件：我的	仅支持一套组件皮肤、默认个人头像	支持多套组件皮肤、支持背景图替换
页面组件：底部操作栏	支持图标替换、选择状态文本颜色	支持图标替换、选择状态文本颜色
页面组件：登录注册页	仅支持一套组件皮肤、登录/注册页 Logo 替换	支持多套组件皮肤、登录/注册页 Logo 替换、支持背景图替换
页面组件：启动页	支持单张整图、多图拼接	支持单张整图、多图拼接
细节配置个性化	仅支持空状态占位图	支持空状态占位图、文本配色、组件圆角/直角配置、元素卡片自定义配色

如何使用

设置 App 应用图标

仅支持 png 格式方形图片，请不要上传带透明底的图片，会导致展示出错。
尺寸必须为 1024 * 1024 px。

快捷配置

单击 快捷配置，展示 选择样式模板 与 选择主题风格。
选择相应的样式与主题，预览图也会相应的变化。

详细配置

全局

单击 详细配置，跳转到 App 界面详细配置 工作台。
在这个工作台，您可以配置出更加个性化的自定义主题颜色、背景颜色、页面组件等。

样式模板

选择模板。目前有 3 套模板供您选择。后续涂鸦定期迭代更新更多模板，让您有更多选择空间。这 3 套分别是：

模板名称	模板介绍	备注说明
通用版	即基础组件模板，满足基础的设备工具需求，包括但不限于基础设备配网、设备控制以及场景联动等基础能力。	均支持。
商城版	在通用版的基础上增加商城组件。可以帮您利用 App 的电子商务能力，促进您产品的线上销售。适用于拥有电商业务的客户。	仅开通 OEM App 高级版或购买 App 个性化工具的客户支持。
工具版	精简出仅用户设备智能控制的核心产品功能。适用于想要打造纯粹智能设备控制体验的客户。	仅开通 OEM App 高级版或购买 App 个性化工具的客户支持。

选择相应模板后，会提示说明应用模板后会覆盖当前所有自定义配置。单击确定即应用并生效。

主题风格

主题模板

目前已提供预设的多套 主题风格模板。您可以根据自己的产品设计需求选择相应的风格。主题风格模板 会对 App 整体主题颜色和背景色与风格进行修改与应用。
单击 主题色 会出现一个色盘，可以选择自己想要的颜色来进行配置。主题色 调整主要会影响使用主题色的图标、按钮与文字颜色等，如下图首页，主要影响右上角的添加按钮。
与 主题色 设置类似，单击 背景色 也会弹出一个色盘，选择想要配置的颜色。背景色 会针对相应的卡片、标题栏等背景的颜色进行改变，如下图首页部分，会对商城组件卡片、设备列表卡片和底部操作栏背景颜色进行改变。

若您设置了背景图片或选用了有背景图片的模板，则页面会优先显示背景图片，因此您在该页面中可能看不到背景色的效果。

深色模式

当 App 使用的模板版本 大于等于 3.25.2 时，付费开通服务后，可以开启深色主题，支持 App 用户在我的 > 设置 > 深色模式 里选择模式或设置为跟随系统。开启跟随系统后，将跟随系统打开或关闭深色模式。
在 深色模式 中，也可以对 主题色 与 背景色 进行修改。

页面组件

首页

在首页模块，可以修改与替换标题栏、天气卡片、商城、场景、房间标签、设备列表、当前页背景图等组件。
标题栏、天气卡片、商城、场景、房间标签、设备列表等组件目前都有 3 套样式可供选择和替换，并且可以在右边预览窗口，拖动天气卡片、商城与商城组件的位置。
当前提供了多张背景图可供选择。如果您期望更加个性化，也可以上传自己的背景图片。

配网列表页

涂鸦将原先 App 工作台中的 可选配置 中的 配网设备列表 做了整合。
单击直接跳转到 可选配置 中的 配网设备列表 进行配置。完成配置，单击 保存并发布，即可应用。

App 个性化工具

蓝牙快速配网模式

蓝牙快速配网模式 是针对蓝牙类产品的自发现快速配网模式，支持蓝牙单点、蓝牙 Beacon、Wi-Fi+蓝牙低功耗双模、Zigbee+蓝牙低功耗双模、Plug and Play (PnP) 双模、蓝牙 Mesh 网关子设备。

您可以前往 页面组件 > 配网列表页，开启该功能，帮助用户提高蓝牙类产品的配网效率，改善用户体验。

开启该模板功能后，App 可实现下述功能：

当用户进入 App 的配网列表页，系统会自动搜索发现可配网的蓝牙类设备，以圆形设备块的形式分两行展示。单击某设备块后，自动进入配网结果页，完成配网、添加设备。
蓝牙设备发现区域展示设备图标和设备名称。用户可左右滑动，查看更多已发现的设备，方便快速筛选出希望配网的设备。

场景

在场景模块，可以修改与替换标题栏、内容标签页、自动化卡片、一键执行卡片、当前页背景图等组件。
标题栏、内容标签页、自动化卡片、一键执行卡片等组件目前都有 3 套样式可供选择和替换。
与首页模块类似，当前提供了多张背景图可供选择。如果您期望更加个性化，也可以上传自己的背景图片。

我的

在我的模块，可以修改与替换个人中心、默认个人头像、三方服务、设置项、当前页背景图等组件。
个人中心、默认个人头像、三方服务、设置项等组件目前都有 3 套样式可供选择和替换。
与首页模块类似，当前提供了多张背景图可供选择。如果您期望更加个性化，也可以上传自己的背景图片。

底部操作栏

在 底部操作栏 模块，可以修改底部操作栏的图标、选中状态文字颜色。
底部操作栏图标可以修改选中与默认图标样式，其中食谱、商城、照明需要购买并开通相应功能服务才能使用。

登录注册页

在 登录注册页 模块，可以修改与替换登录注册页的样式、Logo、当前背景图等组件。
登录/注册页 Logo 要求：400 * 400 px 的 PNG 图片，大小不超过 10 Mb。
与首页模块类似，当前背景图提供了多张默认图片可供选择。如果您期望更加个性化，也可以上传自己的背景图片。自定义图片的格式要求：1080 * 1920 px 的 PNG 图片，大小不超过 10 Mb。

启动页

启动页分为 单张整图 与 多图拼接 两种方式。

单张整图 是指仅上传单张图片，规格要求如下：

系统平台	适配终端	规格要求
iOS 启动图	手机端	1242 * 2688 px 的 PNG 图片，大小不超过 10 Mb。
iOS 启动图	平板端	2732 * 2048 px 的 PNG 图片，大小不超过 10 Mb。
Android 启动图	手机端	1080 * 1920 px 与 1080 * 2160 px 的 PNG 图片，大小不超过 10 Mb。
Android 启动图	平板端	2560 * 1600 px 的 PNG 图片，大小不超过 10 Mb。

App 个性化工具

多图拼接 是指除了上传背景图以外，还支持启动页 Logo、底部版权文案的图片自定义，规格要求如下：

系统平台	适配终端	规格要求
iOS 启动图	手机端	背景图：1242 * 2688 px 的 PNG 图片，大小不超过 10 Mb。启动页 Logo：344 * 344 px 的 PNG 图片，大小不超过 10 Mb。底部版权文案：840 * 153 px 的 PNG 图片，大小不超过 10 Mb。
iOS 启动图	平板端	背景图：27322048 px 的 PNG 图片，大小不超过 10 Mb。启动页 Logo：344 344 px 的 PNG 图片，大小不超过 10 Mb。底部版权文案：840 * 153 px 的 PNG 图片，大小不超过 10 Mb。
Android 启动图	手机端	背景图：1080 * 1920 px 与 1080 * 2160 px 的 PNG 图片，大小不超过 10 Mb。启动页 Logo：344 * 344 px 的 PNG 图片，大小不超过 10 Mb。底部版权文案：840 * 153 px 的 PNG 图片，大小不超过 10 Mb。
Android 启动图	平板端	背景图：2560 * 1600 px 的 PNG 图片，大小不超过 10 Mb。启动页 Logo：344 * 344 px 的 PNG 图片，大小不超过 10 Mb。底部版权文案：840 * 153 px 的 PNG 图片，大小不超过 10 Mb。