简介:本文大部分文字是从其它网站拿过来的,稍等整理了下收藏,希望做设计时可以可以参考。
TV UI 设计要素
1、交互
2、视觉
3、导航项
总而言之,导航设计原则如下:
4、焦点控制
• 设计TV控件时针对鼠标hover状态要增加其响应面积,方便用户操作。
5、颜色
针对TV显示器的本身特性,在进行UI的视觉层面的设计中需要注意以下几点:
现阶段智能电视有两种分辨率模式1920x1080和1280x720,也就是我们常说的1080p和720p,在进行UI设计时候:
- 尊重十字交叉导航原则、尊重用户习惯
- 映射式的操控本身会有无法逾越的丌直接性,系统操作效率反应效率是第一位要解决的问题
- 屏幕大,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%空隙,避免发生电视显示屏独有的“过扫描(踩边)”现象
现阶段智能电视有两种分辨率模式1920x1080和1280x720,也就是我们常说的1080p和720p,在进行UI设计时候:
- 高分辨率设计,可以使用android 9-patch切图进行低分辨率适配。在测试的时候选择用低分辨率测试可以更好的发现问题。
- TV有多种显示模式,确保所有模式下经过测试,都不会产生问题。