编辑导语漂亮视频是一位勤奋于塑像泛知识的短视频，现在已上线2年多的时刻呢。本文做者团队在近期的自查历程中，觉察首页视频效果较低，因而便发动专项提升PC站体验，并对事情事情流程举行了论述，一块来看一下吧呢。
一.事情事情布景
漂亮视频是一位勤奋于塑像泛知识短视频呢。自PC站点19年上线，已有快要2年多的时刻呢。在近期的自查历程中，咋们觉察首页视频挑选效果较低，对比竞品采用照应式布置结合举荐FEED流的形式，内容展现和功效体验上差异分明呢。因而计划侧发动专项提升PC站体验呢。
1. 竞对体验对比
屏幕适配差通过成品靠山数据觉察，观-看漂亮视频PC站的用户屏幕尺寸含量中，67%的用户屏幕尺寸在1920px以上，32%的用户在1700px-1280px，但旧版只基于1200px，有无更好的使用PC空-间呢。关于更大的屏幕内容出现更显低效呢。
反观头部竞品，都根据栅格体制支持了照应式布置，关于随意屏幕尺寸都能很好的适配，保证内容展现的完整与高效，关于区别装备的兼容也有很好的效果呢。
导航效果低旧版漂亮采用顶部导航的形势，牢固展现15个频道列表，以后拓展了更多的频道都收起在两级导航内，不便利拓展与挑选呢；一些经常使用的功效如史书观-看.我的珍藏也都收起在两级菜单内，无益于用户运用呢。
大部-分头部竞品都采用了牢固导航的形势，将常勤奋能与频道安置左侧，用户岂论在站内的任何页面，都能够迅速在左侧切换页面，提升了挑选效果与扩张性呢。
内容展现少顶部天性视频举荐只展现6个，需要手动点击差一点切换按钮才气检察更多举荐视频呢；下方各垂类频道每逐一位也只举荐了5个视频，如需检察更多需要再点击进去频道页检察呢。用户如果不行以在首页这类主要场景迅速挑选出我想看的视频，那基本就会不连续参与页面造成用户的散失呢。
头部竞品基本选择了瀑布流的形势，直-接通过算法举荐给用户喜欢的视频，用户仅需要滑动页面就能够看到更多举荐内容，展现效果高呢。
2. 旋绕疑建设计划目的
建设照应式布置网页计划最基本准则即是有序，一位清晰有序的布置能够给用户带来郑重.专注的感受呢。运用栅格化照应式布置计划，能够足够使用屏幕尺寸带来更多的展现与更自-由的适配呢。
提升观-看挑选效果通过框架重构，视觉降噪等办法，体验升级，帮-助用户迅速达-成目的呢。
两.计划计划
1. 栅格体制页面照应式适配
选择照应式网页计划能够很好确实保跨与多屏幕尺寸下的展现效果呢；而且只开拓只要要开拓一套代码，不需要独自守护区别装备站点呢。且关于漂亮视频这类视频观-看网站，用户交互操做少，能带来更多的视频展现呢。
建设有序的栅格，能够有纪律的把页面元素排列，保证页面的郑重和相似的韵律性，同时也能够或者者让网页的信息越发雅观易读呢。
漂亮视频本次采用左侧牢固宽度导航，右侧1920px地域设置栅格的混淆照应式布置形势呢。所有最大页面宽度2160px，保证大尺寸屏幕观-看体验，采用24栅格，水槽宽度16px，页边距32px，列宽62px，均为8的倍数，吻合双数准则，不会出-现小数点或者半像素情形，便利开拓还本效果呢。
通过设置区别屏幕宽度的断点，右侧视频封面等比缩放，其余内容尺寸间距字号维持不变，小于断点宽度后缩减列数，最少保证4列呢。
2. 框架重构增添扩张性及观-看体验
在所有网站基本框架上，咋们采用了侧边导航栏形势，拥有更好的功效拓展性，不仅能够展现富厚的频道页，还能承接更多种别的功效，如热门视频榜单.放映厅.观-看史书检察及珍藏内容的迅速检察，体贴做者的最新内容也能够或者者显袒露在左侧导航栏地域，帮-助用户实时觉察喜好做者更新的内容呢。
右侧视频挑选地域也变成无贫加载feed流，相较一开始顶部差一点切换的举荐形势，挑选效果更高，仅需转动鼠标即可看到更多视频，提升更多优良视频曝光的应该性呢。这类框架观-看习性也和移动审察似，更适合现在快节奏短视频时期呢。
三.视觉降噪
1. 字号字色缩减提升观-看可读性
重新梳理了站内的字色字号来下降冗余视觉影响，从一开始8种字号优化为全站仅4种呢；灰阶的字色也在保证清晰度对比度的情形着落为3种，采用蓝黑色阶保证阅读恬静体验，且遵照WCAG2.0标-准举行可用性尝试，保证视障用户运用呢。视频落地页谈论区做为用户信息观-看的主要场景，改版事后观-看更清晰统一呢。
2. icon重绘更简练清晰
站内icon也通过重新绘制，各频道新增双色icon，风格统一，中性简练，表义明确呢。
四.计划上线与计划检查
首页AB试验数据对比
咋们一最先的时刻选择了首页举行尝试检查，通过一个月AB尝试后，试验组的页面带来了更多内容的展现和更恬静的屏幕适配，因此全站的内容展现和点展比及视频落地页展现和点展比均对应对比组均有小幅提升呢；用户关于新版页面吸收水平也较高，保留数据转变稳固，长留还出现正向上升的趋向呢。因而连续推行其余页面逐渐改版落地，提升网站所有体验与感受呢。
AB试验是最经常使用.本低的计划检查办法，能够迅速帮-助计划推断效果，便利后续计划改良和改版推进呢。
五.写在最终
在一样平常的工做中一开始能够从单点体验优化升级为所有事情事情的改版升级，要时刻站着用户视角洞察疑，思考区别界限情形关于计划展现的影响，在体验优先的时期，用户的散失应该仅仅是由于一位非常小的体验疑呢。
拥有更好的用户想法，能让你的计划更值得斟酌与易用呢。随着移动装备及种种所有屏折叠屏的普遍流传，PC网站的计划越发需要照应式布置计划，使用较少资源保证网站的适配与展现效果呢；在效果为先的网络时期，照应式布置与内容举荐形势是很好的组合办法，十分吻合短视频网站场景，展现更多的内容，提升挑选和决定效果呢。
希望本次事情事情的体验升级经验能够给我们带来帮-助呢。
做者百度MEUX
起源民众号百度MEUX（IDbaidumeux），百度移动生态用户体验计划中心，负-责百度移动生态体制的用户/商业成品的全链路体验计划呢。
本文由我们全是成品经-理合做媒体 @百度MEUX 授权公布，未经允许，不行以转载呢。
题图来源Unsplash，基于 CC0 协议
发表评论