关注后回复“进群”，拉你进“大厂设计师朋友交流群”

这是一个B端网站重构设计案例。

首先看一下重构前与重构后的页面效果对比：

重构前

重构后

接下来，我将详细介绍整个重构的过程，分为9个部分：

1.导航

为了能让页面体验更加沉浸，将原来的顶部导航改成了可以收纳的侧边导航。

这样可以腾出更多的空间用来展示内容，且导航的扩展性更好。

导航重构前

导航重构后

2.报告生成流程优化

该网站要主用于研究分析师来生成报告，他们平均每天要制作10-15份报告。

他们的报告生成流程如下：

2.1. 选择日期范围

2.2. 选择多个指标

2.3. 选择他们希望如何对这些指标进行分组（按天、周等）

2.4. 应用过滤器以放大相关数据

2.5. 生成报告（随后等待报告加载 10-15 秒）

报告生成流程重构优化点如下：

A、引入快捷方式：

引入“横向箭头”切换“选项卡TAB”、“纵向箭头键”选择下拉菜单下的值、 “Enter”键进行选择。用户仅使用键盘就可以构建报告。

B、保存的报告：

在观察我们的用户时，我们注意到他们一整天都在重复创建类似的报告。

解决方案很简单 ，创建可供用户快速访问的已保存报告模板。

C、优化空间：

指标、过滤器和组的数量在不同的报告中差异很大。

因此，我们采用了段落文本的方式，便于用户快速切换指标、过滤器和组，使得整个流程更加流畅。

生成报告-重构之前

生成报告-重构之后

3.数据概览展示优化

数据概览可帮助用户获得数据的宏观视图，以了解全局中的问题区域。

在该案例中，数据概览信息会显示特定时间范围内的总用户安装和卸载情况，你可以在下面看到，这些数字之间的关系并没有在旧 UI 中突出显示：

数据概览-重构之前

在新方案中采用了饼图，这样有助于突出显示安装、卸载、恢复等数字之间的关系，另外，我们还能相关联的指标用分隔符进行了直观的分组：

数据概览-重构之后

4.操作按钮

按钮能实现界面上的执行操作。

格式塔接近原则对用户根据他们的风格、位置和间距找到动作之间的相关性有很大的帮助。

我们可以看到原界面中的操作可以分为3类：

1. 生成报告前的操作（生成、取消）

2. 生成报告后的操作（保存、下载、共享）

3. 控制用户希望如何查看报告的操作（表, 图表）

操作按钮-重构之前

新方案，我们把操作根据逻辑对展示层次进行了梳理，区分了重要与次重要、不重要，并且进行了一致性的按钮风格重构，使得用户更容易操作。

操作按钮-重构之后

一致性的按钮风格-重构之后

5.微交互

任何在屏幕上花费超过 3 秒的交互都需要反馈。

加载-重构之前

新的加载方案，采用了更细致的加载反馈：

加载-重构之后

一个有趣的加载动画帮助我们管理用户的等待时间。

骨架屏幕为用户提供视觉提示，骨架屏幕在用户的感知中起着重要作用，让用户感知屏幕显示不像进度条那么慢。

6.表格优化

本次表格优化了3个点，如果想了解更多表格优化的方法，请直接查阅【设计基础】B端数据表格的20种交互模式（带GIF示意图）。

5.1 水平滚动：

水平滚动有助于浏览列数超过屏幕容量的表格。

5.2 固定标题：

表格上的固定的标题使用户在向下滚动时更容易找出用户正在查看的列。

5.3 行悬停：

太多的列使用户难以跟踪行，悬停时突出显示的行使水平查看更加轻松

重构后的表格

7.日期选择器

2个优化点：

6.1 一次设置日期范围：

用户必须浏览 5 个不同的字段来设置他们的日期范围，这个实在有些低效。新方案是帮助用户在一处设置日期范围。

6.2 时间范围滑块：

选择一天中的时间，为时间范围输入文本比较麻烦。

新方案引入一个时间滑块，用户可以简单地拖动它快速定位正确的时间范围。

日期选择器-重构之前

日期选择器-重构之后

8.空状态

新方案利用空状态给出快捷创建提示，引导用户快速开始构建报告，提升效 率。

9.错误状态

在错误状态下，给出 解决方案，比如“再试一次”来重新运转命令，要比什么都不给的体验要好得多。

新方案，提供“再试一次”

10.图表

数据的良好可视化可以为用户提供强大的洞察力，下面的示例将涵盖我们为图表所做的一些事情：

10.1 水平条形图：

垂直条形图最适合时间序列，但它们不适用于较长的标签，所以我们引入了水平条形图，为标签提供了足够的空间。

10.2 将饼图限制为最多 6 个值：

饼图不建议超过6个值，否则会增加视觉对比的难度。

10.3 添加了堆叠条形图表：

堆叠条形图表非常便于在一个维度中查看多个维度指标的对比，在这个案例中，我们用堆叠条形图表来查看在时间维度中的口碑印象、有效点击、无效点击3个维度的数据对比。

结语：

这个设计案例的设计过程揭示了很多设计见解与方法。

大家可以结合场景需求用在自己的设计项目中。

本文完

欢迎大家评论：）如果觉得不错，就随手点个“赞”和“在看”吧。

评论有奖，评论第10、20、50、100位有奖（奖品来自大厂，不定期更换），奖品随机发放，部分奖品示例如下：

转发亦有奖，转发累计10篇/或想获得指定奖品，可联系小助手领取奖品

加助理微信，备注：转发累计10篇领奖/想获得指定奖品

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

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