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

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

相关推荐

  • [译]UX设计之商品详情页

    现如今,30%的在线购物行为发生在手机端上。 对于在线购物一事,所有用户都期望能够得到快速、流畅的体验。因此,在购物过程的每一个阶段,即使付之最小的努力都有可能利于用户的整个体验过程(我们也应该以利于用…

    2016-06-30
  • UED内功心法口诀篇

    本文约5000字,阅读需15分钟本篇思想可能给你带来的价值何为UED?在产品定义阶段,它是一种关乎如何解决问题的思维模式,在产品迭代期,它又是一种关乎如何思辨方案真实体验水平的科学验证。更具体一点,到底是什么样的思维模式和科学验证,近一年的时间我们通过大量案例逐渐将其解构出来,并将导图成“UED内功心法”,期望能够帮助交互设计师在具体实操过程中有的放矢,更有针对性地发挥设计的价值。心法口诀第一式:目标用户锁定招式1:找出契合业务的目标族...

    2018-02-02
  • 聊聊为应用创建「一致性设计」的几个原则

    我们在创造某些体验后,需要一些理由给它们做出定义。伟大的设计是无形的,因为他们具有一致性,并让人熟悉。

    2017-05-24
  • Axure手机多屏幕滑动原型案例下载

    网络中有价值的Axure原型案例不多,给客户做的原型或者自己公司内部的几乎没有人愿意共享出来,这很正常。建议刚刚学习Axure的小伙伴儿们不要到找人索要原型,换位思考一下,你付出劳动制作好的成品也不会随意送给…

    2015-01-04
  • 如何才能读懂甲方给出的设计需求?

    转到交互岗已经有一阵子了。原来在做产品的几个月里没少和技术、设计进行沟通,每当自己把意思想法传达下去的时候,反馈回来的结果基本都要进行进一 步的修改,这种返工和修改在产品快速迭代的过程中很浪费时间。当时自己没有觉得表达有问题,已经把需求的目的结果都表达清楚了。可能是自己没写过代码、没 做过设计所以在一些专业的术语的表达上,方案实现方式的选择上存在偏差,导致技术、设计没有完全按照自己设想的预期做出结果。

    2017-05-24
  • Welcome to the Gutenberg Editor

    The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around…

    2023-03-03
  • SKETCH Hong Kong 2016 作品展

    SKETCH Hong Kong将于2016年7月1至10日在太古广场2层(Kelly & Walsh书店附近)、及7月15至30日在3812画廊(香港西营盘皇后大道西118号地下)举办SKETCH Hong Kong 2016作品展,展览由Miele全力支持,展出超过50件出自本地业余速写画家手笔速写作品。李唯芳  湾仔4色  钢笔铅笔水彩纸本参加者运用多样的绘画工具,从多角度描绘了香港著名的历史性地标,记录了香港独特的文化生活方式。...

    2018-04-16
  • “来电”性格测试的交互设计历程

    来电,是一个主打免费通话的纯语音应用。从14年7月份低调发布Lightalk1.1后,历经3个版本,终于在1.4版更名为来电并投入推广了。除了运用一些传统的渠道推广,来电也尝试在应用内嵌一个提供分享的入口,鼓励用户做…

    交互设计 2015-04-10
  • 2016年网页设计领域11个流行趋势预测

    来自 Medium 的设计师在这篇文章中预测了2016年最值得关注的设计趋势 ,而老牌设计博客Designmodo 对此也有自己的看法。新的技术和新的设计趋势 会在2016年逐一涌现,但是总体上来说,它依然会沿着2015的大趋势来逐步演变。可以预见到的是,2016年会有更多的网站使用视频背景,更多基于Material Design 风格的界面设计,幻灯片式的界面切换也会继续火热下去。

    2017-05-29
  • 交互设计快速检查清单 Interaction Design Quick Checklist

    #交互学堂#交互设计快速检查清单 Interaction Design Quick Checklist [one_half_col] 架构和导航Architecture and navigation Note 􀂅 是否采用了用户熟悉或容易理解的结构? 􀂅 是否能识别当前在网站中的位置? 􀂅 …

    2016-11-09