数字电视UI设计规范

UI 规范

本章描述了数字电视平台下客户端（包括 Web 和应用程序两种）的显示部分的 UI 规 范 由于数字电视的目标用户是家庭用户，显示终端是电视机，控制终端是遥控器，所

以 UI 规范将满足家庭用户的使用习惯，并符合电视机和遥控器的特点。 请按照如下规范来进行设计您的客户端，以确保在数字电视 上的高质量体验。

1.1 B /S Web UI

1.1.1 主界面及 UI 规范

1.1.1.1 界面风格

1.1.1.1.1 字体类型：

1. 请使用黑体， Arial 等标准清晰的字体。

1.1.1.1.2

大标题文字

1. 字体：黑体

2. 字号： 50pix

3. 颜色： RGB ：189 112 36

4. 字间距： 6pix

5. 有投影效果，略有一点浮雕效果 投影：

混合模式：正片叠底，颜色： RGB ： 3 13 76 不透

明度： 75% ，角度： 120 ，使用全局光

距离： 3 ，扩展： 10 ，大小： 5 ，杂色： 0 ， 图层挖空投影 斜面和浮雕：

样式：内斜面，方法：平滑， 深度： 41% 方向：上， 大小； 0， 软化： 0 角度： 120，高度： 30， 使用全局光

高光模式：滤色，颜色： RGB ：228 156 107，不透明度： 75% 暗调模式：正片叠底，颜色： RGB ： 0 0 0，不透明度： 75%

1.1.1.1.3 菜单文字

1.1.1.1.1.1 原始状态文字

1. 字体：黑体

2. 字号： 32pix

3. 颜色： RGB ：210 210 210

4. 描边： RGB ： 55 47 45，大小： 2，位置：外部，混合模式：正常，不透明度： 100%

5. 字间距： 1pix

6. 行间距： 62pix

7. 位置：

i. 196， 159

ii. 196， 221

iii. 196，283

iv. 196， 345

v. 196，407

vi. 196，469 8．有投影效果，透明度 90% 投影：

混合模式：正片叠底，颜色： RGB ：246 231 246 不透明度： 75% ，角度： 120 ，使用全局光 距离： 5 ，扩展： 49 ，大小： 3 ，杂色： 0 ， 图层挖空投影 1.1.1.1.3.2

选中状态文字

1. 字体：黑体

2. 字号： 32pix

3. 颜色： RGB ：193 152 27

4. 字间距： 3pix

5. 文字在选中条中的位置： 196， 8

6. 有投影效果，透明度 100% 投影：

混合模式：正片叠底，颜色： RGB ： 35 17 10 不透明度： 100% ，角度： 120 ，使用全局光 距离： 2 ，扩展： 0，大小： 0，杂色： 0，图层挖空投影

1.1.1.1.3.3 内容文字

字体：黑体

1. 字号： 28pix

)

6 / 94

2. 颜色： RGB ：220 220 0

3. 字间距： 3pix

4. 描边： RGB ：55 47 45，大小： 2，位置：外部，混合模式：正常，不透明

度： 5. 字间距： 1pix

6. 行间距： 62pix 有投影效果，透明度 90% 投影：

混合模式：正片叠底，颜色： RGB ：246 231 246 不透明度： 75% ，角度： 120 ，使用全局光 距离： 5 ，扩展： 49 ，大小： 3 ，杂色： 0 ， 图层挖空投影

1.1.1.1.3.4

输入文字

a) 字体：黑体

2. 字号： 32pix

3. 颜色： RGB ：180 180 180

4. 字间距： 3pix

1.1.1.1.4 其他有关字体的细节： 为了适应人们横向阅读中文的习惯，一列最好不超过 25 个字。

请不要使用下划线。当文字被选择时，可以用某种边框来表示。您可以随意的在框 中用其他的颜色覆盖文本，或者做一个所有像素的颜色倒转。

1.1.1.1.5

指示箭头位置

1. 上箭头：

2. 下箭头：

3. 确认按钮：

4. 上翻页：

5. 下翻页：

6. 回退箭头：

1.1.1.1.6 一般选中条

1. 选中条为兰底黄边框；底为颜色： RGB ：75 106 185， 透明度为 70%

2. 框为颜色： RGB ： 146 1400 有投影效果，透明度 100% 投影：

混合模式：正片叠底，颜色： RGB ： 0 0 0

100%

不透明度：80%，角度：120 ，使用全局光

距离：3 ，扩展：0，大小：0，杂色：0，图层挖空投影

1.1.1.1.6.1第二选中条

1. 选中条为兰底兰边框：底为颜色RGB：92 96 107，透明度为70%

2. 框为颜色：RGB：58 79 111，有投影效果，透明度100% 投影：

混合模式：正片叠底，颜色：RGB：0 0 0

不透明度：80%，角度：120 ，使用全局光

距离：3 ，扩展：0，大小：0，杂色：0，图层挖空投影

1.1.1.1.6.2输入文字条

1. 选中条为兰底黄边框；底为颜色：RGB：42 47 61，透明度为70%

2. 框为颜色：RGB：147 78 2，有投影效果，透明度100% 投影：

混合模式：正片叠底，颜色：RGB：0 0 0 不透明度：80%，角度：120 ，使用全局光

距离：3 ，扩展：0，大小：0，杂色：0，图层挖空投影

1.1.1.2数字电视自动为SP 应用提供的主界面

1.1.2数字电视Web 页面UI 规范

1.1.

2.1分析老式的电视机的分辨率比计算机显示器的分辨率低许多，而且部分电视机使用的是隔行扫描的工作方式，因此，以下我们将针对电视机这两个特点采取具体的策略来实现高质量的显示效果

1.1.

2.2分辨率显示

800*600 （注意：分辨率800*600 。实际应用程序中应用程序UI Width 为

780PixHeighth为595Pix,WEB页面宽度为780 Pix,高度不限制，美观即可）

尽管许多屏幕分辨率被调成4 ：3，但是有些电视可能宽或窄一些。当为支持这些分辨率调整时，可以在边缘加入一些额外的空，使用黑色填充。

在电视机中，显示的一部分可能会隐藏在一个显示的Bezel边缘下。一个

“ SafeZone” 或“ SafeTitling Area”是一个显示区，在其中对于游戏至关重要的内容能

够安全的被显示。为了解决这个问题，客户端将在上边缘留出5 和两边各留10个象素，以黑色填充。

1.1.

2.3字体黑体

1.1.

2.4字体大小

32 Pix以上

1.1.

2.5字体颜色字体本色R46 G83 B125 连接色R33G168B206 激活色R203G121B25 已访问连接色R57 G93 B197

1.1.

2.6颜色：主题色彩是深蓝色和红色和绿色，并且是非饱和色。

要使用在16到240之间的RGB值(SafeColor)。

避免高对比度和饱和色。避免使用细微的色差。

纯白色和纯黑色在TV中的显示可能是糟糕的。可以用RGB(240,240,240代替白

色，用RGB(16,16,16来代替黑色。

1.1.

2.8最小显示元素的大小：

最小是32 X 32像素。

1.1.

2.9线条防止单像素宽成为线或点，线条的宽度至少为2个象素。单像素宽的垂直线和点在旧式频率回应糟糕的电视机中可能会显示为逐渐消失或根本不会显示。单像素宽水平线会导致在隔行显示时的画面闪烁，因为他们只能在两个隔行区中的一行中画出。