设计原则
四大核心原则指导 10-Foot UI 设计
TV OS 设计系统基于四个核心原则：简单、清晰、氛围、灵活。这些原则源于智能电视的特殊场景（3 米观看距离、遥控器操作、家庭共享），指导所有设计决策。
原则总览
简单（Simple）
通过简单规律的布局和视觉降噪，降低用户的认知负担。限制首屏信息密度（7±2 原则），使用统一的栅格系统。
清晰（Clear）
通过 6 个维度保证清晰获焦，让用户始终清楚当前焦点位置。焦点必须可见、可追踪、有记忆。
氛围（Atmosphere）
背景对内容的氛围烘托，通过大图、渐变、模糊等手法营造沉浸感，让用户享受大屏体验。
灵活（Flexible）
适应多种屏幕素质、芯片性能、品牌定制需求。通过设计多种显示形态，确保在不同设备上都有良好体验。
简单（Simple）
通过简单规律的布局和视觉降噪，降低用户的认知负担。
1. 简单规律的布局
简单聚焦的宫格布局，避免走焦交互的不清晰性。使用统一的 Margin（2a）和 Gutter（a）规范。
- 宫格系统：首页采用 2-4 列宫格，避免过于复杂的布局
- 统一间距：Margin = 48px (2a)，Gutter = 24px (a)，保持视觉节奏
- 对齐规则：所有元素左对齐或居中，避免右对齐（遥控器导航不友好）
2. 视觉降噪 - 7±2 的信息密度
人类短期记忆一般一次只能记住 5-9 个事物，7±2 原则即由此而来。限制首屏信息展示位或导航菜单选项，将复杂的信息划分为较小的单元。
| 场景 | 信息密度限制 | 设计原因 |
|---|---|---|
| 首页导航栏 | 最多 7 个一级菜单 | 超过 7 个用户难以记住位置 |
| 首屏内容区 | 3-5 个内容模块 | 避免信息过载，保持聚焦 |
| 横向滚动列表 | 首屏显示 4-6 个卡片 | 让用户知道可以滚动，但不会太挤 |
清晰（Clear）
通过 6 个维度保证清晰获焦，让用户始终清楚当前焦点位置。
6 维度保证清晰获焦
遥控器导航的核心是焦点管理，用户必须清楚知道"我现在在哪"。我们通过 6 个维度同时强化焦点状态：
- ① 浅色背景：获焦元素使用浅色背景（白色或浅灰），与深色背景形成强对比
- ② 描边处理：2-4px 无色相描边（白色或黑色），进一步强化边界
- ③ 投影：中等阴影（shadow-md），让获焦元素"浮起来"
- ④ 内容变化：获焦时显示更多信息（如评分、简介、按钮）
- ⑤ 颜色对比度变化：未获焦元素降低对比度（opacity: 0.7），获焦元素 100% 对比度
- ⑥ 位置变化：获焦元素轻微放大（scale: 1.05）或向前移动
设计原则：不要单独使用一个维度，至少组合 3 个以上维度，确保在不同屏幕素质（亮度、对比度、色域）下都清晰可见。
焦点移动规则
- 方向键导航：上下左右移动焦点，遵循最短距离原则
- 焦点记忆：退出页面再返回时，焦点恢复到上次位置
- 循环焦点：横向滚动列表支持循环（最后一个按右键回到第一个）
- 跳过不可交互元素：纯展示的文本、图片不接受焦点
- 焦点陷阱保护：对话框打开时，焦点限制在对话框内，不会跳到背景
氛围（Atmosphere）
烘托氛围感，背景对内容的氛围烘托。
背景设计策略
- 大图背景：详情页使用内容海报作为背景，模糊处理（blur: 40px）
- 渐变叠加：背景上叠加深色渐变（从下到上，透明度 0 → 80%），确保前景内容可读
- 主色提取：从海报中提取主色，应用到按钮、标签等元素
- 动态背景：播放视频时，背景跟随内容变化（如视频暂停时显示海报）
对比度保证
氛围感不能牺牲可读性，所有文本必须满足 WCAG AA 标准（对比度 ≥ 4.5:1）：
- 白色文本 + 深色渐变背景：对比度 > 7:1
- 按钮背景使用纯色（非渐变），确保焦点清晰
- 小字号文本（< 20px）使用更高对比度
灵活（Flexible）
适应多种类型的屏幕素质与场景，通过设计多种显示形态以适应更多场景。
1. 品牌定制触点
设计规范需要考虑不同品牌的定制化需求，在各个页面提供品牌透出的触点。
- Logo 位置：左上角预留品牌 Logo 位（120×40px）
- 主题色定制：支持品牌主色替换（通过 Token 一键切换）
- 开机动画：预留品牌开机动画插槽
- 底部品牌栏：设置页面底部显示品牌信息
2. 适应多种类型的屏幕素质与场景
通过设计多种显示形态以适应明暗环境。
| 环境 | 设计调整 | 实现方式 |
|---|---|---|
| 明亮环境 （白天、开灯） |
提高对比度，减少渐变和透明度 | 自动检测环境光线（传感器） 或手动切换"日间模式" |
| 黑暗环境 （夜晚、观影） |
降低整体亮度，使用深色背景 | 自动切换暗色主题 OLED 屏幕使用纯黑背景节能 |
| HDR 屏幕 | 使用更宽色域，高光更亮 | 检测 HDR 支持，加载 HDR 素材 |
3. 适配不同芯片处理能力
根据设备性能调整动效复杂度和渲染质量，确保流畅体验。
| 芯片等级 | 动效策略 | 渲染策略 |
|---|---|---|
| 高端芯片 （旗舰机型） |
完整动效：渐变、模糊、粒子效果 | 4K 素材 + 60fps 动画 |
| 中端芯片 （主流机型） |
简化动效：移除模糊和粒子 | 1080p 素材 + 30fps 动画 |
| 低端芯片 （入门机型） |
最小动效：只保留必要的淡入淡出 | 720p 素材 + 无动画 |
自动检测：系统启动时检测芯片型号，自动选择对应的性能档位。用户也可以在设置中手动调整。
原则的应用
这四大原则不是孤立的，在实际设计中需要综合权衡：
- 简单 vs 氛围：氛围感不能牺牲简洁性，背景装饰不能干扰内容阅读
- 清晰 vs 灵活：品牌定制不能破坏焦点清晰度，主题色必须满足对比度标准
- 氛围 vs 灵活：不同屏幕素质下的氛围呈现可能不同，需要提供多套方案