IPTV 用户端的频道页

IPTV 的界面长期是从网页和手机端搬过来的：卡片列表、横向滑动、二级菜单。搬过来之后有一个问题一直没被解决——用户在沙发上，离屏幕三米，手上只有一个遥控器。他不能滑动，不能长按，不能双指缩放。他能做的只有上下左右和确认。

这次重做只针对一屏：开电视之后看到的第一个频道页。目标也很具体：让换台只按两次。

先量三件事

电视端的约束不在像素，在距离。三米视距下，1080p 屏幕上的 24px 字，视觉角度约等于手机上的 7px。所以第一个动作是把字号重算一遍：

• 正文 24px → 32px，行高 1.4
• 频道名 28px → 36px，加粗一档
• 焦点框描边 1px → 2px，并附一个亮度阶差
• 卡片之间的间距 16px → 24px，避免误判焦点落在哪一格

第二个动作是数焦点。原来的页面是两列纵向列表，首屏 6 个频道，从第一个换到第七个要按六次下键，再按确认，还要经过一次二级菜单。开机到真正看上台，平均 8 次按键。

焦点要能算出来

遥控器的方向键有个特性：每按一次，焦点必须移动到一个可预测的位置。列表在这一点上很糟——往下按六次，视线要跟着走六趟。

改成 5 列 × 2 行的栅格之后，从任意一格到另一格最多两次按键。十个频道一屏放下，横向按是换台，纵向按是在「正在播」和「接下来播」之间切。这个模型像信封：横向移动扫描，纵向移动换层，不需要记路径。

数字键是一条捷径

遥控器上还有一排数字键，几乎没人用，因为界面从来不告诉你它能用。IPTV 的频道本来就有编号，CCTV-5 是 5，湖南卫视是 43。在频道页常驻一行提示：「按频道号直达」，位置在底部操作条左侧，字号 20px。

会用它的人一次就记住，不会用的人不受影响。这是电视端少有的、不增加任何界面成本的效率提升。

三段分栏，而不是三个菜单

原来直播、回看、点播是三个二级菜单，切换要退出再进入，每次 3 次按键。改成左侧一条固定竖栏，宽 168px，四项文字，当前项左侧一条 2px 白线。左右键直接切段，内容区只换栅格，不换布局。

回看用同一套栅格，只是每张卡右上角多一行时间；点播用同一套栅格，封面比例从 16:9 换成 2:3 的海报，因为点播内容需要竖版封面来区分剧集。除此之外，三个段落的操作方式完全一样——用户在直播里学会的动作，在点播里直接能用。

电视端最重要的不是好看，是让遥控器的每一次按键都有可预期的结果。

测量

• 开机到开始看某个频道：8 次按键 → 2 次（方向键 + 确认）
• 首页可见频道：6 个 → 10 个
• 任意两格之间的最大按键数：6 次 → 2 次
• 直播 / 回看 / 点播之间切换：3 次 → 1 次
• 正文字号：24px → 32px，对比度全部提到 4.5:1 以上

深色是电视端的默认。背景 #0B0D12，卡片 #161A23，焦点卡 #1E2430 加 2px 亮边。层级全靠表面亮度的三级台阶，不用阴影——在客厅的暗环境里，阴影几乎不可见，只会让边缘发脏。

没有做的事

没做语音搜索，没做个性化推荐，也没碰设置页。这三个都属于「加功能」，而这次要解决的是「已有功能够不着」。电视端的性能预算很紧，机顶盒的渲染能力大约相当于十年前的手机，任何一层多余的半透明和动画都会掉帧。

另外，焦点移动没有加任何过渡动画。按下方向键，焦点立刻出现在下一格。在有延迟的机顶盒上，动画只会让人以为按键没生效，然后连按三次。