分析页面上的用户体验格式塔心理学是一门思考学校，它将人们的思想和行为视为一个整体。在本文中，我将与您分享如何将这些原则用作我的设计解决方案并将其应用于我的代购源码网站和应用程序。 in。

我一直认为心理学和设计包含了用户体验。当我们的目标是解决需求时，我们的职业需要同理心。当我继续深入研究进入设计领域的心理学领域时，我偶然发现了格式塔原理。

那么，格式塔原则是什么？

格式塔心理学是一种思想学派，它将人们的思想和行为视为一个整体。在试图了解我们周围的世界时，格式塔心理学建议我们不应只关注每一个小部分。

相反，我们的思想倾向于将对象视为更大整体的一部分，并将它们视为更复杂的系统元素，这些元素在人类感知和感知研究的现代发展中起着重要作用。

这一发现格式塔原则的旅程让我完全理解如何将这些原则融入我的设计中。

在本文中，我将与您分享如何将这些原则用作我的设计解决方案并将其应用于我的代购源码网站和应用程序。

首先，接近

当物体彼此靠近放置时，它们被视为一个整体而不是单独的个体。

以下是我们如何使用邻近规则来解决设计中的问题的示例：

标题和链接相距甚远

正如我们所看到的：类别标题（在线预订和巡航）和链接（了解更多）彼此分开，这使它们看起来像浮动元素。如果我们要创建一个线框，它将如下所示：

线框

整个组件脱离了上下文，因为没有关联的图像，标题和链接。所以接近规则是我们的解决方案。把三个元素作为一个整体浮在外太空。

中心对齐的标题和链接

在我们使用接近原理的设计解决方案中，我使用了中心对齐来缩小标题和链接之间的距离。通过这种方式，我们可以组合3个元素（图像，标题，链接），这有助于我们解决遗漏的上下文问题。

第二，相似性

当对象彼此相似时会发生相似之处，人们通常会将它们视为一个组或模式。资料来源：graphicdesign.spokanefalls.edu

在下面的设计问题A中，我指出了蓝色文字颜色。原因是在用户交互中，重数据用户和灵活最大化器类似 - ——它们实际上是界面中的标签。

设计A

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

有很多答案。但是更简单的解释是，没有什么可以将这两个元素绑定在一起，这使得它们看起来分散。正如我们所看到的：很明显，界面的品牌颜色是绿色，但突然蓝色文字颜色突然冒出来。

因此，相似性规则是：

作为我们的解决方案，我通过将文本颜色设置为绿色并调整按钮的左右填充以使其更接近另一个按钮Flexible Maximizer来创建相似性。

通过重新设计（实际上需要重新设计）可以进一步改善该设计问题A，这简化了用户体验。但现在，让它在生产中迈出一小步，达到相似原则。

方法2：

设计B

现在在方法2中，让我们看一下它的基本部分——类型系统，它们是：

标题：40px Regular Body：20px Regular Text Link：20px Regular

乍一看，我们可能会认为这只是一个我们可以忽略的普通类型系统。但是当我们仔细观察时，问题出现在正文和文本链接之间，所有这些都共享相同的文本系统（20px Regular），这可能导致用户混淆和缺乏用户信任。

当他们浏览代购源码网站时，他们可能会犹豫，他们正在与文本或文本链接进行交互，然后他们需要进行尝试和测试。

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

作为我们的相似性解决方案，我们需要稍微调整Type系统：

标题：40px Regular Body：20px Regular text icon link：20px bold

我们通过将文本链接加粗并添加图标来增加对比度。通过进行这些更改，我们在整个文本链接中创建了相似性，并加快了用户的认知加载速度。

超出主题的快速提示：创建Type系统时，选择具有各种权重的字体（精细，浅色，常规，粗体等）。我们的目标不应该是为各种字体大小设置不同的权重以获得更好的对比度，而是为字体大小设置几种不同的权重。

第三，重点

重点是焦点领域，强调或发现构图的差异，以捕捉和保持观众的注意力。

关于焦点问题，我们将展示两个设计问题：

来自电信代购源码网站

在上面的例子中，元素的布局实际上没有问题。但是我们拥有的信息层次——主要和辅助操作共享相同的按钮系统。

我们可以看到此界面的目标是让用户下载应用程序，而FAQ是一个支持文档，允许用户更好地了解他们的应用程序。

因此，我们的解决方案是：

设计解决方案A

使用焦点原理，我将View FAQs按钮界面更改为边框按钮，以便为下载应用程序按钮提供所需的聚光灯效果。我也交换了他们的命令，右边的主要动作和左边的第二个动作。

原因是古腾堡图，其中说：

根据这个定理，右边的两个点（在“Z&rdquo”的第一个和最后一个点）是游客期望采取行动的地方。所以，在这里，你的行动呼吁是正确的还是离开的，这里确实没有问题，它应该始终朝向屏幕的右侧。

我们通常可以看到的常见按钮设计问题只是添加主题之外的东西，为不同的功能创建按钮界面（填写注册按钮，取消，加载更多，阅读更多等）。

创建一致性不好吗？

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

快速提示主题：按钮设计一致性=按钮功能。

现在转到方法2应用程序：

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

这种设计也出现了同样的问题：“确定”和“取消”按钮共享相同的设计风格，这要求他们彻底阅读按钮标签，以便他们知道提交和取消的内容。

使用焦点，我们减少了阅读标签所花费的时间，这使我们设计了解决方案B：

我们交换了按钮并将按钮复制从“确定”重命名为“提交”以使其更具上下文功能，并通知我们的用户，一旦他点击按钮，就会发生一个动作。

四，共同领域

共同区域的原则与接近度高度相关。它指出，当对象位于相同的封闭区域时，我们认为它们被组合在一起。来源：用户测试

Spotify，迪士尼，Netflix等功能未与其类别分组，并且似乎是浮动元素。为简化起见，创建线框将如下所示：

从上面的线框可以看出，它比四个整体组件更可能是单个元件。因此，作为解决方案，共同的区域原则：

我们新的线框和共同的区域原则

在在线框中，我们使用框的边缘将所有要素包含在各自的类别中，以便将它们视为一个而不是单个元素。这是实施：

除了边界框，我们用Plan Net 999替换了* Free Netflix六个月，并用Netflix元素右上角的信息图标（彩色黄色图标）替换了功能列表的空间。点击后，将出现一个工具。提示。

总之，这是4格式塔式原理，可以节省您的设计时间。可以使用更多格式塔原则作为您的解决方案。

我希望你也会用到，祝你幸福！

本文由Medium

感谢心理学+设计:格式塔原则，您可以将其用作设计解决方案

原作者：中等

翻译作者：cherri two ha

翻译链接：https://www.jianshu.com/p/311939783be5

本文由@cherri二哈发布，未经作者许可不得转载

该地图来自Pexels，基于CC0协议

« 响应自助平台平台，这是好的 | 企业代购源码网站建设应注意什么 »