最近有小伙伴私信我关于电视端的设计问题，遂整理了一些个人最近在TV端应用的一些设计经验，供大家交流学习。以下是我在起初接触TV设计的过程中整理的一些方法，结合自己有限的经验后总结的一些针对TV设计的方法规范，以及一些需要注意的问题。
一、使用场景
在开始接到需求之前，我们首先需要了解使用场景和环境，了解这些这些特性设计更符合场景的界面，符合良好的用户体验。
因此在TV的界面设计上最好让用户通过方向键和OK能够进行操作，并提供返回键，避免用户低头看遥控器寻按键而打断操作的任务流。TV标配音响系（音量是默认开启的）。所以在app设计中，可以使用声音作为帮助提示和操作反馈提示。
二、智能电视的特性
智能电视液晶屏区别于电脑显示设备和手机显示设备，当你设计你的APP ui界面时，你要知聚烯烃弹性体
道根本上智能电视与电脑或移动设备（手机）是不同的。除开它的尺寸大小因素，电视显示出的信息总量比电脑或移动设备的
要少，你应该提供更少的UI，尽可能的自动化处理某些任务，而不是要求用户去互动。
市面上大多电视的尺寸都具有一定欺骗性。尽管现代电视的屏幕对角线通常大于40英寸，成比例地，观众坐在电视前比坐在电脑显示屏前要远。作为用户的感受到的是，电视屏幕尺寸“似乎”比电脑显示器要小。当你在设
计UI时，你可以用自己的手机连接ps来模拟这种体验.
三、显示器和移动设备的显示分辨率
电脑显示器最大分辨率，通常小于或等于显卡分辨率。显卡决定最大分辨率，显示器决定像素密度。移动设备的分
辨率和像素密度往往是固定的，电脑操作系统能自动处理分辨率和像素密度的问题。
Android系统根据设备屏幕大小和像素密度来按比例缩放UI。此外，你可以提供可替换的UI
隧道喷浆
资源，为不同设备准备最好的UI体验。
电视显示分辨率
电视（即使是最现代化的那些电脑）有基于扫描线的显示分辨率。Google TV 支持3种扫描线值的高清电视：720p，1080i和1080p，这代表720逐行扫描线，1080隔行扫描线和1080逐行扫描线（Android将后两者视作等同）。720值意味着电视可以在屏幕的垂直方向上“寻址”720条不同的线；1080值则意味着电视以在垂方向上“寻址”1080条线。
这些线有多高，每条线之间的“宽”是多少？也就是说电视的实际像素密度是多少？Android将这些数值抽象显示为与密度无关的像素单位（缩写 dp）。
Android 应用程序得益于Android的缩放技术。总之，你应该为1080p的规格来设计UI，允许Android系统将你的UI缩小到720p的规格，因为缩小图形的效果通常要优于放大的效果。为了得到最好的图片缩放效果，可以给开发提供.9.png切图。 智能电视的设计尺寸
翻罐笼
所以建议以1080P作为视觉设计稿尺，切图可以使用android 9-patch切图进行低分辨率适配?，在测试的时候选择用低分辨率测试可以更好的发现问题；确保在TV所有显示模式下经过测试，都不会产生问题。
拿上面的图为例，设计尺寸为1920X1080，因为上面讲到的电视屏幕显示特性，不同厂家甚至还不一样，那么为了避免这些问题的出现，在设计界面的时候，如上图给边缘留10%或以上的外边距，所有内容放在这个容器内去设。
我习惯给上下边距留90个像素，左右边距留120个像素，不一定要按我的数值去设计，具体数值可以自己根据实际情况去协调
智能电视的交互
四、焦点
不管是为哪个厂商的电视盒子或者 TV OS做，你都需要理解一个叫Focus Engine的设计概念，你要时刻记得在电视UI上应该始终有一个东西是处在Focus的状态 也就是焦点状态。
倍速链组装线
涡轮抽风机举个栗子：如上图中有很多个磁贴排布，而在动设备上，你需要选择个就直接点击哪个磁贴即可。而在电视上，默认状态就应该是选中了一排照片中的某一个，而你需要点击某一个，就需要先移动焦点到对应的磁贴上，点击OK来完成选择，这是由遥控器这种独特的交互方式决定的。
焦点在整个TV APP中尤为重要，因此设计这块交互时，无论是卡片还是按钮，选中的效果，需要足够明显夸张一些，当然，除了放大+投影效果，放大+外发光效果，还有放加描边的效果，早起乐视在这一块做的挺出的，但现在风格上已经显得很老旧了。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议