发布时间：2024年6月 | 最后发布：2024年12月
页面定位说明
本页面是王竹子的核心设计规范文档，面向所有从事智能电视应用开发的UI/UX设计师与前端工程师。文档系统性地阐述了TV端大屏界面设计的核心原则、技术参数与实践标准，帮助团队在项目初期就建立正确的设计方向，避免因不了解大屏交互特性而产生的返工与体验问题。
色彩对比度规范
智能电视的观看环境通常是光线较暗的客厅，这与手机、电脑的使用场景有本质区别。在暗场环境下，过高的亮度会导致视觉疲劳，而过低的对比度则会使内容难以辨认。TV端的色彩设计需要在这两者之间找到平衡。
根据WCAG 2.1标准，TV端正文文本的对比度比值应不低于4.5:1，大标题文本不低于3:1。但考虑到客厅环境的特殊性，我们建议将正文对比度提升至7:1以上，以确保在各种环境光条件下的可读性。背景色推荐使用深色系(如#0D0D0D至#1E1E1E)，正文色使用高亮度白(如#E0E0E0至#FFFFFF)。
焦点态元素的色彩需要与周围非焦点元素形成鲜明对比。建议焦点高亮色与背景色的对比度不低于8:1，同时焦点边框宽度不小于3px，确保用户在远距离观看时能够清晰识别当前焦点位置。
焦点态设计原则
焦点态(Focus State)是TV端交互的核心概念。与移动端的触摸交互不同，TV端用户通过遥控器的方向键(D-Pad)在界面元素之间移动焦点，因此焦点的视觉反馈必须足够明显且一致。
焦点态的三个层次
- 默认态(Default)：元素的常规显示状态，无特殊高亮
- 焦点态(Focused)：元素获得焦点时的高亮状态，通过放大、发光边框与阴影变化来表达
- 按下态(Pressed)：用户按下确认键时的短暂反馈状态，通常表现为轻微缩小与颜色变化
焦点态的视觉变化建议包括：元素放大至105%-110%、添加2-4px的高亮色边框、增加外发光效果(box-shadow)、以及200-300ms的过渡动画。过渡动画推荐使用cubic-bezier(0.4, 0, 0.2, 1)缓动曲线，模拟物理世界的自然运动感。
过扫描安全区设定
过扫描(Overscan)是电视显示技术的历史遗留问题。尽管现代智能电视已大幅减少过扫描区域，但不同品牌、不同型号的电视仍然存在差异。为确保应用内容在所有电视上完整显示，设计时必须预留安全区(Safe Area)。
通用安全区标准为屏幕边缘向内缩进5%。即在1920x1080分辨率下，安全区为左右各96px、上下各54px的内缩区域。所有关键内容(文字、按钮、重要图标)必须放置在安全区内，仅装饰性背景元素可以延伸至安全区外。
| 电视品牌 | 过扫描比例 | 安全区建议 |
|---|---|---|
| 索尼 | 2-3% | 5%内缩 |
| 三星 | 1-2% | 5%内缩 |
| 海信 | 3-5% | 5%内缩 |
| TCL | 2-4% | 5%内缩 |
| 小米 | 0-2% | 5%内缩 |
大字号排版原则
TV端的排版设计必须充分考虑10英尺(约3米)的观看距离。在这个距离下，手机端常用的14-16px字号几乎不可读。TV端的最小可读字号应为24px(基于1080p分辨率)，推荐正文字号为28-32px，标题字号为48-72px。
行高建议设置为字号的1.5-1.8倍，段落间距为行高的1.5倍以上。每行文字不超过40个中文字符，避免过长的文本行导致阅读困难。在信息密度方面，TV端每屏展示的信息量应控制在手机端的1/3以下，通过大量留白与清晰的视觉层级引导用户的注意力。