数字电视UI设计规范.docx
Ul规范本章描述了数字电视平台下客户端（包括Web和应用程序两种）的显 示部分的Ul规范由于数字电视的目标用户是家庭用户，显示终端是电视机，限制终端 是遥控器，所以UI规范将满意家庭用户的运用习惯，并符合电视机和遥控器的特 点。请依据如下规范来进行设计您的客户端，以确保在数字电视 上的高 质量体验。1.1 B/S Web UI1. 1. 1主界面与Ul规范1. 1.1. 1界面风格1. 1. 1. 1. 1字体类型：L请运用黑体，Arial等标准清楚的字体。1 .1.1.1.2大标题文字2 .字体：黑体3 .字号：50pix4 .颜色：RGB： 189 112 365 .字间距：6pix6 .有投影效果，略有一点浮雕效果投影：混合模式：正片叠底，颜色：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 .字号:32pix5 .颜色：RGB： 210 210 2106 .描边：RGB： 55 47 45,大小：2,位置：外部，混合模式：正常,不透亮度：100%7 .字间距：Ipix8 .行间距：62pix9 .位置：i. 196, 159ii. 196, 221iv. 196, 345v. 196, 407vi. 196, 4698 .有投影效果，透亮度90%投影：混合模式：正片叠底，颜色：RGB： 246 231 246不透亮度：75% ,角度：120 ,运用全局光距离：5 ,扩展：49 ,大小：3 ,杂色：0 ,图层挖空投影9 .1.1.1.3.2选中状态文字10 字体：黑体11 字号：32pix12 颜色：RGB： 193 152 2713 字间距:3pix14 文字在选中条中的位置：196, 815 有投影效果，透亮度100%投影：混合模式：正片叠底，颜色：RGB： 35 17 10不透亮度：100% ,角度：120 ,运用全局光距离：2 ,扩展：0,大小：0,杂色：0,图层挖空投影16 1.1.1.3.3内容文字字体：黑体17 字号:28pix)6/9418 颜色：RGB： 220 220 019 字间距：3pix20 描边：RGB： 55 47 45,大小：2,位置：外部，混合模式：正常， 不透亮度：100%21 字间距：Ipix22 行间距：62pix有投影效果，透亮度90%投影：混合模式：正片叠底，颜色：RGB： 246 231 246不透亮度：75% ,角度：120 ,运用全局光距离：5 ,扩展：49 ,大小：3 ,杂色：0 ,图层挖空投影22.1.1.1. 3.4输入文字a)字体：黑体2 .字号:32pix3 .颜色：RGB： 180 180 1804 .字间距：3pix1.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*600o实际应用程序中应用程序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 B1971. 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或PageUP一个界面不应当超过六个链接或按钮，除非这些按钮组织进一个表或网格中以便快速选择。按钮应当按逻辑关系组合。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 / 94TV上视察不同的辨别率，界面的调整要正确，千万不要对单个图片进 行拉伸。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 复选框 CheckBoxFocus：边框加粗，颜色醒目（焦点）State：Disable：1. 1. 2. 16. 1. 6 单选框 RadiobuttonFocus：边框加粗，颜色醒目（焦点）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 Control1. 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 分析数字电视 是以家庭用户为目标用户的消遣平台，是以遥控器为主要限制终端
