我之前发过金山设计系统 King Design：金山设计系统2.0升级，又有B端组件用了
结果发现后台有人说显老气……
下图是该网站众多实例图中的一个：
上图来源：https://design.ksyun.com/docs/design/guide-9/
金山也是国内知名度很高的软件公司了，远的不说，跟国内的蚂蚁金服的 Ant Design 和字节的 Acro Design 比一下，差距还是蛮明显的：
P.S. 点击图片放大可能看得更清楚些。
Ant Design
Acro Design
其实很多年代久远的 B 端系统，都有「老气」的问题。
我今天就想来尝试一下，如何让 B 端设计显得「年轻」起来。
为什么显老气？
和上面的 Ant Design 和 Acro Design 比起来，下面这个界面最明显的差异是不够整洁精致。
早期的界面设计使用的背景色、阴影和分割线颜色都偏深，还喜欢到处用高亮色，再加上信息密集，在现在看来就比较粗犷混乱。
接下来，我将通过四个步骤来尝试改善这些问题。
对了，虽然今天要解决的是视觉问题，但作为以功能为主的 B 端产品，我们还是要从实用性出发。
为了让界面更加简洁干净，先看看有什么信息可以去除的。
1. 去除不必要信息
首先，图表卡片的重复信息很多：
1. 横坐标很密集，可以减到每 30 分钟一个数字
2. 既然所有图表纵坐标最大值都是 100%，那么可以默认不展示数字
3. 卡片上“告警”为 0 的信息完全可以不展示
4. 卡片上的拖动和放大操作，完全可以鼠标悬停时再展示
5. 左导航上几乎每一个选项都有一个图标，这个其实没有必要，对用户没有帮助不说，还很“抢戏”。
6. 选择时间跨度的组件很占地方，但是又不是经常使用（推测），所以我用“自定义”这三个字替代了。
2.弱化次要信息
有些信息虽然必须留着，但因为不是什么重要信息，所以要降低存在感，这样才能实现视觉降噪。
顶导航：渐变背景变成了单色，右侧的信息降低不透明度，整个导航的存在感下降了。
左导航：深灰色背景变浅、折叠按钮挪到顶部与导航标题“监控”同行、降低导航标题“监控”的不透明度、缩小箭头尺寸，这一细节操作让整个左导航的存在感下降了。
背景：除了图表卡片之外，其它的白色方块都去除了，一下子就清净了好多。次按钮、下拉框和 tab 等辅助操作的背景从白色改为透明，并且使用更浅的边框线。
卡片：将告警信息作为标签置于标题左侧，减小占用空间。拖动和放大图表则统一用灰色，置于卡片右上角，虽然存在感低却容易找到。
信息：减轻标题重量，将卡片标题的字体从加粗变成常规，并把跟随的“(%)”挪到图表纵坐标上。简化轮廓，将下拉框的说明“查找卡片”从框外挪到框内。
色彩：所有阴影都去除了，只保留卡片悬停态，这样重点更加突出。将标题高亮色都去掉，都改为深灰色。
3.强化重要信息
把视觉干扰降低之后，我们才有余地来拉升重要信息的存在感。
1. 首先是把页面标题加大，同时增加上下间距，这样视觉层次一下子就出来了。
2. 将蓝色的主按钮放到最右边，更容易凸显，还能和最左侧的导航高亮块相互呼应。
3. 将时间 tab 放到左侧紧跟下拉框，更容易看到。
4. 加粗卡片上的三个大号数字。
因为一张图上的重点信息越少越好，所以这些就差不多了。
想要学习或者练习体验/交互设计的朋友，可以了解一下「体验设计学习社」。
如果你只是想要多认识一些同行，也可以加入我们无广告的纯粹体验研讨微信群：
本篇文章来源于微信公众号: 体验进阶
