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

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

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

如今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 原创发布于人人都是产品经理 ,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30038/

(0)
CatherineCatherine
上一篇 2017-05-26 18:53
下一篇 2017-05-26 20:42

相关推荐

  • 2019年交互设计方向考研辅导招生简章

    -----点“蓝 色 字 体”击----------关注我们-------获取最新信息-班型介绍:开设课程:交互设计长期周末VIP班(线下课程)交互设计长期周末VIP班(线上课程)上课时间:2018年3月中旬——2019年1月初(每周周末4课时)课时       :320课时(每课时1小时)招生人数:线下课程10人,线上课程10人(超数不招生)课程安排:一.课程总框架:Part 1▪交互知识学习Part 2▪考研专业课学习Part 3▪...

    2018-03-27
  • 移动端搜索功能设计:3个阶段解析搜索流程设计要点

    这篇文章笔者想和大家聊一聊有关搜索功能的设计,搜索功能是每个内容型APP的核心,它的易用性决定了用户是否能从APP里快速找到自己想找的内容,那么决定搜索体验好坏的关键点又是什么呢?这里我总结了两点,“操作的易用性”和“结果的准确性”。看似简单的两点却有很多的学问,笔者把搜索的交互流程划分成三个关键阶段,“搜索前、搜索中及搜索后”,接下来将从这三个阶段逐一分析整个搜索流程中的相关设计。

    2017-05-11
  • 关于用户体验

    产品不被喜欢的原因是漏了什么?答案是用户体验。如果你是一个产品经理,是否有深刻思考过这个问题呢?有人会说思考过,但似乎没什么用,产品还是不被喜欢。那是用户体验不重要,还是我们思考的不够呢?答案是后者。首先我们提出本篇要解决的核心问题:如何让产品被喜欢?(说明一下,这个产品可以是某种实物性的产品,也可以是一种服务性的产品。)这个问题提出后,很多人的脑海中会蹦出质量好、外观精致、用的舒服、服务周到等,但想到这些的人,一定还会有一个感受,就是...

    2018-04-09
  • Fitbit:一份用户体验案例研究

    当谈论到锻炼时,这个世界上有三类人:每时每刻都在健身的健康达人;那些一天中全部锻炼内容就是从前门走到车里,每天在沙发看电视的人们;在这两者之间,想变的健康强壮但缺少一些动力去健身房的人(又称在屁股上踢一脚才行动的人)。 我,和我知道的大多数人一样,都是第三种类型的人。我们被称为是

    微信热点 2018-03-31
  • 四维世界的交互演进:交互的演进历史

    你有没有想过,这个世界其实并不是你看的那样?你有没有想过,其实唯心主义和唯物主义的区分,从本质上看其实还是唯心主义?今天咱们简单谈谈交互的演进历史。

    2017-05-28
  • 用户的体验属性

    人的记忆、欢乐、痛苦、友情、亲情和叛逆等,是每个人所共有的。这些不同的属性,反映着人们各种不同的体验属性。当下,我们每天都在说“用户体验”、“以人为中心”,但我们仔细想想便不难发现,几乎所有的产品及服务,都是在围绕着用户便利性这一单一属性的,人有那么多的体验属性,而我们却几乎没有去挖掘,何谈是以用户体验为中心呢?服务创新的一个思路,不是在纵向上,提高便利性或使用性等单一维度的体验属性而是如何在横向上,调动和反应出人的其他不同维度的体验属...

    2018-04-26
  • Axure实践第二讲

    Axure实践第二讲---如何有效的在工作中引入原型·页面枝干·添枝加叶·画龙点睛在近期的产品需求开发过程中,我们产品小组正式且大量的将原型开发工作投入常规的需求分析工作中,原型的开发对于我们在产品初期的调研、构建都提供了很好的指导。接下来就让本文带你领略:产品与原型的一节课。一、功能结构图(页面枝干)1.切入点是功能结构图(自顶向下)从大的方向上去划分几个大的模块类型,适用于业务功能较为单一且业务逻辑处理流程较为简单,如在做市商系统构...

    2018-03-16
  • 3秒即灭,APP引导页如何闪亮

    大家原谅我健忘的大脑,一直想写App经验总结,却不知道从何说起,真是对不起群众,对不起组织,对不起俺的一个好肾。这也不能完全怪俺,小学的时候语文就没考过100分,害怕写的浅了不疼不痒,浪费看官们 陪女朋友的…

    2014-12-05
  • Axure RP属于产品经理快速原型设计工具(一:简述)

    一、介绍Axure RP是一个专业的快速原型设计工具。Axure(发音:Ack-sure),代表美国Axure公司;RP则是Rapid Prototyping(快速原型)的缩写。Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效...

    2018-03-10
  • 马化腾:用户体验,比一切事情都大

    企业快速成长中,第一个大问题就是战略。/演讲|马化腾来源|笔记侠(ID:Notesman)我非常希望也很高兴在这个平等氛围中,以创业者的身份跟大家进行这样一场交流。在座的创业者,很多拿到A轮、B轮,有些在走向C轮。企业快速成长中,第一个大问题就是战略。创业最难的就是选准创业的点,你会面对很多机会、很多诱惑,需要不断做出选择。自腾讯初创开始的六七年,是我们变化最快的时期,我想把这个时期包括战略选择等方面的经验跟大家分享。一、关注痛点你出来...

    2018-02-16