TV OS Design System

面向智能电视平台的完整设计系统

TV OS Design System 是一套专为智能电视(10-Foot UI)设计的完整设计语言,提供一致、高效、易用的交互体验。本系统涵盖设计原则、交互模式、组件规范、Design Tokens 和 AI 能力设计指南。

核心价值

🎯

10-Foot UI 优化

针对3米观看距离设计,字号、间距、对比度全面优化,确保远距离可读性。

🎮

遥控器优先

完善的焦点管理系统,方向键导航流畅,快捷键操作高效,为遥控器交互深度优化。

🤖

AI-Native 设计

内置 AI 交互模式,语音搜索、智能推荐、流式输出等完整状态设计,应对 AI 不确定性。

🎨

完整 Token 体系

结构化的 Design Tokens 定义,颜色、间距、圆角、动效全面标准化,AI 可读可消费。

📦

组件化架构

模块化的组件库,清晰的 API 定义,支持品牌定制和多场景适配。

性能优先

根据设备性能自适应调整动效复杂度和渲染质量,保证流畅体验。

快速开始

1. 了解设计原则

设计原则 开始,理解 TV OS 的四大核心原则:简单、清晰、氛围、灵活。

2. 查看 Design Tokens

Tokens 页面了解颜色、间距、圆角、动效等标准化定义,这些 Token 可被 AI 工具直接读取和使用。

3. 使用组件

浏览 组件库,查看每个组件的 API 定义、使用场景和代码示例。

4. AI 交互设计

如果你的产品涉及 AI 功能,参考 AI 交互模式,了解如何设计 streaming、error、置信度等完整状态。

项目背景

项目定位:从 0 到 1 搭建字节跳动智能电视(GiantTV OS)的设计系统

我的角色:主导设计系统架构、制定设计规范、搭建组件库、团队宣讲推广

支撑规模:支撑 6+ 应用开发,3 次团队宣讲,覆盖 20+ 设计师和开发

核心产出:4 大设计原则、完整 Token 体系、30+ 组件规范、AI 交互模式库