本文主要用一些不同的案例来介绍心理学与设计之间的相互关系，以及一些作者的亲身经历，仔细阅读，相信会有一些收获！

在文章的最后分享一个小蛋，记得检查〜！

以下是翻译的全文：

我一直认为心理学和设计是用户体验的重要组成部分。每当我们的目标是满足人们的需求时，我们的职业就要求我们同情解决问题的目标。当我继续理解心理学在设计中的作用时，我偶然发现了格式塔心理学理论。

那么，什么是格式塔心理学？

格式塔心理学是一种思想学派，它将人们的思想和行为视为一个整体。当我们试图了解我们周围的世界时，格式塔心理学表明我们不仅仅关注它的每一个小部分。相反，我们的大脑倾向于将对象视为更大整体的一部分。这个心理学派在人类感知研究的现代发展中发挥了重要作用。来源: verywellmind

这次发现格式塔原则的过程让我完全理解如何将这些原则融入我的设计中。因此，在本文中，我将与您分享如何将这些原则作为我的设计应用于我遇到的以下代购源码网站和应用程序：

免责声明：以下设计解决方案是使用格式塔原则的示例设计。一些设计问题可能需要重新设计，但我坚持使用原始设计，只需使用格式塔原则进行优化。因此，如果您有其他解决方案，请留言。

亲密关系

当物体彼此靠近时，它们被视为一个整体而不是独立的。来源：Hubspot的博客

以下是使用亲密度原则来解决设计问题的示例：

标题和链接相距太远

正如我们所见，在线预订&游轮和学习更多点太开放，这使它们看起来像两个独立的元素。如果我们绘制一个线框来表示它，上面的例子如下所示：

线框

整个组件彼此分开，因为没有什么可以将图片，标题和链接联系在一起。因此，亲密原则是我们的解决方案指南。将三个单独的元素组合在一起使它看起来像一个整体——

中心标题和链接

在我的解决方案中，使用亲密原则，我通过中心对齐缩小了标题和链接之间的距离。通过这种方式，可以组合三个元素（图片，标题，链接），这有助于我们解决不一致的问题。

2.相似性

当对象看起来相似时，相似性原理就会发生，人们通常将它们视为一个组或一个模式。来源: graphicdesign.spokanefalls.edu

在下面的设计问题A中，我标记了蓝色文本。原因是在该界面上，“重数据用户”指的是“重数据用户”。和“灵活的Maximizer“是一组类似的数据——它们是用户界面上的两个切换标签。

设计A

那么，是什么让这两个元素无关？

可能有很多答案，但最引人注目的问题是没有任何东西可以将这两个元素组合在一起，这使得它们看起来彼此独立。正如我们所看到的，很明显界面的品牌颜色是绿色，但突然出现蓝色文字颜色。通过这种方式，相似性原则就派上用场了：

我的解决方案是设计鼠标单击状态以切换颜色填充以创建相似性并将其设计为选项卡样式。 （译者注：单击鼠标时，左右样式将互换。）

对于设计问题A，可以通过重新设计来优化它以增强用户体验。但现在，我们使用相似性原则以最少的步骤改进其设计。

还有另一种方法可以使用相似性原理——问题2：

设计B

在问题2中，让我们拆解它的基本组件：

标题: 40px常规内容文本: 20px常规文本链接: 20px常规

乍一看，我们可能会认为这是一个没有问题的设计。但是当我们仔细观察时，问题就出现了，它发生在内容文本和文本链接上，它们共享相同的文本系统样式（20px Regular），这会混淆用户并缺乏信任。当他们浏览代购源码网站时，他们可能会犹豫不决，可能会使用鼠标反复尝试单击文本和文本链接。

那么我们如何解决这个问题呢？

使用相似性原则，我们需要稍微调整文本系统风格：

标题: 40px Regular Content Text: 20px Regular Text Link：20px Bold

我们通过加粗文本链接和添加指南图标使这种类型成为内容的对比。通过这些修改，我们在整个文本链接中创建了相似性，从而加快了用户识别和运营效率。

本文之外的提示：创建文本系统时，请选择具有各种权重的字体（精细，浅色，常规，粗体等）。我们的目标不应该是仅使用字体大小进行比较，而是使用字体的字体粗细来进行比较设计。有关详细信息，请查看我的其他文章（译者注：这是此公开号码的最后一篇文章：10个实用技巧，使您的设计细节更先进）

3.专注

重点是感兴趣的区域，图片的重点或差异，以吸引用户的注意力。来源:粉碎杂志

我们将通过两个设计问题来研究如何应用焦点原则：

图像来源：电信

在上面的例子中，元素的布局实际上没有问题。但是，在信息层面，——主要内容和次要内容使用相同的按钮样式。

我们可以看到此界面的目标是让用户下载应用程序，而常见问题解答只是一个帮助文档，以便让用户更好地了解他们的应用程序（是的，我怀疑他们希望用户改为查看帮助文件下载应用程序。）

因此，我们的解决方案如下：

设计解决方案

使用焦点原则，我将常见问题解答按钮更改为边框按钮样式，以便为应用按钮提供足够的焦点。同时，我也改变了他们的顺序，主要操作放在右侧，次要操作放在左侧。原因是古腾堡图形定理，其中说：

根据这个定理，右边的两个点（“Z&rdquo”右侧的第一个点及其最后一点）是用户期望采取行动的地方。所以这里，提示语句放在左侧，重要操作放在右侧。

（译者注：原来没有这张图片，为了方便大家的理解，发现这张图片来自作者给出的参考。这个理论还需要考虑用户的阅读习惯综合考虑）想要查看更详细的信息，你可以点击这里和这里

说到主题，我们经常可以看到一些按钮设计问题，为不同的功能按钮设计相同的样式（注册，取消，查看更多，阅读等）。

建立一致性不是很好吗？

是的，我们都知道一致性在用户体验设计中起着重要作用，但我们称之为功能的一致性。如果我们想要创建相同的按钮设计以满足不同的功能，则可能导致不一致的用户体验并可能影响用户的操作目标。

偏离主题：按钮设计一致性=相同的按钮功能

现在让我们看看问题2：

两个按钮具有相同的视觉层次结构

同样的问题也出现在这个设计中。 “确定”和“取消”按钮共享相同的设计样式，这要求用户仔细阅读按钮上的文本以了解提交和取消。

使用焦点原理，您可以减少阅读按钮文本的时间，因此这里是设计解决方案B：

我们交换按钮位置并将按钮上的OK更改为Submit，使其更准确，并告诉用户一旦他们点击按钮，就会触发提交操作。

4.公共区域

共同领域的原则与亲密原则密切相关。这意味着当对象位于同一个封闭区域时，它们被认为是同一组元素。来源:用户测试

像Spotify一样，迪士尼和Netflix随机放置，没有规则，我们认为它们不是一个群体。要使问题更清晰，请创建线框表示形式:

从上面的线框中可以看出，它更可能是多个单个元素而不是四个元素。因此，使用共同的区域原则设计解决方案：

新线框使用共同的区域原则

在在线框图中，使用笔划将所有元素包含在各自的类别中，以使它们看起来是一个组而不是一个元素。以下是它的工作原理：

除了边框之外，我用一个小图标替换了底部短语“Plan Net 999及以上的六（6）个月免费Netflix”并将其放在Netflix的右上角，为功能列表创造了更多空间。单击后，将显示工具提示。

这四种格式塔心理学知识应该可以帮助您完成设计工作，您可以使用更多的格式塔原则来解决更多的设计问题。

我希望这篇文章可以帮到你。

蛋：格式塔心理学摘要摘要代购源码网站：https://lawsofux.com

原文：https://uxdesign.cc/psychology-design-4-gestalt-principles-to-use-as-your-next-design-solution-fcdec423a6bf作者：Riel M译者：云天空翻译本文已获得正式授权作者

授权截图

本文最初由@彩云Sky出版于彩云翻译设计。未经许可，禁止复制。

« 百度已正式支持Google AMP页面数据提交 | Zhuge io Kong：数据授权，智能营销的时代即将到来 »