网页设计中的近邻原则

在网页设计中，设计元素的位置和重要性网页布局就是一切。有这么多酷的、令人兴奋的技术可以帮助我们布局我们的设计(特别是用CSS3由我们处理我们常常忘记结构和美学一样重要。你如何决定内容应该出现在哪里，一个良好的界面如何增加网站的可读性?

这就是我们将在本文中揭示的内容。我们将研究一种基本的技术，它可以帮助您改进一般的内容流，由于没有更好的术语，我将把这种技术称为接近性原则(一个组合了“接近性”和“优先级”的合成词)。

通过设计沟通

设计师已经明白页面上对象之间的关系很重要。

这就是为什么当我们设计的时候，我们会考虑视觉层次结构，视觉重量，格式塔心理学,重要要素的特殊性以及其他影响网页各个组件之间关系的原则。这就是为什么我们一遇到问题就会变得神经质的原因之一导航菜单，页眉或页脚。在普通网页中有这么多内容，在正确的地点和正确的时间为用户提供正确的内容是一项相当大的成就!

如果你的内容结构不合理，可能会有很多缺点，比如:

• 丢失或跳过关键信息
• 用户交互问题，如错误倾向或混乱
• 减少了屏幕阅读器的网页可访问性

简单地说，接近原则提出了这样一个想法:如果我们可以优先考虑我们的内容，以确保最相关的材料是可见的和吸引人的，用户将立即被吸引到它。这一原则主张，所有相关的重要内容都应该被分组或结合在一起，以允许流动和反馈。这种技术的艺术并不在理论中，因为我们经常在写作时逻辑地布局内容(标题、副标题、要点等);相反，它还处于计划阶段。

网站导航中的近邻原则

考虑一个类似于导航菜单．我们要做的第一件事是信息架构一个站点的关键是将页面和链接组织成一个内聚的结构，然后在适当的情况下添加类别或子部分。这种技术导致了下拉菜单以及其他独特的浏览辅助工具，帮助我们进一步绑定缺乏接近性的内容。

在规划导航菜单时，必须特别密切关注页面及其连接的值，以便使它们成为操作中接近性的完美示例。这种特殊的技术适用于任何风格的网站，所以无论你是在扩展一个巨大的重服务但轻内容的布局(如亚马逊)还是重内容但轻功能的设计(如博客)，这种技术都应该是有用的。更好的是，这个原则可以帮助你组织网站的信息架构;页面之间的接近性与单个页面上存在的内容同样重要。

如果你发现自己努力决定东西应该放在哪里，这篇战略指南将帮助你。

优先级:提升最好的，淘汰最差的

我们很多人都非常清楚分清轻重缓急的好处。我们给予内容的优先级在页面上的感知价值中起着巨大的作用。

例如，一个网站的标志/名称是可识别的，因为它的位置非常高，通常在左上角，并且它在网站的每一页都保持了可见性。logo应该在页面上的所有其他对象之上。这是它的近似值。

评估每个元素的值

为了确定网页的哪些部分是最关键和最重要的，我们需要从检查布局中的每个对象开始，无论多么小。

根据他们的感知价值(根据你的访问者需要知道或可能想知道的)和他们的功能性价值(根据他们对网站的贡献，如功能或广告)。您可以通过获取整个页面的屏幕截图(或打印输出)并对其进行注释，或者通过生成页面上出现的所有内容的列表来实现这一点。这个练习将帮助你重新评估网站内容的价值。

对图像、媒体、内容(在段落级别)和其他所有内容进行评分，按照这个编号系统:

评级	元素描述
1	没有这些，网站就无法正常运行。
2	这增加了好处，但不是必需的。
3.	这补充或重申内容。
4	这在其他方面是多余的或浪费空间的。

消除不需要的元素

当你把所有事情都做完后，再回顾一下结果。在我们进一步讨论之前，可能值得一提的是，如果你发现不再有用或没有任何贡献的内容、链接或对象，请删除它们。从界面中消除混乱是很困难的，但还原论改善了网站的总体用户体验。

为元素评级为3级在美国，删除可能有点苛刻，所以考虑重新措辞或把东西连在一起来增加价值。为了便于阅读，本网站将关键信息划分为清晰的部分。确定了可以删除、合并或移动的内容后，再查看你给的分数都是2分．这些元素可能是最难处理的，因为你希望访问者从中受益，但又不想让他们负担过重。

要使这些需要的但非必要的元素具有适当的接近性，一个解决方案是使用进步的信息披露:通过下拉菜单或工具提示使内容按需显示，或将其显示在页面的更下方，以便它仍然可用，但不那么突出。许多网站采用渐进式披露的方式，以避免用户被过多的细节所淹没。

接近性:流、反馈和功能

我们已经考虑了对页面上的每个资产进行优先级排序的重要性，确定哪些比特比其他比特更有影响力，消除已经积累的绒毛，将弱材料组合成强大的结构，并将不太关键的数据推出视野。现在，我们需要处理所有剩余的内容，并继续进行第二步:将所有内容逻辑地连接起来，并将它们重新组合在一起，就像拼图游戏或故事书一样，其中的情节在连续的点上发展。

你应该把所有需要放在你网站上的东西以最稀释的形式保留下来，补充内容要么隐藏在页面下面，要么在工具提示和可扩展的数据框中等待。

评价重要元素之间的关系

回顾每一件你已经分配了1级和2级的东西，并重新排列它们;按照你认为读者需要了解的顺序给所有内容编号。如果每件事都在它应该结束的地方结束了，那么当你大声读出来的时候，它就完全有意义了。

这个网站背后的开发人员和设计师清楚地了解组织和反馈的需要。

重新设计

一旦所有内容都标记好了，重新洗牌源代码以匹配新的读取顺序。特别注意与其他内容相连或依赖于其他内容的部分(如图像说明)，并将它们尽可能地放在一起。然后，对CSS和JavaScript进行必要的更改。

亲缘关系:实例和模式

许多网站已经展示了我所定义的高度接近性，因为他们非常小心地使用技术来考虑优先级(让人们注意到某些元素)和接近性(让反应直接发生在与之交互的对象的旁边或上面)。下面是一些正在使用的最佳实践的示例。一些我们之前简单提到过，其他的在这里介绍。

通过遵循类似的做法，可以避免用户困惑，提高阅读效率。使用渐进披露来跟踪表单的进度:在访问者输入数据时通知他们错误:在光标图标附近展开的下拉菜单:输入对象被提交后禁用:进度条显示加载进度:扩展用户交互的内容或灯箱:

近邻:网页折纸

近邻原则假定，你在网页上找到的所有东西都可以根据它周围的对象，按顺序分配一个值和一个位置。这个想法在Web的早期就已经存在了，但是很少有设计师对此给予足够的重视。

想清楚什么是真正需要的，什么地方需要，什么时候应该出现(而不是简单地把所有内容放在屏幕上，整体上，以“看起来很漂亮”的顺序)。对这些技术的需求正在增加，尤其是考虑到手持设备的普及和“移动优先”设计理念的理念。如果内容不值得限制性的移动布局，为什么桌面布局需要它?如果你有十分钟的空闲时间，试试这个简单的活动。

浏览你的网站，剔除任何没有提供它应该提供的东西。让现有对象为用户提供更大的价值(或使用更少的空间)，不要害怕重新组织代码及其内容，以确保所需要的就是所出现的。哦，如果你确实想要做出一些行动来引起回应，确保用户知道你的网站正在做出回应;毕竟，你不希望他们连续点击“提交”十次，结果却失败了。

相关内容

• Web设计人员的用户体验快速概述
• 是时候重新考虑网站导航了吗?
• 10个重要的Web应用UI设计注意事项