家庭加工:数字电视UI规范

本章描述了数字电视平台下客户端（包括Web 和应用程序两种）的显示部分的UI 规范

由于数字电视的目标用户是家庭用户，显示终端是电视机，控制终端是遥控器，所

以UI 规范将满足家庭用户的使用习惯，并符合电视机和遥控器的特点。

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

B/S Web UI

1. 主界面及UI 规范

2. 界面风格

3. 字体类型：

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

      3.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%

　3.3 菜单文字

　   原始状态文字

　　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 ， 图层挖空投影

　3.4 选中状态文字

　　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，图层挖空投影

　3.4 内容文字

　　字体：黑体

　　1. 字号：28pix

　　2. 颜色：RGB：220 220 0

　　3. 字间距：3pix

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

　　5. 字间距：1pix

　　6. 行间距：62pix

　　有投影效果，透明度90%

　　投影：

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

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

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

　3.5输入文字

　　1. 字体：黑体

　　2. 字号：32pix

　　3. 颜色：RGB：180 180 180

　　4. 字间距：3pix

　3.6 其他有关字体的细节：

　　为了适应人们横向阅读中文的习惯，一列最好不超过25 个字。

　　请不要使用下划线。当文字被选择时，可以用某种边框来表示。您可以随意的在框

　　中用其他的颜色覆盖文本，或者做一个所有像素的颜色倒转。

4.指示箭头位置

　　1. 上箭头：

　　2. 下箭头：

　　3. 确认按钮：

　　4. 上翻页：

　　5. 下翻页：

　　6. 回退箭头：

5. 一般选中条

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

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

　　投影：

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

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

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

6. 第二选中条

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

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

　　投影：

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

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

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

7. 输入文字条

　　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为

　　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）。

　　避免高对比度和饱和色。

　　避免使用细微的色差。

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

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

　　1.1.2.8 最小显示元素的大小：

　　最小是32×32像素。

　　1.1.2.9 线条

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

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

　　失或根本不会显示。单像素宽水平线会导致在隔行显示时的画面闪烁，因为他

　　们只能在两个隔行区中的一行中画出。

　　1.1.2.10 按钮

　　尽可能对所有的按钮类型设计一种统一的基本的外观

　　按键上的文字能够体现它的功能。例如PlayDVD 比OK 更让人易懂。

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

　　避免创建功能已经在遥控器上已有的按钮，例如Back,Pause 或 Page Up

　　一个界面不应该超过六个链接或按钮，除非这些按钮组织进一个表或网格中以

　　便快速选择。

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

　　1.1.2.11 菜单

　　尽量避免使用下拉式菜单，代替采用一列可见菜单式按钮，每个按钮代表一个

　　功能。

　　按钮焦点是环绕式，比如说当焦点在最上面一个按钮时，按UP Arrow 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：空白

　　每个按钮不超过四个汉字＋一个图标（字大小：36×36）

　　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 滚动文本Scroll Text

　　尽量采用单行文字，滚动速度在2字/秒——4字/秒之间

　　1.1.2.16.2.4 帮助Help 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.6 流程简便

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

　　1.1.3.7 出错及异常提示

　　对各种出错或异常状态给予用户一个友好的提示和帮助，并提示用户大概是由

　　于什么原因，那么用户会愉快的多。

　　介面设计应该允许使用者因过失操作错误中，而有回复的功能，使用户了解怎

　　样才能正确操作。

　　1.1.3.8 讯息呈现

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

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

　　不过值得注意，应该避免误用过多颜色产生 而炫乱或扰乱使用者操作的显示。

　　触觉回馈：一般多与视觉回馈结合，常见的方式多为按键之后，介面增加了变

　　化，增加新的物件或感觉按键被按到等状况。

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