android tv盒子 主界面,设计规范 | 详解Android TV用户界面设计
文章对比电视界面,从主屏幕和应用程序两个方面对Android TV的用户界面设计进行了详细梳理,与大家分享。
与移动端设备不同,用户一般在3米外使用电视。因此电视界面设计上需要大而漂亮,要有合适的布局、高质量的图片,可辨别的文本、流畅的切换和简捷的操作。
01 主屏幕
主屏幕提供对内容推荐、应用程序和全局搜索的访问。
Android O TV 主屏幕
1. 全局搜索
Android电视提供强大的搜索功能来搜索所有已安装应用程序的内容,此外用户可以设置搜索应用的范围。语音搜索更便捷,因此它的入口特别明显。
2. 内容推荐行
内容推荐是主屏幕上的非常显眼的区域,用户可以在其中找到新内容,这是用户无需启动应用程序即可访问内容的最简单方法。推荐的内容一般是应用提供的新内容和用户偏好容,如此便可吸引用户注意。
做一个简单比喻,安卓电视就像一个超市,里面有很多商家(应用),商家把自己最好的商品摆放在入口处吸引用户购买。
推荐内容有3种类型,新内容,继续播放和相关推荐。
新内容
继续播放
相关推荐
推荐内容包括图片、标题、副标题和应用图标。标题和图片高度相关,一般是音视频的名字,副标题多样化,比如作者,推荐理由,类型等。
当焦点在推荐内容时,会出现背景图片,它应该与推荐内容相关,但是和推荐卡片上图片不同。
背景图片
3. Now Playing Card
对比国内,NowPlaying Card就是历史记录。如果没有播放记录时是不展示这个的,用户有播放行为后,系统自动出现。用户可以手动移除播放记录,如果全部移除播放记录,该行就会消失。
Now Playing Card
02 应用程序
Android电视应用程序通常有以下4个部分:浏览页、详情页 、播放页、应用内搜索。
1. 浏览页
浏览视图是Android电视应用程序的常用入口。为了获得最佳的浏览体验,请根据用户的使用目的来制定应用程序的层次结构。
栏目行
它是按分类组织内容。每个分类里,内容以水平列表的形式显示。默认情况下,向下移动只能滚动一行。
栏目行
竖列表
垂直列表中的项目对应栏目行类别名称。在竖列表中滚动同时将相应的行滚动到视图中。垂直列表中的项目仅用于浏览,本身不可操作。
如果超过五行,建议使用竖列表。打开竖列表,定位到第一个项目,若要退出竖列表,请选择右侧的某一行或使用导航退出。
竖列表
这个竖列表和国内的侧导航不一样,竖列表的每一项只对应一行,侧导航对应的整个页面即二级页,它其实是网格视图。下面将说一下网格视图。
网格视图
网格视图显示所有相关的内容单元。它是最底层的视图。国内的专题、专区、二级页对应属于网格视图。
网格视图
2. 详情页
详情页信息
详细页显示单个内容实体的信息和操作,可能包括播放状态、内容分级、出版年份和适合人群等。
详情视图里的信息按照相关程度由高到低的顺序排列。例如,电影详情页视图应优先考虑与该电影最相关的视觉和文本,包括海报、收视率和”购买”或”查看预告片”等动作。扩展信息则通过向下垂直滚动显示,可以包括演员信息、评论和相关的观看建议。
详情页里的动作
只列出最重要的功能,比如购买、租赁、播放和添加到愿望清单等操作。
建议使用大尺寸沉浸式高质量海报图像。
3. 播放页
播放页
播放页是用户观看内容的地方,用户将在这里花费大部分时间。如何进入播放页,有3种方式:推荐行、全局搜索、应用内搜索。
播放控制包括主控区和辅助控区,主控区最多有7个动作,动作由传统可识别的图标表示,辅助控区在主控区下面,非必要功能比如字幕,纵横比等,建议最多放5个功能。
播放控制区
播放页的拓展信息
在播放过程中,可以向用户展示拓展信息,比如音视频的相关演员或相关类型作品等。
播放拓展信息
在播放结束后,可向用户提供继续播放下一集或进入类似影片播放或对影片进行评价等后续操作,国内一般叫为后联播。
后联播
当用户因为各种原因暂停播放后,要让用户很容易的继续播放。一般有2种做法,在应用内将暂停播放的内容置顶或者自动添加到Now Playing Card。
4. 对话框
在Android电视上,对话框可以覆盖整个屏幕。尽量少使用对话框,因为它们会打断用户的突然出现,迫使用户停止当前任务并关注对话框内容。对话框的样式如下图
对话框
5. 向导
比较常见的向导有新手引导和购买引导。
新手引导
购买引导
6. 通知
所有类型的应用通知在电视上都是不收欢迎的。系统通知会在不打扰用户的情况下显示重要信息。
7. 颜色
纯白(#FFFFF)在明亮的电视屏幕上可能非常刺眼。在深色背景下,建议使用浅灰色(#eeeee)作为默认文本颜色。不能用太浅的颜色用作强调的背景色,要用较深的颜色。
8. 字体
以下字体样式和大小通常用于电视用户界面。
内容标题 Light 34sp 、Light 24sp
竖列表标题:Condensed 20sp
副标题:Regular 16sp
按钮标:Condensed 16sp
正文:Regular 14sp
列表项/卡片主文本:Condensed Regular 14sp
次要文本:Condensed Regular 12sp
最后奉上安卓电视产品的结构图:
本文由 @Vector 原创发布于人人都是产品经理。未经许可,禁止转载。
题图来自 Unsplash,基于 CC0 协议。
给作者打赏,鼓励TA抓紧创作!赞赏
android tv盒子 主界面,设计规范 | 详解Android TV用户界面设计相关推荐
- android 上下偏差怎么写_详解 Android 热更新升级如何突破底层结构差异?
知道了 native 替换方式兼容性问题的原因,我们是否有办法寻求一种新的方式,不依赖于 ROM 底层方法结构的实现而达到替换效果呢? 我们发现,这样 native 层面替换思路,其实就是替换 Art ...
- android+tv盒子+主界面,x96max+ 盒子 与 CoreELEC系统配置(三)AndroidTV刷机记录
x96max+ 盒子 与 CoreELEC系统配置(三)AndroidTV刷机记录 2020-03-19 22:05:49 39点赞 211收藏 59评论 本文简要记录一下AndroidTV的刷机过程 ...
- android 界面 edittext详解,Android EditText详解
前言 很常用的控件EditText(输入框): 和TextView非常类似,最大的区别是:EditText可以接受用户输入.和前面一样,我们不一个个讲属性, 只讲实际应用.那么开始本节内容! 1.设置 ...
- android数据库文件是否加密存储,详解Android数据存储之SQLCipher数据库加密
前言: 最近研究了Android Sqlite数据库以及ContentProvider程序间数据共享,我们清晰的知道Sqlite数据库默认存放位置data/data/pakage/database目录 ...
- Android 多线程之HandlerThread 完全详解
转载请注明出处(万分感谢!): http://blog.csdn.net/javazejian/article/details/52426353 出自[zejian的博客] 关联文章: Android ...
- Android四大组件Service之AIDL详解
Android四大组件Service之AIDL详解 前言 简介 基础知识 AIDL 服务端 定义AIDL文件规则 创建 .aidl 文件 清单注册 通过 IPC 传递对象 调用 IPC 方法 Andr ...
- Android Binder框架实现之bindService详解
Android Binder框架实现之bindService详解 Android Binder框架实现目录: Android Binder框架实现之Binder的设计思想 Android Bi ...
- Android 多线程之IntentService 完全详解
转载请注明出处(万分感谢!): http://blog.csdn.net/javazejian/article/details/52426425 出自[zejian的博客] 关联文章: Android ...
- 设计规范 | 详解组件控件结构体系
设计规范 | 详解组件控件结构体系 2018年4月16日luodonggan 什么是控件?什么组件?两者的区别是什么? Control翻译为控件,Component翻译为组件. 通俗的解释说法就是组件 ...
最新文章
- java 匿名类调用方法_java – 从匿名类调用新定义的方法
- 数据结构-王道2017-第3章 栈和队列-队列
- VMWare 虚拟化 Ubuntu 64 (16.04)-- docker 无法链接 pull 镜像 ?(solved)
- 从最新财报中,我看到京东“四面楚歌”
- rust(29)-元组结构体
- 技巧打开网页进行客户个性化信息提交(代码编写)
- Python中的注释和算数运算符
- [转载]TopCoder兼职赚钱入门(Part. 1)
- P4395-[BOI2003]Gem气垫车【树形dp,四色定理】
- html搜索框代码_解放双手 | 10行Python代码实现一款网页自动化工具
- 组合数取模模板(2)
- 社保系统成个人信息泄露重灾区 涉及超30省
- 人脸识别——FaceBook的DeepFace、Google的FaceNet、DeepID
- 计算机设置用户名密码,电脑账户密码如何设置/修改?
- sql 数据与程序的物理独立性和逻辑独立性
- 手把手教你编译RS GIS开源库(一)编译ECW3.3库
- windows2012 r2 window2016 FTP服务器无法访问解决
- 计算机鼠标游戏教学法,浅谈“游戏教学法”在信息技术教学中的运用
- 【Java SE】继承;组合;向上转型;动态绑定;方法重写;静态绑定;多态;抽象类;接口;
- 【方块编码】基于matlab的图像方块编码仿真