设计遥控器：一款 Android TV 手机遥控 App 的设计实录

1. 为什么要重新设计遥控器#

智能电视的遥控器越做越短：按键从三十多个砍到十几个，最后只剩一个十字键加几个功能键。但电视上的内容越来越复杂——应用商店、设置菜单、登录页面、验证码输入框，都在逼着用户在「十字键一格一格挪」里浪费时间。

实体遥控器的物理极限暴露无遗：

于是我们决定做一款手机遥控 Android TV 的 App，对标市面上的八爪鱼遥控：TV 端 + 手机端双端架构，手机负责输入与展示，TV 端负责接收指令并注入系统事件。

2. 设计目标与约束#

设计开始前，先把约束摆清楚。约束不是敌人，它决定了方案的下限。

3. 设计语言：为什么选 iOS 16 风格#

遥控器 App 是一个「工具」，工具的最高境界是被忽略——用户看的是电视，不是手机。因此视觉上追求极简、安静、零学习成本。

最终确定的设计规范：

设计语言统一的好处立竿见影：遥控页、应用页、工具页、我的页四个页面，用户在任何一页都能凭肌肉记忆找到返回方式与操作入口。

4. 信息架构：四个底部 Tab#

信息架构遵循「高频前置、低频收敛」原则：

• 遥控 Tab：默认首屏，打开 App 即用，承载 80% 的高频操作
• 应用 Tab：TV 端应用列表镜像，支持远程启动、卸载、推送安装
• 工具 Tab：清理加速、远程输入法等中低频功能
• 我的 Tab：设备连接状态、版本信息、设置项

底部 Tab Bar 采用毛玻璃效果，内容滚动时图标下若隐若现，既保持层次又不喧宾夺主。

5. 遥控页：一块屏幕装下整个遥控器#

遥控页是整个 App 的核心，布局从上到下分为四层：

1. 设备状态条：当前连接的电视名称与信号状态，一眼确认「我连的是哪台电视」
2. 触控板区：大面积手势区域，滑动即移动 TV 端光标，点按即确认
3. 十字键区：圆形 D-pad，中心 OK 键，四向箭头线性图标
4. 功能键排：返回、主页、菜单、音量加减、电源，一行排列

1
{
2
  "type": "key",
3
  "action": "down_up",
4
  "keycode": 82
5
}

6. 触控板：从绝对坐标到相对位移#

触控板是设计迭代中最典型的一次「推倒重来」。

1
{
2
  "dx": 120,
3
  "dy": -45,
4
  "show": true
5
}

7. 浮动光标：倾斜手机即可移动光标#

触控板解决了「精准」，但还有更极致的输入方式：手机拿起来，往哪边倾，光标往哪边走。

8. 设计规范落地清单#

为保证四个页面视觉一致，落地时逐条对照检查：

• 全局背景 #F2F2F7，卡片白色、圆角 14dp
• 图标全部线性风格，笔画粗细统一
• 底部 Tab Bar 毛玻璃，四个入口图标 + 文字
• 无 FAB、无 ripple、无 hamburger、无投影
• 按键热区 ≥ 48dp
• 电源等危险操作与常规操作区隔开
• 页面标题与状态栏留出安全距离，不与系统状态栏重叠
• 顶栏显示连接状态，任何页面都能确认连接是否正常

9. 踩坑与经验#

1. 光标窗口「静默失败」：Application Context 创建 overlay 窗口不报错但不显示，必须用 Service Context；WindowManager.addView 还必须在主线程执行，HTTP 工作线程直接调用会偶发崩溃。

2. 重装 APK 后无障碍服务被重置：TV 端重装后服务进入 Crashed 状态，需要完整重置序列——移除服务 → 禁用 accessibility → force-stop → 重新添加 → 启用。

3. 菜单键无焦点可回退：部分界面没有焦点节点，菜单指令应回退为在屏幕中心派发长按手势，否则用户会觉得「菜单键坏了」。

4. 状态栏与标题重叠：未处理 insets 时页面顶部内容会钻到系统状态栏底下，需统一处理状态栏安全距离。

5. 触控板精度：任何把「手指位置」直接映射到「大屏坐标」的方案都会死于精度不足，相对位移是唯一出路。

10. 总结#

设计一款遥控器 App，表面上是画界面，本质上是回答三个问题：

• 用户在什么姿势下用它——决定了按键布局与热区大小
• 电视端能做到什么——决定了交互方案的技术边界（虚拟光标 vs 系统鼠标）
• 什么样的光标移动符合直觉——决定了相对位移、死区、倾斜控制这些细节

iOS 16 风格解决的是「看起来对」，相对位移触控板和倾斜光标解决的是「用起来对」。工具类 App 的设计没有炫技空间，把每一次点击、每一次滑动做到符合直觉，就是最好的设计。