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

如今app的更新迭代速度很快，因此无论在视觉审美还是交互功能上都有新的趋势和风格。乐视视频原有的ui设计风格已经无法跟上目标客户群的审美变化，且在功能上较难满足用户预期，因此需要在整体视觉和产品功能上进行相应的美化和完善，使我们的视频产品无论从视觉还是功能上都能够在给予老用户新鲜感的同时吸引更多的目标用户。

设计语言

新的版本着重点在于沉浸式设计，意在让用户能够更加沉浸于内容本身，在给予用户使用流畅感和视觉美观感的同时，有效提高用户对于视频内容的关注。

背景分析

1.用户人群分析

90后人群，年轻有活力，享受生活，除了注重性价比、品质之外，更加注重颜值，强调好玩、好看，审美上喜欢简洁、有设计感，又有趣的东西。

往往忠诚度较低，强调个性，喜欢张扬个性又能沉下心来，矛盾感强，需要更加新颖独特又符合当前潮流的风格抓住用户群体。

2.使用场景分析

不同场景下如在地铁上观看离线视频，在家里连接Wi-Fi追剧等使用的APP，针对其特定因素做出的界面需在任何环境下都能充分展示其交互和功能。

界面设计（UI）

1.界面模块（卡片式设计）

卡片式的布局能够把信息、图像、文本、按钮、链接等一系列数据整合到各种矩形方块中。这些模块可以分层或移动，并都倾向于调整到全屏幕尺寸。如果你把它滑动到手机的一侧，它就会和其它的卡片堆叠在一起。

卡片能够合理利用空间，清爽的列出全部信息。乐视是视频公司里第一个倡导卡片设计的，从2012年的乐视PC改版，到TV端、移动端的升级，都完美符合“2015年和2016年手机设计流行趋势”——最好的设计思路是把每个卡片作为一个独立整体来设计。

而卡片式设计能够成为流行趋势的一个最重要的原因就是——卡片式设计能够完美利用手机屏幕的空间，不但界面清爽，内容也一目了然。在大多数的交互场景下，卡片式设计与移动应用程序简直是绝配。而矩形的设计也能够完美体现出UI设计的简洁美。

2.界面细节

UX设计师Erik D. Kennedy写了一篇非常棒的文章（一共分为两部），这篇文章打破了许多传统的设计观念。以下是我们认为在这篇文章中最适用于卡片式设计的几条规则：

了解光线的物理性质：设计师应仔细考虑如何使用阴影和渐变，使元素看起来更加真实。这对于卡片式设计而言是非常重要的，因为它涉及到了卡片的“真实感”。如果阴影投在各个角落边上的话，这种卡片式的体验可能就会被破坏掉。

确保UI在黑白两色下能够正常使用：设计的第一步就是要抛弃颜色。这将能够让你明确地把设计重点放在实用性和内容上。根据Kennedy的说法，设计师应该在设计的最后一步再添加颜色，颜色对UI设计只是起到点缀的作用。

不要吝啬使用留白：请先给你的卡片一些空白的空间，之后再去慢慢缩减这部分空白。正如我们在“网页设计中留白的禅学”中所描述的那样，“负空间”是帮助你“组织和分离各种必要与不必要元素”的良师益友。

掌握分层文字的艺术：这可能并不是那么容易掌握的。一定要使用一个明确的、清晰的图像作为背景。为了确保文本看起来效果更好一些，你可以使用一个黑暗的色调来进行叠加——把文字放进一个“盒子”里，或者是尝试虚化背景图。

知道如何创建与排版对比：无论是犹豫用大卡片还是小卡片，或是纠结用更多的文字还是更少的文字进行组合，其实最重要的是要把这些元素有机的配合起来，达到吸引用户注意这一最终目标。其实，在卡片式设计上简单的排版往往效果最好。通过给卡片加以美化润色，来使得用户对卡片更加熟悉，而且这种方式也并不失创意。例如，把阴影元素加进卡片中的话就会使用户感到更加亲切自然。

配色：所谓配色，简而言之是将适当的颜色放在适当的位置，做出最佳安排。色彩是通过人的印象或者联想来产生习理上的影响，而配色的作用就是通过改变空间的舒适程度和环境气氛来满足用户的各方面的要求。因此配色的重要性不言而喻。

在6.0/6.1的配色方案上，由于是版本的优化，因此在主视觉色彩上依然秉承了乐视整体VI体系的红色。那么问题来了，原有的红色由于是集团VI，所以色感偏沉稳，而我们现在的目标用户是相对年轻的群体，因此我们在原有红色色值的基础上进行了微调，在RGB的调整中提高了明黄的成份，让原有偏暗的红色用非物理的手法提高明度，从而使整体显得更加年轻、有活力，同时增加了用户对红色感知的更多可能性。

辅助色选用了蓝灰色（# 5895ED），作为冷色调的蓝色能够给人冷静、平和等外在感知，从而附加上科技、专业等内在联想。用灰色降低蓝色的明度能够使色调更加的沉稳、大气，突出专业的感觉。另一方面，它又能和另一辅助色——橙色在色相上形成对比，从而使整体的色彩搭配极具冲击力和视觉张力。同时，蓝灰色与主色调红色可以形成很好的搭配，从而给人年轻、青春活力同时又与叛逆碰撞的丰富联想。

另一辅助色橙色（# EC8E1F）的选用除了上述所说的形成对比色之外，其无论在白色或黑色的底色上都能够清楚显示。这样即保证了色彩上的传承和一致性，又能够在视觉上有亮点。

总结­

总是有一些刚入行的同学问我，我色感不行，我真不知道这个应该怎么做！其实，做好一个款app的设计并不难。设计并不是纯粹的感官思维，相反设计更佳偏向于理性的传达感性思维！

引用新像素设计的话，设计师和理发师其实有点像，理发师基本分为三种：一种是只会搞基础发型的，比如寸头、中规中矩的长发、老太太卷头等；一种是只会剪流行发型的（这种发型师还很容易 摇身一变成为造型大师，告诉你你应该改变，应该剪目前最流行的某款发型，但实际上可能是他只擅长这款发型）；还有一种是最可遇不可求的，他根据你的脸型、 性格等，用最简单的手法量身设计发型，让顾客的气质度立刻得到提升。

这次乐视视频的整体视觉体验提升，除了设计师的基本修养（色彩、图像、行业动向等），其实，更重要的，还有和产品运营等多个环节的充分沟通。

做为已经较成熟的一款视频应用的设计师，我们更要懂用户、懂产品、懂运营，要对工作的上下游环节熟悉。

要知道，设计远远不止视觉设计那么简单，每一次设计都是对一个行业的知识整合与管理，而设计师也应该在每一次项目完成后进行必要的复盘。因为设计师之间的差距其实更多的就是每个人阅历与履历之间的差距。 只有亲身经历过才能将更好的作品呈现给大家。

最后，请记住，视觉设计远不止好看这么简单。

作者：DavRann，来自乐视用户体验中心（LeUX）。这是一个专注设计、交互、用户研究的交流平台，探索互联网最前沿UX案例，从实战出发解读行业趋势。微信ID：LetvUX

本文由@DavRann 原创发布于产品经理 ，未经许可，禁止转载。

关键字：用户体验, 卡片, 设计, 用户

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！