本篇文章作者对视频中心改版项目进行了复盘总结,展示了项目中一些细节点的设计思考,将一些设计经验分享给有需要的小伙伴作为参考。
一、设计界定需求背景视频动态页,是承载京东云官网关于产品及解决方案视频、品牌、活动视频的页面。
随着京东云平台的发展,原有的视频中心设计框架兼容性不足的问题愈加明显,该页面目前已不能承载现有的业务和用户需求。
本次改版得重中之重是点击列表页后进入的视频详情页。
由于需求方为市场部门,所以需求会夹杂该部的部分业务考量,故重点在于怎样平衡需求方的业务诉求与官网用户体验之间的关系。
换句话说重点就是以我们现有的官网规范模式和设计风格(降低用户的认知成本),去合理表达出市场部的需求。并且在做方案的过程中,考虑尽量做到不同分类视频的详情,不做差异模板,方便后续CMS平台功能的实现,并且要考虑方案的更多扩展性。
设计目标故在前期沟通过程中,我们对本次产品改版的初步定位逐渐清晰:京东云视频中心是一个承载业务需求的官网业务展示型页面,后续设计需考虑解决方案模板的可复用性。(下图为本项目梗概)
二、需求深化用户行为在明确了两个页面(列表 详情)的功能后,我首先进行了对设计对象的研究:包括目前市场上的竞品分析 用户行为分析 小范围用户访谈。
竞品分析:
1)首先调研各大云厂商的视频模块(如果有此模块的话),发现华为云相对京东云的需求更为贴近,故对华为云视频中心页面进行观察,总结出华为云视频页的优势为:设计简洁,不同分类下的视频差异度几乎为0,但是在拓展性方面较差;
2)第二个部分,调研各大视频网站的主流视频详情页设计模式,通过共性提取、聚类的方法研究视频详情页用户行为顺序。
3)(虽然不属于竞品分析但是也归于这一类了)通过观察典型用户浏览目标网页的行为特征,企图得到设计启发。(下图为热心市民小张同学浏览相关视频详情页)
通过以上的初步研究最终得到下面的——视频详情页用户浏览模型图(根据模块颜色饱和度,色彩饱和度越高,用户视线越早注意,用户行为越高发)序号1234为用户浏览顺序,如下图:
用户访谈范围主要集中在京东云官网UED组内进行,所以调研用户和人群更偏向于专家类型互联网从业人员,人群更具代表性。
设置问题:
1)你看过哪些云厂商有视频中心类似页面?
2)你再进入视频列表页之后,首先关注的页面元素是什么?随着注意的改变会产生什么样的行为?
3)你希望在视频详情页获知什么信息?
4)你希望在列表页展示更多关于视频信息吗?
5)你在视频详情页的浏览顺序是什么?
以下截取@热心市民小张同学的部分回答:
1)“腾讯云和华为云的视频页面做的不错”;
2)“我作为一个视觉设计师肯定最关注的是视频略缩图、其次是标题,其他信息不想看到”;
3)“想看的视频、推荐的东西”;
4)“希望啊”;
5)“肯定先看自己最关心的视频内容,其次看看视频下方的介绍,最后看别的”。
访谈结论:
视频列表页:在normal状态下保持页面的整洁度,展示更少的信息。在用户进行第一步筛选之后,有了想阅读下去的动力,鼠标会hover至该视频下,此时,要展示视频相关的别的详细信息(抓住关键时间点),点击后跳转至视频详情页;
视频详情:详情页由于其自身展示型页面的属性,主要是信息展示的排版问题,根据需求的重要度依次以从左至右、从上至下的方式进行排布,如下图:
三、结构层设计&可行性评估在收集了充足的调研信息后,进行初步方案的设计,明确了产品的部分功能架构。在此期间和同事、需求方适时沟通,促进最终方案设计的形成。(字丑勿喷.jpg)
方案可行性评估:此次项目主要的可行性风险集中在两点:
1)前台展示部分,展示的效果;
2)主要为CMS后台配置系统的可行性,要考虑模板的统一化,要考虑后续的拓展性。
四、方案设计概念方案分解释义视频列表页
列表页方案释义:Normal状态下显示两行视频标题 分类 发布时间;鼠标移入时,显示完整标题遮盖视频分类和发布时间,并显示视频tag 视频时长和播放视频的icon。
此方案从交互角度主要考虑的是让视频列表页在Normal状态下更加干净,让用户获知最重要、最直接的信息,剔除更深级的干扰信息;而鼠标移入后显示单个视频的详细信息,此时表明用户对该视频感兴趣,那么干扰信息就变成了有用信息。
要做出Hover状态和Normal状态下的区分度(包含信息展示量的区分和样式上的区分)。
下图为用户在视频列表页内的详细的认知——行为分析:
视频详情页详情页按照前文所提到的用户浏览模型图,将业务方的需求聚类后,按重要度排序,依次“填入”此模型之中。
视频详情页细节1:视频标题后加分享icon视频标题后加分享icon:
在视频标题后加分享功能,而不是在别的区域,因为分享是对“视频基本信息”及视频内容的分享,所以放在本区域内更加明确了功能分区;增加视频分享功能,有利于本产品拉新\促活\留存。 视频详情页细节2:增加公众号微信二维码 & 联系我们在“相关产品”区域下,加入辅助推荐内容,可以抓住用户浏览行为的Aha Moment:在浏览完视频和相关产品后,给予无助的用户以反馈,给予想得到更多信息的用户以帮助。
CMS后台设计为满足业务方需求,使视频增加区分度,后台配置系统增加了“标签”字段,可更灵活得配置视频的更多特征feature;
并且,关于推荐视频、相关产品,后台可直接调用原有接口,通过勾选的方式直接进行选择,从而生成前台的相关推荐产品、视频;
最后,增加了一个按钮,可配置文案、URL与埋点,使视频中心能更直观得监测页面转化率。(由于涉及到后台系统,故不放出CMS截图)
RWD.M端设计(列表 详情)M端的视频中心列表、详情页主要也是以展示功能为主,故信息排布也是设计重点。基于京东云官网RWD响应式网页设计规范,将PC页面转化成移动端页面,保证功能的实现。
其中两个特殊交互:
1. 视频描述超出限高后怎么查看全部的问题,这里采用的我们原有移动端处理超出限制字符的方式,加一个展开按钮(当然还有很多别的处理方式,比如点击出现浮层,方案见仁见智);
2. “其他视频推荐”部分,由于有很多推荐视频,所以竖向排列不太符合轻量化的体验(我们底部还有个长Footer \捂脸),故采用了横向拓展的方式,用户可左右滑动查看更多推荐视频。
以上是我对京东云官网视频中心改版的项目总结,感谢阅读!
pc项目模板安装方法(大型PC官网中心页面改版)
2024-07-01 05:52:21 作者:當紅家族 网址:https://m.xinb2b.cn/tech/tfi436316.html
- 最新职业教育专业目录(教育部发布新版职业教育专业简介)
- 2024-07-01教育部发布新版职业教育专业简介来源:央视新闻客户端教育部日前发布新版《职业教育专业简介》,新版《简介》覆盖新版专业目录全部19个专业大类、97个专业类的1349个专业其中,中等职业教育358个,高等职业教育专科744个,高等职业教。
- 北大陶教授是怎么来的(任教北京34)
- 2024-07-01任教北京34作为我国现代农业高等教育的起源地,中国农业大学情系“三农”,一批又一批中国农大人为我国食品安全保障贡献着智慧和力量,其中就包括食品与营养工程学院范志红副教授除了是一名传道授业的师者,她还拥有微博百万博。
- 王俊凯首次主演电影(王俊凯客串周杰伦监制的电影)
- 2024-07-01王俊凯客串周杰伦监制的电影近日,网上曝光了王俊凯客串周杰伦监制的电影的造型图,王俊凯这次在电影中饰演的角色,也让人觉得非常意外这部电影是由周杰伦监制的,主演是周杰伦的老婆昆凌电影的名字叫《叱诧风云》,主题跟赛车有关目前,这部电。
- 路漫漫其修远兮吾上下求索(路漫漫其修远矣)
- 2024-07-01路漫漫其修远矣,。
- 国产丰田sienna价格(33.38万喜提丰田赛那SIENNA)
- 2024-07-0133.38万喜提丰田赛那SIENNA我是河北车主,提车价格为33.38万,目前已经行驶3266公里,接下来给大家谈谈我的真实驾驶感受拿下这款车的理由:当时在买朗逸的时候,我答应我老婆,要二胎就换七座,现在老婆十月份怀孕,我要完成承诺,我。
- 揭秘杨洁拍西游记为何事被气坏(最牛导演杨洁为拍西游记历经磨难)
- 2024-07-01最牛导演杨洁为拍西游记历经磨难蒋大为一生做过最正确的一个决定,大概就是在关键时刻帮杨洁导演仗义执言!1988年,《西游记》进入收尾阶段之后,杨洁导演本想带着剧组的演员们一起去新加坡参与演出,既可以提高《西游记》的国际影响力,又可以。
- 杨紫琼获金球奖获奖感言 中文(金球奖除了杨紫琼)
- 2024-07-01金球奖除了杨紫琼被好莱坞抵制了几年的金球奖,今天却刷屏了朋友圈杨紫琼霸气的“封后宣言”,让我们看到了资深华人女演员扬眉吐气的一天作势君之前专门写过杨紫琼,所以这一次想介绍另一位摘下金球的60“女神”,她就是值得所有最。
- 全球城市500强排名完整(全球500强城市上海11名)
- 2024-07-01全球500强城市上海11名2020年刚刚过去,这个艰辛的一年终于过去了在2020年中国海峡两岸的主要城市在国际的排名如何?全球500强中我国最大的经济中心金融贸易城市上海是位于全球11名个人认为上海这个排名就是低了一些,上海至。
- 燃烧意志下一个新限定人物(新限定备选的几人)
- 2024-07-01新限定备选的几人诸君安好,雾夏菌报道新限定的线索已经知道了几条,玩家们也得出了一些答案,那这一回合就来看一下哪几个更有可能很多玩家目前判断的依据在那张三人图,以及草帽团梦想这两点三人图中第一人光着上半身,第二张图穿着。
- 哪一款奔驰车比较保值(十年的二手奔驰来打脸)
- 2024-07-01十年的二手奔驰来打脸二手车的保值率是一个永恒的话题,一般来说,日系车由于机械部件比较耐用,加上维修保养成本较低,相比于欧洲车,会有更高的二手残值买回来只需要做一次正常的保养以及更换易损部件,就能继续在路上跑个数万公里,不。
- 猪蹄怎么炖出来软烂好吃(记住一放三不放)
- 2024-07-01记住一放三不放大家好,我是阿飞,今天推荐一道大人孩子都适合喝的汤,孩子吃了补钙健脑长个子,女人常吃面如桃花皮肤好,美容还能抗衰老冬天天冷,有时间炖一锅给自己给家人补一补【猪蹄花生汤】猪蹄含有丰富的胶原蛋白,钙等营养。
- 林州景区旅游攻略(林州市25处风景大汇总)
- 2024-07-01林州市25处风景大汇总红旗渠故乡——林州林虑山素以“太行最秀林虑峰”和“景物雄奇,秀绝一郡”著称;是南太行风光的灵魂所在、北方山水风格的典型代表,被誉为“北雄” 南北长45公里,东西宽200米,最窄处仅60米;峡谷平均垂直。