简体中文
简体中文
English
联系我们
注册
登录
layout空间导航

App 个性化工具

更新时间:2022-11-02 09:09:18下载pdf

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

什么是 App 个性化工具

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

如何开通

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

详细权限

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

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

如何使用

设置 App 应用图标

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

快捷配置

  1. 单击 快捷配置,展示 选择样式模板选择主题风格

  2. 选择相应的样式与主题,预览图也会相应的变化。

    App 个性化工具

详细配置

全局

  1. 单击 详细配置,跳转到 App 界面详细配置 工作台。

  2. 在这个工作台,您可以配置出更加个性化的自定义主题颜色、背景颜色、页面组件等。

    App 个性化工具

样式模板

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

    模板名称 模板介绍 备注说明
    通用版 即基础组件模板,满足基础的设备工具需求,包括但不限于基础设备配网、设备控制以及场景联动等基础能力。 均支持。
    商城版 通用版 的基础上增加 商城组件。可以帮您利用 App 的电子商务能力,促进您产品的线上销售。适用于拥有电商业务的客户。 仅开通 OEM App 高级版 或购买 App 个性化工具 的客户支持。
    工具版 精简出仅用户设备智能控制的核心产品功能。适用于想要打造纯粹智能设备控制体验的客户。 仅开通 OEM App 高级版 或购买 App 个性化工具 的客户支持。
  2. 选择相应模板后,会提示说明应用模板后会覆盖当前所有自定义配置。单击 确定 即应用并生效。

    App 个性化工具

主题风格

主题模板
  1. 目前已提供预设的多套 主题风格模板。您可以根据自己的产品设计需求选择相应的风格。主题风格模板 会对 App 整体主题颜色和背景色与风格进行修改与应用。

    App 个性化工具

  2. 单击 主题色 会出现一个色盘,可以选择自己想要的颜色来进行配置。主题色 调整主要会影响使用主题色的图标、按钮与文字颜色等,如下图首页,主要影响右上角的添加按钮。

    App 个性化工具

  3. 主题色 设置类似,单击 背景色 也会弹出一个色盘,选择想要配置的颜色。背景色 会针对相应的卡片、标题栏等背景的颜色进行改变,如下图首页部分,会对商城组件卡片、设备列表卡片和底部操作栏背景颜色进行改变。

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

    App 个性化工具

深色模式
  1. 当 App 使用的模板版本 大于等于 3.25.2 时,付费开通服务后,可以开启深色主题,支持 App 用户在 我的 > 设置 > 深色模式 里选择模式或设置为跟随系统。开启跟随系统后,将跟随系统打开或关闭深色模式。

  2. 深色模式 中,也可以对 主题色背景色 进行修改。

    App 个性化工具

页面组件

首页
  • 首页 模块,可以修改与替换标题栏、天气卡片、商城、场景、房间标签、设备列表、当前页背景图 等组件。

  • 标题栏、天气卡片、商城、场景、房间标签、设备列表等组件目前都有 3 套样式可供选择和替换,并且可以在右边预览窗口,拖动天气卡片、商城与商城组件的位置。

  • 当前提供了多张背景图可供选择。如果您期望更加个性化,也可以上传自己的背景图片。

    App 个性化工具

配网列表页

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

App 个性化工具

蓝牙快速配网模式

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

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

开启该模板功能后,App 可实现下述功能:

  • 当用户进入 App 的配网列表页,系统会自动搜索发现 可配网的蓝牙类设备,以圆形设备块的形式分两行展示。单击某设备块后,自动进入配网结果页,完成配网、添加设备。

  • 蓝牙设备发现区域 展示设备图标和设备名称。用户可左右滑动,查看更多已发现的设备,方便快速筛选出希望配网的设备。

    App 个性化工具

场景
  • 场景 模块,可以修改与替换标题栏、内容标签页、自动化卡片、一键执行卡片、当前页背景图等组件。

  • 标题栏、内容标签页、自动化卡片、一键执行卡片等组件目前都有 3 套样式可供选择和替换。

  • 首页 模块类似,当前提供了多张背景图可供选择。如果您期望更加个性化,也可以上传自己的背景图片。

    App 个性化工具

我的
  • 我的 模块,可以修改与替换个人中心、默认个人头像、三方服务、设置项、当前页背景图等组件。

  • 个人中心、默认个人头像、三方服务、设置项等组件目前都有 3 套样式可供选择和替换。

  • 首页 模块类似,当前提供了多张背景图可供选择。如果您期望更加个性化,也可以上传自己的背景图片。

    App 个性化工具

底部操作栏
  • 底部操作栏 模块,可以修改底部操作栏的图标、选中状态文字颜色。

  • 底部操作栏图标可以修改选中与默认图标样式,其中 食谱商城照明 需要购买并开通相应功能服务才能使用。

    App 个性化工具

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

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

  • 单张整图 是指仅上传单张图片,规格要求如下:

    系统平台 适配终端 规格要求
    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 启动图 平板端
    • 背景图:2732*2048 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。

    App 个性化工具

细节配置

  • 细节配置 包括空状态占位符、文本配色、圆角、个性化颜色以及 深色模式 下的相应配置。

  • 空状态占位符 是指页面为空页面状态时的图标。规格要求:360 * 360 px 的 PNG 图片,大小不超过 10 Mb。

    App 个性化工具

  • 文本配色 为调整文本透明度。目前支持大标题、小标题、辅助说明与失效等轻提示。

    App 个性化工具

  • 圆角。目前支持卡片、弹窗、按钮的角度样式调整,有圆角与直角两种。

    App 个性化工具

  • 个性化颜色。目前支持强烈告警、引导提示、成功提示、卡片颜色、弹窗颜色、Tab 导航背景色。

    App 个性化工具

预览

  1. 完成配置后,单击右上角 保存 图标,即可保存当前配置项。

  2. 单击 预览 图标。若未安装 智能生活 App,则可扫码直接下载。下载并安装完成后,单击 App 的扫码功能扫描预览二维码后,根据提示重启 App 即可预览当前配置效果。

    App 个性化工具

权限说明

功能权限提醒

如果您未开通 App 个性化工具权限,当使用到一些无权限的配置项时,会在预览区展示权限提醒。单击保存时也会进行提醒。

App 个性化工具

模板版本过低提醒

若您使用到了在高版本下才可支持的配置,则这些配置在最终构建出来的 App 上是无法生效的。

若使用了更高版本的组件,App 界面样式页会提示您升级模板版本。

App 个性化工具