TP-Link · Tapo

Tapo App
Redesign

UX/UI 概要设计

从体验视角重构 App 的设计地基、产品骨架与品类体验——回应「App outdated」反馈，建立可持续的设计体系。

汇报人：Raina ｜ 2026 ｜ UX/UI Team

01
Background · 为什么是现在

我们收到一个明确反馈：App「Outdated」

这是这次 redesign 的出发点。拆开看，「显旧」主要来自两个根因——它们贯穿后面所有工作。

根因 01

视觉风格不够流行

整体视觉语言落后于当前 OS 趋势（iOS / Material），第一眼就显旧。

根因 02

Motion 基本缺失

动效是细节体验的关键一环，目前几乎为零，让 App 显得静止、廉价。

立靶：这次 redesign 要系统性回答「怎么让 Tapo 不再显旧」，而不是只换皮。

Goals · 目标与衡量

我们要把 App 带到哪

🖼 VISUAL / 文案 占位 — 总目标 & 北极星指标
放一句总目标 + 1 个北极星指标（如：用户对「现代感」的满意度 / 关键流程完成率）。你后补，分层指标见各模块页。
体验现代感
指标占位
关键流程效率
指标占位
一致性 / 复用
指标占位
Strategy · 全局地图

三层结构 + 两条横切线

主线：地基我们独奏夯实，骨架和血肉跟产品并行合奏——不是 UX 等产品，是两条腿一起走。

血肉
品类体验优化 · 按 user journey 拆解 · doorbell 打样
🤝 UX × PM 合奏
骨架
App 定位 rethink · Home · 导航 / Tab 框架
🤝 UX × PM 合奏
地基
基础组件 · 通用模板规范 · 流程库
🎨 UX/UI 主导
横切线 A · 视觉现代化
解决「不够潮」，贯穿三层
横切线 B · Motion 体系
从 0 到 1，补细节体验
第一层 · 地基
🎨 UX/UI 主导

设计基础与规范

唯一可以 UX/UI 完全独奏、且可最先启动的一层。

  • 基础组件更新：贴近当前 OS 趋势（iOS / Material Design）
    ⚑ Flag：两端统一 vs 按 OS 差异化 — 待与 UI 组讨论
  • 通用模板 + 规范：沉淀相同场景的设计资产
  • 流程库：识别通用流程并规范化（先启动项）
  • 新视觉设计
    ⚑ Flag：依赖 Tapo rebrand timeline，暂不展开
🖼 VISUAL 占位 — 组件总览 / 流程库示意
放组件库截图、模板缩略图，或流程库结构图（节点 → 通用流程）。
第二层 · 骨架
🤝 UX × PM 合奏

整个 App 的框架

边界原则：UX 主导「怎么组织 / 呈现 / 用」，PM 主导「放什么 / 为什么 / 给谁」。

UX 先推

Home redesign（进行中）
导航交互范式 · 层级 · 可用性
信息架构 IA · 内容分类与命名
跨品类一致性框架

需 PM 主导

产品定位 rethink · 核心价值
Tab 放哪些业务模块
一级导航功能取舍 · roadmap 优先级
商业化入口

两条腿并行，不串行——我们先把体验结构和 IA 推到位，产品来定业务内容与定位。

第三层 · 血肉
🤝 UX × PM 合奏

各品类的体验优化

  • 范围：camera / doorbell / door lock 三大品类
  • 打样：先以 doorbell DS16460 做整体优化样板，跑通方法再复制
  • 方法：按完整 user journey 拆解，模块化 dive deep
  • 与 PM 合作点：功能 spec、错误码体系、品类策略
🖼 VISUAL 占位 — 三品类 + doorbell 打样
放三品类设备图标 / 现状界面，高亮 doorbell DS16460 为首发样板。
Deep Dive · 样板

Doorbell User Journey 拆解

每段挂三栏：现状痛点 / 优化方向 / 成功指标。治理页从这里汇总，不重复填。

1

拆箱

第一印象 · 包装内引导 · 扫码进 App 衔接
痛点 / 方向 / 指标
2

Onboarding

首次引导。Lily（多贝 LL）竞品调研 → audit 自有流程
痛点 / 方向 / 指标
3

设备配置

配网 · 绑定 · 权限 · 失败重试
痛点 / 方向 / 指标
4

日常使用

实时 / 回放 / 通知 / 设置 / 共享，高频场景再细拆
痛点 / 方向 / 指标
5

排错

错误码体系（产品已知缺失）· 自助恢复 · 求助
痛点 / 方向 / 指标

Onboarding 已排 Lily 启动竞品调研；「日常使用」是最值得 dive deep 的高密度模块。

横切线 A
⚑ 依赖 rebrand timeline

视觉现代化

直接回应「不够潮」的根因，贯穿地基与血肉两层。

🖼 VISUAL 占位 — 现状 vs 趋势对标
左：我们当前界面；右：iOS / Material 当下视觉趋势参考。直观放「差距」。
  • 趋势对标：与当前 OS 视觉语言逐项比对
  • 视觉系统更新：色彩 · 层级 · 卡片 · 留白
  • 外部依赖：完整新 visual 等 Tapo rebrand，先做可独立推进的部分
横切线 B

Motion 体系（从 0 到 1）

补「细节体验」这块最短的板——目前几乎为零。

转场

页面 / 层级切换的连续感

反馈

点击 / 状态变化的即时回应

加载

等待过程的可感知化

微交互

细节愉悦感 · 品质暗示

🖼 VISUAL 占位 — Motion 原则示意 / 动效 demo gif
放一组动效 before/after，或四类动效的时长曲线示意。
Governance · 责任与衡量

指标 + 责任方

空表 placeholder，由 Raina 后续填写。

模块目标成功指标Audit 设计核心主力验收
地基 · 组件 / 流程库待填待填待填待填待填
骨架 · IA / 导航待填待填待填待填待填
血肉 · Onboarding待填待填Lily待填待填
血肉 · 配置 / 日常 / 排错待填待填待填待填待填
Roadmap · 下一步

什么先启动，什么等依赖

可先启动
流程库（地基）
可先启动
Doorbell DS16460 打样
进行中
Home redesign
等依赖
新视觉 — 等 Tapo rebrand timeline
等依赖
骨架定位 — 等产品策略

三个待决 Flag

组件：两端统一 vs 按 OS 差异化（与 UI 组）
新视觉时间点：卡 rebrand timeline
骨架边界：UX 推 vs 产品定（已初判）

呈现形式：本 deck 为框架草案，最终在 Figma slides 填充视觉。