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，飞梭

主要作用为电视端的音量调整，不建议在产品设计中使用

二．    默认焦点位置

焦点的位置能清除表明产品的业务从哪里开始的。

系统默认的焦点位置是屏幕中最上面最左边的链接。产品设计中可以自由定义。

三．    导航

导航设计对提供丰富友好的用户体验有至关重要的地位，简单直观的导航不仅能提高产品的易用性，更能精准表达产品信息。

业务逻辑层级通常不超过三层。导航需要清晰明了。

需要突出导航区域，则应该与其他的内容在视觉上有所区别。

如果因为内容过多需要子导航时，要让用户容易地分辨出哪个是主导航条，哪个是某主题的子导航条

四．    翻页方式

每一个内容页面必须提供明确的翻页指示。如图：

或者将未显示全的图片展示出来，明确告诉用户还有内容：

通常不建议使用上一页下一页的翻页方式，而造成用户在操作上的负担。

当页面内容为整屏翻页时，必须明确显示当前页所处的位置，页码多时，不要一次把所有页码都显示出来。如图