⾃上篇《美团&饿了么差异化产品设计》发布之后，引起了很多朋友的共鸣。⼈⼈都是产品经理平台单篇阅读量接近了7K。继阅读量提升后的⾼兴之余，个⼈也更青睐于对产品设计思维的深挖。从实际产品体验视⾓出发，探索更多线上产品易⽤、好⽤、有趣的产品设计。 本次分享的内容是关于爱奇艺、优酷、腾讯视频三个第⼀梯队的同类型在线播放产品部分功能的差异化产品设计，看看视频类产品有哪些可以学习借鉴之处。
话不多说，⾛起～
⇂〔⾸页 ® 〕
功能布局上同类产品差异很⼩，基本上遵从从上⾄下依次是导航栏--运营区--内容区。爱奇艺「推荐」类⽬下拉可以跳转⾄⼆楼放映厅，腾讯视频「精选」类⽬下拉可以跳转⾄游戏模块。
爱奇艺导航栏有产品logo、搜索框、历史记录、UGC聚合⼊⼝、类⽬Tab、类⽬编辑⼊⼝，另外个别类⽬增加有筛选功能。logo的加⼊提升爱奇艺这⼀品牌感知和视觉认知，加深品牌在⽤户侧的印象。
另外，这⾥尤其要提⼀下搜索功能的设计。圆⾓矩形接近于背景⾊的设计，整体和谐统⼀且更加聚焦。
搜索框内字段⼀般会根据近期历史搜索、和近期热搜进⾏关键词推送轮播，千⼈千⾯的推⼴，提升流量分发效率。同时，在右侧增加搜索的icon，点击icon，可以直接根据当前轮播的关键词跳转⾄搜索结果页⾯。交互上极⼤的缩短了搜索步幅，通过减少路径提升搜索效率。
下拉⾄⼆楼
下拉⾄⼆楼刷新的同时，背景有⾃动⽣成的炫光可以缓解⽤户等待的焦虑，并且传递⼀种未来感，感觉很酷～
历史观看⼊⼝可以让⽤户从⾸页直接进⼊观看历史，这其实是符合⽤户⼼理预期的⼀种设计⼿段。根据⽤户的使⽤场景做预判，⽤户不管是在观影、观剧阶段，很容易被外界噪⾳所打断。再次打开App可以直接从⾸页进⼊观看历史到该剧进⾏观看，可以提升⽤户体验。
分体滑板运营Banner除了影视新剧⼴告投放，还加⼊了外部⼴告链接，Banner分为「vip」和「⼴告」两类标签。虽然外部⼴告在某种程度上会引起⽤户的反感，但是利⽤标签提⽰可以降低⽤户误⼊点击率，降低⽤户厌恶情绪。个⼈认为这种加⼊外部⼴告的营销推⼴是产品商业变现的⼀种⽅式，已经有越来越多的产品⾥⾯有看到商业⼴告，这是产品发展到⼀定时期的⼀种商业变现常态。这⼀点在腾讯视频和优酷都有看到，但也都给出相应的关闭⽅案，降低⽤户的厌恶。作为设计师，在产品设计初期就应该要考虑到为后期加⼊的⼴告预留商业⼊⼝和设计策略，以免后期造成产品模块功能混乱的局⾯，增加
⽤户对产品功能的理解门槛。
在视频内容区部分标题交互上点击可以直接触达该模块具体内容展⽰页⾯。增加模块触达的交互⽅式，提⾼模块页⾯分发效率。
模态弹窗有三种样式，⼀种是直接下拉在图标附近展⽰，另⼀种是在底部弹出抽屉样式。第三种就是产品升级常规的提⽰弹窗，这⼀类暂且不谈。从产品层⾯来看前两种样式分类区别，图标附近下拉的样式弹窗是基于平台⾃⾝将⽤户有⾏为结果的功能聚合呈现，另⼀种是针对于外部⼴告体，作为⽤户情绪声⾳的收集渠道。个⼈猜想应该是这两种弹窗所在的业务属性⽽做的区分。
Feed流设计上，爱奇艺和优酷的做法更接近，类似于电商类产品⾸页的千⼈千⾯设计，可以给⽆⽬的浏览的⽤户⼀次性展⽰更多，提升⽤户留存。⽽腾讯视频的做法是通栏划分为两张卡⽚，以卡⽚的形式推送影⽚。右侧前置⽀持浏览该影⽚精彩⽚段，个⼈猜测这样的设计⽅式可以提前让⽤户了解该影⽚的⼤致剧情，引起⽤户的Aha点，让⽤户可以驻
影⽚精彩⽚段，个⼈猜测这样的设计⽅式可以提前让⽤户了解该影⽚的⼤致剧情，引起⽤户的Aha点，让⽤户可以驻⾜，然后留下更多的时间追⽚。⼀屏推送的影⽚限制在三个以内，应该是为了减少同类型影⽚封⾯对⽤户的视觉噪⾳，提升⽤户的点击率。
这⾥想提⼀下的地⽅是这三种feed流中的⼴告卡⽚设计。爱奇艺和优酷都在Feed流中还巧妙的加⼊外部⼴告，这种设计占⽐⼩不易于发现。既不会过多的影响⽤户的观感以及沉浸式的体验，也能提升⼴告盈利效率。⽽腾讯视频的⼴告推送，⼀屏空间占⽐太⼤，再加上⼀屏只有三个以内的影⽚推送，极⼤的可能会引起⽤户的体验感。
腾讯视频的频道区别于其他两个产品。爱奇艺和优酷的频道类⽬以列表⽅式下拉，⽀持个⼈配置，F型浏览模式对⽤户来说更加友好⾼效。腾讯视频的则是矩阵式排版， Z型浏览模式容易造成⽤户视觉疲劳，降低⽤户的使⽤频率。爱奇艺和优酷在标题前加⼊icon，可以提升⽤户对模块类⽬的理解，降低学习成本。另外，icon的设计⼿法也是值得学习的，⽤⾊⼲净明快，给单调的界⾯增加了美感。
搜索模块⼤体上是差不多的，虽然三者都在搜索框⾥有语⾳搜索的⼊⼝，但爱奇艺和优酷另外在该页⾯底部键盘上⽅也提供了显著的语⾳搜索⼊⼝，显得更加贴⼼。
即使在搜索结果页⾯，爱奇艺和优酷的设计策略也是⼀致的。优先级最⾼的还是搜索功能，都使⽤与品牌⼀致的⾊块来强调功能。⽽腾讯的策略是弱化搜索框，以任务结果为中⼼，突出内容区信息。
铝塑复合型材
〔个⼈中⼼ ® 〕
个⼈中⼼三者共性就是将使⽤频次最⾼的个⼈主页优先级置于顶部，内容区的设计策略差异点还是挺多的。
爱奇艺保持了导航栏的品牌⾊渐变，内容区以常规的列表从上⾄下展⽰，没有过多的视觉噪⾳。⽤户属性使⽤频次较⾼的优先级最⾼，平台业务相关属性的靠后，降低⽤户学习成本的同时提升其他业务流量的分发。
玻璃毛细管腾讯视频将「观看历史」模块前置在个⼈中⼼，⽆需跳转，交互上可以通过左右滑动的交互选择历史影⽚。这⼀设计策略是通过融⼊具体的⽤户场景挖掘到的深层次需求，减少场景变化，优化⾏为交互，缩短了⽤户查看历史影⽚的步幅，提升效率获得⽤户好感，与其他同类型平台形成差异化竞争。另外，个⼈中⼼增加了腾讯⽣态强劲的游戏+动漫频道⼊⼝，这应该是腾讯的⽣态布局，各产品之间形成流量互相分发的导流模型，达成场景互通和流量互补的效果。
优酷的设计以圆⾓卡⽚为主，头部除了个⼈主页⼊⼝，增加UGC+社交属性数据展⽰，建⽴价值认知。个⼈猜测应该也是⼀种⽣态布局的打法，⼀⽅⾯是为了教育⽤户，培养⽤户在平台发布个⼈创作相关作品的习惯。另⼀⽅⾯，作为头部之⼀的产品，⾼层眼前的格局应该不⽌于同类型竞品爱奇艺和腾讯，应该还包含了近两年强劲的B站。
楼顶钢筋如何防锈〔会员中⼼ ® 〕
会员中⼼的设计策略⼤同⼩异，都是围绕⽤户付费转化，加深会员价值感知，延长⽤户⽣命周期⽽设计。但是三个平台也都有不同的差异化设计策略。
爱奇艺会员中⼼以深灰+⾦⾊为主⾊调，头部的⾦⾊卡⽚质感，凸显会员价值。卡⾯使⽤渐变+底纹的设计⼿法提升卡⾯设计感，简约⼜不失⼤⽓。卡⾯提供「⽴即开通」VIP⼊⼝。随后从上⾄下的模块功能依次是等级-任务-权益-服务-特权，都是围绕⽤户个⼈属性打造。交互上下滑⾄屏幕⼆分之⼀处，底部会淡⼊滑出「⽴即开通」按钮⼊⼝。
▲爱奇艺会员
爱奇艺VIP开通页⾯分为VIP会员和所有会员两个模块，承载会员服务和⽤户付费功能。
VIP会员模块从上⾄下依次是黄⾦VIP会员模块和星钻VIP模块两个Tab-优惠⽅式-⽀付⽅式-更多类型VIP-VIP套餐-VIP 特权-会员协议-常见问题⼊⼝。所有的模块功能都是围绕促进⽤户付费转化，通过打通决策链降低⽤户对VIP会员的认知，从⽽提升在⽤户侧的价值认知进⾏转化，提升平台黏性。
知，从⽽提升在⽤户侧的价值认知进⾏转化，提升平台黏性。
所有会员模块主要是根据活跃⽤户定位⽽设计的，拓宽不同⼈的付费渠道，这⼀做法在外卖产品也曾看到。
——
▲优酷会员
优酷VIP模块使⽤⿊⾦的配⾊，⼤⽓优雅，会员卡⾯标有优酷logo×88VIP的标⽰，利⽤阿⾥⼤⽣态圈的标签logo加深⽤户对会员的价值认知。
在开通VIP的页⾯底部⼀直有账单⾦额和⽴即⽀付的召唤按钮，通过颜⾊对⽐，提升⽴即⽀付的优先级从⽽促使⽤户付费转化。
——
▲腾讯视频会员
腾讯视频会员延续产品品牌主⾊，使⽤了更具有活⼒阳光的暖黄⾊，这应该是根据产品活跃⽤户的⼈选择的⾊彩倾向。
▲退出爱奇艺会员
▲退出腾讯视频会员泥浆泵压力传感器
爱奇艺和腾讯视频在退出VIP页⾯的时候都会出现⽤户利益点相关的代⾦券和特权属性标⽰挽留弹窗，这种设计从某种程度上可以降低⽤户流失率。
▲爱奇艺会员成长体系
▲腾讯视频会员成长体系
▲优酷会员成长体系
爱奇艺、腾讯视频和优酷三个产品都有⾃⼰的VIP会员成长体系。⼀⽅⾯通过VIP体系呈现⽤户等级享受的特权，提升新⼿⽤户的转化率。另⼀⽅⾯通过特权和其他优惠刺激⼿段，激励现有留存⽤户续费，延长⽤户⽣命周期。核⼼⽬标是拉升付费⽤户⽐例，从⽽达到商业变现的终极⽬的。
〔播放 ® 〕
爱奇艺、腾讯视频和优酷三个产品的常规播放页⾯也是保持⼤同⼩异的设计策略，爱奇艺和优酷在当前页⾯都预留了发送弹幕⼊⼝，可以缩短⽤户发送弹幕的路径。从上⾄下播放窗⼝-视频信息-推荐视频。在爱奇艺、优酷的剧集播放进度中，当前剧集选择框都有微动效，通过动效强化UI界⾯的功能和⽤户情感之间的传递。
由于现在三个不同产品都处于成熟期，都在⾛商业变现的“康庄⼤道”。有些剧集是需要开通VIP的，在剧集选择框中都会有相应的标签提⽰⽤户需要进⾏付费才能观看。
有相应的标签提⽰⽤户需要进⾏付费才能观看。
都有⾃⼰平台的评论区，⼀⽅⾯是通过⾃⾝平台评价体系来打通社交⽣态，另⼀⽅⾯通过社区来活跃⽤户，通过⽤户互动来传递情绪。
〔全屏播放 ® 〕
▲爱奇艺全屏播放
爱奇艺和优酷在全屏观影状态下的功能相对腾讯视频⽐较全。基于⽤户真实使⽤场景的需求，都有进度条、观看倍速、视频源清晰度、选集，弹幕主页设置。并且都有提供影⽚截图和GIF的本地存储，可以有效的帮助⽤户进⾏分享。
▲优酷全屏播放
爱奇艺和优酷都提供提供发送弹幕的⼊⼝，爱奇艺和优酷在发送弹幕的时候，播放会有暂停，基于考虑到⽤户的观影过程是不想被打断和错过的⽴场，这⼀功能设计的很巧妙。其次，个⼈感觉优酷的设计策略更胜⼀筹，前置预判提供字段，提⾼发送弹幕的效率。
▲腾讯视频全屏播放
腾讯视频全屏播放的界⾯⽬前相对来看，功能单薄了⼀点。
〔彩蛋-趣味设计 ® 〕
▲优酷
优酷在评价模块中加⼊了⼀些有趣的设计，通过⽤户不同的评分刷新左侧emoji的表情，提升趣味性。再加上不同评分的⽂案推送，加强产品与⽤户之间的情感互动。
〔最后® 〕
由于产品体量功能庞⼤，个⼈也是花了半个⽉的时间研究出的⼀些体验分享，分享的模块可能会⽐较散，希望个⼈的⼀些体验可以对正在从业产品设计的同学有所启发和帮助。⼤家感兴趣的话也可以私下进⾏体验研究。
有任何的想法和⼼得都可以在评论区留⾔，进⾏更多产品层⾯的讨论和挖掘。
sis压片感谢❤ ～
经常滴滴打车，但你知道地图是基于什么原则设计出来的吗？
快⼿CoDesign团队半年度设计年鉴
使⽤这5个⽅法，设计⽅案⼀定很惊艳
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议