UI设计：TV UI 设计要素

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

TV UI 设计要素

1、交互

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

2、视觉

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

3、导航项

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

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

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

4、焦点控制

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

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

5、颜色

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

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

6、分辨率

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

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