大屏电视UI视觉规范

用户头像
杭州/网页设计师/5年前/2505浏览
大屏电视UI视觉规范

智能电视端的设计对我来说也算是一个新领域,从中也积攒了一些经验。以下就自己的项目经验和学习对智能电视UI做一个总结。

一、智能电视特性


二、智能电视UI设计准则


1. 使用手机作为UI模型。

虽然电视的尺寸大于电脑尺寸,但实际上观众坐在电视前比坐在电脑显示屏前要远。观众感受到的是,电视屏幕尺寸比电脑显示器要小。所以我们在设计UI时,可以使用手机作为 “模型”来模拟这种体验。


2. 在页面上的元素之间应该留出更多的空白空间,避免屏幕上杂乱的外观。

要做到这一点,需要综合使用更大的外边距和内边距。这对“触屏”UI也同样是一个好建议。


3. 电视总是横屏的。

在电视上,水平方向的可用空间比垂直方向上的可用空间要多。将屏幕上的导航控件水平放置,为内容部分节省下垂直空间。


三、智能电视分辨率



智能电视的分辨率与移动端app看电影时的显示差不多,如上图所示,目前常见的是1080P。

设计稿一般用1920x1080的尺寸就可以了,开发会对小的电视屏幕进行适配。



跟移动端app一样,屏幕上下左右都应留出适当的间距以保证用户舒服的一个观看使用体验,电视UI界面理论上来讲是应该留出一个10%左右的空白边。我设计的是上下52px,左右94px,但这个数据不是绝对的,可根据实际内容调整,只要视觉舒服就可以了。


举个例子,桌面app精选页要比普通的电影、电视剧分类页面的上下左右间距大一些,因为视频app的素材内容基本是按照16:9的比例设计的,而桌面的精选页素材更灵活些,它可能会承载一些宣传性质的推广素材,所以具体尺寸可根据实际内容来制定。


视频app


小米桌面


四、色彩


与电脑显示器相比,电视屏幕拥有更高的对比度和饱和度,所以在调整颜色的时候有以下几点规范:


1、谨慎地使用纯白色(#FFFFFF)。纯白色在电视屏幕上会引起振动或图像重影。用#F1F1F1(hex)或者240/240/240(RGB)来代替使用纯白色。

2、避免使用明亮的白色系,红色系和橙色系,因为这些颜色在电视上显示会特别严重的失真。

3、了解不同的电视显示模式,包括标准、锐利、电影/剧场,游戏等等。确保你的应用能适应这些全部的电视模式。

4、避免使用大面积的色彩渐变,因为它们可能会导致色带。

5、如果可能,在低质量的显示器上测试应用程序。这些设备可能有较差的伽马值和颜色设置。


五、字体



1、字体大小无绝对值,可根据实际情况对应调整。

2、字体粗细,一般大标题可以用粗一点的字体,但应避免过粗和过细的情况。

3、段落间距尽可能大一些,避免屏幕上出现杂乱的外观。


六、焦点


我们在设置焦点时应让焦点部分高亮放大显示,例如:


焦点线框形式,这种形式适合一行多列的海报之间切换,海报厚重用线框提亮且放大即能突出焦点又不会显的沉闷。焦点线框粗细一般在3-5px。



焦点面框形式,背景单色或线框的部分可采用这种高亮的渐变色突出焦点,文字标签部分应给出一定的宽高空间。




七、鲨鱼视频海报尺寸(间距自适应)



21
Report
|
73
Share
相关推荐
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
大家都在看
Log in