今天主要的改版对象是一个采购的管理主页，即表盘页。

下面是原图案例：

该页面主要是对大型企业当前采购条目和进度的展示，尤其是对标记过的重点采购事件，会用一个流程框架将这些事件所处的进度展示出来。然后还包括一些新建的采购合同、供应商的列表。显然这个页面存在不少的视觉、体验的问题，我就不一条条简单分析了，总结起来：

• 顶部的采购管理 Banner 完全是多余的

• 采购流程跟进的空间不足，单一采购事件连标题都很难显示完

• 采购流程跟进内的事件区分度不够大，很难注意到具体的条目

• 右侧的个人信息以及下方的数据展示空间过大，但是信息并不突出

• 采购合同中信息有问题，信息太少，缺乏关键合同名（这些字段都有）

• 表格内都是居中对齐不利于阅读的习惯

• ……

这次因为内容比较多，所以我就使用 1920 宽创建画布，并做好对应的 24 列栅格。

在这个基础上，对页面的模块进行重新的布局。移除 banner，将用户信息和数据、常用功能移动到顶栏，将重点采购跟进拉长做成通栏，增加显示区域。把审批、供应商做成一栏。

然后，再逐一完成模块的样式设计。首先是顶部栏，用户信息放左侧，数据放中间，常用放右侧。

重点优化采购跟进的组件，使用不同颜色区分跟进阶段，并让采购事件的展示卡片化，对一些关键信息进行露出（详情中包含的字段），提高卡片的识别效率。

最后把两个表格重新设计，优化内容排列并高亮数据即可。

然后看看改版前后的对比：

以这个页面为例，在项目包装中如果只简单的放个页面进去有点太简陋了，那么应该怎么包装它呢？

我在之前的分享中也讲了，要写就要写解决了哪些问题，而不是写个页面产品说明或交互说明。所以优先把解决的问题罗列出来：

1. 布局重构：解决原有布局空间利用不合理的问题

2. 采购跟进优化：解决原有卡片识别性差，信息不完整的问题

3. 表格的优化：解决原来的信息展示不合理，布局不合理

如果包含了一些特殊的交互或样式的表现，也可以做出强调，比如采购事件的卡片，实际上处于每个不同的采购阶段中，打开看到的信息是不一样的，也就意味着卡片在每个阶段就应该有不同的状态样式，展示关键的字段信息或数据。

TIPS：这个需要比较细致分析业务细节，时间关系这个部分偷懒，大家理解这个意思即可。

有了大致的想法，就可以用原型做个基本的布局出来：

有了原型，就可以继续完善后续的设计了。文案的内容并不是一层不变的，可以根据在原型排版中得到的反馈，对编辑的内容进行优化，以符合更优的展示效果需要。

下面是简单输出的效果展示：

结尾

以上是以改版为主的作品设计和包装输出的整体思路分享，时间关系没有做成最完整的形态，能get到相关的思路即可。

周五会做一次特别的、完整的、深刻的交互案例改版分享，大家下方二维码预约。

当然，我们新一期B端课程也在招生中，目前还有早鸟价格，早日预约早日变强，乌拉！

课程介绍：今年最后一期｜B端产品设计课开启招生

我们下篇再贱……