您的位置：首页 > 产品设计 > UI/UE

Android TV UI 设计指南 《二》

2013-09-26 15:02 267 查看
应用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，飞梭
主要作用为电视端的音量调整，不建议在产品设计中使用

二． 默认焦点位置

焦点的位置能清除表明产品的业务从哪里开始的。
系统默认的焦点位置是屏幕中最上面最左边的链接。产品设计中可以自由定义。

三． 导航

导航设计对提供丰富友好的用户体验有至关重要的地位，简单直观的导航不仅能提高产品的易用性，更能精准表达产品信息。
业务逻辑层级通常不超过三层。导航需要清晰明了。
需要突出导航区域，则应该与其他的内容在视觉上有所区别。
如果因为内容过多需要子导航时，要让用户容易地分辨出哪个是主导航条，哪个是某主题的子导航条

四． 翻页方式

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



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



通常不建议使用上一页下一页的翻页方式，而造成用户在操作上的负担。
当页面内容为整屏翻页时，必须明确显示当前页所处的位置，页码多时，不要一次把所有页码都显示出来。如图



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航