智能电视排行榜设计·UI篇
标题
智能电视app的设计规范，与手机端app设计理念相同，是为了对界面元素的样式、颜色和字体大小的统一而设定的规范和使用原则。本文所要讲的就是在设计规范下，具体到电视上的某一界面（排行榜）时，如何结合规范去进行设计的经验。
在设计排行榜UI时，从背景、页面布局、一二级标题切换形式、字体大小、焦点框状态等进行了设计。当然，第一步是产品提供给我们原型图。（PS：以1280*720px为例）
排行榜原型图
一、背景设计
在设计背景时，我们首先要明白电视端与手机端或者pc端是有区别的，电视端屏幕的色彩对比度及饱和度都相对较高，而且电视端屏幕尺寸较之后两者而言都是相对较大的，所以电视端的背景色调偏暗、饱和度偏低，这样我们可以清晰而且舒适的阅览界面上的内容。
以下是几款智能电视app所用的背景：
纯色渐变背景
天空背景
草原背景
从这三张背景中不难看出，即使是背景比较亮，饱和度较高的图，在设计时都会加上一层黑色蒙版，从而降低背景的亮度和饱和度。
其次，我们在设计背景时还需要考虑到的是当前背景是否需要与产品其它页面统一，此次排行榜与我们产品列表页其实属于一个层级的界面，所以直接使用了默认的背景。（当然，产品背景的设计与第一点要求也是相同的。）
排行榜背景
二、页面布局
页面布局图
由于部分电视在适配时会截屏，所以我们在进行页面布局时，主要信息（不可删减的）与四边之间需要留一些安全边距，如页面布局图中红色区域所表示的就是在设计时所留下的安全边距，需留的边距为30px或以上。
绿色区域为排行榜的海报显示区域，尺寸为：1280*342px
focus海报尺寸：224*334px
normal海报尺寸：186*278px
图片之间间距：24px
蓝色区域为标题栏，此次标题栏分为一级标题和二级标题，
一级标题：高：60px，宽：根据分类来定；文字之间间距：70px
二级标题：高：50px，宽：根据分类来定；文字之间间距：65px
黄色区域为文字显示区域，尺寸为：1160*138px
片名与简介之间间距：20px
简介文字之间间距：12px
因为海报为排行榜首要展示的内容，所以居于屏幕的中间，为主要显示区域；而类型作为标题则应放置于海报的上方，符合人从上至下观看东西的自然习惯；片名作为主要信息应该与海报相近，而简介作为次要信息则可稍微弱化。
三、一二级标题切换形式
在电视端，由于我们是使用遥控器去操作的，与手机端不一样，当一个界面出现两个级别的标题时，一般情况下应该是将标题至于左侧（如下图所示），但是排行榜属于特殊的横版式的页面，所以将一二级标题置于页面上方。
电视直播菜单
由于同时出现两级标题，在视觉上会给用户带来困惑，所以在处理这种情况时，采取了弱化非当前选取的标题栏，如下图所示，当focus框在一级标题时，二级标题的色调会变暗，这样视觉上给人的感觉就比较清晰明了，能将焦点放在一级标题上。
focus框在一级标题时
四、字体大小
我们观看电视一般的距离为3m左右，而如今比较普遍的电视尺寸为50寸左右，以1280*720px为例，经过我们多次尝试发现，当电视的字号小于20px时，人们比较难看清楚电视上的文字,而当标题文字大于32px时，文字会过大影响人们的观看。所以，在电视端设计时，最佳文字范围应该为：20px～32px，20px大小的文字可以应用于提示类的文字。
排行榜中的字体大小
五、焦点框状态
对于电视端上可选择的按钮来说，一般有三种状态：focus、normal、blur，在通过遥控器去操控界面时，我们需要一个焦点框来表示当前的选择，也就是三种状态中的focus状态，除了按钮本身需要有色值或者大小的改变，我们的焦点框也需要通过变换位置来给用户反馈。
焦点框的设计与产品品牌的色值有关，通常我们会选取与品牌相近或一样的色值作为焦点框的主色值，其次，还得考虑在背景下能够体现得比较亮眼，如下面两个例子：
vst和泰捷的焦点框
同时，因为海报是无法控制的一个因素，所以我们会在焦点框的内部加1～2px的黑色边框，这样可以很好的应对与焦点框色值相似的海报所带来的影响；而在电视端中，焦点框带有外发光的效果，可以让当前选择呈现一个浮现的状态，让视觉焦点更好的关注于当前的选择上。
此次产品logo和海报焦点框
海报的状态只有normal和focus，normal状态时，海报栏无焦点框。
在排行榜中，标题栏的文字有以上所述的三种状态，如下图：
标题文字状态
文字焦点框的色值与海报焦点框色值相同，文字在focus状态下色值发生变化，与normal状态下有比较大的区别。而在burl状态下，我采取的是用一个三角符号来表示，同时字体色值也与focus状态下相同。
六、标准色值
这是在排行榜中的标准色值规范。
标准色值
最后，附带一张在电视上最终完成的排行榜效果图。
排行榜
此次的文章主要是自己对于电视端UI的一些经验，不足之处，还望理解。
