之前一直在更新和 C 端有关的 APP 改版，最近因为有展开 B 端的课程和讨论，也收集了不少问题界面和难点。

今天演示的案例是 B 端二期学员目前项目的一个驾驶舱页面（首页），基于保密问题项目本身内容和字段有相应的修改。

我们首先看看原图的样式：

原主页用的是 1920 宽，但项目要支持 1440，同时觉得原来的设计有问题，需要优化。所以，我们就来优化下这个页面的整体交互和展示。

因为时间有限，所以我的优化是偏交互原型的，对细节、色彩的配置没花太多精力调整，如果是认为细节、色彩有优化空间，那是正常现象。

对于这样的页面的调整，我的设计步骤是这样的：

• 了解项目基本信息，不同功能模块业务

• 完成顶部通栏模块设计和调整

• 确定内容区域结构、功能模块、间距

• 根据权重要求，优先设计地图区域

• 其次设计左侧任务数据模块

• 接着设计右侧图片展示区域

• 最后依次设计下方其它模块

关于这个项目的业务信息，我就不在前面慢慢讲解了，因为这个同学对项目的了解也并不是太充足，所以有部分业务内容没搞明白（引以为戒） ，下面会通过每个模块的详细改版展开说明。

1. 完成顶部通栏模块设计

原图中，顶栏包含导航和一个菜单栏。导航栏没有太大的问题，重点调整在菜单栏右侧的时间选项上。

在这个案例中，出现了直接选择时间范围的标签，也有自定义时间跨度的表单。如果选择右侧时间自定义的时候，左侧的标签显示显然会有冲突。

所以我做了调整，增加了 “自定义” 选项，同时让左侧的标签选择后会自动设置右侧的时间点，如果自己去编辑右侧的时间，左侧就会自动切换到自定义标签，同时去掉查询按钮，选择后直接刷新下方内容。

2.根据权重和内容切割页面

第二步，就是根据业务方的需求，确认页面中最重要的内容，首先是地图模块，然后是任务状态。

在原页面中，左侧的模块拆分有点太混乱，所以，我先考虑合并左上和左下的子模块，构成整体。将页面切割成6个尺寸不同，权重不同的区域。

其中，页面边距为 20px，模块间距为 8px。

3.优化地图区域的交互和样式

中间区域，默认显示的是市地图。上方右侧的图形就是之前做好的弹窗，用来点击该区后展示的具体数据信息。

该图表中，蓝色代表完成，黄色代表未完成。显然，这样的数据是没人能看懂的。

不仅白色标识文字看不清，数据提示关联度也特别低，且点击的弹窗的形式本身也不符合这个模块的应用场景。

所以我做了对应的调整，让点击区域后，区域放大其它数据隐藏，直接在该地图模块中展开对应数据信息， 将完成和未完成做成堆叠条形图。

4.优化左侧数据内容

之后，就是优化左侧数据了，在进一步讨论过程中发现，代办、签收、进行，实际上和下方任务状态统计的数据不是一回事……所以做了进一步切割。

同时，原设计任务状态用的奇怪的百分比柱状图几乎没有识别性，所以我尝试了下用一个百分比柱状图来展示这个图表，但显然效果不是太理想。

中间切换了不少的样式，最后用对每个数据展示一个百分比柱状图，同时拆分了上下两个两类数据，上方是还在 “进行” 的类型，下方是 “失败” 的类型。同时对重要类型进行色彩暗示。

5.优化右侧图片展示区域

右侧任务环境抓拍，图片来源不能完全确定，有摄像头的，也有上传的。不过不纠结在这个细节上，该模块会展示最新的任务的不同图片，点击可以放大，且可以上下翻滚查看更多……

所以我觉得这样的展示效率太低，进行了幻灯片式的切换，让正常情况下就能看清楚图片的内容而不是每张都要点击放大。

6.优化下方的模块

最后，就是优化底部模块了，下面的模块没有太多可交互的内容或者复杂图表，所以只在原有基础上优化布局，可以直接查看前后的两个版本对比。

完成了上面的调整，基本整个页面的交互和布局就重构完成了，下面就是前后两者之间的对比，可以点击查看大图。

今天的改版就到这里结束了。B端项目里，交互怎么做，核心还是围绕在对于业务本身的理解。在下次改版中，我会主要挑选和表单有关的案例来进行演示。

我们下篇再贱～

B端产品设计全能班持续招生中，有提升需要的同学记得联系我～