从电视端学习大屏遐想原则 | 东谈主东谈主皆是居品司理
分娩决定挥霍，电视载体革命、互联网视频就业和时间之间的瓜代促进，鞭策着群众家庭影音体验的升级。那么，如何遐想电视大屏的家庭影音应用呢？沿途来看一下吧。
追忆已往，咱们看电视只可看CCTV、江苏卫视、湖南卫视这些直播内容，但是咱们不知足于直播节目，想要去告白想要看收费内容想要回放看上课时播出的电视剧。让我印象很长远的是那种点播台，要打电话用话费点播，来往来回就放的那几个动画。咫尺，咱们不错在电视上语音搜索到热点蚁合剧，订阅欧冠英超球赛直播、选拔各家综艺影视等等。
分娩决定了挥霍，恰是电视载体革命、互联网视频就业和时间之间的瓜代促进在鞭策着群众家庭影音体验的升级。如何遐想电视大屏的家庭影音应用，等于我接下来想要分享的内容，我盘算推算先从电视和手机的几个不同讲起。
01 智能电视遐想和手机的5大不同点用户—凹凸文场景—行为—器用或绪论—宗旨。
1. 居家使用的场景不同的场景下东谈主和物皆有不尽沟通的交互方式。
咱们使用手机时的用户使用场景不错是迁徙的，在地铁上在卫生间，利用碎屑化时间，而电视平庸皆是被固定在客厅卧室这么的居家场景中，使用时长是整段的，一般积蓄在晚上时段。
场景：在什么时间，什么方位，什么样的环境，终末发生什么事情；
电影里场景的分类：内景、外景、实体场景、诬捏场景。
2. 家庭成员分享在居家场景中，电视是全家的群众确立，遮盖不同庚事段的东谈主。尤其是老东谈主和小孩，各年事段使用时段也很不同。因此使用电视时，用户学习资本要低，操作条目更节略，还有不同模式切换。
而手机算作个东谈主物品，更具阴私、个性化的特征。手机天然各式交互感应很智慧，但是相对的，操作条目更精准，学习资本高。
3. 失业挥霍的行为与手机比较，电视不相宜承担功能型的操作任务，算作一个家庭失业文娱确立，使用场景和功能相对单一。失业文娱是电视的主要用途，还有学习、智能助手、家居适度、荫庇等。
4. 远距离遥控+语音输入的交互方式与迁徙端不同，电视体验发生在不同的空间中，况且需要在3米外澄澈可见。在近场交互时实体与触控是第一选拔，而当中远场交互时语音成为输入方式的第一选拔，遥控器这种资料遥控的实体输入方式学习资本低而被保留于今。
5. 千里浸式体验的宗旨东谈主们频频以轻率的心态使用电视，但愿取得一种不雅看小屏无法取得的设身处地的文娱体验。电视比较于手机更留意千里浸式体验，作念到电影般的终端。
率先，在遐想电视端时，咱们不错参考安卓和苹果的TV端遐想原则来主导界面遐想，其次咱们依旧不错证据遐想五因素去想考界面遐想的标的。
1）配合场景的暗色模式
电视的使用场景：夜晚的客厅环境——具有弱光、稳固、安静的特色，因此咱们一般皆给与暗色主题，让背自得融入场景氛围，以此非常内容。内容和配景的对比也不需要过于显着，配景颜料的选拔不宜过黑而无法辩别出图片的暗影。在主题高亮色上幸免使用过于饱和以免产生明慧的嗅觉。
2）海报内容一目了然
一般电视里也分为应用图标与内容保举，它们皆需要在3米外就能被了了地识别出来。每一个图片的颜色不错同一区别于配景。
图片内使用节略的配景让主体脱颖而出，况且不会压倒隔壁的内容。使用过多的渐变反而会减轻举座的对比，因此应该减少图片内颜料的使用，让主要内容突显。
3）幸免主题色明慧和失真
纯白色 (#FFFFFF) 在亮堂的电视屏幕上可能会相等明慧，提出将浅灰色 (#EEEEEE) 算作深色配景上的默许文本颜料。相同部分高亮主题色欺诈到电视界面遐想时也需要瞩目，尤其是红、黄、橙色系，这些颜料会绝顶严重地失真。
4）翰墨可识别
由于远距离阅读大量翰墨会使眼睛疲顿，要负责斟酌文本线路的字数，能用图像或者动画交流就幸免使用翰墨。确保万般字体在辽远澄澈可见，一般系统字体不要小于22px（12sp），也尽量精简字体神色并幸免过细的字重。
1）常见电视尺寸
主流电视尺寸一般在43-85寸之间，常见的有43、50、55、60、65、75等，挥霍者证据不雅看距离选拔相宜的电视尺寸。电视屏幕的尺一般皆罢免16:9的电视画面宽高比。咱们一般使用1920×1080为最小画布，是当下最常见的电视分辨率，通盘图片资源皆是@1x 分辨率。跟着4K内容的教诲，也不错使用1920×1080，但是需要提供应提供@2x图的图像。
发问：1920×1080的电视是几K？1080P等于指1920×1080的分辨率大小吗？
2）画布尺寸与安全区成就
由于在旧电视上存在过度扫描，可能会发生惟恐剪辑，需要留出安全区，使主要内容隔离屏幕边际。一般凹凸左右留出画布5%左右的距离。
3）显色各异显着需要测试
各家电视主打画质算作卖点，价钱各有不同，各家的画质科罚时间也不同，可见各家屏幕的画质一定有一些区别。区别主要在于显色、色域、控光、画质等，总结等于显色各异显着，咱们应该在挥霍者主要使用的电视型号上进行线路测试。尤其是绿色、红色、黄色等颜料容易显着色差。
恰是有了这么一个外设输入源，就需要斟酌触碰但未触发的上焦景色（focused），正如当有键盘就有输入时，当鼠标悬浮时。TV焦点态的遐想即罢免安卓一般遐想原则，也有它的独性格。
1）D-PAD十字交互与网格布局
咱们不错把D-PAD和屏幕间的交互方式，称为“十字线性交互”，也恰是这种交互方式决定了输出端的界面布局的基本方式。
在这个大屏里，咱们的焦点只可按照D-PAD的指挥走水平或者垂直线，每一个位置的旅途只可走二维的“十”线，这么不错更好指导用户到达他想要的内容。（这里欺诈了相等典型的亲近性原则）
遐想师和勾引皆纯属用栅格的方式来布局横版页面，而电视上更常给与间距同一的网格方式来设施内容积蓄，便捷资料浏览，也不错便捷遥控器快速导航。遐想不错证据内容自定列数，最多以致不错达到9列。
2）焦点在空间中的档次
位置与标的感：在安卓遐想谈话中，咱们不错通过不同控件在Z轴上不同的位置来分辩控件间的档次。平庸是通过暗影的变化来进展。因此，咱们为了非常焦点所在的位置，焦点一般会有显着的暗影。除外可能还会添加别的神色来加强它。
同期，为了明确指向D-PAD所能到达的位置，咱们在遐想布局时，也需要幸免控件间出现重复。
即Z轴标的，唯唯独个焦点和闲居两种层级，且（可上焦的）闲居层级互相不重复。
1）家庭分享下的多模式
输入源除了斟酌输入确立自己，还不错斟酌多个来自多个东谈主，可能是多东谈主互助或者多东谈主共用。在居家环境这个场景下，证据使用者的不同提供对应账号下的信息页面，以及多东谈主共同进行电视操作。
2）年事分段模式呈现不同内容与UI
在多个用户的模式下，就需要对不同用户进行分类，电视端常见的用户模式有：儿童、闲居、父老三种模式。
三种模式下，视觉上颜色、配景、间距、焦点态、字号、内容海报皆有相应的调度。它意味着好多控件是需要作念成自界说的。（运营也不错对其进行配置的）
3）常驻的“外行”教导和指导
电视如故一种群众确立，不同期段有不同的东谈主使用它。不同庚事层对智能电视的操作纯属度也不同，咱们在作念有指导的页面遐想时，也会作念成可重复教导的过程页面，而非一次性指导。常见的如按钮案牍遐想成操作描摹的案牍，以及焦点带气泡教导等。
在首页用户更多的是找寻感好奇的内容，用户选中一个内容就不错立即看到视频内容。是以在这里保举使用获取焦点即推论的方式，大约从简找寻资本。用户点击证据键即可投入播放页面。
一种是配景图片奴才焦点进行切换并自动播放。
一种是焦点聚焦到内容且未迁徙时，自动播放垫片内容，无需投入二级，所选即时播放。
电视应用的层级少，结构扁平，底下我将例如如何想考一个大屏页面的信息排布以及页面焦点的一些遐想要点。
1. 常见的四种页面结构安卓遐想指南里列出了几种常见的页面结构：浏览视图、详备视图、挥霍视图、搜索视图。这几类页面结构基本上就组成了TV端浏览一个内容的历程，从语音或保举技俩里选拔一个内容，投入确定并启动不雅看的一个主要历程。
在appleTV中对应的页面终端如下图所示，皆无一不体现大画布配景+不拆分视图带来的千里浸感，况且莫得饱和的景色栏标题栏。
一个常见的历程如下：咱们在浏览视图和详备视图里或者搜索视图里选拔了不雅看内容后，投入挥霍视图（视频播放页），同期可能主动或被迫选拔相关内容，跳转播放或画中画播放。
咪咕爱唱是一款主要通过会员付费为用户提供音乐类版权内容（包括音乐MV、K歌伴奏、演唱会）的居品。
当咱们从行为启动斟酌，一个K歌的信息页面有什么时，咱们不错意象，家庭K歌行为下，对应着多东谈主适度、多年事段使用，平铺直叙的排版方式是最佳，一眼进来最佳能看到即时的K歌伴奏MV，有不错让多东谈主同期操作点歌的二维码，辅助便捷的语音搜索。
在确定的功能点模块基础上，证据千里浸式的宗旨和十字交互的端正，我从头磋商了一种以即时播放未主要中心的首页布局，展示的内容其实莫得变化，但是通盘这个词页面不再是被分辩的卡片而是有主次的功能和信息的排布。
新磋商的千里浸式布局1
新磋商的千里浸式布局2
3. 要点页面布局——挥霍视图（播放页面）挥霍视图里不仅承载了最首要的视听内容，还有一些个性化保举的就业和功能，因此在遐想时，需要提到页面最前来斟酌。
纯歌词内容视图，歌词逐字上屏是K歌独特一种展示方式，LRC歌词自己有时间刻度，是以这里我将时间程度条和歌词关联，用户凹凸迁徙选拔单句歌词愈加直不雅，而不是快进或后退。
内容保举+歌词展示内容视图，其实这个是上一个页面选拔播放列表后的页面终端，我倾向于给每个歌曲生成封面图。（一般每个歌曲皆会有图片或者MV）
视频展示内容视图，在播放内容时，尽可能减少选拔内容对千里浸式不雅影的体验，天然后期针对运营需求不错量度。
常用的深颜色配色天然能更好非常，但是斟酌与日间的氛围匹配，浅颜色也不错，淡色配景上的暗影更能显着非常焦点档次，更首要的是，按钮配景的颜料在不同素材上皆能线路出来。以及通盘图片举座的颜色选拔。
暗黑带透明度按钮配景颜料在两种配景上的进展
中度灰带透明度的按钮配景颜料
天然每一个电视大屏的宗旨用户不尽沟通，如故要证据主要东谈主群来遐想和磋商。因为K歌居品亦然一款既有儿童又有老年东谈主用户的居品。因此针对不同用户，频谈的作风也有一些区别。
咱们无论是从海外的应用如网飞和亚马逊也好，如故从国内的几家头部视频网站也好，咱们不错发现影视作品的封面也呈现出以下我例如的一些标的和作风。咱们在作念电视端应用的图片展示时，更应该罢免那种精简、干净、光效同一的作风。
已往一些遐想例如
5. 焦点态遐想1）遥控器与焦点的景色
控件景色需要几许种只跟输入源相相关。比如你输入源是鼠标+键盘，那么 focus (给键盘）、 hover （给鼠标）、active （给鼠标/键盘按下），然后概述点你还会想要加入 disabled。恰是由于远距离交互+按键的方式，电视端的焦点态的方式有很大的不同。
电视端焦点态存在的宗旨是，便捷用户时刻皆澄澈且明确地知谈我方的光标在那里，不错迁徙到那里。——通过焦点的同一性、即时性来进一步明确地告诉电视这端的用户停在了那里，不错往那里走。
苹果TV同一的焦点态神色
控件的景色和输入端的方式是强关联的。输入源是D-PAD，那么控件焦点态等于二维的，输入源是触控盘，那么控件焦点态就不错是三维动态的。
苹果电视的焦点态动态图
国内由于强运营的需要，关于电视焦点态的遐想琳琅满目，想尽了心想，层层叠加。
2）焦点动效与遥控标的
咱们总览两大遐想原则，皆提到了电影体验、千里浸式体验，一些小屏幕的轻细变化（比如spring）会被放大而显得复杂过度，咱们不错瞎想看电影时掉帧卡顿的倒霉体验，电视端的动画时为了在东谈主和屏幕上的内容之间创造一种视觉上的有计划。
和迁徙端一样的也不错按照这么的分类来斟酌：启动动画、反馈动画、转场动画。也不错按照交互动作来斟酌，仅在反映用户操作时使用，比如在斟酌入场和出场动画时，出场动画不错斟酌同一——对应遥控器上的复返键，而入场动画则斟酌两个点：
关联性：让用户在布局中息争刚才发生了什么，是什么导致了变化。 宗旨性：让用户明白接下来会有什么，不错去那里。因为电视端更多是一种图片列表的展示方式，因此图片列表的展示频频以视差通顺出现，进展一种大屏上纵向内容滚滚连接的出现的嗅觉。
3）千里浸式的焦点终端
咫尺在浏览器和电视端依然不错看到这么的终端——即当你转变浏览保举行时，只须在图像上停留跳跃一两秒钟，每个标题的预览视频就会启动自动播放。这是在电视上一种相等直观性的交互，就像很久已往咱们灵通电视就有天果然音画一样。
电视具特殊十年的期许值，当您灵通电视时，不错播放视频和音频。因此，有一个千里默的资黄历色上是很奇怪的。
若是还想深入优化优秀的大屏端动态终端不错去PS这类游戏主机系统里取取经。关于大屏遐想如何精进，我以为如故从主机端游戏界面遐想不错瞟见一隅。畴昔大屏等于AR眼镜，等于VR，电视的那套东西依然被搬进了小小主机和轻便的眼镜里。
结语本文主要以交互遐想的5个因素为框架，从电视与手机的不同入辖下手分析电视的特有属性，继而引出界面遐想一些特殊点，终末以一个电视端K歌APP遐想例如，从布局、配色、焦点态遐想等几个面伸开详备评释。
参考良友:
Adroid design guidlines tvOS-Human Interface Guidlines 从物理逻辑到行为逻辑http://www.360doc.com/content/15/0210/13/21907744_447672901.shtml 遐想基础：电视交互遐想的一些事 http://www.woshipm.com/ucd/918841.html TV端遐想原则分析 http://www.woshipm.com/pd/4105626.html TV UI遐想快速上手指南 https://www.zcool.com.cn/work/ZMjc3NTU0ODA=.html 在电视端，卡片遐想如何进行？ http://www.woshipm.com/pd/1047767.html 电视端遐想初学，焦点常识弗成少 https://www.ui.cn/detail/364730.html?nopop=1 小米电视儿童模式体验明白 https://www.ui.cn/detail/322402.html?nopop=1 智能电视launcher遐想总结 https://www.ui.cn/detail/309609.html?nopop=1 3个方面分析：TV端如何作念好反馈？ http://www.woshipm.com/pd/1060010.html 从零到壹 | 企鹅电竞TV初试啼声 https://mp.weixin.qq.com/s/aAFNZCp2vg9CYaaQgDWnQw 居品分析 | 爱奇艺——“我会成为国产版网飞吗”http://www.woshipm.com/evaluating/4296471.html 电视屏保举系统如何遐想？这里有个详备的决策 http://www.woshipm.com/pd/1089858.html
