数字电视UI设计规范

UI标准本章描述了数字电视平台下客户端〔包括Web和应用程序两种〕的显示局部的UI规范由于数字电视的目标用户是家庭用户，显示终端是电视机，把握终端是遥控器，所UI标准将满足家庭用户的使用习惯，并符合电视机和遥控器的特点。请依据如下标准来进展设计您的客户端，以确保在数字电视上的高质量体验。1.1B/SWebUIUI标准界面风格字体类型：1.请使用黑体，Arial等标准清楚的字体。大标题文字字体：黑体.有投影效果，略有一点浮雕效果投影：混合模式：正片叠底，颜色：RGB：31376不透亮度：75%，角度：120，使用全局光距离：3，扩展：10，大小：5，杂色：0，图层挖空投影斜面和浮雕：样式：内斜面，方法：平滑，深度：41%0，软化：0角度：120，高度：30，使用全局光高光模式：滤色，颜色：RGB：228156107，不透亮度：75%暗调模式：正片叠底，颜色：RGB：000，不透亮度：75%菜单文字1.1.1.1.1.1原始状态文字字体：黑体.描边：RGB：554745，大小：2，位置：外部，混合模式：正常，不透亮度：100%字间距：1pix行间距：62pix位置：i.196，159ii.196，221iii.196，283iv.196，345v.196，407vi.196，4698．有投影效果，透亮度90%投影：混合模式：正片叠底，颜色：RGB：246231246不透亮度：75%，角度：120，使用全局光距离：5，扩展：49，大小：3，杂色：0，图层挖空投影选中状态文字字体：黑体.文字在选中条中的位置8有投影效果，透亮度100%投影：混合模式：正片叠底，颜色：RGB：351710不透亮度：100%，角度：120，使用全局光距离：2，扩展：0，大小：0，杂色：0，图层挖空投影内容文字字体：黑体1.字号：28pix〕6/9457有投影效果，透亮度90%投影：混合模式：正片叠底，颜色：RGB：246231246不透亮度：75%，角度：120，使用全局光距离：5，扩展：49，大小：3，杂色：0，图层挖空投影输入文字a)字体：黑体2.字号：32pix.4.字间距：3pix其他有关字体的细节：为了适应人们横向阅读中文的习惯，一列最好不超过25个字。请不要使用下划线。当文字被选择时，可以用某种边框来表示。您可以任凭的在框中用其他的颜色掩盖文本，或者做一个全部像素的颜色倒转。指示箭头位置上箭头：下箭头：确认按钮：上翻页：下翻页：回退箭头：一般选中条选中条为兰底黄边框；底为颜色56，透亮度为框为颜色：RGB：1461400有投影效果，透亮度100%投影：混合模式：正片叠底，颜色：RGB：000不透亮度：80%，角度：120，使用全局光距离：3，扩展：0，大小：0，杂色：0，图层挖空投影其次选中条选中条为兰底兰边框：底为颜色RGB：9296107，透亮度为70%框为颜色：RGB：5879111，有投影效果，透亮度100%投影：混合模式：正片叠底，颜色：RGB：000不透亮度：80%，角度：120，使用全局光距离：3，扩展：0，大小：0，杂色：0，图层挖空投影输入文字条选中条为兰底黄边框；底为颜色：RGB：424761，透亮度为70%框为颜色：RGB：147782，有投影效果，透亮度100%投影：混合模式：正片叠底，颜色：RGB：000不透亮度：80%，角度：120，使用全局光距离：3，扩展：0，大小：0，杂色：0，图层挖空投影数字电视自动为SP应用供给的主界面数字电视WebUI标准分析老式的电视机的区分率比计算机显示器的区分率低很多，而且局部电视机使用的是隔行扫描的工作方式，因此，以下我们将针对电视机这两个特点实行具体的策略来实现高质量的显示效果区分率显示800*600留意：区分率800*600。实际应用程序中应用程序UIWidth为780PixHeighth为595PixWEB页面宽度为780Pix,高度不限制，美观即可)尽管很多屏幕区分率被调成4：3，但是有些电视可能宽或窄一些。当为支持这些区分率调整时，可以在边缘参与一些额外的空，使用黑色填充。在电视机中，显示的一局部可能会隐蔽在一个显示的Bezel边缘下。一个“SafeZone”或“SafeTitlingArea”是一个显示区，在其中对于玩耍至关重要的内容能够安全的被显示。为了解决这个问题，客户端将在上边缘留5和两边各留10个象素，以黑色填充。字体黑体字体大小32Pix以上字体颜色字体本色R46G83B125连接色R33G168B206激活色R203G121B25已访问连接色R57G93B197颜色：主题颜色是深蓝色和红色和绿色，并且是非饱和色。要使用在6到0之间的B值。避开高比照度和饱和。避开使用微小的色差。纯白色和纯黑色在TV中的显示可能是糟糕的。可以用RGB(240,240,240)代替白RGB(16,16,16)来代替黑色。最小显示元素的大小：32×32像素。线条防止单像素宽成为线或点，线条的宽度至少为2个象素。单像素宽的垂直线和点在旧式频率回应糟糕的电视机中可能会显示为渐渐消失或根本不会显示。单像素宽水平线会导致在隔行显示时的画面闪耀，由于他们只能在两个隔行区中的一行中画出。按钮尽可能对全部的按钮类型设计一种统一的根本的外观按键上的文字能够表达它的功能。例如PlayDVDOK更让人易懂。避开给用户在一个界面上太多的按钮和链接。避开创立功能已经在遥控器上已有的按钮，例如Back,Pause或Up一个界面不应当超过六个链接或按钮，除非这些按钮组织进一个表或网格中以便快速选择。按钮应当按规律关系组合。菜单尽量避开使用下拉式菜单，代替承受一列可见菜单式按钮，每个按钮代表一个功能。按钮焦点是围绕式，比方说当焦点在最上面一个按钮时，按UPArrowkey,焦点应当跳动最下面一个按钮。当有焦点时，该按钮应当很简洁和没有焦点的按钮区分开来。网页HTML应用中承受ActiveX控件，但是最好在HTML里创立你自己的用户接口，让控件的操作规律在后台完成，而不是在控件里创立用户接口元素。位置显示假设在两个相邻的页面〔介面〕间扫瞄，应当供给一个显式的反响说明目前用户的所在。动画效果假设承受动画效果，确定要测试其是否播放平滑和占用资源状况。动画效果是为了增加可用性，而不能分散用户留意力。测试TV的应用都需要作特别的测试，低端用户大多承受800X600的区分率，要在〕13/94TV上观看不同的区分率，界面的调整要正确，千万不要对单个图片进展拉伸。细节问题button的状态，风格的统一，Text的对其方式，显示规格，Editcontrol的风格统一，边框间隔、默认行为，汽泡显示规格，图标大小规格等。根本控件〔BasicControl〕1.1.2.16.1.1Picture默认居中显示Button〔四种状态〕State：Focus：高亮Down：凹Disable：空白每个按钮不超过四个汉字＋一个图标〔字大小：36×36〕响应上下键、翻页，自动换行EditControl输入框高40，按上下键时焦点不变，鼠标移上去焦点不变，底色70％透亮白。复选框CheckBoxFocus：边框加粗，颜色醒目〔焦点〕State：Disable：单项选择框RadiobuttonFocus：边框加粗，颜色醒目〔焦点〕State：Disable：Scrollbar上下箭头，气泡提示1.1.2.16.1.8Slider正常、Disable、focus、拖动中，滑块步长5％1.1.2.16.1.9ProgressControlSDO-TV统一进度条。需盛大供给〕1.1.2.16.1.10ComboBox承受列表选项选择的方式处理1.1.2.16.1.11Messagebox提示、警告、错误标题，图标，文本，按钮AdvancedControl1.1.2.16.2.1ComplexList焦点不固定。按向下时焦点就始终往下。不循环显示。到最终一个再按往下，则翻页。Menu竖排半透亮的菜单，菜单项不多余6个。ScrollText尽量承受单行文字，滚动速度在2字/秒——4字/秒之间HelpInfo按遥控器“帮助”键弹出，或于界面最底部滚动显示。UI把握标准1.1.1.1分析数字电视是以家庭用户为目标用户的消遣平台，是以遥控器为主要把握终端。它的特点主要表达在易用性和适用性等方面。遥控器的具体说明请参见2.5节遥控器操作标准．〕15/94选择所以依据观看电视的习惯，界面内容要避开横向滚动。承受醒目的黄框作为焦点框，可以使用户可以在3m外观看到焦点框的去向。布局建议使用单层平面构造，便于用户使用遥控器用上、下、左、右从直觉上把握。当单层构造无法表达页面焦点规律时也可以有分层的构造。统一全部的界面的构造要统一，便于用户从局部来推断出全局的操作方式。介面设计应当全都地在类似的动作上有一样的活动方式。每个的系统对用户来说都是一次的学习过程，假设界面风格常常变化，不保持统一，无疑更增加了用户的学习难度，或许会导致用户的厌烦。编写帮助给出帮助文件并能让用户很简洁的找到。无论多么精彩的界面设计对用户来说都是生疏的，那么编写帮助是个格外有效的方法，把你的设计意图和使用介绍明明白白地告知用户，在用户遇到困难的时候能够得到最快的帮助，不但可以降低用户的不满程度，同时可以帮助用户更加系统深入地学习和把握。流程简便务必避开选单太杂，或是使用难懂的设计隐喻或是太多的隐喻。出错及特别提示对各种出错或特别状态赐予用户一个友好的提示和帮助，并提示用户或许是由于什么缘由，那么用户会快活的多。介面设计应当允许