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

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

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

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

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

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

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

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

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

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

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

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

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

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

主要优化点包括:

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

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

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

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

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

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

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

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

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

最后,前后两个版本的对比图:

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

之前版本

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

改版后版本

结尾

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

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

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

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

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

收藏 39
点赞 45

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。