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

如今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

相关推荐

  • 用户体验要素,商品介绍,它们两竟发生了这种关系!

    有人去电影院是为了看电影,而有些人……上次我们讲到,网络课程的课程介绍的工作流程问题。广泛来说可以是网购中任何商品或服务的介绍的撰写或制作过程,这个工作流程和用户体验要素十分相似 ▼这一次我们来探讨用户体验要素具体对商品介绍的指导作用,先来看看一下详细的用户体验要素 ▼关于上图的模型,在《用户体验要素》一书中有详细的阐述,这里只讲与本文内容有关的部分。先来看到这个模型的右上方,有功能型和信息型两种分类。基于我当时的工作任务是商品介绍,那...

    2018-03-20
  • 最浓缩的概念:交互是什么?交互的本质及如何理解

    在使用一种产品或东西的整体过程。而无论这个使用行为是有无目的导向。本身这个过程,即是交互的本质。而任何一个交互的过程中必定存在交互对相,及交互的媒介。在这里,我先声明一下哦。以下的分析过程可不那么容易跟得上,思维与对生活细节观察力不够的,请直接跳过。但,以下的内容是当年我在新加坡修用户体验时,在交互过程一环中的必修环节。做好心理准备,那就开始看吧。题外话:而如果想改进这一环节,那么在提升交互环节的效率方式手段上,也无非只能是,1,提升硬件能力来加速。2,减少多余软件操作环节。3,有无改变硬软件间关系的其它模式?题外话:而如果想改进这一环节,那么在提升交互环节的效率方式手段上,也无非只能是,1,提升硬件能力来加速。2,减少多余渠道操作环节,如展开一个个目录,或通过其它模式打开。3,提升系统本身效率。产品设计的体验层级关系:
    核心层:产品本质体验层。---这产品是为达成什么用户目的而生的。
    中间层:产品使用过程中的体验层。---这就是我们所有产品中的交互层。
    最表层:产品的视觉体验层。---这部分就是UI〜我们也知道约炮软件其实并没有什么用,但为什么能相对留存久呢?也就是在于用户在心理层上有侥幸心理。同时加上其在媒体上潜意默化的某某成功的宣传。所以,让用户的心理否定延后。所以,相对来说,知道没什么用,但还是久留一下看看。但大多有头脑的。基本上也在一段时间后最终放弃。

    2017-05-25
  • [梁宁·产品思维30讲] 02 用户体验与结婚教练

    案例:用户体验与结婚教练来自梦马旅游MENGMATOURISM00:0018:30用产品经理的视角来看人今天我想讲一个结婚教练的故事。她是我的一个朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。这个结婚教练以前是干什么的呢?她以前是一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何观...

    2018-04-06
  • 【用户体验.春节特辑】客从何处来(总第266期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第266期我的家族,还算是一个比较大的家族。从我记事起,关于我的家族,关于那些已经逝去的,离我远去的那些家人的故事与人生经历,都是经由一个姑姑讲述给我听的。每逢节假日,尤其是寒暑假那些漫长的假期里,尚还年幼的我,都会安静地坐在她的身旁,在她的娓娓道来中,去遥想那些过往,那过往中我的那些平凡也却有些不凡的家人。我的祖辈的...

    2018-02-16
  • [交互留学]英国HCI方向交互设计院校推荐

    之前很多设计相关专业的小伙伴问马克君,是否能够申请HCI方向的交互设计专业,马克君给出的答案是肯定可以,但是你在准备时需要比申请IxD方向的交互要更偏重提升自己的计算机方向的能力。对于HCI和IxD两个交互方向…

    2017-08-02
  • Axure RP 8.0 安装教程

    Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。•可以在公众号后台回复『042』或『Axure RP』获取下载链接。安装步骤:❶下载并解压安装包。❷双击安装程序。❸同意,并下一步。❹选择安装路径,下一步。❺下一步。❻取消勾选,点击Finish结...

    2018-03-20
  • 减少认知过载:塑造更好的用户体验

    设计不是美工,想成为优秀的设计师怎么能不懂点心理学?文章从认知心理学角度下手,分析了在交互设计过程中时常会犯得几种错误,一些平时稀松见惯的设计方式也都在这儿找到了比较理性的依据。设计是门科学,我们需要掌握一些方法论,以不变应万变。

    2017-05-11
  • 【笔记干货】UCAN2017用户体验设计论坛

    作者: 阮小阮     忙忙碌碌一天这么晚还没睡是因为我在给大家编辑UCAN的干货哇~ 虽然我平常很懒,可我们真的只推干货哇~ 希望大家都能获取一些知识一些思考 互联网这么快,拥有平衡的能力真的很重要~!   董本…

    交互专题 2017-08-07
  • 以开发的视角做设计:开发眼中的设计稿长什么样?

    面对完全不一样的媒介,设计师们会有不一样的目标,也会使用不一样的手法进行设计。 比如说一名 UI 设计师与平面设计师的最大区别,大概就是在于 UI 设计师能够以开发的视角来做设计。

    2017-05-01
  • 那些经典交互设计流程与方法,真的足够好吗?

    在传统的交互设计 流程中,比较看重从设计目标建立到最终方案推导过程的逻辑性、终端用户体验与用户心理认知模型的匹配性等,相关的 UCD 设计方法 很多,而基本框架则是大同小异。在规模较大的公司与设计团队里,作为交互设计 师的我们也习惯了运用这种按部就班、环环紧扣的推导方式,帮助自己有理有据地应对各种「为什么这么做」的挑战。

    2017-05-25