用一个真实案例，演示B端设计框架的价值

今天以一个正式课学员在咨询的工作案例作为对象，在框架基础之上，进行更深入的实例演示，来理解框架到底有什么价值和作用。

下面该学员目前的项目设计案例（已脱敏），是一个服务配置的表单页面。内容区域的左侧是服务列表，右侧是服务相关的设置和信息。

在内部评审中，团队对于界面的的样式并不是特别满意，包括觉得页面太白、视觉层级不合理之类……

先忽略评审建议，以视觉的眼光来看待，目前存在的问题主要是信息呈现上的不合理， 包括以下几个问题:

1. 服务列表栏空间太小，信息展示不全
2. 服务配置/方案选择的层级关系不够清晰
3. 模块框架边框太多，线条元素过多
4. 主色应用过度，会对视觉造成不必要干扰
5. ……

其中最有代表性的问题，就是在上级组件内使用描边的方式来突出下级组件，这种做法简称 “套娃”。我们把内容去掉以后展示出来的效果如下。

可以发现矩形模块的数量很多，模块之间留出的缝隙也很多，会过度切割用户的视觉内容。所以没有绝对的必要，就不要在一个包含了矩形背景的区域中，为下级组件添加描边边框。

下面我们进入改动的操作中，首先是确定页面的整体框架，和目前没有太大的差异。但是稍微加宽导航和服务列表栏，让比例更平衡一点。

接着细化框架内容，确定下级模块的基本布局形式。

主要优化点包括：

1. 该页面层级比较深，原页面中返回非常弱，面包屑有添加的必要，且服务栏上方的返回使用更明确的文案独立一行，不用占标题空间。
2. 移除不必要的描边，使用基础分割线为次要组件做隔断，减少二三级模块层级感。
3. 合并检查更新和影像压缩模块，只有一个选项的情况下，还需要各添加一个标题只能增加认知负担。
4. 确认操作按钮右移，减少视觉上的权重，同时要符合正常操作的预期

到这一步都是对框架本身的构建，再下一步，就是完善里面具体的内容和字段，就是进入组件布局的过程。

其中，影像信息更新的内容比左侧的影响匹配规则内容更多，但它们没有均分宽度的必要。所以一方面优化左侧选项的表现形式，另一方面调整模块宽度，扩大右侧空间。

完成细节的调整以后，最后我们再开始添加色彩和视觉样式。

其中，把服务列表的开关改了，因为关闭服务通常需要二次确认，且开关的操作并不高频，那开关就并不合适。然后就是颜色的调整，时间关系没有做的特别细，但基本方针就是主色的应用不能过度，开关可以用功能色替代，文本按钮可以额外用主色创建一个明度较低的颜色不会显得太扎眼。

还有个非常重要的认识，就是一定不要轻易在编辑环境里给删除加大红色，红色是用来提高关注度和警示的，它可以用在弹窗里的二次确认，但不是用在安静躺在角落里摆烂的固定删除按钮。

是就怕用户没把它们删了嘛？

最后，前后两个版本的对比图：

之前版本

改版后版本

结尾

B 端设计的界面效果没有什么高大上的理论，先从框架出发，然后在细节处保持严谨、合理、一致，就可以获得更好的交付结果。

PS：时间关系，改版仅为了讲解设计思路，不代表我们最终的落地输出和完整水平，有瑕疵可以提出交流。

第九期 B 端产品设计课程开启正式招生，早报名早学习，学员群里等着大家了 👉 https://pro.uisdc.com

欢迎关注作者的微信公众号：「超人的电话亭」