时间进度怎么算(完成时间进度怎么计算)

决定生产和消费，电视载体创新、互联网视频服务和技术交替推进，推动大众家庭视听体验升级。那么，如何设计电视大屏幕的家庭视听应用呢？我们一起来看看吧。

以前只能看中央电视台、江苏卫视、湖南卫视等电视直播节目，但不满足于电视直播节目，想打广告，想看付费内容，想回放上节课播的电视剧。印象很深的是那种点播站，要打个电话点播，那些动画来回播放。现在，我们可以在电视上语音搜索观看热门网剧，订阅欧冠和英超比赛直播，选择各种综艺节目等等。

生产决定消费，推动大众家庭视听体验升级的是电视载体的创新、互联网视频服务和技术的交替。如何设计一个电视大屏的家庭影音应用，是我接下来要分享的内容。我打算先从电视和手机的几个区别说起。

01 智能电视设计和手机的5大不同点

用户情境场景行为工具还是媒介用途。

1. 居家使用的场景

人和物在不同的场景下有不同的交互方式。

我们在使用手机的时候，用户的使用场景可以是移动的，在地铁上的卫生间，利用碎片时间，而电视通常是固定在客厅和卧室，使用时间是整个时段，通常集中在晚上。

场景:在什么时间，什么地点，什么样的环境，最后发生了什么；

电影场景的分类:室内场景、室外场景、物理场景和虚拟场景。

2. 家庭成员共享

在家庭场景中，电视是整个家庭的公共设备，覆盖不同年龄段的人群。尤其是老人和小孩，各个年龄段的使用时间也有很大差异。所以在使用电视时，用户的学习成本更低，操作要求更简单，有不同的模式切换。

手机作为一种私人物品，更具有私密性和个性化。虽然手机对各种交互比较敏感，但相对来说，操作要求更精准，学习成本也高。

3. 休闲消费的行为

与手机相比，电视不适合承担功能性操作任务。作为家庭休闲娱乐设备，使用场景和功能相对单一。电视的主要用途是娱乐，还有学习、智能助手、家居控制、装修等等。

4. 远距离遥控+语音输入的交互方式

与移动终端不同，电视体验发生在不同的空房间中，并且需要在3米的距离处清晰可见。在近场交互中，实体和触摸是首选，而在中远场交互中，语音成为首选的输入方式。遥控器这种遥控实体输入方式，学习成本低，一直保留至今。

5. 沉浸式体验的目的

人们往往以轻松的心态使用电视，希望获得观看小屏幕无法获得的沉浸式娱乐体验。相比手机，电视更注重沉浸式体验，达到电影般的效果。

02如何看待智能电视的界面设计？首先，在设计电视的时候，可以参考安卓和苹果的电视设计原则来主导界面设计。其次，我们还是可以根据五大设计要素来思考界面设计的方向。

1.使用场景的限制1)匹配场景的黑暗模式。

电视的使用场景:夜晚的客厅环境——它的特点是弱光、安静、舒适，所以我们一般采用深色主题，让背景色融入场景氛围，突出内容。内容和背景的对比不能太明显，背景颜色不能太暗，以至于分辨不出画面的阴影。避免在主题的高光颜色上使用过多的饱和度，以免产生炫目的感觉。

2)海报内容一目了然。

一般电视也分应用图标和内容推荐，需要在3米外清晰识别。每个画面的色调可以从背景中均匀地区分出来。

在图片中使用简单的背景，使主体突出，不会淹没附近的内容。太多的渐变会削弱整体的对比，所以图片中要减少色彩的使用，突出主要内容。

3)避免眩光和主题颜色失真。

纯白色(#FFFFFF)在明亮的电视屏幕上可能会非常刺眼。建议在深色背景上使用浅灰色(#EEEEEE)作为默认文本颜色。同样，一些突出的主题色应用到电视界面设计时也要注意，尤其是红色、黄色、橙色，会特别失真。

4)单词可识别。

由于远距离阅读大量文字会使眼睛疲劳，所以要认真考虑文字显示的字数，如果可以用图像或动画交流，尽量避免使用文字。确保各种字体在远处清晰可见。系统字体一般不要小于22px(12sp)，尽量简化字体样式，避免字重过细。

2.设备本身的限制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)色差明显需要测试。

每台电视都以画质为卖点，价格不同，画质处理技术也不同。可见每块屏幕的画质肯定是有一定差异的。主要区别在于显色、色域、控光、画质等。总结就是显色差异明显，要对消费者主要使用的电视机型进行显示测试。尤其是绿、红、黄等颜色容易有明显的色差。

3.操纵的局限性。有了这样的外围输入源，就需要考虑被触摸但未触发的聚焦状态，就像有键盘时有输入，鼠标悬停时有输入一样。电视对焦模式的设计既遵循了Android的一般设计原则，又有其独特性。

1)D-PAD交叉交互和网格布局

我们可以把D-PAD和屏幕之间的交互形式称为“十字线性交互”，而正是这种交互形式决定了输出端界面布局的基本形式。

在这个大屏中，我们的焦点只能跟着D-PAD的方向走横线或者竖线，每个位置的路径只能走二维的“十”线，可以更好的引导用户到他想要的地方。(这里使用了一个非常典型的接近原则)

设计人员和开发人员都很熟悉网格形式的横版页面布局，而电视上常用间距均匀的网格来规范内容集合，便于远程浏览和遥控器快速导航。该设计可以根据内容定制列数，最多9列。

2)重点是空之间的层次

位置感和方向感:在Android设计语言中，我们可以通过不同控件在Z轴上的不同位置来划分控件之间的层次。通常用阴影的变化来表示。所以为了突出焦点的位置，焦点通常会有明显的阴影。可以添加其他样式来增强它。

同时，为了清楚地指出D-PAD可以到达的地方，我们还需要在设计布局时避免控件之间的重叠。

即在Z轴方向上，只有一个焦点和两个普通能级，(可聚焦的)普通能级互不重叠。

4.多用户的限制1)家庭共享下的多模式

除了输入设备本身之外，输入源还可以考虑来自多人的多个源，这些源可以是协作的或由多人共享的。在家庭环境的场景下，根据不同用户提供相应账号下的信息页面，多人可以一起操作电视。

2)年龄细分模式呈现不同的内容和UI。

在多用户模式下，需要对不同的用户进行分类。电视上常见的用户模式有三种:儿童、普通、长辈。

在三种模式下，视觉色调、背景、间距、焦点状态、字体大小、内容海报都相应调整。这意味着许多控件需要定制。(运营也可以配置)

3)常驻“新手”提示和指导

电视也是一种公共设备，在不同的时间由不同的人使用。不同年龄段对智能电视的操作熟悉程度不同。我们在设计引导页面的时候，也会做有可重复提示的流程页面，而不是一次性的引导。常见的有:按钮文案设计成操作描述文案，焦点用气泡指向。

5.即时性和沉浸式体验。在主页上，用户更感兴趣的是找到感兴趣的内容。用户可以在选择内容时立即看到视频内容。所以这里推荐使用获取焦点的方法，也就是执行，这样可以节省搜索成本。用户点击确认键进入播放页面。

一种是背景画面随焦点切换，自动播放。

一种是当焦点在内容上，还没动的时候自动播放垫片内容。它不需要进入第二关，选中的会马上播放。

03如何策划一个电视应用页面？电视应用程序层次较少，结构扁平。下面，我举一个例子来思考一个大屏页面的信息布局，以及页面焦点的一些设计重点。

1. 常见的四种页面结构

Android设计指南中列出了几种常见的页面结构:浏览视图、详细视图、消费视图和搜索视图。这些页面结构基本上构成了在电视上浏览一个内容的过程，即从语音或推荐项目中选择一个内容、输入细节并开始观看的主要过程。

appleTV中对应的页面效果如下图所示，都体现了大画布背景+无拆分视图的沉浸感，没有多余的状态栏标题栏。

常见的流程如下:我们在浏览视图和详细视图或搜索视图中选择观看内容后，进入消费视图(视频播放页面)，同时可能会主动或被动选择相关内容，跳过播放或画中画播放。

04 以一个K歌应用举例1. 产品定位

咪咕爱唱是一款主要通过会员付费为用户提供音乐类版权内容（包括音乐MV、K歌伴奏、演唱会）的产品。米爱唱是一款主要通过会员付费的方式为用户提供音乐版权内容(包括音乐MV、卡拉ok伴奏、演唱会)的产品。

2. 重点页面布局——浏览视图

当我们从行为开始考虑，一个K歌的信息页面有什么时，我们可以想到，家庭K歌行为下，对应着多人控制、多年龄段使用，平铺直叙的排版方式是最好，一眼进来最好能看到即时的K歌伴奏MV，有可以让多人同时操作点歌的二维码，支持方便的语音搜索。当我们开始考虑一首k歌的信息页上有什么内容时，可以认为在家庭k歌行为下，对应的是多人的控制和多个年龄段的使用。纯排版方式最好。最好第一眼就能看到即时k歌伴奏MV，还有二维码可以多人同时点歌，支持便捷的语音搜索。

在确定的功能点模块的基础上，根据沉浸的目的和交叉交互的规则，我重新设计了一个即时播报的主页布局，显示的内容没有变化，但整个页面不再是分卡片，而是有了主次功能和信息的排列。

新规划的沉浸式布局1规划的新沉浸式布局1

计划中的新沉浸式布局II

3. 重点页面布局——消费视图（播放页面）

消费观不仅承载了最重要的视听内容，还有一些个性化的推荐服务和功能。所以在设计的时候，首先要提到页面进行考虑。

纯歌词内容来看，屏幕上的歌词逐字逐句是k歌特有的展示形式。LRC的歌词有时间刻度，所以这里我把时间进度条和歌词联系起来。对于用户来说，上下移动选择单个歌词更直观，而不是快进或后退。

推荐+歌词展现内容观。其实这是上一页选择播放列表后的页面效果。我倾向于为每首歌生成一个封面图片。(一般每首歌都会有图片或者MV)

显示视频内容视图。在播放内容时，尽量通过选择内容来减少沉浸式观看的体验。当然，可以和后期的运营需求进行权衡。

4.色彩搭配中常用的深色混合色当然能更突出，但考虑到与白天的氛围相匹配，浅色也可以，浅色背景上的阴影明显能突出重点层次。更重要的是，按钮背景的颜色可以显示在不同的材料上。以及所有图片的整体色调选择。

暗黑带透明度按钮背景颜色在两种背景上的表现深色透明按钮在两种背景下的背景色表现

透明的中灰色按钮背景色

当然每一个电视大屏的目标用户不尽相同，还是要根据主要人群来设计和规划。因为K歌产品也是一款既有儿童又有老年人用户的产品。因此针对不同用户，频道的风格也有一些区别。当然，每个电视大屏的目标用户都不一样，还是要根据主要人群来设计规划。因为k歌产品也是同时面向儿童和老年用户的产品。因此，对于不同的用户，渠道风格会有所不同。

我们不管是从国外的应用如网飞和亚马逊也好，还是从国内的几家头部视频网站也好，我们可以发现影视作品的封面也呈现出以下我举例的一些方向和风格。我们在做电视端应用的图片展示时，更应该遵循那种精简、干净、光效统一的风格。无论是从网飞、亚马逊等国外应用，还是从国内几家头部视频网站，我们都可以发现影视作品的封面也呈现出如下一些方向和风格。我们在做电视应用的画面展示时，要遵循简洁、干净、光效均匀的风格。

以前一些设计举例以前设计的一些例子

5. 焦点态设计

1)远程控制和焦点的状态

控制状态的数量只与输入源有关。举个例子，如果你的输入源是鼠标+键盘，那么焦点(针对键盘)，悬停(针对鼠标)，活动(针对鼠标/键盘按压)，然后你会想要加上禁用，如果是精致的话。因为远距离交互+按键的形式，在电视上焦点状态的形式是很不一样的。

电视端焦点状态的目的是为了让用户清楚明确的知道自己的光标在哪里，可以移动到哪里。-通过焦点的统一性和即时性，我们可以进一步清楚地告诉电视这一端的用户，他们在哪里停下了，他们可以去哪里。

Apple TV的统一焦点风格

控件的状态与输入的形式密切相关。如果输入源是D-PAD，则控件的焦点状态是二维的，而输入源是触摸板，则控件的焦点状态可以是三维动态的。

苹果在电视上的焦点状态动态图

由于国内强运营的需要，电视对焦状态的设计多种多样，并且想尽办法层层叠加。

2)聚焦动态效果和遥控方向

看两个设计原则，我们都提到了电影体验和沉浸式体验。一些小的屏幕变化(比如spring)会被放大，显得过于复杂。我们可以想象看电影时掉帧的糟糕体验。电视上的动画是为了在人和屏幕上的内容之间建立一种视觉联系。

和移动终端一样也可以按照这样的分类来考虑:启动动画、反馈动画和过渡动画。也可以根据交互动作来考虑，只在响应用户操作时使用。例如，当考虑入口和出口动画时，出口动画可以是统一的-对应于遥控器上的后退键，而入口动画考虑两点:

关联性：让用户在布局中理解刚才发生了什么，是什么导致了变化。目的性：让用户明白接下来会有什么，可以去哪里。

由于电视终端更多的是图片列表的显示形式，图片列表的显示往往以视差运动的方式出现，呈现出一种大屏幕上纵向内容连续出现的感觉。

3)沉浸式聚焦效果

目前，你已经可以在浏览器和电视上看到这种效果——当你滚动推荐的台词时，只要在图像上停留一两秒以上，每个标题的预览视频就会自动开始播放。这是一个非常直观的电视互动，就像很久以前我们打开电视时，有生动的声音和画面。

电视有几十年的期待，打开电视就能播放视频和音频。所以，有沉默的体验其实是很奇怪的。

如果想深度优化优秀的大屏动态效果，可以借鉴PS等游戏机系统。至于如何改进大屏的设计，我想从主机游戏界面的设计就可以一窥端倪。以后大屏就是AR眼镜，也就是VR，电视的那套东西都搬到小主机和便携眼镜里了。

结语

本文以交互设计的五大要素为框架，从电视与手机的区别中分析电视的独特属性，进而引出界面设计的一些特殊点。最后以一个电视端卡拉ok APP的设计为例，从布局、配色、焦点设计等几个方面进行了详细的说明。

参考资料:

Adroid design guidlinestvOS-Human Interface Guidlines从物理逻辑到行为逻辑http://www.360doc.com/content/15/0210/13/21907744_447672901.shtml设计基础：电视交互设计的一些事 http://www.woshipm.com/ucd/918841.htmlTV端设计原则分析 http://www.woshipm.com/pd/4105626.htmlTV 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=13个方面分析：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

本文由@ Cortical Award获奖者原创发布。每个人都是产品经理。未经许可，禁止复制。

来自Unsplash的图像，基于CC0协议。

此观点仅代表作者本人，大家都是产品经理。平台只提供信息存储空服务。