格式塔原则在设计中的应用
格式塔原则在设计中的应用
我一直认为设计心理学包含用户体验。每当我们处理我们的目标是解决的人们的需求时，我们的职业就会产生同理心。当我继续深入研究心理学在设计中的位置时，我发现格式塔原则能解决很多设计问题。
那么，什么是格式塔原则？
格式塔心理学是一种思想学派，它关注人类的思想和行为。在试图理解我们周围的世界时，格式塔心理学建议我们不要只关注每个细致的小组件。
相反，我们的思想倾向于将对象视为更大整体的一部分，并将其视为更复杂系统的元素。这个心理学派在人类感觉和感知研究的现代发展中发挥了重要作用。
来源：verywellmind
格式塔原理充分融入我的设计里。因此，在本文中，我将与您分享我如何使用这些原则来为我遇到的以下网站和应用程序而设计解决方案：
免责声明：以下设计解决方案是使用格式塔原则的示例解决方案。您将看到的一些设计问题需要重新设计,并不代表官方意见。如果您有其他设计解决方案，请随时评论您的回复。😀
接近
当物体彼此靠近放置时，这些物体被视为一组而不是单独看到的想法。
资料来源：Hubspot博客
我们如何使用格式塔原理解决设计问题的一个例子如下所示：
我们可以看到，类别标题（在线预订和游轮）和链接（了解更多）彼此分开，这使它们看起来像浮动元素。如果我们将从中创建一个线框，它将如下所示：
整个组件脱离了上下文，因为没有任何东西将图像，标题和链接联系在一起。因此，我们的解决方案。从三个独立的元素漂浮在外层空间，使它们成为一个完整的组成部分
在我们使用的设计解决方案中，我通过使用中心对齐使它们更接近来移除Title和Link之间的距离。通过这种方式，我们可以将3个元素组合在一起（图像，标题，链接），这有助于我们解决缺少的上下文问题。
相似性
当对象看起来彼此相似时，就会发生相似性。人们经常将它们视为一个群体或模式。
资料来源：graphicdesign.spokanefalls.edu
在下面的设计问题A中，我指出了蓝色文本颜色。原因是，在用户交互时，重数据用户和灵活最大化器是相关的 - 它们实际上是Tabs用户界面😱
那么，是什么让这两个元素彼此无关？
答案，有很多。但更简单的说明是，没有任何东西可以将这两个元素绑定在一起，这使得它们看起来很孤单。正如我们所看到的，很明显界面的品牌颜色是绿色的，但突然出现蓝色文字颜色。因此，相似定律来自：
作为我们的解决方案，我通过将文本颜色设置为绿色并将左右填充添加到活动状态来创建相似性，以便它更接近另一个选项卡。
这个设计问题，可以通过重新设计进一步改进（这将真正需要重新设计），以便它可以更多地简化用户的体验。但就目前而言，让我们采用相似性take来使其更好地采取最小的步骤
还有另一种结合相似性的方法 - 方法2：
现在在方法2中，让我们观察它的细节 - 类型系统是：
标题： 40px常规
正文： 20px Regular
文字链接： 20px Regular
乍一看，我们可能会认为这只是一个我们可以忽略的普通Type系统。但是当我们仔细观察时，问题出现在Body文本和Text链接之间，两者都共享相同的Type系统（20px Regular），这可能导致用户混淆和缺乏用户信任。当他们浏览网站时，如果他们与之交互的内容是正文或文本链接，他们可能会犹豫不决，进行反复试验。
好的，那么我们如何解决这个问题呢？
作为我们的相似性解决方案，我们需要稍微调整Type系统：
标题： 40px常规
正文： 20px Regular
文字图标链接： 20px Bold
我们通过使文本链接更大胆，以及视觉优势的图标在我们的类型中添加了对比度。通过进行这些改善，我们在整个文本图标链接中创建了相似性，并使我们的用户的认知更快。
提示：在创建Type系统时，选择具有各种权重的字体（细，浅，常规，粗体等）。我们的目标不应该是具有较少权重的各种字体大小以获得更好的对比度，而是具有不同重量的字体大小。
焦点
焦点是一个感兴趣的领域，重点或区别在一个组成，捕捉和保持观众的注意力。
资料来源：Smashing Magazine
在Focal Point，我们将展示两个设计问题：
在上面的例子中，元素的布局实际上没有问题。但它是我们拥有的信息层次结构 - 主要操作和辅助操作共享相同的按钮系统。
我们可以看到此界面的目标是供用户下载应用程序，而FAQ是一个支持文档，可以让用户更好地了解他们的应用程序。
因此，作为我们的解决方案
使用焦点，我将View FAQs按钮界面更改为边框按钮，为Download App按钮提供所需的聚光灯效果。我也改变了他们的订单，左边是主要动作，左边是次要动作。其原因在于遵循古腾堡图。它说：
根据这个定理，右边的两个点（在“Z”的第一个点和它的最末端）是游客期望采取行动的地方。因此，对于你的号召性用语在左右方面的位置，这里毫无疑问。它应始终朝向屏幕的右侧。
另外，只是为了添加一些主题，我们通常可以看到的常见按钮设计问题是，为不同的功能创建一种按钮界面（用于注册，取消，加载更多，阅读更多等的填充按钮）。
它是否有利于它创造一致性？
是的，我们都知道一致性在用户体验设计中起着重要作用，但我们称之为功能一致性。如果我们将创建相同类型的按钮设计以满足不同的功能，则可能导致用户不一致的体验，也可能影响我们客户的业务目标。
提示：按钮设计一致性=按钮功能。
现在转向方法2应用程序：
在此设计中也会出现同样的问题。“确定”和“取消”按钮共享相同的设计样式，这要求他们彻底阅读按钮标签，以便他们能够知道哪个是提交和取消。
我们为了减少阅读标签的时间，这使我们进入设计解决方案B：
我们互换按钮并将按钮副本从“确定”重命名为“提交”，以使其更具上下文连贯性，并告知用户一旦单击按钮就会执行操作。
公共区域
共同区域的原则与接近度高度相关。它指出，当物体位于同一个封闭区域内时，我们将它们视为分组在一起。
Spotify，迪士尼，Netflix等功能并未与其类别组合在一起，似乎是浮动元素。为了使它更简单，从中创建一个线框看起来像这样：
从上面的线框，它可能比4个整体组件多个单独的元素。因此，作为解决方案，公共区域原则：
在线框中，我们使用框边框将所有要素包含在各自的类别中，以便将它们视为一个而不是单个元素。以下是实施：
除了边界框之外，我们将计划999的* Free Netflix替换为六（6）个月，并在Netflix元素的右上方（颜色为黄色图标）替换为信息图标，以便为功能列表创建更多空间，单击后，将出现工具提示。
这是可以节省您的设计时间的4种格式塔原则☀️您可以使用更多的格式塔原则作为您的解决方案。因此，如果您觉得有道理，请为我点个好看，分享文章。我希望这篇文章对你有所帮助，欢迎留言评论。
