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

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

相关推荐

  • 色彩如何应用在交互设计中?

    对于交互设计师来说,通常交互原型都做为黑白稿。为什么要做黑白稿呢?那是因为在前期交互设计中,交互设计师为了更专注于产品的流程、跳转,避免前期投入更多的精力在UI效果制作方面。对于很多小公司或小团队来说,通常只有一个设计师或者设计资源很少,设计师拿到需求后,直接就出高保真效果图了(当然,前期也经过了讨论,在纸上也画了交互的流程了)。对于时间不充分的时候来说,这样是会节约一部分时间。但是,这样经常会带来一个弊端:交互考虑不充分。为什么会这么...

    2018-04-26
  • 用户体验的创新设计和研究

    2018年全国两会期间,全国政协委员叶友达教授向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》,建议加大对基于用户体验的设计创新的宣传力度,建立全国或区域用户体验研究机构,促进科技创新成果快速、高效落地。长期以来,用户体验的“以用户为中心设计”(User-Centered Design, UCD)的理念一直冲击着传统的“以技术驱动设计”的理念。有研究表明,美国两个世纪以来著名的53位创新者的创新过程,从电话到互...

    微信热点 2018-03-27
  • APPLE WATCH 中文手册:通知--有关通知的一些要点

    如果您的 iOS 应用支持本地或远程通知,Apple Watch 也会同步显示这些通知。当某个应用的本地或远程通知抵达用户的 iPhone 后,iOS 将会自行判断显示该通知的设备(iPhone 还是 Apple Watch)。对于发送到 Apple Wa…

    2015-06-15
  • 设计法则 | 实例解析「交互设计七大定律」在设计中的应用(下篇)

    资深交互小菜鸟,交流可加微信:Mandy8888-上篇内容笔者介绍了「交互设计七大定律」的前五个,接下来笔者将剩下两个定律为大家做个实例分析~~《设计法则 | 实例解析「交互设计七大定律」在设计中的应用(上篇)》六、复杂性守恒定律/泰思勒定律(Tesler’s Law )1、复杂度守恒定律/泰思勒定律(Tesler’s Law )简介复杂度守恒定律(Law of conservation of complexity)由Larry Tes...

    2018-01-30
  • 应用中的游戏化设计

    作者:_Ammy   游戏借着其互动性、反馈性、挑战性、快速成长性等特点,拥有着让玩家长期专注于其中的神奇力量。而若将游戏的这些特点引入到一般的产品设计上,也可能会产生意想不到的效果,这就是游戏化。游戏化的…

    交互专题 2017-08-07
  • 这些走心的用户体验应该多学学

    不仅仅局限于互联网的设计,可能还有服务,线下的设计等。先问一下自己,到底什么是好的用户体验?我认为有以下三点:第一,无需思考,符合本能的设计。(反例,各种需要用户大量动脑的设计)第二,不打扰用户,让用户沉浸的设计。(反例,各种不必要的弹窗提示)第三,温暖的设计,细节打动人心,超出用户的心理预期。(反例,各种冰冷的缺省页面)1.网易云音乐分享提示最近发现了网易云音乐的一个小彩蛋,那就是在播放页当你点了某一首音乐喜欢后,会给你跳出来一个可爱...

    2018-02-01
  • 双管齐下:同时设计 iOS 和 Android

    不管你是在家,在公司,还是在设计师工作室工作,互联网企业都会找你去给他们设计 App。为了满足所有顾客的需要,这些企业通常需要同时开发运行在 Android 和 iOS 设备上的 App。 在理想的情况下,我们希望能花上好…

    2016-01-06
  • 交互设计中,如何增加趣味性,提升操作愉悦度?

    功能、实用性,这些需要很强逻辑性的事物很难和情感产生关联,并不是指这些不重要,它们很重要,它们是基础,但缺少了情感的作用,很难产生一些东西,像:快乐、愉悦、悲伤、美... 花、大海、春天、小屋... 这些都…

    交互设计 2015-04-04
  • 三款备孕育儿类APP简单分析 (多图慎入)

    2015年,母婴类APP可以说是百花齐放,各种各样的产品竞争激烈,但是还没有出现寡头,窗口期依然还在。刚好下午在准备一家母婴类公司的招聘,简单体验了几款备孕育儿类产品,和大家一起分享一下。 产品简介 体验的产…

    2016-03-06