IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

商业模式驱动视频互动设计:手淘的视频就该这么玩儿

Catherine • 2017-05-16 20:28 • 交互设计

当商业目标和设计碰撞在一起之后,商业模式使设计的目标更明确,而设计能为商业模式带来更好的体验。

文章目录[隐藏]

  • 举个例子:商业模式是如何影响设计的
  • 手机淘宝平台上的视频的特点
  • 视频互动组件的设计
    • 视觉层次
    • 视频控件
    • 互动玩法探索
  • 场景化的播放体验,让消费者边看边买
    • 吸顶播放
    • 小窗播放
    • 原地自动播放 
    • 详情头图放播放

当商业目标和设计碰撞在一起之后,商业模式使设计的目标更明确,而设计能为商业模式带来更好的体验。

商业模式驱动视频互动设计:手淘的视频就该这么玩儿

为什么说现在是一个内容为王的时代?丰富的内容为App带来了流量,优秀的内容为App建立起稳定活跃的用户群。当建立起稳定健康的用户生态之后,大大加强了App的生存和变现的能力,追逐内容就是一个纯粹的商业行为。

当内容成为商业利益的驱动时,视觉设计者就要考虑如何突出内容的展示,以至于当下主流的界面设计趋势中,UI对视觉焦点的干扰越来越小,简约的后扁平化设计大行其道。而商业模式也通过用户的使用反馈不断进化。

商业模式驱动视频互动设计:手淘的视频就该这么玩儿

视频内容相较于图片和文字对用户吸引的优势更大,各类App也增加了各自的视频模块,但这些视频模块的设计受到各自商业模式的影响呈现不同的设计内容。

举个例子:商业模式是如何影响设计的

以B站的视频弹幕为例,B站的盈利模式主要依靠这几个方面:视频广告、游戏运营、周边、Live、会员充值,说白了为了赚钱需要大量的流量在网站中流转。而弹幕的存在让B站在吸引流量的大战中独树一帜。

普通的视频产品希望用户能完整且顺利的观看视频,用户如果需要传播和交流视频内容需要到别的平台。而在视频中加入的弹幕使用户产生能在视频中进行互动的感觉。一部分用户通过不断的观看视频和弹幕内容,产生了更多更好的弹幕信息,增加了视频内容的丰富度。有趣的弹幕提升了视频的用户回流率和黏度,带来了几倍于普通视屏的流量收益。并通过附加的会员权益和周边功能,为平台带来实实在在的变现能力。

商业模式驱动视频互动设计:手淘的视频就该这么玩儿

弹幕的商业模式影响了用户的使用习惯,有趣的弹幕内容增加了视频内容的丰富度,并使用户在观看视频时能感觉到是和很多人一起在看,当群体感增加时,带来了互动的乐趣。

如果只是站在视觉设计上进行考虑,弹幕这样的视觉元素简直是反人类的产物。杂乱、无序,过分遮挡正常的视频内容,出现的方式极不统一,毫无美感可言。但是用户的需求进而影响了视觉设计的选择:UI从围绕视频播放而设计,变成了围绕弹幕流转而设计。设计上反而增强了字幕的视觉强度,并用颜色和出现方式来帮助用户个性化定制更有特色的内容。功能上用户也可以自行控制弹幕的数量和展现形式,为互动和观看做出平衡。

手机淘宝平台上的视频的特点

手淘平台上的视频产品的商业模式也有其特殊性。手淘中视频主要目的是将平台中的流量分发给商家,并且提高商家的流量转化。就是让用户在手淘中看到商家发布的视频之后能够快速的进入店铺和宝贝,通过在店铺和宝贝详情中视频的浏览帮助消费者决策购买。消费者则希望通过真实货品的视频展示、使用教程,来了解当前的商品,来辨别商品的优劣。

为了平衡商家和消费者这两类用户对手淘视频的需求,我们主要围绕两个方面的问题来做设计:

商业模式驱动视频互动设计:手淘的视频就该这么玩儿

商业模式驱动视频互动设计:手淘的视频就该这么玩儿

视频互动组件的设计

我们发现当商品详情中带有商家的介绍视频时,成交率都有显著的提升。而在详情页观看视频和完整观看视频的用户分别超过半数和三成。我们要帮助商家提高视频对这部分消费者的影响,进而提高转化率。结合手机淘宝电商平台的特点通过在视频中透出商品介绍,发放红包和店铺优惠券,这样的新型的互动组件来达到这一目的。在这个互动产品中视觉设计是怎么思考的呢?

视觉层次

视频控件需要控制视频进程,在功能层级中是最靠前的,而互动组件在视觉层级中则是最突出的。红包和优惠券为了吸引消费者去点击领取,使用了纯度和明度比较高的颜色,并且增加了微弱的投影效果,使这些元素能更加明显并且在视觉层面上与视频内容层级分开。

商业模式驱动视频互动设计:手淘的视频就该这么玩儿

在店铺、微淘等集合页中,商家经常使用包含多个商品信息的视频。当某个商品出现时,商家可以设置一个包含商品图片,名称和价格的商品卡片告知消费者。

商品小卡在设计时要考虑到这几点:

  • 将商品基础信息和加购功能呈现出来,并且不过多遮挡视频的内容。
  • 以商品信息呈现为视觉目的,减少其他元素对信息的干扰。
  • 动画形式出现,视觉感受较强。

在竖屏下设计成横条卡片的样式,出现时使用投影使下方信息层次分开。在横屏模式下,视屏内容占满整个手机屏幕,卡片在右侧互动区域出现,风格延续竖屏的样式。

商业模式驱动视频互动设计:手淘的视频就该这么玩儿

视频控件

视频的控件也为内容和互动组件而再设计。原先视频模块的设计还是这个样子:视频控件和信息放置在视频上下的黑色遮罩的容器中。这样的设计源于PC时代,被移植到移动端之后发现控件的设计干扰了视频本身的内容。原设计控件视觉上所占面积大,颜色抢眼,对视频浏览的干扰很大,并且与互动组件的组合效果不佳。与我们帮助视频区域商业利益最大化的设计目的相悖。

商业模式驱动视频互动设计:手淘的视频就该这么玩儿

当用户需要控制视频进度时,自主点击使控件出现时,其视觉焦点会将聚焦在当前可操作的区域。若用户不进行操作,并关注视频内容时,控件需要快速的从视觉焦点中退出。依据这样的视觉特性的优化效果:

A、控件的容器放弃实心遮罩,改用渐变遮罩并减小20%的遮罩区域的高度,减弱遮罩的视觉冲击力。当控件的边界减弱时,与互动组件的组合在视觉上更和谐。

B、icon变的更纤细,icon的大小和与其他元素间的距离保持能保证让用户点击比较舒服。原来icon的设计显得过于尖锐缺少细节,于是增加了与手淘icon风格一致的圆角。

C、时间显示不是进度条中的主要功能,适当缩小时间信息的大小,增加可操作区域的范围。

商业模式驱动视频互动设计:手淘的视频就该这么玩儿

互动玩法探索

之前我们一直强调手淘视频模块饿商业目标是让商家发布的视频内容能提高消费者的转化率,并通过一些商家发放的卡券,使消费者能获得一些折扣和奖励。我们也在视频中为商家提供一些玩法来提升互动的可玩性,鼓励消费者能够完整的观看视频内容。

集标玩法

消费者通过在观看视频时收集商家的标识碎片,通过收集的结果来接受商家发放的卡券或抽奖。

设计上我们要注重游戏的延续性体验,在一段视频中只收集拼图,很容易让用户疏漏,我们的想法是能让用户感知到视屏中碎片的数量和收集的状态,在右侧设计的拼图收集状态的小icon,在不影响用户观看体验的同时,一直在提示用户视频中集标玩法的存在。

而这个游戏对于商家的利益推动在于通过游戏透出商家上传的标识,通过在微淘,活动页面的投放来增加商家品牌的曝光度。商家品牌logo的通过游戏中的碎片,卡券来透出。中因此如果消费者遗漏了中间的拼图时通过拉动进度条回退能回收遗漏的拼图,使得游戏成功率、商家品牌的透出率大幅度的提高。

红包、优惠券的样式配合拼图拼合的动画,也在样式上设计的比较明显。在保证视频播放的前提下,游戏中奖结果被设计成直接透出不需要用户再手动去领取,降低用户的互动成本。

商业模式驱动视频互动设计:手淘的视频就该这么玩儿

互动组件的设计细节

A、视频区域的可利用空间非常有限,在设计初期就考虑将信息分区。

商业模式驱动视频互动设计:手淘的视频就该这么玩儿

B、手淘普通产品中发放优惠券,红包,商品加购的操作一般都是会有比较明显的提示,或转跳到别的页面。要避免打断用户观看体验,就要将行动点和结果直接在组件中显示,并能使用户认知到。同时在产生结果后在视频中弱提示用户。

在用户认知上,优惠券使用手淘中比较通用的样式。而红包因为有不中奖的情况产生,为了使用户能对红包抽奖的结果更期待,单独设计了带有“拆”字的红包封面,然后将结果显示在另外一个比较具象的红包背景上。

商业模式驱动视频互动设计:手淘的视频就该这么玩儿

C、视觉元素视觉元素的栅格使用6px倍数的手淘统一标准。视觉上切图元素间对齐时注意将阴影元素忽略,视觉上更规整。

商业模式驱动视频互动设计:手淘的视频就该这么玩儿

场景化的播放体验,让消费者边看边买

消费者在手淘选购商品时,视频是一个辅助他们下决定的功能,我们希望视频模块的设计能实实在在的影响用户,但又不打扰用户正常的浏览体验。在手淘不同的产品中,观看视频的体验是不一样的。

吸顶播放

视频在手淘店铺中是作为一个商家的装修模块来展示,内容也通常为店铺新品,热销商品的介绍。消费者如果只是聚焦在视频上,对于视频内容的关注度和逛店铺的热情是随着时间的推移而衰减的。我们希望把视频模块的体验设计成为:消费者在观看视频的同时也能继续浏览店铺下面的信息。暂时来看视频吸顶播放能满足这样的需求。

在视觉的设计细节上,在当视频吸顶之后,在视频区域下方会有一些投影,来制造视觉上的层次感。

商业模式驱动视频互动设计:手淘的视频就该这么玩儿

小窗播放

在商品详情页中商家为了更好的展示当前的宝贝,会上传一段单品的介绍或者使用测评。视频与商品图片和文字介绍的配合效果更好。但是商家在介绍商品时会使用大张图片和非常详细的文字,并且在详情页上方也有购物车入口、产品参数、店铺推荐等功能存在。这时使用吸顶播放或者浮层播放会遮挡很大一部分的面积,显得不是很适合这样的场景。

我们参考了facebook,Youtobe等App对于在信息流中视频的处理,对在大段内容下视频区域滑出屏幕后以小窗的形式展示,很好的平衡了用户一边浏览宝贝信息一边观看视频的需求。当用户对当前视频内容重视时,点击小窗后视频能放大为全屏播放,当用户对小窗内视频不感兴趣时,也可以自主关闭小窗。

商业模式驱动视频互动设计:手淘的视频就该这么玩儿

在视觉设计上,要避免小窗可能在一些情况下会和商家的图文信息黏在一起,在视频区域之外增加了极细的描边和投影,使小窗能在视觉层面与商品详情信息拉开差距。

原地自动播放 

在手淘的信息流集合页面中,例如微淘中商家都想要能够产生更多的内容来带动流量,我们要考虑为有条件上传视频的商家创造关注度。如果在微淘中只是展现一个视屏封面图和一段文字描述这类普通的样式组合,不能达到视频在信息流中的优势。视频在Wi-Fi下能够无须用户点击直接播放,能够放大视频在静态页面中的优势。

商业模式驱动视频互动设计:手淘的视频就该这么玩儿

在信息流中自动播放视频,也需要拿捏一个度,视频虽然在视觉层面比静态图片更能吸引眼球,但他也属于信息流中的一部分,不能跳出这一层级。我们关闭了在自动播放时视频的声音,不显示控件和互动组件,降低了视频的感官信息量,在视频右下边缘设计一个音量的动态图片来提示用户视频的播放状态。当用户点击视频区域,会进入视频的浮层播放,这些都由用户自主控制。

在设计细节上,我们去掉了视频的下阴影,不再特意拉高视频播放的层次感,使视频称为信息流的一部分。

原视频模块在信息流中的尺寸80%以上为固定的16:9和1:1的尺寸,如果遇到竖屏尺寸的视频时会粗暴的将其放在一个黑色的容器中,黑色在信息流中中视觉上太过强烈,干扰用户的视觉焦点。在信息流中除了视频以外的信息如文字,账号关注等也是需要用户去注意的,视觉上考虑需要去除和弱化手淘本身黑色边框给用户带来的视觉影响。在信息流中,将视频的尺寸规范为16:9和1:1两种,竖形的视频会按照一定的位置比例放置在方形的容器中。考虑到人像的脸部偏上,我们计算了一个比较合理的裁切区域以满足大部分的需求。

详情头图放播放

越来越多的商家开始使用视频模块来介绍商品详情页头图视频共用了商品大图的区域,这里视频的体验不应该打破原有的体验,我们选择在浮层中播放视频,另外考虑到详情页下方会有很多的重要商品信息,小窗模式在这里也不适合出现。

我们首先要尽量保证浏览的一致性,大多数消费者使通过搜索来进入详情的页面,我们希望在消费者在搜索页面看到什么图片,在详情页中也能看到。并且我们希望减轻商家上传和编辑视频的难度。因此我们设计了视频封面共用了首张大图。

当消费者点击大图进行播放时,我们也使用了原来浮层观看大图的体验,在视频区域滑动时,将切换到图片,不再需要用户来回切换视频和图片的模式。

无论视频模块背后的功能逻辑有多复杂,视觉设计的主旨就是化繁为简,通过简单的设计和统一的设计在视觉层面帮助用户达到其商业目的和了解商品信息。

商业模式驱动视频互动设计:手淘的视频就该这么玩儿

在设计时我们始终遵守以下的规则:

A、注重通用性:作为手淘平台横向使用的模块,在设计上,保持中立态度,不对产品有过多的个性化和品牌化的设计确保通用性。尽可能能被各业务方使用。

B、确保内容优先 :视觉设计中我们整体考虑互动模块与控件间的关系,控件区域的弱化处理,去除控件区域的边界,减弱块状元素对视觉的影响,都是为了在设计上突显出商家需要传递的内容。

C、商业开放性:互动组件为商家与用户提供了在视屏中的互动平台。商家和平台运营希望增加互动组件在视觉上的多样性,未来的设计方向上。在确定位置,大小内容等基本信息和展示规范之后,我们希望能够开放更多的设计自由给商家和运营。

 

来源:阿里巴巴UED

原文地址:http://www.zcool.com.cn/article/ZNDQzNjgw.html

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

logoPSUEDUIWEB互动设计产品产品经理体验设计动画商业模式场景手机淘宝用户界面设计移动端视觉视觉设计设计转化率运营
赞 (0)
CatherineCatherine
0
生成海报
单选、复选、开关应该如何使用?
上一篇 2017-05-16 19:40
聊聊UI界面中搜索入口的设计
下一篇 2017-05-16 21:39

相关推荐

  • 交互设计

    成为设计师不是不可能!

      前言:本文译自国外高质量问答社区Quora,原文作者Karen X. Cheng,原是微软Excel的项目经理,后通过自学转型成为设计师。她讲述的自学过程详实细致且条理有序,读完会发现与想象中的大不一样,对于想自学设…

    2015-04-01
  • 微信热点

    交互设计暑假基础进阶班报名通道开启中

    编辑//花花对于考研,方向大于努力,为了找准跑道,慢慢摸索的路上你听了很多分享会,看过很多大牛干货,但是实践才能见真知,经验谈打不了胜战,没有领路人,考研太容易进入误区。这个暑假我们针对考研,定制了一套造型能力训练考研强化班,其作用在于,用最专业的的指导,在短时间内向学员传授训练手绘提高造型能力的方法。课程介绍01Day 01Introducing Interaction Design交互设计概论认识什么是交互设计,了解交互设计的历史演...

    2018-04-08
  • Material design 这20个大牌应用已经用上了!

    自从去年google在android新版本Lollipop提出的material design概念后,在世界各地疯狂地掀起一阵material design热。Material design不仅看起来令人惊叹,也是一个前所未有的设计理念。不仅对设计师的影响深大,对…

    交互设计 2015-08-26
  • 微信热点

    优逸客【交互设计】直播课今晚8:00正式开播!

    提起交互设计,它既没有界面视觉设计绚丽,也没有用户体验设计有趣,看起来枯燥乏味,学起来复杂难懂,但它却是整个产品流程中最核心的部分之一。一个牛X的交互设计师是睥睨天下的,无论薪资还是技术。(以上海地区为例)但在通往牛X的路上……很多人还没开始就放弃了经常会有人说交互设计好像已经趋于饱和,现在从事这个行业没机会了。照这么说,公务员是我见过的饱和度最高的行业了,但每年还是有那么多人争得头破血流要为人民服务。就像金字塔一样,往往最底层的那一部...

    2018-04-19
  • 留白这种设计手段的4大必要功效 交互设计

    留白这种设计手段的4大必要功效

    留白不只是空白的画布,它是一个功能强大的设计工具。留白是很难掌握的,留白的应用是包含艺术与科学。真正了解多少空白位置才足够创造一个良好的布局需要多实践。你设计得越多,你就会学得越多。“Whitespace is to be regarded as an active element, not a passive background” — Jan Tschichold
    “留白不单单是一个被动的背景,而是一个活跃的元素。”Properly using whitespace between paragraphs and in the left and right margins can increase comprehension up to 20%
    适当的运用段落之间的留白和左右边距的留白能有效增强理解力高达百分之20.The more whitespace around an object, the more the eye is drawn to it
    越大的留白空间包围一个物件,越多的目光就会集中在这个物件身上。As designers, it’s our responsibility to create usable communication vehicles.
    “作为设计师,我们职责就是去创造“沟通手段””Let the products speak for themselves
    让产品自身为自己说话。

    2017-04-28
  • 微信热点

    前Apple员工谈交互设计的未来

    作者:Bret Victor  |  翻译:包子,校审:Chen Jing本文长度2731字,建议阅读5分钟现在,有很多流行的有关未来交互设计的想象。机缘巧合下,设计未来的交互界面成为了我的工作。我有机会用真正能工作的原型来做设计,而不是如图所示用绿光屏和After Effects合成的特效。我对视频中的一些交互表示怀疑,因为我尝试过实现它们,而制作视频的动画师显然没有。但是,这不是这个视频真正存在的问题。我觉得这个视频真正出了问题的地...

    2018-01-30
  • 微信热点

    3月19日部分上海实习信息汇总

    2018“猎萝卜”校园宣讲会 松江大学城专场人立方智能科技有限公司时间:3月22日 18:00-20:00地点:上海对外经贸大学 B303上海人立方智能科技有限公司,专注于人工智能与人才招聘,中国人力资源行业领军企业50强。猎萝卜(www.lieluobo.com)是公司创立于2017年的智能猎头招聘平台,服务于互联网、金融这两大领域国际知名客户及500强企业。平台上汇聚上千家优质的猎头公司,通过人工智能算法的引导,精准匹配中高端人才需...

    2018-03-19
  • 微信热点

    论数字媒体交互设计的未来

    “交互设计”这一概念如今风靡全球,对于它的研究 与实践受到企业、院校等机构越来越多的关注。现如今交互设计正在呈现出一种放射状成长态势,这使得交互设计没有绝对的定理,都是在共同交流,探索中前进。国内交互设计优秀案例分析在信息全球化的时代,无论是国际还是国内市场,大多数设计机构都在言必称交互,“交互设计师”、“用户体验设计师”已经成为炙手可热的职位。我国也涌现出一批优秀的交互设计师们,其设计出的作品均获得了国内外的一致好评。例如,中央美术学...

    2018-03-03
  • 如何制作交互组件库 交互设计

    如何制作交互组件库

    曾几何时,每次交互稿都是徒手画,或者截个图在现有的界面上改造。渐渐感到同一平台,每个版本都有很多重复劳动,是时候做个交互组件库了~ 什么是组件库? 就是类似axure左侧栏的这一坨标准控件,方便直接拖拽使用…

    2017-07-24
  • 为什么你越来越爱用那些看起来丑而贱的表情? 交互设计

    为什么你越来越爱用那些看起来丑而贱的表情?

    好奇心研究所的微博(@好奇心研究所)和微信公众号(ID:QLab42)全面上线啦,微信直接搜索「好奇心研究所」就可以订阅,关注与所长亲密接触,赶紧的。

    2017-06-02
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress