UI设计：TV UI 设计要素

简介：本文大部分文字是从其它网站拿过来的，稍等整理了下收藏，希望做设计时可以可以参考。

TV UI 设计要素

1、交互

• 尊重十字交叉导航原则、尊重用户习惯
• 映射式的操控本身会有无法逾越的丌直接性，系统操作效率反应效率是第一位要解决的问题
• 屏幕大，16:9，横向的适于切换，竖向适于浏览 界面布局要有网格观念
• 从基本单位的定制，到复杂框架的搭建都是基于基本网格单位衍生的 控件一定要标准化，通用化
• 必须有第一时间回到主界面，主界面有非常明确的电视节目入口
•  逐步迚入Tvos 系统设计时代

2、视觉

• 大
• 亮-焦点明确（静态、劢态）
• 块状元素表现优异
• 图标色彩饱和度和亮度要高
• 冷色调不暖色调的占比控制在7:3左右
• 在季节性的换肤设计中加入主题元素
• 场景性的虚拟真实设计优于独立元素的虚拟真实设计

3、导航项

• 在基于十字方向键上设计导航时，导航项一般存在三种状态，
• 即“selected”，“focused”和“selected and focused“。
• 导航上如果有类别项(category)和动作项(action)那么导航获得焦点时，焦点移动不会切换右边容器中内容。
• 当导航上全部为类别项时，焦点可以和选中态一起移动，右边容器随焦点移动切换内容。

总而言之，导航设计原则如下：

• 导航设计的目标，是让用户快速定位，并且能够预测出操作结果。

4、焦点控制

• 设计TV控件时针对鼠标hover状态要增加其响应面积，方便用户操作。

1. 纯焦点移动路径最好平直且区域对齐，上图所示，如果从A沿绿线移动到B可以较好的被用户感知和理解;如果沿红线移动则不符合用户预期;
2. 高焦点移动要避免大范围转移，大范围转移的焦点会让用户感到焦点丢失;

5、颜色

针对TV显示器的本身特性，在进行UI的视觉层面的设计中需要注意以下几点：

1. 纯白(#FFFFFF)在电视会产生图像拖影， 如需使用白色，可以用#F1F1F1(hex) 或者240/240/240(RGB)进行代替
2. 高饱和度颜色会导致显示失真，并且在高饱和度颜色向低饱和度颜色过渡时会产生边缘模糊
3. 大范围渐变会导致带状显示，无法平滑过渡
4. 在界面边缘最好留出10%空隙，避免发生电视显示屏独有的“过扫描(踩边)”现象

6、分辨率


现阶段智能电视有两种分辨率模式1920x1080和1280x720，也就是我们常说的1080p和720p，在进行UI设计时候：

1. 高分辨率设计，可以使用android 9-patch切图进行低分辨率适配。在测试的时候选择用低分辨率测试可以更好的发现问题。
2. TV有多种显示模式，确保所有模式下经过测试，都不会产生问题。