B端设计 | 电商系统后台首页视觉优化设计
这周开始更新原子核系列中实际案例的部分，案例展示包含两个大的部分：
单页改版：针对单独页面的视觉调整，分享特定页面的设计、交互、体验思路
项目改版：完成整个项目的视觉设计，注重项目模块化、统一性、项目协作性
前几个案例会先从表盘页开始，具体的讲解设计的操作方式、流程。
提前声明一下，改版的案例是 “站在旁观者角度根据自己的使用体验和理解做的调整”，部分细节思路可能会和产品团队内部出发点、利益是不一致的。
如果在产品层面的理解和我的想法有出入，可以在留言中提及。要更多关注我在改版过程中从产生思路到实际落地的过程，以及前后的关联。
提示一下：本期案例改版视频已更新在原子核系列课程中，文末有观看入口。
下面，是我们这次改版的主角有赞的后台首页——实时概况页面：
这个页面是用户进入自己的店铺后台看到的第一个页面，聚合了一些基础的数据、任务事项，以及提供各种功能入口、社区入口、官方广告、官方资讯。
在我自己长时间使用这类工具的经验中，这种聚合型（夹带平台私货）的主页，只有刚开始用的时候，会稍微看看。多用几天以后，每次登录后台的目的都会很明确，上架商品、查看订单、导出流水等等，不会有什么精力在这个页面停留过长的时间。
在这个基础上，我们总结了一些缺点：
该页面实在是太长了，接近4屏的高度
空间利用率极低，下方的入口分散识别性又差
广告不吸引人，又和资讯做不出区别
那么，我们就进入改版实操环节，下面是改版的流程分享：
第一步：页面信息整理
对于信息特别多，且同级模块多的界面，优先要做的是整理信息地图，如果不了解的同学可以参考前阵子分享的这篇思维导图文章：
然后，理解其中内容的意图、类型，对它们进行重新的整理。
这里我将主区域用于放置比较关键的内容，合并下方多种入口成一个紧凑的，更高效的模块。
将广告和资讯安排到右侧边栏，客服、下载等元素做成悬浮框，减少占用的面积。
第二步：搭建页面框架
第二件事，就是搭建页面的整体框架了。这次的案例演示，我并不打算用栅格，而是使用朴素的页面间距分割形式。
首先确定左边栏和顶部栏的大小、位置，将主体区域确认出来。然后划分边距、侧边栏位置间距 20px。
之后，在这个基础上完成细节的模块，以及对它们间距进行统一的管理，所有模块间距为 8px。
第三步：填充页面的细节内容
这一步就是直接开始制作细节了，作为第一个案例，时间关系还是省略掉一些步骤的。简单解释起来，就是对这种列表多的页面使用了大量的 Auto layauto 功能。
同时，对一些小细节做调整，比如对待办项进行卡片化处理（实际上还没做完，狗头），简化图标成圆点。
然后快速入口分化不同的入口类型，用样式进行呈现。
对广告内容进行翻新，增加视觉吸引力和点击欲望。
下图是前后两个版本的对比：
目前视频讲解已经发布到B站的原子核系列课程，大家可以前往观看视频，里面有具体的讲解和操作过程。
10.10即将开课！想要变强的同学可以扫描下方二维码咨询课程了～
