LESSON 31 / 575 分钟
tvOS:焦点与遥控器
电视用户隔着距离看屏幕,通过遥控器移动焦点,而不是直接点击任意位置。
用你的前端经验理解
hover 与鼠标坐标不是主要模型;需要设计焦点在哪里、如何移动,以及选中后发生什么。
01 / 理解问题
为什么需要它
电视用户坐得远,主要通过遥控器移动焦点与确认,不能依赖鼠标悬停或精确点击。焦点是当前操作目标的可见表达,布局必须让方向移动可预测。做媒体浏览时,用户应该始终知道“我在哪里”和“确认后会打开什么”。
它是怎样工作的
焦点系统根据可聚焦元素和布局决定移动方向,复杂分区可能需要显式引导。内容滚动或异步加载后应尽量保持合理焦点,而不是每次刷新都跳回第一项。长文本、密集表单和大量小按钮在远距离场景中尤其难用,信息密度需要降低。
02 / 掌握要点
把关键概念连起来
1
焦点
提供明显聚焦状态,组织上下左右移动路径,使用系统支持的焦点 API。
2
内容
更大的文字、清晰分组、少量输入;媒体场景可结合 AVKit 和系统播放体验。
3
验证
用遥控器测试所有功能,避免只能触摸触发的操作和无法离开的焦点区域。
03 / 案例推演
构建可用遥控器操作的媒体列表
- 先用少量固定卡片建立可聚焦网格,给焦点明确但不刺眼的视觉反馈。
- 进入详情再返回时恢复到原卡片附近;如果该内容已被删除,选择一个合理替代目标。
- 播放期间保留系统熟悉的控制方式,并处理不可播放、网络中断和再次尝试。
这里需要你亲自判断
不要依赖网页 hover 菜单或手机手势;焦点丢失会让功能无法访问。
04 / 动手验证
做一个小练习
画出两行内容卡片的焦点移动路径,检查返回按钮是否可达。
- 只用方向与确认完成浏览、进入、播放和返回,找出无法到达的控件。
- 异步更新列表后检查焦点是否消失或突跳。
展开参考思路与验收标准
功能可点击不等于电视上可操作。焦点顺序、返回位置和远距离可读性应成为验收条件,而不是上线前才补的装饰。
05 / 检查理解
tvOS 最关键的导航模型是什么?
答对理解题后即可标记完成