TV 答题项目是较为完整的一个项目，涉及到整体设计风格的把控、界面设计、动效制作以及应用图标设计。虽然只是一个很小的应用，但是我完整参与了一个应用从0到1的设计过程，从中沉淀了 TV 应用的设计方法和设计准则，还有不同评审方式的尝试。这种机会不多得，因此用一篇文章记录下此次项目的设计过程作为沉淀。

智能电视是每个家庭中最常见的设备，在我们的印象中，电视已经被互联网所取代，但在《2018 年中国智能电视行业发展现状及行业发展趋势分析》一文中可以看到，中国居民人均收视时长仍显著超过上网时长，53% 的智能电视用户有消费意愿或已消费过。不可否认的是，智能电视仍然占据了一定的流量，同时可以成为一个很好的流量入口。

产品的目标便是通过和 TV OS 合作，以答题游戏的方式引导用户关注微信公众号，为用户推送优质的学习内容。

01

关于用户

我们的用户是谁？他们在什么场景下打开这个应用？在这种场景下他们的意图和偏好是什么？

我们将目标用户定位在二、三线城市的 k12 及学前的孩子和他们的家长。他们在一天的工作和学习后，回到家打开电视的唯一目的就是休养生息，观看一些轻松趣味的节目和内容，洗去一身的疲惫。在这种情况下，他们希望电视里的内容可以更轻量，没有太多负担。因此我们的产品应该是富有趣味性的，通过趣味性的设计来吸引家长点击。

基于此我们决定将趣味性、沉浸式、可见性定为产品设计关键词。通过关键词发散出相应的情绪板以指导设计。

02

在设计之前，我们应该了解什么

电视特殊的尺寸、使用场景和交互方式决定了它和移动应用、web 应用在设计上存在一定的区别。移动端的设计准则无法完全适用于电视端，二者的注意点也有所不同。我们需要更多地考虑，如何在大屏和遥控的操作方式下，为用户提供更好的操作体验和视听效果。

在设计时我们需要提前了解到以下三点给设计带来的影响：

1）尺寸和距离：

虽然电视屏幕比电脑和手机要大得多，但是它的信息承载量是比后二者要小的。我们不能期望用户在电视上去费力寻找某个操作按钮或文字，所有的一切都要非常清晰地展现在他们面前，让他们轻松地获取到相应地信息。因此，所有被强调的信息都应该具有很强的可见性。

2）交互方式：

智能电视和手机、电脑极为不同的一点是，它既无法通过触控进行交互，也无法使用鼠标进行点击，它只能使用遥控器远程操控。在这种情况下，所有的操作都要尽量通过⬆️⬇️或者⬅️➡️搭配 ok 键完成，所有的指令需要在屏幕上有清晰的反馈。

3）颜色：

由于电视的屏幕饱和度较高，因此在设计时需要注意不使用饱和度太高的亮色，以免引起视觉疲劳。还需要在测试时注意颜色使用是否有偏差，以便及早调整。

03

TV 设计准则

第一次做 TV 设计的时候最迷茫的不过，我应该使用多大的画板？多大的字号？页面元素的大小多少是比较合适的？就像是拿到了一张白纸，无从下手。

着手设计之前，我翻看了 Apple TV 和 Android TV 的设计指南，整理出其中对这次设计有用的点：设计尺寸、安全边距以及字号建议。

1）设计尺寸

由于我们的 TV OS 是基于 Android 系统的，因此我们选用了 1920*1080 作为基准进行设计，同时向下适配 720*1080 的屏幕。

2）安全边距

Apple 设计指南建议在屏幕边缘预留一定的安全边距，因此所有的设计内容都应该在安全区域以内进行设计。

3）字号

我在设计中参考了 Android TV 提供的字号，并且建立了自己的字号使用规范。

04

在设计时应该注意什么

1）减少信息密度

虽然电视屏幕很大，但是用户可以从中接收的信息是有限的，因此需要尽量减少屏幕上的信息量，呈现出来的内容必须是具有易读性，保证重点突出。

在这一点上，交互设计师给我提供的交互稿已经完成得很好了，每个页面的信息内容非常少，我只需要在此基础上进行优化即可。

2）色彩搭配

TV的屏幕饱和度较高，因此在选用颜色时避免使用一些饱和度太高的色彩作为主色。

为了减少视觉疲劳，选择深色作为主色，搭配以相对较为明亮的橙黄色作为强调色，让整体画面舒适却不失趣味性。同时因为纯白色在深色底上会影响阅读，因此选用了两个和主色搭配的浅色作为文字色。

3）露出屏外内容

当我们的内容无法在一个屏幕内完全展示，我们需要显示屏外内容的 10%-20%，让用户明白还有更多的内容可供浏览。

因此在进行选择题目的页面设计时，我特意对题目列表的位置进行了调整，确保在完整展示三个题目的前提下，露出第四个题目的一半，让用户明白屏幕外还有内容。并在此基础上进行循环展示。

4）让焦点更突出

在 TV 端，突出焦点是非常重要的。由于 TV 端交互的特殊性，屏幕上始终有一个元素处于聚焦状态，必须要通过强烈的对比让用户知道他正处于什么状态，接下来的点击会触发怎么样的结果。

对不同的页面元素的焦点，我采用了不同的设计方式。对于按钮及选项的正常状态及聚焦状态，我用了不同的颜色来进行对比，同时，聚焦状态将比正常状态的按钮尺寸大。这一点在移动端或许是没有必要的，但是在 TV 端却是至关重要的。

而在题目选择列表处，除了颜色和尺寸的不同外，还有一个小飞碟在右上角，目的也是突出选项，同时契合主题、增加趣味性。

5）让动效更生动

对于 TV 应用的设计来说，动效是一种增强可见性的方式。在诺大的屏幕中，动效可以很好地响应用户进行的操作，让用户注意到他操作的结果。

因此，我将动效运用在了选择题目后的倒计时、每道题结束时、时间到、以及最终结果展示。对于其中每一个步骤来说，动效都是必不可少的。

制作动效的过程也耗费了大量的时间，需要进行不断的调试。其中遇到的一个问题是，TV端的动效最佳时长、速度等和移动端都是不同的。

Material Design 建议，在手机这样的移动设备上，动效时长应该控制在 200～300ms，平板电脑上，这个时长在 400～450ms。因为屏幕尺寸越大，元素在发生位移的时候距离越长，速度一定的情况下，时长自然越长。

按照这个指导建议，TV 的动效时长在 2～3s 之间。同时，动效时长并不只是跟屏幕大小有关系，还和需要移动的物体的尺寸有关系。多次尝试后，我将不同页面的动效时长定为了 1s 和 2s。

说到动效就不得不提音效。音效的加入可以让整个应用“活”起来，就像是一个真实的小伙伴在你耳旁反馈。

05

设计评审

最后，如何展示自己的设计，让需求方了解到产品背后的思考和设计理念，最终达成一致目标？

除了阐述 logo 设计从发散关键词到最终完成三个方案的设计过程，我还将做这个 logo 的不同考量点一一陈列了出来。在这个项目中，logo 应该符合「契合度」、「美观度」、「趣味度」、「识别度」这四个点，同时兼顾背后的「风险性」。综合这些维度客观地对三个设计方案进行打分，阐述三个方案在不同维度的优劣表现，最终得出结论。

通过这种方式，可以将不同方案的优劣可视化呈现，让相关方在评审中考虑得更全面，同时也更容易理解设计师选择这个方案的理由，从而达成一致意见。

Powered by Froala Editor