B端框架应用真实案例演示

超人的电话亭 · 公众号 · · 2024-03-15 09:34

正文

前面分享过了页面框架的基本概念、常见案例。

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

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

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

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

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

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

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

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

主要优化点包括：

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

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

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

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

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

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

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