高品质文库网

首页 » 正文内容 » 数字电视UI设计规范x
数字电视UI设计规范x
收录时间:2022-11-25 22:56:20  浏览:0
UI规范本章描述了数字电视平台下客户端(包括Web 和应用程序两种)的显示部分的UI 规范由于数字电视的目标用户是家庭用户,显示终端是电视机,控制终端是***,所以UI 规范将满足家庭用户的使用习惯,并符合电视机和***的特点。请按照如下规范来进行设计您的客户端,以确保在数字电视 上的高质量体验。1/1 B/S Web UI1/1/1 主界面及UI 规范1/1/1/1 界面风格1/1/1/1/1 字体类型:1/ 请使用黑体,Arial 等标准清晰的字体。1/1/1/1/2 大标题文字1/ 字体:黑体2/ 字号:50pix3/ 颜色:RGB:189 112 364/ 字间距:6pix5/ 有投影效果,略有一点浮雕效果投影:混合模式:正片叠底,颜色: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/ 字号:32pix3/ 颜色:RGB:210 210 2104/ 描边:RGB:55 47 45,大小:2,位置:外部,混合模式:正常,不透明度:100%5/ 字间距:1pix6/ 行间距:62pix7/ 位置:i/ 196,159ii/ 196,221iii/ 196,283iv/ 196,345v/ 196,407vi/ 196,4698有投影效果,透明度90%投影:混合模式:正片叠底,颜色:RGB:246 231 246不透明度:75% ,角度:120 ,使用全局光距离:5 ,扩展:49 ,大小:3 ,杂色:0 , 图层挖空投影1/1/1/1/3/2 选中状态文字1/ 字体:黑体2/ 字号:32pix3/ 颜色:RGB:193 152 274/ 字间距:3pix5/ 文字在选中条中的位置:196,86/ 有投影效果,透明度100%投影:混合模式:正片叠底,颜色:RGB:35 17 10不透明度:100% ,角度:120 ,使用全局光距离:2 ,扩展:0,大小:0,杂色:0,图层挖空投影1/1/1/1/3/3 内容文字字体:黑体1/ 字号:28pix)6 / 942/ 颜色:RGB:220 220 03/ 字间距:3pix4/ 描边:RGB:55 47 45,大小:2,位置:外部,混合模式:正常,不透明度:100%5/ 字间距:1pix6/ 行间距:62pix有投影效果,透明度90%投影:混合模式:正片叠底,颜色:RGB:246 231 246不透明度:75% ,角度:120 ,使用全局光距离:5 ,扩展:49 ,大小:3 ,杂色:0 , 图层挖空投影1/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 页面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 B1971/1/2/6 颜色:主题色彩是深蓝色和红色和绿色,并且是非饱和色。要使用在16到240之间的RGB值(SafeColor)。避免高对比度和饱和色。避免使用细微的色差。纯白色和纯黑色在TV中的显示可能是糟糕的。可以用RGB(240/240/240)代替白色,用 RGB(16/16/16)来代替黑色。1/1/2/8 最小显示元素的大小:最小是3232像素。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 / 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:空白每个按钮不超过四个汉字一个图标(字大小:3636)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、拖动中,滑块步长51/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 滚动文本Scroll Text尽量采用单行文字,滚动速度在2字/秒4字/秒之间1/1/2/16/2/4 帮助Help Info按***“帮助”键弹出,或于界面最底部滚动显示。1/1/3 UI 控制规范1/1/1/1 分析数字电视 是以家庭用户为目标用户的娱乐平台,是以***为主要控制终端。它的特点主要体现在易用性和适用性等方面。***的详细说明请参见 2/5 节***操作规范)15 / 941/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. 高品质文库网仅展示《数字电视UI设计规范x》的部分公开内容,版权归原著者或相关公司所有。
2. 文档内容来源于互联网免费公开的渠道,若文档所含内容侵犯了您的版权或隐私,请通知我们立即删除。
3. 当前页面地址:https://www.gpinxiao.vip/doc/333d37ffe91ed714.html 复制内容请保留相关链接。