Android TV UI 设计指南 《二》

应用UE/UI设计指南 version1.0 in 2012.8.1 By huan UED 通过简约的界面设计，清除人与机器的隔阂，将轻松带入生活。一个符合用户的交互界面在更好的展现产品同时，亦能为用户带来不一样的华丽体验。 通过统一的标准诠释，降低用户对于界面设计元素的理解难度，提高可用性。 UI部分 一．    整体布局 TV设备的分辨率为720P，16:9的显示比例，即1280px*720px，在设计中，主体内容与屏幕边缘需要保留至少30-50px的空余，不宜太满。如图： 基于电视端的简洁性原则，在产品的设计上通常不会考虑三栏或者三栏以上的布局方式。多以两栏布局为主，上下或者左右可以自由设计；通栏的布局通常以网站主导航为主要元素，清晰展现产品内容形式，点击进入后层层展开 简洁的结构让用户能够更快速的找到自己想要的内容与服务。在不失简洁的情况下，内容的布置上灵活多变。 二．    字体及字号 内容性文字在设备端默认显示为黑体。 字号方面，通常的内容名称字号不小于24px。栏目标题不小于32px。提示性文字可控制在18-20px为宜。 三．    颜色  1，焦点，选中状态下的颜色： 2，背景： 深色为主，要求可以清晰辨认产品内容，方便用户的操作。不会因为大面积的高亮度色彩给用户造成视觉疲劳。 四．    焦点原则及样式 突出的焦点样式可以更好的聚焦当前的操作状态。起到很好的指示作用，是影响用户使用产品时是否流畅的一个重要因素。 在焦点的处理上需要注意以下几点： 1，  色彩上与背景和其它元素有明显的差异； 2，  圆角表现 文字的各种状态呈现： 按钮的各种状态呈现： 图片的焦点状态呈现： 五．    图标 以简洁的图标方式并配以简短文字展现栏目特性 此处强调的是不同应用环境下的易用性、可识别性。 六．    弹出框样式及位置 提示框在整个界面中上下居中。文字为24px。 针对不同的提示状况，需选择不同的图标以精准表达提示意图。 无需确认的提示框出现3秒后，自动消失 需要用户确认的提示框，焦点需默认在选择按钮上。 所有提示框需要有较强的识别性，文字精简。在视觉上需要与整体界面有明显的区分。 七．    APP ICON 128px*128px UE部分 规范常用的UE规范，使得电视端的体验统一，不断完善和改进的用户体验，为用户提供更好、更方便的体验服务 一．    遥控器按键功能 1，确认键 主要作用为选取确认，激活选取框。 2，方向键 主要作用为移动焦点，选择目标等 在TV端，焦点的移动原则为就近原则 3，返回键 主要作用为返回上一级页面，如果当前页为首页，则返回键将呼出退出确认框 4，菜单键 主要作用为呼出系统菜单，不建议在产品设计中使用 5，子菜单键 主要作用为呼出产品的菜单栏，用于辅助产品的功能性扩展选择 6，飞梭 主要作用为电视端的音量调整，不建议在产品设计中使用 二．    默认焦点位置 焦点的位置能清除表明产品的业务从哪里开始的。 系统默认的焦点位置是屏幕中最上面最左边的链接。产品设计中可以自由定义。 三．    导航 导航设计对提供丰富友好的用户体验有至关重要的地位，简单直观的导航不仅能提高产品的易用性，更能精准表达产品信息。 业务逻辑层级通常不超过三层。导航需要清晰明了。 需要突出导航区域，则应该与其他的内容在视觉上有所区别。 如果因为内容过多需要子导航时，要让用户容易地分辨出哪个是主导航条，哪个是某主题的子导航条 四．    翻页方式 每一个内容页面必须提供明确的翻页指示。如图： 或者将未显示全的图片展示出来，明确告诉用户还有内容： 通常不建议使用上一页下一页的翻页方式，而造成用户在操作上的负担。 当页面内容为整屏翻页时，必须明确显示当前页所处的位置，页码多时，不要一次把所有页码都显示出来。如图