项目总结:大型PC官网视频中心页面改版

2019-02-24 14:40:24 来源:网络整理 作者:管理员

原标题:项目总结:大型PC官网视频中心页面改版

本篇文章作者对视频中心改版项目进行了复盘总结,展示了项目中一些细节点的设计思考,将一些设计经验分享给有需要的小伙伴作为参考。

项目总结:大型PC官网视频中心页面改版

一、设计界定 需求背景

视频动态页,是承载京东云官网关于产品及解决方案视频、品牌、活动视频的页面。

随着京东云平台的发展,原有的视频中心设计框架兼容性不足的问题愈加明显,该页面目前已不能承载现有的业务和用户需求。

本次改版得重中之重是点击列表页后进入的视频详情页

由于需求方为市场部门,所以需求会夹杂该部的部分业务考量,故重点在于怎样平衡需求方的业务诉求与官网用户体验之间的关系。

换句话说重点就是以我们现有的官网规范模式和设计风格(降低用户的认知成本),去合理表达出市场部的需求。并且在做方案的过程中,考虑尽量做到不同分类视频的详情,不做差异模板,方便后续CMS平台功能的实现,并且要考虑方案的更多扩展性

设计目标

故在前期沟通过程中,我们对本次产品改版的初步定位逐渐清晰:京东云视频中心是一个承载业务需求的官网业务展示型页面,后续设计需考虑解决方案模板的可复用性。(下图为本项目梗概)

项目总结:大型PC官网视频中心页面改版

二、需求深化 用户行为

在明确了两个页面(列表+详情)的功能后,我首先进行了对设计对象的研究:包括目前市场上的竞品分析+用户行为分析+小范围用户访谈。

竞品分析:

1)首先调研各大云厂商的视频模块(如果有此模块的话),发现华为云相对京东云的需求更为贴近,故对华为云视频中心页面进行观察,总结出华为云视频页的优势为:设计简洁,不同分类下的视频差异度几乎为0,但是在拓展性方面较差;

2)第二个部分,调研各大视频网站的主流视频详情页设计模式,通过共性提取、聚类的方法研究视频详情页用户行为顺序。

3)(虽然不属于竞品分析但是也归于这一类了)通过观察典型用户浏览目标网页的行为特征,企图得到设计启发。(下图为热心市民小张同学浏览相关视频详情页)

项目总结:大型PC官网视频中心页面改版

通过以上的初步研究最终得到下面的——视频详情页用户浏览模型图(根据模块颜色饱和度,色彩饱和度越高,用户视线越早注意,用户行为越高发)序号1234为用户浏览顺序,如下图:

项目总结:大型PC官网视频中心页面改版

用户访谈

范围主要集中在京东云官网UED组内进行,所以调研用户和人群更偏向于专家类型互联网从业人员,人群更具代表性。

设置问题:

1)你看过哪些云厂商有视频中心类似页面?

2)你再进入视频列表页之后,首先关注的页面元素是什么?随着注意的改变会产生什么样的行为?

3)你希望在视频详情页获知什么信息?

4)你希望在列表页展示更多关于视频信息吗?

5)你在视频详情页的浏览顺序是什么?

以下截取@热心市民小张同学的部分回答:

1)“腾讯云和华为云的视频页面做的不错”;

2)“我作为一个视觉设计师肯定最关注的是视频略缩图、其次是标题,其他信息不想看到”;

3)“想看的视频、推荐的东西”;

4)“希望啊”;

5)“肯定先看自己最关心的视频内容,其次看看视频下方的介绍,最后看别的”。

访谈结论:

视频列表页:在normal状态下保持页面的整洁度,展示更少的信息。在用户进行第一步筛选之后,有了想阅读下去的动力,鼠标会hover至该视频下,此时,要展示视频相关的别的详细信息(抓住关键时间点),点击后跳转至视频详情页;

视频详情:详情页由于其自身展示型页面的属性,主要是信息展示的排版问题,根据需求的重要度依次以从左至右、从上至下的方式进行排布,如下图:

项目总结:大型PC官网视频中心页面改版

三、结构层设计&可行性评估

在收集了充足的调研信息后,进行初步方案的设计,明确了产品的部分功能架构。在此期间和同事、需求方适时沟通,促进最终方案设计的形成。(字丑勿喷.jpg)

项目总结:大型PC官网视频中心页面改版

方案可行性评估:此次项目主要的可行性风险集中在两点:

1)前台展示部分,展示的效果;

2)主要为CMS后台配置系统的可行性,要考虑模板的统一化,要考虑后续的拓展性。

四、方案设计 概念方案分解释义

视频列表页

项目总结:大型PC官网视频中心页面改版

列表页方案释义:Normal状态下显示两行视频标题+分类+发布时间;鼠标移入时,显示完整标题遮盖视频分类和发布时间,并显示视频tag+视频时长和播放视频的icon。

此方案从交互角度主要考虑的是让视频列表页在Normal状态下更加干净,让用户获知最重要、最直接的信息,剔除更深级的干扰信息;而鼠标移入后显示单个视频的详细信息,此时表明用户对该视频感兴趣,那么干扰信息就变成了有用信息。

要做出Hover状态和Normal状态下的区分度(包含信息展示量的区分和样式上的区分)。

下图为用户在视频列表页内的详细的认知——行为分析:

项目总结:大型PC官网视频中心页面改版

视频详情页

项目总结:大型PC官网视频中心页面改版

详情页按照前文所提到的用户浏览模型图,将业务方的需求聚类后,按重要度排序,依次“填入”此模型之中。

视频详情页细节1:视频标题后加分享icon

视频标题后加分享icon:

  1. 在视频标题后加分享功能,而不是在别的区域,因为分享是对“视频基本信息”及视频内容的分享,所以放在本区域内更加明确了功能分区;
  2. 增加视频分享功能,有利于本产品拉新\促活\留存。

项目总结:大型PC官网视频中心页面改版

视频详情页细节2:增加公众号微信二维码 & 联系我们

在“相关产品”区域下,加入辅助推荐内容,可以抓住用户浏览行为的Aha Moment:在浏览完视频和相关产品后,给予无助的用户以反馈,给予想得到更多信息的用户以帮助。

项目总结:大型PC官网视频中心页面改版

CMS后台设计

为满足业务方需求,使视频增加区分度,后台配置系统增加了“标签”字段,可更灵活得配置视频的更多特征feature;

并且,关于推荐视频、相关产品,后台可直接调用原有接口,通过勾选的方式直接进行选择,从而生成前台的相关推荐产品、视频;

最后,增加了一个按钮,可配置文案、URL与埋点,使视频中心能更直观得监测页面转化率。(由于涉及到后台系统,故不放出CMS截图)

RWD.M端设计(列表+详情)

项目总结:大型PC官网视频中心页面改版

M端的视频中心列表、详情页主要也是以展示功能为主,故信息排布也是设计重点。基于京东云官网RWD响应式网页设计规范,将PC页面转化成移动端页面,保证功能的实现。

其中两个特殊交互:

1. 视频描述超出限高后怎么查看全部的问题,这里采用的我们原有移动端处理超出限制字符的方式,加一个展开按钮(当然还有很多别的处理方式,比如点击出现浮层,方案见仁见智);

2. “其他视频推荐”部分,由于有很多推荐视频,所以竖向排列不太符合轻量化的体验(我们底部还有个长Footer \捂脸),故采用了横向拓展的方式,用户可左右滑动查看更多推荐视频。

以上是我对京东云官网视频中心改版的项目总结,感谢阅读!

显示全文
为您推荐
宋伊人、丁泽仁主演的《花青歌》过审,人设有趣,口碑却让人担忧
宋伊人、丁泽仁主演的《花青歌》过审,人设有趣,口碑却让人担忧

2021年由楼健执导,苏晓彤、王子奇领衔主演的《御赐小仵作》可以说取得了不错的口碑与成绩,使这部小成本剧集达到了S+级的热度与播放量,成了近两年来当之无愧的古代仵作题材的古装甜爽探案喜剧。如今距离这部.........

发布时间:2023-06-01 18:03:12

鹅蛋能蒸蛋羹吗
鹅蛋能蒸蛋羹吗

【导读】 鹅蛋能蒸蛋羹吗,下面是小编为你收集整理的,希望对你有帮助!能。鹅蛋是家禽鹅生下的卵,表面较光滑,白色,呈椭圆形,个体很大,其重量是一般鸡蛋的四、五倍,味道有些油,但质地较粗糙,草腥味较重,食味不及鸡鸭蛋,新鲜的鹅蛋必须烹饪后食用。此外,鹅蛋中还含有丰富的营养......

发布时间:2023-06-01 18:01:06

江疏影与王传君同框叙旧
江疏影与王传君同框叙旧

江疏影和王传君,两个看似完全没有交集的名字,在5月28日有了神奇的新反应因为一起参加《五十公里桃花坞3》,老同学很少在镜头前同框。除了花旦 江疏影说,他想和王传君在一起,因为这会让他更有安全感。这也让.........

发布时间:2023-06-01 17:03:17

向日葵传播种子的方法 这些方法可以传播种子
向日葵传播种子的方法 这些方法可以传播种子

【导读】 向日葵传播种子的方法 这些方法可以传播种子,下面是小编为你收集整理的,希望对你有帮助!向日葵不仅可以观赏食用,另外在工业方面也有一定作用,向日葵有很多种不同传播种子的方法,分别是自体传播、风体传播、水体传播、鸟类传播、哺乳类动物传播等,传播范围也是相当广泛。向日葵传播种子的方法1.自体......

发布时间:2023-06-01 17:01:05

《奥本海默》新预告泄露 展示更多新角色
《奥本海默》新预告泄露 展示更多新角色

在很早之前发布首支官方预告后,人们关于克里斯托弗·诺兰自编自导的新片《奥本海默》愈加等待。而近日网上走漏出了一段长达 3 分钟的最新预告,其中展示了更多新角色,包含马特·达蒙、佛罗伦斯·皮尤和小罗伯特.........

发布时间:2023-06-01 16:03:25

纳摩盖吐龙:蒙古超巨型恐龙(长21米/长有钉状牙齿)
纳摩盖吐龙:蒙古超巨型恐龙(长21米/长有钉状牙齿)

【导读】 纳摩盖吐龙:蒙古超巨型恐龙(长21米/长有钉状牙齿),下面是小编为你收集整理的,希望对你有帮助!纳摩盖吐龙是一种蜥脚类恐龙,诞生于7500万年前-7000万年前的白垩纪末期,体长最多可达21米,属于超巨型恐龙的一种,因为出土的四颗钉子状牙齿而被命名,第一批化石发现于蒙古国,因此也叫做蒙古纳摩盖吐......

发布时间:2023-06-01 16:01:04

日内瓦是哪个国家的首都:瑞士的一个城市(并不是首都)
日内瓦是哪个国家的首都:瑞士的一个城市(并不是首都)

【导读】 日内瓦是哪个国家的首都:瑞士的一个城市(并不是首都),下面是小编为你收集整理的,希望对你有帮助!我们知道地球对于人类来说是一个非常大的星球,因此地球上还有许多我们人类没能发掘的地方,而地球上的国家也是非常多的,日内瓦这个城市也是一个比较有名的城市,那么日内瓦是哪个国家的首都呢?它具体又在哪个地方......

发布时间:2023-06-01 15:01:04

《欢迎光临》播出近半,口碑稳中有升
《欢迎光临》播出近半,口碑稳中有升

本报记者 李夏至由正午阳光出品制作的都市生活轻喜剧《欢迎光临》在北京卫视播出接近一半,口碑稳中有升。该剧讲述一个酒店门童和空姐的恋爱故事,看似多少有点悬浮的设定需要大量的生活细节与戏剧手段来弥补。对《.........

发布时间:2023-06-01 14:03:12

月球背面为什么去不了,月球背面到底有什么?
月球背面为什么去不了,月球背面到底有什么?

【导读】 月球背面为什么去不了,月球背面到底有什么?,下面是小编为你收集整理的,希望对你有帮助!作为太阳系中最为特殊的天体,月亮总是以一面面向地球,从来没见过它的背面长什么样,这主要是由于月球的自转和公转周期相同。然而自人类登月成功以来,如今已经成功发射探测器到火星了,但却根本没有月球背面的消息......

发布时间:2023-06-01 14:01:04

朱一龙爆发式的哭戏,刷新演艺圈新水平,拭目以待
朱一龙爆发式的哭戏,刷新演艺圈新水平,拭目以待

朱一龙主演的电影《峰爆》9月17日即将在各大电影院上映,这部属于灾难型的电影,里面没有过多装饰的场景和华丽的服饰。在灾难面前,个人是多么的渺小,他们帮助困难群众,为了保护家园逆行而上,在这期间产生的父.........

发布时间:2023-06-01 13:03:11

鸡胗怎么炒
鸡胗怎么炒

【导读】 鸡胗怎么炒,下面是小编为你收集整理的,希望对你有帮助!用料:小米椒,鸡胗,大蒜,盐,生抽,黄酒。步骤:1、鸡胗冷水下锅,煮变色了捞起切片。鸡胗要切花,一来好看,二来容易熟又保持了爽口感。2、切好的鸡胗加盐加黄酒加生抽腌制半小时以上。3、大蒜切成蒜蓉,小米......

发布时间:2023-06-01 13:01:03

周迅觉得何炅黄磊太像空巢老人
周迅觉得何炅黄磊太像空巢老人

今日何炅晒出与黄磊的《向往的生活7》海报,何炅黄磊两人牵着小h小o画面很温馨夸姣的呢。可是有的网友却戏弄:“如同两个假笑空巢白叟”“孩子们都离开了,就剩俩老人了,能开心吗?”“这笑脸是p的吧?”这一季.........

发布时间:2023-06-01 12:03:13