千万级用户的视频体验,我们是这么做的.pdfVIP

千万级用户的视频体验 ，我们是这么做的 如今app的更新迭代速度很快 ，因此无论 视觉审美还是交互功能上都有新的趋势和风格。乐视视 频原有的ui设计风格已经无法跟上目标客户群的审美变化 ，且 功能上较难满足用户预期 ，因此需 要 整体视觉和产品功能上进行相应的美化和完善 ，使我们的视频产品无论从视觉还是功能上都能 够 给予老用户新鲜感的同时吸引更多的目标用户。 设计语言 新的版本着重点 于沉浸式设计 ，意 让用户能够更加沉浸于内容本身 ， 给予用户使用流畅感和 视觉美观感的同时 ，有效提高用户对于视频内容的关注。 背景分析 1.用户人群分析 90后人群 ，年轻有活力 ，享受生活 ，除了注重性价比、品质之外 ，更加注重颜值 ，强调好玩、好看 ，审美上喜欢简洁、有设计感 ，又有趣的东西。 往往忠诚度较低 ，强调个性 ，喜欢张扬个性又能沉下心来 ，矛盾感强 ，需要更加新颖独特又符合当 前潮流的风格抓住用户群体。 2.使用场景分析 不同场景下如 地铁上观看离线视频 ， 家里连接W i- Fi追剧等使用的A PP ，针对其特定因素做出的 界面需 任何环境下都能充分展示其交互和功能。 界面设计 （UI ） 1.界面模块 （卡片式设计 ） 卡片式的布局能够把信息、图像、文本、按钮、链接等一系列数据整合到各种矩形方块中。这些模 块可以分层或移动 ，并都倾向于调整到全屏幕尺寸。如果你把它滑动到手机的一侧 ，它就会和其它 的卡片堆叠 一起。 卡片能够合理利用空间 ，清爽的列出全部信息。乐视是视频公司里第一个倡导卡片设计的 ，从2012 年的乐视PC改版 ，到T V端、移动端的升级 ，都完美符合“2015年和2016年手机设计流行趋势”—— 最好的设计思路是把每个卡片作为一个独立整体来设计。 而卡片式设计能够成为流行趋势的一个最重要的原因就是——卡片式设计能够完美利用手机屏幕的 空间 ，不但界面清爽 ，内容也一目了然。 大多数的交互场景下 ，卡片式设计与移动应用程序简直 是绝配。而矩形的设计也能够完美体现出UI设计的简洁美。 2.界面细节 UX设计师Erik D. K nn dy写了一篇非常棒的文章 （一共分为两部 ），这篇文章打破了许多传统的 设计观念。以下是我们认为 这篇文章中最适用于卡片式设计的几条规则 ： 了解光线的物理性质 ：设计师应仔细考虑如何使用阴影和渐变 ，使元素看起来更加真实。这对于卡 片式设计而言是非常重要的 ，因为它涉及到了卡片的“真实感”。如果阴影投 各个角落边上的话 ， 这种卡片式的体验可能就会被破坏掉。 确保UI在黑白两色下能 正常使用 ：设计的第一步就是要抛弃颜色。这将能够让你明确地把设计重 点放 实用性和内容上。根据K nn dy的说法 ，设计师应该 设计的最后一步再添加颜色 ，颜色 对UI设计只是起到点缀的作用。 不要吝啬使用留白 ：请先给你的卡片一些空白的空间 ，之后再去慢慢缩减这部分空白。正如我们 “ 网页设计中留白的禅学”中所描述的那样 ，“负空间”是帮助你“组织和分离各种必要与不必要元素”的良 师益友。 掌握分层文字的艺术 ：这可能并不是那么容易掌握的。一定要使用一个明确的、清晰的图像作为 背景。为了确保文本看起来效果更好一些 ，你可以使用一个黑暗的色调来进行叠加——把文字放进 一个“盒子”里 ，或者是尝试虚化背景图。 知道如何创建与排版对比 ：无论是犹豫用大卡片还是小卡片 ，或是纠结用更多的文字还是更少的文 字进行组合 ，其实最重要的是要把这些元素有机的配合起来 ，达到吸引用户注意这一最终目标。 其实 ， 卡片式设计上简单的排版往往效果最好。通过给卡片加以美化润色 ，来使得用户对卡片更 加熟悉 ，而且这种方式也并不失创意。例如 ，把阴影元素加进卡片中的话就会使用户感到更加亲切 自然。 配色 ：所谓配色 ，简而言之是将适当的颜色放 适当的位置 ，做出最佳安排。色彩是通过人的印象 或者联想来产生习理上的影响 ，而配色的作用就是通过改变空间的舒适程度和环境气氛来满足用户 的各方面的要求。因此配色的重要性不言而喻。 6.0/6.1的配色方案上 ，由于是版本的优化 ，因此 主视觉色彩上依然秉承了乐视整体V I体系的 红色。那么问题来了 ，原有的红色由于是集团V I ，所以色感偏沉稳 ，而我们现 的目标用户是相对 年轻的群体 ，因此我们 原有红色色值的基础上进行了微调 ， RGB的调整中提高了明黄的成份 ， 让原有偏暗的红色用非物理的手法提高明度 ，从而使整体显得更加年轻、有活力 ，同时增加了用户 对红色感知的更多可能性。 辅助色选用了蓝灰色 （# 5895ED