智能电视UI设计应注意的几个问题

智能电视UI界面在设计时，与手机APP界面的设计略有不同，在这方面实践了一段时间，发现了如下几个常见问题，是我们在做设计时应该注意的。

    由于智能电视品牌不一，某些界面在一些电视上会出现切屏的现象，针对于这种情况，我们在设计时要预留一些边距，防止在电视上被切掉一部分。

以下三个界面都是智能电视APP上的界面（1920*1080px）：

    图2-1右上角的日期字体大小为18px，颜色RGB(158,158,158)，对于1080P的界面来说，18px的文字在于电视显示时，通常我们在家里观看电视的距离约为2m~3.5m，在这个距离下正常的视力不刻意靠近去观察的话，基本是看不见的。左下角的功能文字字体大小为28px ，颜色RGB（127,151,178），基本就满足了电视用户的观看需求，而且文字的颜色与背景色用了相同色调，但是饱和度和亮度较高，这样文字在背景下就不显得突兀。

    图2-2中，左下角提示文字字体大小24px，颜色RGB(196,196,196)，作为提示性的文字24px其实对于正常视力范围的用户来说已经足够了，但是三行提示文字，略微过多，可以稍微缩短提示性文字的长度。海报标题文字字体大小38px，颜色RGBA（255,255,255,0.7）,文字大小对于海报标题来说比较合适，但是海报图案由于不可控，所以我们会在文字与海报之间添加一层蒙版，这个界面使用的是渐变蒙版，由于渐变得不是很好，当碰到像军情解码这种复杂的背景时，正文容易与背景混淆。

    图2-3中副标题文字字体大小为26px，颜色RGB（140,140,140），文字略微显小，当然在视觉上，会感觉整体比较美观，但是在观看时，26px的文字已经和提示文字大小差不多了，作为副标题文字，字体大小可以稍微大一点。

    从这三个例子可以看出，大多数智能电视的APP在选择文字大小时： 美观性 >实用性 ，在设计时都会选用偏小的字号，这样让整个界面排版看起来更加美观，但是对于是否能够看清楚文字这一点上，依然是有不足的地方。在设计时，我一般会选取偏大的文字去排版，例如长文字简介字体大小为36px、标签栏字体大小为42px，这样可以最大程度的保证用户能够在正常观看电视范围内看清楚所需的文字。

现在智能电视的界面，大多数都是暗色背景，当然也有一些是亮色背景。

    图3-1界面是云视听极光的首页，背景是偏暗的：RGB（16,16,16），略微有一点渐变；图3-2是Apple TV的首页，背景偏亮，模糊背景的效果，带有杂色；图3-3是CIBN聚精彩的首页，也是略微有一点渐变，白色偏蓝的背景。对比三个界面，可以看出偏暗背景会让前景，也就是各个入口更加的明显，让人的视觉焦点放在了可点击模块上面；而偏亮的背景下，这种对比就比较弱，让人看到的是整个界面风格，习惯了PC端或者手机端的用户会更加喜欢偏亮的背景，因为看起来更加简洁。但是，电视屏幕相对于PC或者手机来说，是偏亮的，这让亮色的背景在电视上看起来更加亮，长时间观看的话容易让眼睛产生疲劳感。从偏亮的这两个背景，我们可以看出，Apple TV并不是简单的模糊，它的背景和聚精彩的相比较，也是偏暗的，而且还添加了杂色，这可以弱化背景，突出各个入口。

    目前，主流的APP都是使用偏暗背景或者比较中性的背景色，少数使用了偏白的背景，但是在电视上的效果来看并不太理想，所以，建议在设计时优先考虑偏暗背景。

    在设计智能电视界面时，许多入口需要我们用色块+icon或者图片+icon的形式去展示，当我们选择采用色块去展示时，不可避免的就会碰到这种多色块排列的界面，这个时候我们该用明度较高的颜色去做还是明度较低的颜色去做呢？

    从上图的界面可以看出，明度不一样，界面给人的整体感觉会有所偏差，左边的界面明度和饱和度较高，给人的感觉就是色彩很丰富，入口图与背景对比十分明显；而右边的界面，色块的明度和饱和度相对而言较低，但是界面给人的一体感更强。由于电视屏幕比较亮，当明度和饱和度较高时，会发现和在设计时有所出入，而明度和饱和度不高的色块，在电视上的对比比想象中要更加的好。

    电视端与手机端或者pc端的差别就在于，所有的行为都是通过遥控器去控制的，不同于手机端的触屏或者pc端的点控，所以在电视端上的APP就需要一个焦点框来显示当前状态。而焦点框目前有三种模式：线性焦点框、面状焦点框以及无焦点框。

    这两个界面都是APP的首页，图5-1用的是面状焦点框，图5-2用的是线性焦点框，这两种焦点样式在显示当前焦点时都比较的清晰，而图5-3用的无焦点样式，只是入口的放大+阴影来表示当前焦点所在位置，这对于动效的要求就比较的高，通过移动的动效或者焦点所在时的动效来准确保证用户可以第一时间找到焦点所在。前两者相对而言比较简单，而且可以起到比较好的效果，而无焦点框的形式在没有动效的支持下不建议使用。

    当在别的界面时，焦点框又该怎么使用，举个列子：视频类APP的选集，如下图：

    在一些比较特殊的界面，比如选集，大多数APP还是选择了面状的焦点框，因为线状焦点框在这种排布整齐，简洁的界面并不显眼，不容易引起人们的关注。在另外一些界面，比如视频类APP的列表页，选择线性焦点框的更加的多，这是因为在有海报的情况下，线性焦点框可以更好地融入整个界面中去。

   当我使用线性焦点框时，一般会选择3px~5px宽的焦点框，在这个范围内的焦点框不会显得笨重，也不会太过于细而起不到焦点的作用。

    总结：以上几点是智能电视UI设计所需考虑的几个小问题，针对一些视频类的APP或者面向人群较广的APP，如果你设计的APP是面向儿童或者老人的，那方向可能会有所不一样。举个列子：儿童类的APP色彩会比较鲜艳，背景色不宜偏暗。当然，在我们设计前，面向的人群或者界面的着重点都需要清楚，这样才能设计出既美观又实用的APP界面。