改版复盘：智能终端电视系统.docxVIP

改版复盘：智能终端电视系统 编辑导语：随着海外业务的拓展，智能终端电视系统已经不能满足现有用户，原有的交互及界面已无法满足当前的需求。面临着用户群体变窄的危机，应当如何改版？作者以派视智能电视为例，复盘了智能终端电视机系统的相关改版方法，一起来看下吧。 派视智能电视UI自2015年设计研发以来，随着海外业务的拓展，支持节目由原来的100套增长至500+，日活用户突破百万，原有的交互及界面已无法满足当前的需求。 随时面临着用户群体收窄的危机。并且设计团队的多次转变，也导致目前产品设计体验上不统一，对于目前现状与难点，这也是我们这次改版的初衷（本次设置+付费模块不做更改）。 一、项目背景 派视智能电视是一个集IP直播、点播、应用商城为一体的终端设备，在非洲数字智能电视领域属于一枝独秀，用户对于整体的流畅体验和内容展示最为关心，关系着用户的使用体验和观看体验我们前期也对市面产品做了深度的调研。 希望通过对产品的一些调研数据，力求站在用户痛点上进行更多的思考与改进。 二、从“产品目标”中拓展设计思路 与产品团队、海外拓展团队、运营团队的多次沟通，产品的最终目标无非是 “提高视频包营收”、“拉高用户日活跃度”，设计团队根据产品目标进行推导，从而确立这次改版的设计目标，并且在此基础上不断进行方法论要点的细分，希望能根据产品目标确立出明确的设计方向。 三、设计关键词，决定着智能电视的改版方向 团队从设计目标中进行风格探索，分别从“视觉、操作、内容”三个纬度进行展开，提取出我们这次设计改版的关键词，以“简洁、易用、专注”为改版的核心，主要目的是让用户最便捷地找到最喜欢的内容。 四、“轻质化”设计，让用户产生崭新的产品认知 1. 模式切换：浅色模式与暗黑模式（暗黑模式不是夜间模式） 暗黑模式希望使用者更加专注自己的操作任务，对于信息内容的表达会更注重视觉性；可以更专注、更沉浸在当前的内容下。暗黑模式既可以在黑暗环境，也可以在亮光环境下使用，而且深色会在视觉感官上给人一种距离感、收缩感，浅色部分则会向前延展，这样在对比强烈的层次关系中可以让用户更注重被凸显出来的内容和交互操作。 综上所述，暗黑模式是兼并内容高关注度和暗光线下视觉舒适度的整合，可以理解为是对浅色主题的一种场景化补充（具体颜色搭配见下方）。 2. 背景模糊 玻璃拟态的视觉风格更加注重垂直空间 z 轴的使用。 注重空间感意味这种风格有助于用户建立界面的层次结构和深度。用户可以看到物体间的层次关系，哪一层在哪一层之上，就像物理空间中真实的玻璃一样。模糊半径必须为 6~16 之间，具体个别效果由设计师把控。 该类样式适用于父子级界面中。用户的操作不会因为页面跳转而被被强行打断，视觉断层有明显改善。 3. 投影 为了更好的营造层次感，我们在设计投影的时候，摒弃原有的投影设计方法（直接在元素上面添加），而是在现有的元素下面再添加等大的元素，将元素缩小至80%，底端对齐，然后向下竖移8个像素。 然后添加高斯模糊，具体数值根据效果，由设计师把控（模糊半径控制在6~16之间）用以营造item悬停的效果。增强视觉感受、增加关注度。 该种投影适用于各类item。视觉上还能保持色调一致的简洁性。 4. 渐变 设计中都会在局部蒙版方案中加入渐变色；具体表现在图象或者视频上叠加文字和按钮的情况，文字直接放在图片上，当背景色和字色过于接近时，会影响文字的读取阅读。 为了解决这个问题，通常的解决办法是在图片和文字中间叠加一个中间层（蒙层），这样一来，即便背景色和字色过于接近，由于中间层的存在，也不会影响文字阅读。 中间层（即 常说的图片蒙层）的形式大概可分为“全蒙层”和“局部蒙层”两种：由于全覆盖的蒙层对内容品质的影响很大，所以我们采用局部蒙层的设计方案。 为了让渐变色平滑融入图像，就需要改变渐变的曲率：把过渡的中间色，从50%位置移动到30%的位置（需要增加一个过渡节点，节点越多越好）。 5. 圆角 我们将界面中原有的方形item增加了圆角概念，让人视觉感受上更加友好、亲切。并且圆角具有更强的内指向性，可以更好地衬托出item内的装扮内容；而且在圆角的衬托下，更加清楚分辨item的边界，使装扮的呈现更加清晰。 对于圆角的取值上也作了足够的思考，item内需承载的其他内容信息众多，圆角太大会影响边角信息的呈现，所以我们在圆角选取上，采用《大屏互动GuideLine》设计规范中定义的8px的栅格系统，意思是“以8px为单位，来规范元素的尺寸与间距”。在极端情况下使用6px圆角。 并且我们把圆角的理念，延展到标签的统一设计中，并且对于长短不一的item信息重新归类，清晰分成4个尺寸样式，把控视觉上的统一。 6. 色板 在浅色界面中，我们通常用只用一个白色背景结合分割线就可以搞定所有界面的板块层级，因为在浅色模式下有投