UI规范
本章描述了数字电视平台下客户端（包括Web和应用程序两种）的显示部分的UI规范
由于数字电视的目标用户是家庭用户，显示终端是电视机，控制终端是遥控器，所以UI规范将满足家庭用户的使用习惯，并符合电视机和遥控器的特点。
请按照如下规范来进行设计您的客户端，以确保在数字电视上的高质量体验。
1.1B/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：18911236
4.字间距：6pix
5.有投影效果，略有一点浮雕效果
投影：
混合模式：正片叠底，颜色：RGB：31376
不透明度：75%，角度：120，使用全局光
距离：3，扩展：10，大小：5，杂色：0，图层挖空投影
斜面和浮雕：
样式：内斜面，方法：平滑，深度：41%
方向：上，大小；0，软化：0
角度：120，高度：30，使用全局光
高光模式：滤色，颜色：RGB：228156107，不透明度：75%
暗调模式：正片叠底，颜色：RGB：000，不透明度：75%
1.1.1.1.3菜单文字
1.1.1.1.1.1原始状态文字
1.字体：黑体
2.字号：32pix
3.颜色：RGB：210210210
4.描边：RGB：554745，大小：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：246231246
不透明度：75%，角度：120，使用全局光
距离：5，扩展：49，大小：3，杂色：0，图层挖空投影
1.1.1.1.3.2选中状态文字
1.字体：黑体
2.字号：32pix
3.颜色：RGB：19315227
4.字间距：3pix
5.文字在选中条中的位置：196，8
6.有投影效果，透明度100%
投影：
混合模式：正片叠底，颜色：RGB：351710
不透明度：100%，角度：120，使用全局光
距离：2，扩展：0，大小：0，杂色：0，图层挖空投影
1.1.1.1.3.3内容文字
字体：黑体
1.字号：28pix
）
6/94
2.颜色：RGB：2202200
3.字间距：3pix
4.描边：RGB：554745，大小：2，位置：外部，混合模式：正常，不透明度：100%
5.字间距：1pix
6.行间距：62pix
有投影效果，透明度90%
投影：
混合模式：正片叠底，颜色：RGB：246231246
不透明度：75%，角度：120，使用全局光
距离：5，扩展：49，大小：3，杂色：0，图层挖空投影
1.1.1.1.3.4输入文字
a)字体：黑体
2.字号：32pix
3.颜色：RGB：180180180
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：75106185，透明度为70%
2.框为颜色：RGB：1461400有投影效果，透明度100%
投影：
混合模式：正片叠底，颜色：RGB：000
不透明度：80%，角度：120，使用全局光
距离：3，扩展：0，大小：0，杂色：0，图层挖空投影
1.1.1.1.6.1第二选中条
1.选中条为兰底兰边框：底为颜色RGB：9296107，透明度为70%
2.框为颜色：RGB：5879111，有投影效果，透明度100%
投影：
混合模式：正片叠底，颜色：RGB：000
不透明度：80%，角度：120，使用全局光
距离：3，扩展：0，大小：0，杂色：0，图层挖空投影
1.1.1.1.6.2输入文字条
1.选中条为兰底黄边框；底为颜色：RGB：424761，透明度为70%
2.框为颜色：RGB：147782，有投影效果，透明度100%
投影：
混合模式：正片叠底，颜色：RGB：000
不透明度：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页面宽度为780Pix,高度不限制，美观即可)
尽管许多屏幕分辨率被调成4：3，但是有些电视可能宽或窄一些。当为支持
这些分辨率调整时，可以在边缘加入一些额外的空，使用黑色填充。
在电视机中，显示的一部分可能会隐藏在一个显示的Bezel边缘下。一个“Safe Zone”或“Safe Titling Area”是一个显示区，在其中对于游戏至
关重要的内容能
够安全的被显示。
为了解决这个问题，客户端将在上边缘留出5和两边各留10个象素，以黑色填充。
1.1.
2.3字体
黑体
1.1.
2.4字体大小
32Pix以上
1.1.
2.5字体颜色
字体本色R46G83B125
连接色R33G168B206
激活色R203G121B25
已访问连接色R57G93B197
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.3UI控制规范
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讯息呈现
讯息呈现主要强调回馈性，包括视觉回馈、触觉回馈、声音回馈等方面。
视觉回馈：一般常见的手法则是瞬间改变色彩变化，使得视觉有了落差所产生。不过值得注意，应该避免误用过多颜色产生而炫乱或扰乱使用者操作的显示。触觉回馈：一般多与视觉回馈结合，常见的方式多为按键之后，介面增加了变化，增加新的物件或感觉按键被按到等状况。
声音回馈：多运用在警告或按键是否有碰触到之反应等。