UI界面设计 ·

智能电视设计规范第一章:分辨率、色彩和字体

从今天,我们25学堂也要跟大家一起来学习一下智能电视UI界面设计的相关规范,不管是否涉及到,作为优秀的移动APP设计师,也要好好的了解这些智能电视设计规范

当你设计你的APP ui界面时,也要牢记Google Android  TV 的APP显示效果。

在其根本上智能电视 与电脑或移动设备(手机)是不同的。除开它的尺寸大小因素,电视显示出的信息总量比电脑或移动设备的要少。你应该提供更少的UI,可能需要自动化处理某些任务,而不是要求用户去互动。

atv-home

以下是一些智能电视UI设计准则:

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

现代电视的尺寸具有欺骗性。尽管现代电视的屏幕对角线通常大于40英寸,成比例地,观众坐在电视前比坐在电脑显示屏前要远。观众感受到的是,电视屏幕尺寸比电脑显示器要小。当你在设计UI时,你可以使用手机作为 “模型”来模拟这种体验。
2、在页面上的元素之间应该留出更多的空白空间,避免屏幕上杂乱的外观。

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

3、电视总是横屏的。

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

 

2、高清显示分辨率知识点

电视屏幕在根本上与电脑显示器与移动设备屏幕不同。显示器和移动设备屏幕直接使用(大体上)可寻址的像素。相较之下,电视使用的是落后十年的显示图像的模拟方式。了解这一不同点,再与Google TV 协同合作是非常重要的。

 

html5模板3

 

1.1 电脑和移动设备的显示分辨率

电脑显示器有一个最大的显示分辨率,这个分辨率通常小于或等于显卡分辨率。显卡决定最大分辨率,显示器决定像素密度(每英寸的像素数量)。移动设备的分辨率和像素密度往往是固定的。

因为对电脑的显示分辨率很简单,根据用户的偏好设置,电脑操作系统能自动处理分辨率和像素密度的问题。

Android系统使用同一套应用程序来运行多种移动设备。为了做到这一点,Android系统根据设备屏幕大小和像素密度来按比例缩放UI。此外,你可以提供可替换的UI资源,为不同设备准备最好的UI体验。

1.2 电视显示分辨率

电视(即使是最现代化的那些电脑)有基于扫描线的显示分辨率。Google TV 支持3种扫描线值的高清电视:720p,1080i和1080p,这代表720逐行扫描线,1080隔行扫描线和1080逐行扫描线(Android将后两者视作等同)。720值意味着电视可以在屏幕的垂直方向上“寻址”720条不同的线;1080值则意味着电视可以在垂直方向上“寻址”1080条线。

水平分辨率由电视的长宽比来决定。目前几乎所有的电视都使用16:9的长宽比(16个水平像素对应9个垂直像素),所以1080的电视机的分辨率是1920 x 1080。

这些线有多高,每条线之间的“宽”是多少?也就是说电视的实际像素密度是多少?这取决于不同的制造商,但是Android将这些数值抽象显示为与密度无关的像素单位(缩写 dp)。

Google TV Android 应用程序得益于Android的缩放技术。总之,你应该为1080p的规格来设计UI,允许Android系统将你的UI缩小到720p的规格,因为缩小图形的效果通常要优于放大的效果。为了得到最好的图片缩放效果,如果可能的话,给他们提供9-patch格式的图片。Android为Google TV 提供的缩放设置如下表所示。

screen

注释:

1、可寻址的屏幕尺寸是可见的像素数目。

2、密度定义是Android 根据dp来定义的。在 “设计与开发”一章中的“可选资源”一节中有相关描述。要了解更多关于可选资源的信息。可以阅读“Android开发准则”中的“支持多种屏幕”一章。

3、确定当前显示器的屏幕尺寸和分辨率,使用“显示单位”中的dpi与屏幕分辨率。
1.3 过扫描

另一个难题是过扫描。由于历史原因,电视制造商必须在正常屏幕尺寸的外侧预留出空白边,能够被电路寻址,但是不被用来显示电视信号。这些空白区域就是过扫描区域(或者就简称为“过扫描”)。Android应用程序不能在过扫描区域显示。

不幸地是,过扫描也因为制造商的不同而不同。所以围绕你的UI的空白边也多种多样。如果你为一部有显示过扫描的电视设计UI,你也许在不经意间将过扫描区域当作UI和电视边框之间的空白边使用了。如果之后你在一部几乎没有过扫描的电视上运行你的应用程序,UI将几乎没有空白边,这些元素可能很难识别。

为了处理这个问题,为你的UI提供额外的10%的空白边,并使用一个非绝对定位的布局。如图1所示。

image1

图1 屏幕分辨率和尺寸

2 、TV色彩设计规范

与电脑显示器相比,电视屏幕有更高的对比度和饱和度。考虑到这点,在使用纯色的时候要考虑一下准则:

1、谨慎地使用纯白色(#FFFFFF)。纯白色在电视屏幕上会引起振动或图像重影。用#F1F1F1(hex)或者240/240/240(RGB)来代替使用纯白色。
2、避免使用明亮的白色系,红色系和橙色系,因为这些颜色在电视上显示会特别严重的失真。
3、了解不同的电视显示模式,包括标准、锐利、电影/剧场,游戏等等。确保你的应用能适应这些全部的电视模式。
4、避免使用大面积的色彩渐变,因为它们可能会导致色带。
5、如果可能,在低质量的显示器上测试你的应用程序。这些设备可能有较差的伽马值和颜色设置。

Neptun-APPUI设计模板PSD下载

 

 

2.3 文本和字体设计规范

对电视来说,避免纤细字体或者有过宽、过窄笔画的字体。使用简单无衬线字体并选用抗锯齿功能来增加易读性。目前,Google TV只支持Droid Serif 字体族,但是你可以使用嵌入字体来创建一个更个性化的外观。然而,牢记嵌入字体会拖慢系统运行。

以下是一些提高文本易读性的方法:

1、每个段落限制90个单词。

2、将长句改为几个短句,让用户可以快速浏览。

3、在每行保持5-7个单词,不要少于3个单词,也不要多于12个单词。

4、在电视上,在深色背景上的浅色文字比在浅色背景上的深色文字更容易阅读。

5、使用Android的标准字体尺寸。例如,标准的小字体字号为14sp,在1080p的屏幕上,这相当于28点的字号。

6、为屏幕文本设置比印刷文本更大的行间距。

122222

下一章节,25学堂会继续跟大家聊聊智能电视的UI设计规范。

 

以及官网的设计文档资料阅读:Design for TV  developer.android.com

以上这些内容来源于:晓生的《Google智能电视设计规范

参与评论