TV答题项目设计总结

/ 前期思考 /

项目背景

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

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

关于用户

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

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

设计注意点

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

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

·尺寸和距离：

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

·交互方式：

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

·颜色：

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

基于以上几点考虑，此次应用将依照趣味性、TV设计准则、可见性作为设计原则指导设计。

/ 趣味性 /

结合产品的设计目标和用户的使用场景、应用名称「开心答人秀」、答题、夜间等方向进行发散思考，得到了以下的设计关键词，根据设计关键词进一步确定设计意向图（情绪版）。最终结合趣味性以及知识探索的氛围，将应用设定为“星空”主题，确定了基础的设计风格。

/ TV设计准则 /

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

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

设计尺寸

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

安全边距

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

字号

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

/ 易读性 /

在设计实施过程中，需要注意在各个方面满足易读性这一要求。可见性具体体现在哪些方面？

减少信息密度

前面提到过，虽然电视屏幕很大，但是用户可以从中接收的信息是有限的，因此需要尽量减少屏幕上的信息量，呈现出来的内容必须是具有易读性，保证重点突出。在这一点上，交互设计师给我提供的交互稿已经完成得很好了，每个页面的信息内容非常少，我只需要在此基础上进行优化即可。

色彩搭配

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

露出屏外内容

当我们的内容无法在一个屏幕内完全展示，我们需要显示屏外内容的10%-20%，让用户明白还有更多的内容可供浏览。因此在进行选择题目的页面设计时，我特意对题目列表的位置进行了调整，确保在完整展示三个题目的前提下，露出第四个题目的一半，让用户明白屏幕外还有内容。并在此基础上进行循环展示。

让焦点更突出

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

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

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

让动效更生动

在移动端，动效大多时候只能起到锦上添花的作用，但对于TV应用的设计来说，动效也是一种增强可见性的方式。在诺大的屏幕中，动效可以很好地响应用户进行的操作，让用户注意到他操作的结果。

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

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

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

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

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

/ 设计评审 /

最后，如何展示自己的设计，让需求方了解到产品背后的思考和设计理念，最终达成一致目标？在这个项目的logo设计评审中，我尝试用一种比较正式的方式将设计方案进行阐述。

除了阐述logo设计从发散关键词到最终完成三个方案的设计过程，我还将做这个logo的不同考量点一一陈列了出来。在这个项目中，logo应该符合「契合度」、「美观度」、「趣味度」、「识别度」这四个点，同时兼顾背后的「风险性」。综合这些维度客观地对三个设计方案进行打分，阐述三个方案在不同维度的优劣表现，最终得出结论。通过这种方式，可以将不同方案的优劣可视化呈现，让相关方在评审中考虑得更全面，同时也更容易理解设计师选择这个方案的理由，从而达成一致意见。

/ 总结 /

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