数字电视UI设计规范

Ul规范
本章描述了数字电视平台下客户端（包括Web和应用程序两种）的显示部分的Ul规范
由于数字电视的目标用户是家庭用户，显示终端是电视机，限制终端是遥控器，所
以UI规范将满意家庭用户的运用习惯，并符合电视机和遥控器的特点。

请依据如下规范来进行设计您的客户端，以确保在数字电视上的高质量体验。

1.1 B/S Web UI
1. 1. 1主界面与Ul规范
1. 1.1. 1界面风格
1. 1. 1. 1. 1字体类型：
L请运用黑体，Arial等标准清楚的字体。

1.1.1.1.2大标题文字
2.字体：黑体
3.字号：50pix
4.颜色：RGB： 189 112 36
5.字间距：6pix
6.有投影效果，略有一点浮雕效果
投影：
混合模式：正片叠底，颜色：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菜单文字
2.1.1.1.1.1原始状态文字
3.字体：黑体
4.字号:32pix
5.颜色：RGB： 210 210 210
6.描边：RGB： 55 47 45,大小：2,位置：外部，混合模式：正常, 不透亮度：
100%
7.字间距：Ipix
8.行间距：62pix
9.位置：
i.196, 159
ii.196, 221
iv. 196, 345
v. 196, 407
vi. 196, 469
8.有投影效果，透亮度90%
投影：
混合模式：正片叠底，颜色：RGB： 246 231 246
不透亮度：75% ,角度：120 ,运用全局光
距离：5 ,扩展：49 ,大小：3 ,杂色：0 ,图层挖空投影9.1.1.1.3.2选中状态文字
10字体：黑体
11字号：32pix
12颜色：RGB： 193 152 27
13字间距:3pix
14文字在选中条中的位置：196, 8
15有投影效果，透亮度100%
投影：
混合模式：正片叠底，颜色：RGB： 35 17 10
不透亮度：100% ,角度：120 ,运用全局光
距离：2 ,扩展：0,大小：0,杂色：0,图层挖空投影161.1.1.3.3内容文字
字体：黑体
17字号:28pix
)
6/94
18颜色：RGB： 220 220 0
19字间距：3pix
20描边：RGB： 55 47 45,大小：2,位置：外部，混合模式：正常，不透亮度：100%
21字间距：Ipix
22行间距：62pix
有投影效果，透亮度90%
投影：
混合模式：正片叠底，颜色：RGB： 246 231 246
不透亮度：75% ,角度：120 ,运用全局光
距离：5 ,扩展：49 ,大小：3 ,杂色：0 ,图层挖空投影
22.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 140 0有投影效果，透亮度100%
投影：
混合模式：正片叠底，颜色：RGB： 0 0 0
不透亮度：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页面Ul规范
1. 1.
2. 1 分析
老式的电视机的辨别率比计算机显示器的辨别率低很多，而且部分电视机运用
的是隔行扫描的工作方式，因此，以下我们将针对电视机这两个特点实行具体
的策略来实现高质量的显示效果
1. 1.
2. 2辨别率显示
800*600 （留意：辨别率800*600
实际应用程序中应用程序UI Width 为
o
780Pix Heighth为595Pix, WEB页面宽度为780 Pix,高度不限制，美观即可）
尽管很多屏幕辨别率被调成4： 3,但是有些电视可能宽或窄一些。

当为支持
这些辨别率调整时，可以在边缘加入一些额外的空，运用黑色填充。

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

一个"Safe Zone,,或"Safe Titling Area”是一个显示区，在其中对于嬉戏至
关重要的内容能
够平安的被显示。

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

1. 1.
2.3 字体
黑体
1. 1.
2.4字体大小
32 Pix以上
1. 1.
2. 5字体颜色
字体本色R46 G83 B125
连接色R33 G168 B206
激活色R203 G121 B25
已访问连接色R57 G93 B197
1. 1.
2.6 颜色：
主题色调是深蓝色和红色和绿色，并且是非饱和色。

要运用在16到240之间的RGB值(SafeColor)o
避开高对比度和饱和色。

避开运用微小的色差。

纯白色和纯黑色在TV中的显示可能是糟糕的。

可以用
RGB (240, 240, 240)代替白
色，用RGB(16, 16, 16)来代替黑色。

1. 1.
2. 8最小显示元素的大小：
最小是32X32像素。

1. 1.
2.9 线条
防止单像素宽成为线或点，线条的宽度至少为2个象素。

单像素宽的垂直线和点在旧式频率回应糟糕的电视机中可能会显示为渐渐消
失或根本不会显示。

单像素宽水平线会导致在隔行显示时的画面闪耀, 因为他
们只能在两个隔行区中的一行中画出。

1.1.
2.10 按钮
尽可能对全部的按钮类型设计一种统一的基本的外观
按键上的文字能够体现它的功能。

例如PIayDVD比OK更让人易懂。

避开给用户在一个界面上太多的按钮和链接。

避开创建功能已经在遥控器上已有的按钮，例如Back, Pause或Page
UP
一个界面不应当超过六个链接或按钮，除非这些按钮组织进一个表或
网格中以
便快速选择。

按钮应当按逻辑关系组合。

1. 1.
2. 11 菜单
尽量避开运用下拉式菜单，代替采纳一列可见菜单式按钮，每个按钮代表一个
功能。

按钮焦点是环绕式，比如说当焦点在最上面一个按钮时，按UPArrOW key,焦点
应当跳动最下面一个按钮。

当有焦点时，该按钮应当很简单和没有焦点的按钮
区分开来。

1.1.
2.12 网页
可以在HTML应用中采纳ACtiVeX控件，但是最好在HTML里创建你自己的用
户接口，让控件的操作逻辑在后台完成，而不是在控件里创建用户接口元素。

1. 1.
2. 13位置显示
假如在两个相邻的页面（介面）间阅读，应当供应一个显式的反馈表明目前用
户的所在。

1. 1.
2. 14动画效果
假如采纳动画效果，肯定要测试其是否播放平滑和占用资源状况。

动画效果是为了增加可用性，而不能分散用户留意力。

1. 1.
2. 15 测试
基于TV的应用都须要作特别的测试，低端用户大多采纳800X600的辨别率，要在
）
13 / 94
TV上视察不同的辨别率，界面的调整要正确，千万不要对单个图片进行拉伸。

1.1.
2. 16细微环节问题
包括button的状态，风格的统一，Text的对其方式，显示规格，Editcontrol 的风格
统一，边框间隔、默认行为，汽泡显示规格，图标大小规格等。

1. 1.
2. 16. 1 基本控件（Basic Control）
1. 1.
2. 16. 1. 1 图片PiCtUre
默认居中显示
1. 1.
2. 16. 1.2 按钮BUttOn （四种状态）
State：
Focus：高亮
Down：凹
Disable：空白
每个按钮不超过四个汉字+一个图标（字大小：36X36）
1. 1.
2. 16. 1.3 文本框Text：
响应上下键、翻页，自动换行
1. 1.
2. 16. 1.4 编辑框EditControl
输入框高40,按上下键时焦点不变，鼠标移上去焦点不变，底色70% 透亮白。

1.1.
2.16.1. 5 复选框CheckBox
Focus：边框加粗，颜色醒目（焦点）
State：
Disable：
1. 1.
2. 16. 1. 6 单选框Radiobutton
Focus：边框加粗，颜色醒目（焦点）
State：
Disable：
1. 1.
2. 16. 1. 7 滚动条Scrollbar
上下箭头，气泡提示
1. 1.
2. 16. 1.8 滑块Slider
正常、Disable、focus、拖动中，滑块步长5%
1. 1.
2. 16. 1. 9 进度条ProgressControl
采纳SDO-TV统一进度条。

（需盛大供应）
1. 1.
2. 16. 1. 10 下拉菜单ComboBox
采纳列表选项选择的方式处理
1. 1.
2. 16. 1.11 消息窗口Messagebox
提示、警告、错误
标题，图标，文本，按钮
1. 1.
2. 16. 2 高级控件Advanced Control
1. 1.
2. 16. 2. 1 困难列表Complex List
焦点不固定。

按向下时焦点就始终往下。

不循环显示。

到最终一个再按往下，则翻页。

1. 1.
2. 16. 2.2 菜单MenU
竖排半透亮的菜单，菜单项不多余6个。

1. 1.
2. 16. 2.3 滚动文本SCroII Text
尽量采纳单行文字，滚动速度在2字/秒一一4字/秒之间
1. 1.
2. 16. 2.4 帮助HeIP Info
按遥控器“帮助”键弹出，或于界面最底部滚动显示。

1. 1. 3 UI限制规范
1. 1. 1. 1 分析
数字电视是以家庭用户为目标用户的消遣平台，是以遥控器为主要限制终端。

它的特
点主要体现在易用性和适用性等方面。

遥控器的具体说明请参见2.5节遥控器操作规范.
)
15 / 94
1. 1.3.2 选择
所以依据观看电视的习惯，界面内容要避开横向滚动。

采纳醒目的黄框作为焦点框，可以运用户可以在3m外视察到焦点框的去向。

1. 1. 3. 3 布局
建议运用单层平面结构，便于用户运用遥控器用上、下、左、右从直觉上限制。

当单层结构无法表达页面焦点逻辑时也可以有分层的结构。

1. 1.3.4 统一
全部的界面的结构要统一，便于用户从局部来推断出全局的操作方式。

介面设计应当一样地在类似的动作上有相同的活动方式。

每个新的系统对用户来说都是一次新的学习过程，假如界面风格常常变更，不
保持统一，无疑更增加了用户的学习难度，或许会导致用户的厌烦。

1. 1.3.5编写帮助
给出帮助文件并能让用户很简单的找到。

无论多么精彩的界面设计对用户来说都是生疏的，那么编写帮助是个特别有效
的方法，把你的设计意图和运用介绍明明白白地告知用户，在用户遇到困难的
时候能够得到最快的帮助，不但可以降低用户的不满程度，同时可以帮助用户
更加系统深化地学习和驾驭。

务必避开选单太杂，或是运用难懂的设计隐喻或是太多的隐喻。

1. 1.3.7出错与异样提示
对各种出错或异样状态赐予用户一个友好的提示和帮助，并提示用户或许是由
于什么缘由，那么用户会开心的多。

介面设计应当允许运用者因过失操作错误中，而有回复的功能，运用户了解怎
样才能正确操作。

1. 1. 3. 8讯息呈现
讯息呈现主要强调回馈性，包括视觉回馈、触觉回馈、声音回馈等方面。

视觉回馈：一般常见的手法则是瞬间变更色调变更，使得视觉有了落差所产生。

不过值得留意，应当避开误用过多颜色产生而炫乱或扰乱运用者操作的显示。

触觉回馈：一般多与视觉回馈结合，常见的方式多为按键之后，介面增加了变
化，增加新的物件或感觉按键被按到等状况。

声音回馈：多运用在警告或按键是否有碰触到之反应等。