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

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

相关推荐

  • 全新用户体验+500多项升级功能,IFS Applications 10正式发布!

    ↑关注IFS软件获取最新资讯  ↑IFS Applications 10令人惊叹的视觉效果和全新的互动模式让用户在提高工作效率的同时更喜欢通过这款系统来办公创新的新功能 —— 包括AI 聊天机器人、增强的以服务为中心的功能以及所有解决方案领域的数百项功能优化和升级IFS始终尊重客户的选择:IFS Applications 10同时支持云端和本地部署全球领先的企业级应用软件提供商IFS(艾菲诗软件)宣布,全新版本的企业应用系统套件IFS ...

    2018-05-04
  • 用户体验:网页设计中错误提示的五种设计方法

    每个系统软件在运行的过程中都会出错,可能是用户操作造成的也可能是系统错误。基于这两种情况,如何正确的提示错误信息就显得尤为重要,它直接决定了用户体验的好与坏。一个好的错误提示必备的3条重要法则:清晰地文本提示语放置在正确的位置良好的视觉设计清晰的文本信息1. 错误提示信息应该简明易懂提示信息应该明确的表明发生了什么错误、发生的原因以及解决方法。将你的错误提示信息看作是一次对话,跟用户说人话。确保你的文案是礼貌性的、易于理解的、友好的并且...

    2018-04-07
  • 教你掌握27种图层混合模式的用法

    嗯,让我们从最最基础的说起——像素。你就把他当成一个个五颜六色的小色块.这些小色块们都有一个特定的标记值,比如,RGB值,CMYK值了。当然透明色块也是像素,不过值是零罢了。我们的计算机就是靠识别这些数值来认识颜色的。

    2017-06-05
  • 如何保持交互与视觉的协调性

    转自微信号: 作者:小云子  我是UE / woshiue 我不想贬低文字的重要性,但也不想忽视视觉。两者是同等重要的交互设计元素。文字就是交互,但那些视觉元素(比如图标、菜单、图像等)才是用户实际上操作的东西。虽然…

    2015-03-30
  • 关于文档的价值

    作者:杨蓉(资深用研专家,现任极客网运营总监)   高歌在产品经理的培训中,提到了研究分析、产品定义和交互设计,展示了不同格式的文档,几个来自创业公司的童鞋提到了老板不鼓励用文档的问题。让我想起来几个去…

    交互专题 2017-08-07
  • 王者荣耀 安卓用户体验服礼包第二波 疯狂放送中

    王者荣耀武则天夺宝多少必出?在游戏中武则天是通过夺宝才能获得的,属于稀有英雄。不过武则天也确实强大,今天小编就为大家带来武则天的解析攻略,告诉大家武则天怎么才能获得,武则天的实战技巧有哪些,快一起来看看吧!武则天详解攻略:1、获取途径:抽奖这个是靠运气,但是抽取次数越多中奖概率会越大,根据土豪玩家反映,夺宝100次左右能获得英雄,100次到200次获得稀有英雄概率很大,所以一般在200次以内就可以抽到武则天。2、技能介绍:【女帝辉光】武...

    2018-04-09
  • 网页的交互设计and界面与用户体验案例:Nike Tech Pack in store app

    第一段是动效的视频,请注意观看交互效果与配色设计。 图片都可以点击放大,更清楚哦。 原文地址:https://www.behance.net/gallery/26097251/Nike-Tech-Pack-in-store-app 多个作者: Shakir Dzheyranov / Detail …

    2016-01-10
  • 从一个弹窗的关闭按钮引发的讨论和思考

    作者:李逍遥(UXRen翻译组管理员,UI设计师)   弹窗的右上角有个关闭按钮,功能好像跟下面的取消确定差不多,都是操作完成后弹窗关闭。咋的一看好像很多余,是不是多余呢,因为设计规范的时候碰巧遇到这个问题。…

    交互专题 2023-03-03
  • 交互设计申请竞争白热化,你该如何“杀出重围”?

    只要你想改变自己汉艺陪你死磕到底对于学习交互设计的同学来说,多数同学的作品集项目最终效果是这样的:这样的一个网页,几个app界面的最终效果图在各大设计网站,更是一抓一大把,导致很多同学对于交互设计的认知更多的停留在网页设计或者app设计上,浏览越多案例,思维越被局限。如果一个交互作品集中四五个项目全是这样的“大众脸”,想要从全球大量相似的“竞品”中脱颖而出,吸引到考官注意力,可以说困难重重。本期文章,为了让大家的作品集能够在全球竞争中脱...

    2018-02-03
  • FAB实践分析:设计中的悬浮按钮

    如果要在应用程序中使用FAB,则必须仔细考虑应用程序的设计,并将用户的可能操作归结为一个最突出的功能。正确使用FAB,最终会给用户带来惊人的帮助。为了促进操作,不要一味使用FAB!用户必须记住它的含义。FAB可以改善屏幕之间的转换

    2017-05-01