智能电视app案例：视频排行榜的UI设计
2016-06-26 02:53 | 深圳狮创UI设计
[引言] 前文《智能电视app案例：视频排行榜的产品设计》 介绍了视频排行榜的产品设计阶段。在本篇，我们继续完成后续的视觉设计。
智能电视视频排行榜：UI设计
智能电视app的设计规范，与手机端app设计理念相同，是为了对界面元素的样式、颜色和字体大小的统一而设定的规范和使用原则。本文所分享的就是在设计规范下，具体到电视上的某一界面（本文以排行榜为例）时，如何结合规范去进行设计的经验。
在设计排行榜UI时，从背景、页面布局、一二级标题切换形式、字体大小、焦点框状态等进行了设计。当然，第一步是产品提供给我们原型图。（PS：以1280*720px为例）
排行榜原型图
一、背景设计
在设计背景时，我们首先要明白电视端与手机端与电脑端是有区别的，电视端屏幕的色彩对比度及饱和度都相对较高，且电视端屏幕尺寸较后两者都更大，所以电视端的背景色调偏暗、饱和度偏低，这样我们可以清晰而且舒适的阅览界面上的内容。
以下是几款智能电视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状态下相同。
六、标准色值
这是在排行榜中的标准色值规范。
标准色值
最后，附带一张在电视上最终完成的排行榜效果图。
排行榜
本文到这里就结束啦，作为电视行业年轻的一员，这里分享有限的经验以期抛砖引玉，更期待同行朋友们的切磋交流！
注：想体验这个排行榜的朋友，请到快投官网或各大电视应用市场下载最新版快投电视/快投视频。
文／智能电视UED（简书作者）
原文链接：http://www.jianshu.com/p/63a25f42b2ec
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
以上信息由IAIT | 铁匠科技UI设计整理发布
深圳铁匠设计(深圳UI设计公司)提供：深圳UI设计、深圳网站设计、深圳PPT设计、移动设备界面设计、软件界面设计，手机界面设计,APP UI设计等。深圳市铁匠信息科技有限公司多年的专业UI设计经验和强大的设计团队，我们为全国上百家客户的提供了创新易用的UI设计方案，大大提升了交互体验和客户品牌价值，用户体验越来越重要的今天，深圳铁匠科技(IAIT)为您打造更完美的UI设计，...
智能电视app案例：视频排行榜的UI设计_深圳UI设计公司|深圳铁匠设计|专注于用户体验与交互设计,深圳高端网站设计专家！ 深圳市铁匠信息科技有限公司欢迎您！ | www.szui.net | 整理发布 | | IAIT | 铁匠科技UI设计 | 深圳UI设计公司 | 深圳界面设计 | 深圳APP界面设计 | 深圳软件界面设计 | 深圳网站界面设计 | 深圳设计公司 | 深圳UI设计 |