什么是网页设计中的邻近性以及如何使用它？

人类思维的运作方式令人着迷。 你有没有想过人们在视觉上看待他们的世界的方式？

20 世纪，德国心理学家 Max Wertheimer、Kurt Koffka 和 Wolfgang Kohler 试图找到这个问题的答案。 他们进行了一系列研究，结果，他们开发了格式塔原则，这是一套解释人们如何看待周围世界的简单指导方针。

接近被认为是格式塔原则之一。 这一原则对当代用户界面设计的美学产生了重大影响。 在这篇博客中，我将告诉你在网页设计中接近度意味着什么以及如何使用它。

什么是网页设计中的接近度？

接近的概念是指需要在视觉上排序的元素以及实现尽可能少的混淆的目标。 将彼此无关的内容分开是很重要的，以突出它们之间缺乏联系。

例如，您一定注意到几个社交媒体平台的图标已经组合在一起，而不是分散在一个网站上。 它更类似于将所有东西放在一个位置的技术。

使用接近来最小化视觉歧义和促进理解的布局更容易理解。 接近度还有助于网站布局的结构。 正确应用邻近度对用户体验具有显着且有益的影响。

设计师可以从邻近原则中受益，因为他们能够实现主要目标，例如使布局看起来不那么混乱，并将共同连接的变量组合在一起。

如何在网页设计中使用接近度？

白色空间

理解留白在设计中的重要性是在设计中成功采用邻近概念的第一步。

设计中缺乏空白是一个常见问题。 在用户体验方面，空白对用户体验的影响与页面上的实际内容一样大。 白色空间引导用户的视线，产生对比，并对用户的思想产生持久的影响。

通过设计，设计师传达了网站的本质。 它可以通过文本和图像。 但是有效的设计是具有组织良好的空白空间，可以增强网站中的元素。

创建视觉层次结构

网站的结构以及内容的组织和呈现方式是有效接近的基石。 设计师需要能够构建吸引人的内容视觉层次结构，以实现有效接近的目标。 必须为您的网站提供清晰的视觉层次结构，因此有效利用空白并将可比较的元素排列在一起非常重要。

对网站部分进行分组和进一步分组是保持层次结构到位的最佳技术。 由于这种层次结构，用户能够更好地掌握他们去过的地方和想去的地方，这也有助于表达网站的目标。

用户能够看到这一点表明他们知道并理解了相关信息的存储位置，这表明您已经成功传达了网站的信息和目标。

提高内容理解力

内容为王。 对于许多产品来说，内容是人类首先开始使用它们的动机。 良好的清晰度（读者可以方便地识别书面文本内容）和易读性（读者可以方便地解码符号）是产品设计的关键所在。

许多元素都有助于提高清晰度和易读性，包括字体系列、字体大小和文本内容对比。 但是，您在网页上塑造内容的方式也会立即影响内容的易读性和清晰度。

当文本内容没有提供格式时，可读性可以通过。 通过提供简短、可轻松扫描的块中的内容——将句子分组到段落或部分中，并用一大块空格将它们分开——你可以帮助客户测试和研究文本内容。

具有可扫描的布局

阅读和扫描按层次结构并以逻辑方式分类的内容变得更加简单。 在构建其架构和设计时，网站应利用邻近性，以免内容过多用户。

因此，尽管在内容有限的网站上将接近度概念付诸实践相对简单，但在具有大量内容的网站上接近度更为重要。 因此，您应该检查您的布局是否简单、用户可读和可扫描。

强调某些元素

强调是人体验 (UX) 设计中最重要的概念之一。 优先考虑网页上的精确因素或内容是设计师最常见的地方责任之一。

虽然设计师可以使用许多独特的策略来获得适当的结果——包括放大细节或包括额外的对比度——但在不改变真实细节的情况下获得相同的结果是可行的。 相反，您可以在细节中处理贫困区域的数量。

贫困地区和个人利益之间有着直接的联系。 您上传的圆形和细节越差，对观众来说就越重要。 这是自然发生的——因为人们的兴趣可能会被引导到一个特别贫困地区的细节方向，因为事实上那个地方没有其他任何东西能引起他们的兴趣。

值得一提的是，可能很难识别哪些细节在互联网页面上引起了最大的兴趣。 因此，鼓励应用互联网布局软件程序来创建布局原型并通过 5-2 次测试对其进行验证。

向构成您的听众的个人展示您的原型 5 秒钟，然后问他们：“您可能记得的主要因素是什么？” 如果他们调用了您需要他们查看的细节（或因素），那么您一切都很好。

通过内容引导观众的视线

接近原则可以帮助您创造一种很好的方式来引导观众的眼睛从一个因素转移到另一个因素。 通过调整空白，您可以毫不费力地创建明显吸引用户注意力的焦点因素或区域。

创建焦点因素始于不断发展的互联网布局网格，这是一种让您始终在布局内围绕布局因素（以及文本内容、图像或实用控件）的好方法。

获得网格后，您希望通过关键内容部分为手动客户设置因素。 正如您在下面看到的，这正是 Evernote 借助将文本内容块与插图配对所做的事情。 结果，当他们滚动浏览此页面时，查看者的眼睛会沿着曲折的路线移动。

包起来

在为不同的显示器和分辨率进行布局时，关注 UI 因素之间的相对距离至关重要。 出现在大型笔记本电脑显示器上的设计不会出现在小型蜂窝显示器上。

当您的布局缩小以容纳较小的显示器时，因素之间的间距可能会最小化，这可能会破坏 UI 因素的假定关系。 在不同的显示器和分辨率上检查您的布局以查看您的布局是否可以很好地缩放，这一点很重要。 应用 Google Chrome Dev 设备来模拟蜂窝设备是可行的。

如何改善网站用户体验也是您可能想了解的更多内容。 如果您想设计或重新设计您的网页，请联系我们。