VV官网改版过程大揭秘！

VV官网自2016年推出至今，已有 7年多时间，一直沿用下载页和业务展示的聚合类平台体系，随着时间推移和业务发展，原有网站在用户体验和视觉表现层面亟待提高，官网改版被提上日程。

1.了解需求 与产品经理和需求方确认项目背景和目标，做好设计前期的准备工作；

2.市场及用户分析 通过调查问卷，竞品分析，用户访谈等绘制用户画像，分析市场需求，去伪存真；

3.提出方案 挖掘产品需求背后的诉求，理解产品实际想要达到的目标来制定设计目标并对方案的可行性与产品讨论评估；

4.执行 确认方向，输出方案，对接开发落地设计。

用户调研

设计目标

设计过程

线上现有问题分析：

1:视觉风格老旧，承载内容不全，未布局响应式（图左）

2:功能页面UI不符当前的审美趋势，且规范和适配方案不统一（图右）

初期方案

图1（左侧页面），是当前主流网站的布局方式，导航Tab+内容列表，优点以内容为主且目标清晰，交互简单，缺点是没有通铺业务内容，缺少主流产品的功能宣传；

图2（右侧页面），微微官网现有内容结合需求后的展示，有两个Tab入口，首页宣传产品功能，二级tab主推优质内容，符合预期但布局需结合图1 合理安排。

最终将1.2方案整合并重新设计首页，优化了布局和产品展示（下图）：

图1（左侧页面），微微官网下载页，旨在宣传产品重点功能，每一屏幕单独适配且带有动画效果。顶部tab区域，二级页面全部选择跳转而不是本页刷新，banner区介绍产品特色和软件下载入口，往下依次展示业务方向以及重要功能。

图2（右侧页面），VV官网集合类首页，展示现有业务内容，以及平台工具属性入口（浏览视频，发视频、发说说、写文章等）。

个人中心也做了全新的设计，并与移动端功能同步，将个人信息和个人作品等全部展示出来，多端体验一致性得到了全面优化，在UI上修正了内容区的展示比例，优化了视觉质感，统一了微微网站UI规范。

适配

1.0-首页：瀑布流的下拉样式，内容区宽度为1190（以前的电脑因为硬件问题分辨率兼容最大也就是1190），现有电脑尺寸和分辨率都有提升，适配方案调整为内容区宽度1440（通过调研主流网站得出的新数值）；

2.0-发现页：拓宽内容区，提升屏幕使用率的前提下，优化视觉并合理布局UI。（如下图）

自适应适配  以2.0发现页为例，浏览器宽度和高度被拉伸时，页面内容随拉伸而适应（以前中间宽度是固定不变，宽度缩小时被裁切）

如下图，当小视频尺寸一定：

在宽度1920+（单位像素px）时显示6个

在1440-1920区间显示5个

在960-1440区间显示4个

在480-960区间显示2个

在小于480时被裁切

页面每一个元素可动的情况下，横向竖向拉伸怎么显示，需要整理好适配方案和具体数值提供技术。

图标绘制

icon统一，规定栅格尺寸，建立统一的图标绘制尺寸规范；平衡不同形状的视觉差，遵守视觉平衡原则保证图标整体性。

上图为部分图标和内容交互的展示，移动端和PC端设计，最大的区别就在交互，PC端人机交互媒介是鼠标，其在操作时需要实时反馈。所以需注意按钮/icon的四种状态（正常、鼠标悬停、鼠标按下、不可用），表单的两种状态（正常、鼠标悬停），文本输入框的四种状态（正常、输入时、输入正确、输入错误）。

一键换肤

基于用户诉求，为了更好的用户体验，VV官网加入了一键换肤的功能（日间/夜间模式），所有的日间模式页面重构夜间模式版本。需对应黑白两套规范如下图

日间模式与夜间模式切换效果对比

页面展示

动效实现

1.0-跟技术对接说每一屏都用gif图，考虑到性能加载问题和后续维护成本过高问题，含泪舍弃掉

2.0-用代码实现动画，兼容性和稳定性都是最优解，设计出demo技术来实现，缺点是沟通和实现成本大

3.0- https://animate.style/  利用这个网站，实现零成本和技术对接。选择合适的动画效果指定对应的元素，技术一键生成效果图，至此动画实现完美解决。有时利用外部工具也是解决问题的一种方式。

数据提升

至此改版设计已经完成，后面的迭代优化根据已有框架和UI组件规范延展即可。稳定期的pv（访问量）提升39.2%，这其中的原因不仅跟策略息息相关（以前的网站偏工具类（上传作品+下载软件），现在是集合类综合网站（上传作品+下载软件+写文章+刷小视频 等等），当然设计改版也起到了至关重要的作用。改版设计，不能仅根据需求表面去设计，一定要找到问题的根源所在去针对性的解决这些问题。VV官网历经多次的迭代，通过用户调研以及用户反馈，共同探索更适合产品现阶段的设计方案，使PC端网页展示更清晰简洁，样式更统一、使用也更加高效，提升了网页端的交互和视觉体验

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。