今天继续回到B端的界面改版案例中，来解答一个问题，为什么你们做的界面看起来不怎么有设计感！

这次改版的案例是我们课程中某学员做的一个表盘页面，非常有代表性，下面我们就会从分析原界面问题开始，到展示重新改版的整个流程。

分析一个页面本身设计的问题，首先要先具备合理的认识，即什么样的页面设计是优秀的、专业的、有设计感的。这个认识没有建立起来之前任何分析都没有意义，因为你的审美水平没有超过动手能力，那就绝对不可能指导你自己做出改进。

所以解决所有关于设计感缺失的第一件事，就是去提升相关审美，去大量收集同类页面设计的优秀作品，以500张为一个节点，然后呢？

把它们删到剩50张做的最好的案例，并以这些作品为评判标准再去收集新的……不做这个你永远提升不了，其它说什么都没用，所以老老实实去操作一遍你们会回来欢呼认识和以前完全不一样了，而这需要的时间甚至只要两三个晚上。

再接着进行具体分析，类似产品体验五要素，要以结构化的形式入手，而不是乱糟糟的东找一个问题，西挑一个毛病。

在这次分析中我们主要包含以下2个大的维度，框架和视觉。框架就是指主要组件、模块的布局样式和合理性，视觉则是指字体、色彩、图表、间距等基本要素。下面首先从框架开始说起。

1. 原图的框架中全局组件忽略掉左侧没做满（作品集输出的话绝对不能出现的问题）的问题，顶部导航和左侧同色的观感并不好，不能将组件做出比较好的区分。

2.页面的整体信息展示量太少，在 1440 宽的第一屏中下方的柱状图表占据了大量的空间。实际单屏显示的效果是如下图所示的，明显对空间有大量不必要的浪费。

3.在字体应用中，模块标题本身的字重没被统一，整体文字的字号偏大，多数使用14或14以上，所以看起来很粗狂，并且文字颜色过深。尤其是统计数字，过于显眼，超出了识别的必要。

4.图表的设计，多个图表本身的区域规则是不一致的，和外部间距不统一，图表本身细节也不严谨，比如环形图的起始和结束位置。5.其他间距的控制问题，如右上角和下方图表中统计数字模块，新建代办按钮等，都不是特别的严谨。

其它更小的问题就暂且不提，这些问题看起来都不是大问题，因为原设计你要说做得有多差吧那肯定不至于，但就是和 “有设计感” 有很大的差距，而这种差距就是由一点点的细节问题累加起来的。

比如我们按原设计完全一样的布局内容重新调整下做的框架，你们可以对比下和原来的差别。

下面，我们就围绕这些问题做相应的改动。

1.改版的过程首先从全局框架入手，既然要优化向上面跟着原来做就没意思了，所以我们要做更合理的改动。如果要压缩高度，让内容更紧凑一点，就要重新调整内容的模块，将客户订单左移，快速入口右移，原有收款付款模块合并。

而在这个阶段一定要灵活一点，框架的设计绝对不是只有一种可能性，所以再做了第二个版本出来，增加一个统计项让板块切割更均分一点。

再或者项目如果页面数真不多，导航选项就那几个，那么没有理由导航只做在左侧，那就合并顶部导航的版本出来。

可能性多种多样，需要的主要是产品和交互思维来考虑，而框架本身的基本规范、参数应用，是B端设计中基础的基础，一点问题也不应该出现。

2.然后下一步，就是完善相关的文本和字段内容，用画原型的方式把内容全部填充进去。这个阶段重点关注字段的合理性，以及文字的对比，交互的方式。

3.对主要的元素进行上色，有明确色彩指向的模块也填充上颜色，其它乱七八糟的颜色不加，图标和图片等也不加。确认颜色的填充是合理。

4.完成后续的细节，填充对应的图标，要替换不同风格的图标类型来提升画面的质感，不能让它太浮夸，也不能看上去太无聊。

到这一步，基本就优化完毕了。因为还是遵循原作品设计的思路做优化，所以改版的幅度并没有做的太大。这里要提醒的是，界面的设计感就是从细节里扣出来的，这些基础能力全是一个B端设计师的最入门的基本功，没有什么奥秘。

下面是改版前后的样式，可以在电脑上看大图对比：

结尾

之后尽量每周会有一篇改版，不管是管理系统的还是移动端的，有希望看的案例也可以在下面留言。

我们下篇再贱~

第8期B端产品设计全能班开启预约了。早预约，锁定早鸟价格，课程服务也从预约后就开始了~

给彼此一个机会，现在就预约变强