▲点击 "子牧UXD" 关注，回复 "设计圈" 加入我们

   2022年 原创总第 6 篇   

   距离年度目标40篇    还有 34 篇   

(全文2192字，预计阅读时间：5分钟)

B端产品主要是Web端产品，空间大、操作多，内容相对复杂。需要通过页面布局或者视觉设计表达出明确的逻辑关系，从设计角度降低用户的学习成本。

而用户有固定的认知规律。格式塔原理揭示了人类视觉的认知是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。

格式塔主要包括7个基本原则：

今天我们就来总结下，格式塔原理在B端产品中是如何应用的？

#01

接近性原则

我们先看2张截图，分别是不同分辨率下的界面效果。

可以明显的感觉到高分辨率下，菜单列间距离较大，菜单的归属关系很清晰。而低分辨率下，菜单间的距离变小，特别是后面两列的菜单会给人混在一起的感觉。

这就是格式塔原理中的接近性原则，距离近的关联亲密，距离远的就各自独立分组。

当我们想要传达给用户层级关系时，就需要善于利用接近性原则。例如表格上方的功能按钮，通常我们将高频、核心操作放置在左侧，低频、辅助功能放置在右侧。通过增大元素间的距离，达到功能分区的目的。

#02

相似性原则

相似性原则是通过颜色、尺寸、图形等方面的共同属性，实现信息的分组或者高可读性。

例如在可视化图表中，不同范围值的指标采用不同的背景色。通过背景色的差异，将同一范围内的数据形成视觉关联，提高用户对信息的识别效率。

通过图形尺寸的相似性也可以构建内容分区。例如阿里云、腾讯云控制台的首页，都采用了双列设计，左侧主要以高频的业务功能信息为主，右侧是辅助运营信息。两列尺寸宽度有明显差异，用户会将相同宽度的卡片归为一组。这样有助于用户理解两类卡片的内容差异，并有效地突出业务信息。

#03

闭合性原则

IBM、苹果的Logo设计，无论是“用刀砍过”，还是被“偷咬了一口”，用户仍然可以识别出完整图形。这就是视觉闭合性原则的一种表现方式。

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

在UI设计中，则会通过对齐方式，形成虚拟空间。例如下图中阿里云通过明显的背景色、阴影等手法形成有形的内容空间。而微信公众号则是平铺背景色，内容区借助标题、卡片对齐形成视觉闭合空间，最终将页面划分为左侧导航菜单和内容区两个空间。视觉表现上更轻量化。

另外闭合性是需要元素之间相互辅助的，单独的元素无法构建出闭合空间。以下图为例，虽然四个小的卡片做了间距分割，但是由于界面整体上是横向分割的。我们会将4个卡片看作是整体元素去理解和认知。

#04

连续性原则

用户更习惯于从左到右的横扫阅读，因此连续性主要体现在横向空间中。

下图中，虽然左侧的标签文字与右侧的内容信息有较为明显的间距，高度尺寸差距也比较大。但是用户不会将内容看作是4个独立的个体，而是理解为两组信息。

在某些场景中，如果信息平均分布，不会产生连续性的视觉感知。

例如下图指标监控中，指标都是采用小卡片，间距、尺寸较为统一。这种情况下用户就很难对信息分组处理。在我看来这些指标只是一个个的视觉散点，没有明确的视觉重点。用户无法感知到内在的逻辑性。用户想要找到某个指标时，需要逐个检索，花费的成本更高。

#05

简单对称原则

通过上述很多图片，我们可以看出页面元素基本都是横平竖直，中规中矩的元素和分割方式。或许有些单调乏味，但是胜在简单，不会带来额外的视觉噪点。

特别是B端产品，基本看不到异形的存在，甚至全圆角矩形都很少见到。即使有异形，也只是作为视觉表现元素存在于内容中，而不会作为空间的划分边界。

#06

主体与背景原则

主体与背景原则最典型的应用就是蒙版弹窗。通过拉大主体与背景的差异性，凸显弹窗信息。

当我们需要着重表现内容时，同样适用于主体与背景原则。例如登录界面的设计，会通过差异化的背景、阴影等方式，带给用户清晰的视觉层级，适当凸显输入框的主体地位。

而B端内容区是核心空间，基本都是采用纯白背景，与页面背景形成对比，从而占据信息的主体地位。

#07

共同命运原则

共同命运原则听起来有点玄学，指的是相同运动特征的元素会被认为是同一组或者是具有相关性的内容。运动的元素在B端产品中应用很少，我没有找到合适的案例解释这个原理。

在移动端产品中有些应用案例。比如iOS系统中，桌面布局编辑态下抖动的图标，可以与静态不可编辑的内容形成隔离效果，视觉引导性更强。同样今日头条频道编辑时，也采用了抖动效果。

总结

虽然B端产品没有C端色彩丰富，表现力上没那么炫酷。但是两者对信息传达的要求是一样的，要求和谐、有序、层次分明，辅助传达内在的业务层信息。灵活地运用格式塔原理将对产品的体验提升会有很大的帮助。

格式塔原理不仅限于视觉表现，产品经理或交互设计师在原型设计时，也要重视格式塔原理，辅助设计方案表达，提高团队间的协作效率。

今天的分享就到这里了。如果有更好的案例，欢迎评论区留言分享给大家~

—— THE END —

🌈🌈🌈 粉丝福利：  福利1  关注【子牧UXD】公众号，点个“在看”，可获得”读者大礼包“ 回复数字【01】，获取100+“行业报告” 回复数字【02】，获取“大厂设计规范” 回复数字【04】，获取“作品集包装攻略” 回复数字【06】，获取“笔试面试技巧” 回复数字【07】，获取“设计知识分享” 回复数字【08】，获取“精选样机合集” 此外还可领取“大厂原型文件”、“设计师简历样本”、“App设计参考作品”等高价值资料  福利2  我们组织了专业的产品/交互/UI设计交流群，群内有来自多位华为、阿里、百度、拼多多、腾讯、快手、美团等一线大厂的设计专家，欢迎入群一起交流成长。 扫描下方二维码添加小编微信，即可拉你进群。 与「10000+」读者共同成长

阅读推荐 》》

关于弹幕的思考

聊聊移动产品中的空间设计

基于「用户侧」分析付费会员权益体系价值感知

关于B端「新人引导」体验设计的深度解析

交互设计师如何做好信息反馈？

点下“在看”，爱心发射

本文来自微信公众号“子牧UXD”作者：子牧先生（ID：HelloDesign）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。