电视大屏设计_从电视端学习大屏设计原则

制造引导使用，电视传播方式变革、网络视听业务和科技手段的相互推动，带动了民众家庭视听感受的改善。那么，怎样规划电视巨幕的家庭影音功能呢？大家接着往下看。

回想过去，电视只能接收CCTV、江苏卫视、湖南卫视的实时播出，但这已无法满足我们的需求，我们渴望无广告的节目，想看付费的影视剧，还希望重温课堂里播放的剧集。印象最深的是那种点播服务，需要拨打电话用话费选择，反复播放的只有几部动画片。如今，电视支持通过声音查找流行网络剧集，能够订阅欧洲冠军联赛和英格兰超级联赛的现场转播，还可以挑选各个电视台的综艺节目和电影电视节目等。

制造引导了使用，电视载体的革新，网络视听平台，以及科技层面的相互影响，在持续推动家庭视听感受的改善。怎样规划电视巨屏的家庭影音功能，是我接下来要讲述的主题，我会先从电视与手机的区别说起。

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

用户—上下文场景—行为—工具或媒介—目的。

1. 居家使用的场景

不同的场景下人和物都有不尽相同的交互方式。

手机用户的使用环境往往流动不定，比如在地铁里，或者在洗手间，常常用来填补零碎光阴，而电视设备大多安放在客厅、卧室这类家庭环境，观看时间通常是连续的，并且多见于夜间时段。

某个时段，某个场所，特定的氛围之中，最终出现了某种状况

电影里场景的分类：内景、外景、实体场景、虚拟场景。

2. 家庭成员共享

在家庭环境中，电视属于集体使用物品，服务各个年龄层次成员。老年人和儿童群体尤其突出，他们使用电视的时间分布很不相同。所以观看电视时，使用者掌握难度需小，操作步骤要简便，并且能够方便地转换不同功能状态。

手机属于个人物品，因此更突出私密性与独特性。尽管手机具备各种交互感应功能，十分灵敏，不过相应地，使用它需要更精细的操作，掌握起来比较困难。

3. 休闲消费的行为

电视不如手机便捷，难以执行具体操作，主要充当家庭娱乐工具，应用范围和作用比较狭窄，主要用来消遣，也能用于获取知识，充当智慧帮手，管理住宅，还可以作为装饰品。

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

电视的观看体验通常在更广阔的场所进行，并且对远距离的显示效果有较高要求。近距离的互动更倾向于使用实际物体和触摸操作，而远距离的沟通则主要依赖声音传递信息。由于手持的控制器便于掌握且无需复杂学习，这种远程操控的物理设备一直沿用至今。

5. 沉浸式体验的目的

人们常常随意地打开电视，期望得到小屏幕无法带来的沉浸式感受。电视比起手机，更加追求深入其中的体验，能够营造出电影般的氛围。

02 如何思考智能电视的界面设计

在设计电视端时，可以借鉴安卓和苹果的TV端设计理念来规划界面布局，同时也要依据设计五要素来构思界面设计的方向。

1. 使用场景的限制

1）配合场景的暗色模式

电视适用环境：夜间客厅氛围，光线昏暗、环境安静且感觉温馨，所以通常选用深色调作为设计主旨，使画面与周围环境融为一体，从而强化视觉焦点。画面与背景的色彩反差无需强烈，背景不宜选得太暗，以免影响画面细节的呈现。高亮色彩部分，应避免使用过于鲜艳的色彩，以免造成视觉不适。

2）海报内容一目了然

电视屏幕上通常设有功能标志和节目指引，这些标识无论在远处还是近处都应辨识清晰。每幅图像的色彩都需与背景形成明显反差。

画面中宜选用素净的底色，使核心元素更为醒目，同时避免对邻近区域造成干扰。倘若运用过多渐变，则易削弱整体的反差效果，故需节制色彩的应用，以便让中心信息更加突出。

3）避免主题色刺眼和失真

纯白色在明亮的电视屏幕上可能会让人感到很不舒服，最好将浅灰色作为深色背景下的标准文字颜色。同样，在电视界面设计中使用部分高亮主题色时也要小心，特别是红色、黄色以及橙色这类颜色，它们很容易出现严重的失真现象。

4）文字可识别

长时间凝视众多文字容易导致视觉不适，需要仔细斟酌文字的呈现数量，若有可能，优先采用图形或动态影像传达信息，减少纯文字的使用，同时保证各种字体在远距离观看时依然辨识度高，常规系统字体大小建议不低于22像素（12sp），还要尽量压缩字体的种类，防止使用过于纤细的笔画。

2. 设备本身的限制

1）常见电视尺寸

常见的电视尺寸介于43寸到85寸之间，其中包括43、50、55、60、65、75等规格，用户会依据观看距离挑选适宜的电视大小。电视屏幕通常采用16:9的宽高比例设计。我们一般以1920×1080作为基础分辨率，这是目前最普遍的电视显示标准，所有图像素材都以1倍像素精度提供。4K素材逐渐流行起来，也能够选用1920×1080分辨率，不过必须配套供应符合@2x规格的图片。

那个宽1920像素高1080像素的电视是几K？1080P这个说法是不是就是指分辨率为1920×1080？

2）画布尺寸与安全区设置

旧式电视因为扫描范围过宽，容易产生画面被切割的情况，因此必须设置缓冲区域，确保核心影像与屏幕边界保持一定距离，通常在四周各保留约占画面五分之一的空白地带。

3）显色差异明显需要测试

各家电视都以画面表现力作为宣传重点，售价存在显著差异，其画面处理方案也各不相同，由此可以推断不同品牌的显示屏在画面质量上必然存在差异。这种差异主要体现在色彩还原度、色彩范围、亮度控制以及整体画面效果等方面，概括来说就是色彩表现存在明显不同，因此需要在消费者经常使用的电视型号上进行实际显示测试。特别是绿色、红色、黄色等色彩，其色差现象更容易被察觉。

3. 操控的限制

有了这个外部设备来源，就要考虑未激活的触发状态，比如键盘输入的情况，还有鼠标悬停的时刻。电视焦点状态的设计，既依照安卓的一般规范，也具备自身的特殊性。

1）D-PAD十字交互与网格布局

D-PAD与屏幕的互动方式，可以称作“十字形交互”，正是这种互动方式，决定了显示端的界面排布的基本形态。

这个大屏上，用户的视线只能沿着D-PAD的指引，在水平或垂直方向移动，每个位置的轨迹都限定在二维的“十”字格内，这种方式能有效引导用户找到目标内容，这体现了典型的亲近性原则。

设计人员与编程人员都清楚运用格子体系来排布横向页面，电视屏幕上则普遍使用距离均等的阵列形态来整理信息单元，这样有利于远距离观看，也能让手持设备轻松操作。布局时可根据素材特性设定行列数量，极端情况下能够扩展到九个横向区间。

2）焦点在空间中的层次

空间与朝向认知：在安卓界面规范里，控件间的层级关系能够借助它们在垂直维度上的不同坐标来界定。大多时候，层级差异会借助轮廓的深浅来体现。所以，为了凸显重点区域，该区域通常带有突出的轮廓效果。此外，有时还会配合其他装饰手法来强化这一特征。

为了清楚标示D-PAD可操作的区域，我们在规划界面时，必须防止各个元素互相覆盖。

在垂直维度上，存在一个中心点，以及两种常规的层次，而且（能够接受上移的）常规层次彼此之间没有交集。

4. 多个用户的限制

1）家庭共享下的多模式

输入来源不仅涉及单个设备，还可能包含来自不同个体的多个输入，这些输入可能源于团队协作或多人共享设备的情况。在家庭环境中，系统会根据不同用户身份，展示各自账户的信息界面，同时支持多人共同控制电视设备。

2）年龄分段模式呈现不同内容与UI

多用户环境下，要对不同用户进行分组，电视系统通常设有儿童、一般、老年三种类型。

在三种不同场景下，色彩搭配、画面底色、元素距离、重点区域、文字大小、宣传物料等都会进行针对性修改。这表明许多功能组件必须开发成可定制的样式。（业务管理人员同样能够设置相关参数）

3）常驻的“新手”提示和引导

电视依然属于公共物品，各个时间段会被不同人群使用，各个年龄段对智能电视的使用方法掌握程度也不一样，我们在进行引导式界面设计时，会采用能够多次提醒的流程页面，而不是一次性完成引导，例如把按钮的文字写成具体操作说明，还有使用焦点伴随气泡提示等。

5. 即时性与沉浸体验

首页访客通常致力于发掘自身关注的信息，选定某项内容后能迅速获取影像资料。因此，推行聚焦后即刻响应的机制颇为适宜，有助于降低探索的精力消耗。按下确认按钮，即可顺利切换至观看界面。

一种是背景图片跟随焦点进行切换并自动播放。

当视线集中在某个部分且没有移动时，系统会自动播放补充材料，无需跳转到下一级页面，用户可以直接选择立即观看。

03 如何规划一个电视应用页面

电视端软件架构层级较少，组织形式趋于平面化，接下来我会举例说明如何构思大尺寸显示界面的内容布局，以及页面核心要素的若干设计要点。

1. 常见的四种页面结构

设计规范中包含了若干典型界面布局，例如列表展示、内容详情、交易操作以及检索功能。这些基础布局方式基本上涵盖了电视端观看内容的主要环节，具体流程为：用户通过语音指令或系统推荐选取目标，随后进入详细信息界面并启动播放过程。

对应的页面呈现如下景象，每一个细节都彰显出全景式背景与完整视图所营造的沉浸体验，并且页面顶部没有任何额外的标题或状态栏。

一个普遍的操作步骤是，当我们在浏览界面、详情界面或者搜索界面选定要观看的项目时，会切换到使用页面（视频播放界面），在此过程中或许会主动或者被动地挑选其他相关项目，接着进行播放或者选择画中画模式观看。

04 以一个K歌应用举例

1. 产品定位

咪咕爱唱是一个以会员缴费形式，向用户输送音乐版权资源的应用，涵盖音乐MV、K歌配乐以及现场演出等素材。

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

从行为角度分析，K歌的信息页面应该包含什么，我们可以想到，针对家庭K歌场景，它需要满足多人操控、跨年龄层使用，因此采用简洁明了的布局最为适宜，用户打开后就能迅速找到即时的K歌伴奏MV，同时具备供多人同步点歌的二维码，并且要支持便捷的语音查找功能。

在既定功能模块上，依照沉浸式体验要求和十字交互规范，我重新设计了一种以即时播放为核心的首页布局方式，呈现的信息内容其实保持不变，不过整个界面不再采用分割的卡片形式，而是改为具有主次之分的功能和信息排列结构。

新规划的沉浸式布局1

新规划的沉浸式布局2

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

展示界面不仅集中了核心的影音信息，也整合了定制化的推送选项和特色应用，所以规划时，必须将此页面置于优先位置考量。

纯歌词文本展示，逐字呈现是K歌中一种特别的表现方式，LRC歌词带有时间标记，因此在此将时间轴与歌词内容对接，用户能够通过上下移动来挑选特定歌词行，这样操作比单纯快进或慢放要清晰得多。

内容呈现与歌词展示界面，本质上就是前一个页面选定播放清单后的界面呈现，我个人主张为每首歌曲制作专属封面，毕竟多数歌曲都配备有图片或音乐视频

视频呈现画面，播放时尽量降低挑选对专注观看的影响，至于后续根据业务需要也可考虑调整。

4.配色

深色系搭配确实能强化视觉效果，不过要顾及白天的环境协调性，浅色系同样适用，浅色底下的暗部效果更能凸显重点分布，而且按钮底色在各种素材中都要保持一致，另外还要注意所有图片的整体色彩倾向。

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

中度灰带透明度的按钮背景颜色

各类电视大屏面向的客户群体各有差异,设计规划需依据核心用户群体实施。K歌产品同时服务少儿与长者,所以针对不同人群,频道呈现的调性也各有侧重。

不论考察境外的流媒体平台例如和，抑或国内的领先视频网站，都能察觉到影视作品的封面具有某些特定的样式和趋势，这些样式和趋势我在前文已有所列举，务必牢记。针对电视端应用的图片布局，我们理应严格遵循简洁明了、整洁有序且光影效果协调一致的设计准则。

以前一些设计举例

5. 焦点态设计

1）遥控器与焦点的状态

控件状态的数量取决于输入设备的类型。例如，如果输入设备是鼠标和键盘，那么就需要设置焦点状态（用于键盘）、悬停状态（用于鼠标）、按下状态（用于鼠标或键盘）。此外，为了更加精细，可能还需要考虑其他状态。正是因为采用了远程交互和按键结合的方式，电视设备上的焦点状态表现方式与普通设备有很大差异。

电视端设置焦点状态是为了让用户能够持续准确地识别光标位置，并了解其可移动范围，从而确保操作明确无误，便于用户随时掌握光标所在点，并清晰感知其后续移动方向，利用焦点的一致性和即时反馈特性，进一步强化电视端用户对光标停留位置和可操作路径的明确认知。

苹果TV统一的焦点态样式

控件的状态与其输入方式密切相关。当输入设备为D-PAD时，控件获得焦点后的形态呈现为二维结构。而如果输入装置是触控盘，控件获得焦点后的形态则具备三维动态特征。

苹果电视的焦点态动态图

国内因为强化运营的需求，电视焦点状态的设计手法多种多样，费尽心思，不断叠加。

2）焦点动效与遥控方向

我们考察了两个核心指导方针，它们都强调了影视感受、全情投入的感受，微小的屏幕差异（例如）会被显著放大而造成过于繁琐的效果，可以联想到观影时出现画面断续的劣质感受，电视播放的动画旨在建立观众与屏幕显示内容之间的视觉关联性。

启动动画、反馈动画、转场动画这几种类型，在桌面端也可以参照这样的方式去分析，也可以根据交互行为来划分，仅限于对用户指令做出响应，比如在构思进入和退出的效果时，退出的效果可以考虑进行整合——它关联着控制器上的后退功能，而进入的效果则需要关注两个方面：

联系性：使用户在界面中明白先前发生了何种情况，是什么触发了变动。目标性：让用户清楚后续会有什么发展，可以前往何处。

电视设备通常以图像清单的形式呈现信息，图像清单的呈现方式常伴有视差效果，营造出巨幅屏幕上内容持续向下流动的视觉体验。

3）沉浸式的焦点效果

现在在电脑和电视上都能见到这种现象，就是当你滑动查看推荐内容时，只要把目光停留在某个画面上超过一两秒，每个条目的预览短片就会自动开始播放。这种电视操作方式非常直接，好比早年间我们一打开电视就能看到清晰的画面和声音一样。

电视承载着漫长的期待，开启之后能够呈现影像和声响，因此，一段无声的体验反而显得很不寻常。

若要进一步提升大屏幕动态效果的表现力，不妨在游戏主机系统这类领域寻找灵感。关于如何提升大屏设计水平，个人觉得可以从主机游戏界面设计方面获得一些启示。将来大屏幕可能就是AR眼镜，或是VR设备，原先电视所承载的功能，如今已集成在小型主机和轻便的眼镜之中。

结语

本文围绕交互设计的五个核心要素，首先比较电视与手机的功能差异，进而揭示电视独有的使用特点，然后探讨界面设计中的若干特殊要求，最终通过一个电视版K歌软件的设计案例，具体阐述其版面规划、色彩运用以及重点元素突出显示等方面的设计细节。

参考资料:

人 从物质规律到动作规律构建基础：电视互动构建的一些思考 端构建原则剖析 UI构建快速入门手册 在电视上，模块构建怎样实施？ 电视构建入门，核心要点不可或缺 小米电视儿童功能体验说明 智能电视构建概述 多角度解析：TV端怎样实现有效反馈？从无到有 | 企鹅电竞TV初次亮相 产品剖析 | 爱奇艺——“我将化作中国版流媒体巨头”电视界面推荐机制怎样构建？这里有一份详尽的计划