网站改版，为什么改？如何改？
如果只是设计、功能和栏目等的稍微变动，从技术上说并没有多少难度。但对于网站本身的发展来说，尤其是一些存在很严重的对搜索引擎不友好问题的网站，没有针对性的改版，相当于只给网站换了一个外壳，治标不治本。

不管是改版还是重建，都需要先进行分析诊断、网站整体规划，找出已有网站存在的问题及相对应的解决方法，同时要有优化的概念；而不是盲目的去重新建设新的网站。

从网站分析诊断开始，分析网站的各项指标数据和用户体验等方面，云齐邦总结上百个网站及落地页，一般网站会有三个方面的问题：功能模块冗杂、用户体验不佳、视觉设计陈旧。基于以上，可以确定了网站改版设计策略，即：内容冗余板块、体验导向、视觉升级

一、内容冗余板块优化

从网页热力图分析，可以发现用户的在页面上的注意力停留在哪些模块，哪些模块是没有关注的。举例：主站首页的滚屏衰减非常严重，除去工具入口“开始设计”外，只有“优秀设计”有一定量的点击，而其余如“社区、变现、品牌馆”等内容鲜少有人问津。

那么，规划合理布局网站内容模块，精简合并，是这次改版的重点。

1. 模块精简

通过整理分析，云齐邦发现大部分老网站都有类似的问题：“卡片样式太多”、“内容更新迟滞”、“质量良莠不齐”。在这次改版中，就需要把低访问、不维护的模块大胆舍去，只在首页留下了“设计模板”和“优秀设计”。

2. 导航瘦身

双层导航设计可以很大程度呈现更多页面栏目入口，似乎方便可以了用户，但是如果设计不当，就会出现“层级难处理”、“入口太混乱”。网站改版中，合并了双层导航，同时也对入口进行了归纳和统一，在符合目标的同时，让一切井然有序。

二、提升用户体验

1. 瀑布流，看得更自在

用户的主要动线是“找参考→做方案”，而找参考的逛街感，和瀑布流非常契合。所以我们将“优秀设计”瀑布化，这让用户可以拥有更流畅的浏览体验。我们也去解决了标签多而杂的问题。通过代码取色、色值校准，我们使标签和内容协调统一，真正用图说话。

2. 为不同屏幕大小的用户考虑

通过流量工具统计用户的屏宽，会发现用户的屏宽在1280px-2560px之间不等，尺寸相当悬殊。如果采用APP式的一套通吃，无法让所有用户拥有优质的体验。——所以不仅要保持大屏完美，也要让小屏满意。

我们把元素拆分成两类：一是字号和间距，我们设置了屏幕断点，在不同断点使用不同的动态数值；二是内容卡片，我们设置了基准卡片大小，通过公式去计算出动态像素里单个卡片的数量和大小。

同时，内容的露出率也非常重要，配置一套动态适配规则，可以保证所有用户能拥有完整、舒适的浏览体验。

三、视觉设计提升

1. 视觉语言

改头换面不是每次改版的必须，设计师不以大刀阔斧来证明自己的存在感，更重要的是能去找到用户感知和实现成本的平衡点。

基于“合适”的原则，我们从色彩、质感、图标这三个方面进行提炼，去定义了酷家乐主站新的视觉语言。

色彩：原有的品牌蓝并无过错，我们沿用并对之进行了流体演绎。同时我们规范了功能色的使用，避免重蹈“乱”的覆辙。

质感：新拟态很火，也和我们很合。通过对设计系统中border-radius、box-shadow等视觉token的定义，我们实现了一套轻量且富有层次的组件主题。

图标：玻璃和几何的搭配极具现代感，全新的图标设计也为主站带来了自然而灵动的生命力。

2. 界面表达

设计语言也不单是局部元素的呈现，更需要落到场景中去实际应用。贯穿始终的设计表达才能让用户有通感的体验。

来看看我们如何让用户感受到这道“光”：