网页设计中的就近原则

日期:2011年11月08日

就近原则要求采取相关的项目,直观地进行分组,创建更少的混乱和一个更有组织的布局。彼此无关的物品应放在进一步分开,强调他们的关系缺乏。

我们将讨论的细节和一些这可以有效实施的方式,但这个定义应该足够了,我们将在本文中讨论。
联同其他设计原则,就近的正确使用,在用户体验上有很大的影响,并最终,一个网站的整体成功。
不要害怕白色的空间
正确实施就近原则的第一步是理解的重要性在设计空白。
白色空间的缺乏是一个业余设计的共同问题。设计是一个交流信息的手段,当业余试图通过设计传达一个信息,他们的自然倾向是传播的内容均匀,以填补空间,没有过多考虑精心组织的白色空间的潜力。
空格可以尽可能多的影响用户的行为,如果不是更多,比页面上的实际内容。空白引导用户的眼睛在既定的方向,创建了对比,让人印象深刻。
点击浏览下一页
即使W3Avenue的网站上面包含大量的内容(在许多类别的文章,像任何设计博客,)和侧栏广告系列,但它没有视觉上压倒用户。
在头和适当间距的项目中的内容和侧栏领域的慷慨的房间有助于这种清洁和有组织的外观。W3Avenue是没有做任何事情,特别是其内容的独特,但它的设计可能有助于它在获取短的时间内的强烈交通 。
所以,不要空的空间在您的设计不安全。正确使用空白的第一步是在实施就近原则,因此,使设计更具视觉吸引力。
视集团相关元素
白色的空间,但是,仅仅是一个部分实施接近 。设计可以有很多空白,但如果项目未分组正确,白色的空间将收效甚微,下面两个名片所示:
点击浏览下一页
左边的卡是不是杂乱的,它有一些白色的空间。但元素不是逻辑分组,所以效果较弱。
读者被迫多次扫描卡。卡上的权利,然而,有一个更加赏心悦目的视觉效果。读者只需在它一目了然地参与信息(稍后)。
卡中的元素在右边的分组也更合乎逻辑的。在第一组中的元素,我们看到与它下面的位置大字体的公司名称。第二组告诉我们如何获取信息提供的服务(如电话号码和网站地址)。
这个例子说明了在平面设计接近的重要性,以及类似的想法,可用于网页设计中的元素,如下面的截图所示。
点击浏览下一页
虽然阿罗拉设计的网站并不复杂或信息重,其使用白色的空间和视觉的分组元素的分离是有效的。这里应该指出,“白色空间”没有​​为白色,它可以是任何元素之间的空白空间,无论颜色。
阿罗拉设计的情况下,虽然有颜色的空白,它提供的视觉分离的标题,导航和内容领域的相同目的。
创建视觉层次
有效地使用空格和分组相关的元素,让您的网站一个明确的视觉层次的关键。当然,网站的架构和信息流的有效接近的基础 。
层次是由哪些元素进行分组和子分组的方式转达。
这种层次结构有助于用户了解,他们已经和他们想要的地方去,因此,有助于沟通网站的目的。列表A是一个元素,它有可能沟通的视觉层次,在下面的图片展示了一个很好的例子:
点击浏览下一页
一眼在上述两份名单,甚至没有检查的内容,你会看到在左边的列表有一个明确的的视觉层次,显示项目(缩进项目的主要项目的子类)之间的关系。
没有白色空间(包括宏观和微观的空白),这种层次结构将不可能 。右侧的列表仅仅是一个没有表面上的关系或层次的元素的随机分组。
在网站上实现这一原则作为一个HTML列表简单的东西是很容易的。的挑战是如何使用这一原则,作为一个在网站的规划和线框设计阶段建设的指导因素。
布局很容易扫描和阅读
即组织成层次结构和逻辑分组的内容更容易阅读和扫描 。
标题,例如,应该允许用户扫描清楚地表明要点。不用说,内容应计划从开始去反映一个适当的视觉层次,上面的列表项的缩进是一个贫穷的例子,因为内容不匹配的视觉层次。
在靠近它的建筑和设计的一个网站,使用不会超出用户的信息。
所以,虽然它是比较容易接近轻内容的网站上实施的原则,接近更重要的是内容丰富的网站。
新闻网站是这一原则的很好的案例研究 。下面是一个比较洛杉矶时报“和“ 环球邮报。
点击浏览下一页
总体而言,洛杉矶时报“网站,主要是因为色彩的选择和排版的美观设计。但它也有一个干净,整洁的的外观,尤其是在头节。
这个标志是大和脱颖而出,有效地促进网站的品牌。对象最接近的标志是横向导航栏下面。由于导航栏是黑暗的,它对比的标志。
上述标志的文字链接排列整齐,用大量篇幅的两部分之间​​。左对齐在头的内容,也有助于清洁一下。
洛杉矶时报“报头信息的每一位与相关的项目分组的标志,这是独立的除外。头的任何混淆你或让你不知道它属于。
什么环球邮报的网站,如下所示?
点击浏览下一页
环球邮报的网站有一个复杂的头节,未能实行就近原则。
唯一的空白显著金额是在该中心,旁边的标志,从而实现什么。两则广告出现在头,作出贡献的混乱。广告可能会因经济原因所必需的,这样的问题,是可以理解的的。
最大的问题是上面的大横幅广告凌乱的部分。是在这一节中元素之间没有明显的区别。
三个虚线的垂直线试图分开的区域,分为四个部分,但第一个分隔符不作任何意义。事实上,这部分可能会显得更加吸引人,如果那些星罗棋布的分隔符被拆除。
随着接近网格帮助
一组项目,并适当使用白色空间开始与一个网格 。
从洛杉矶时报地球和邮件网站,粗略地看一眼,只有洛杉矶时报“似乎有一格的基础上它的设计,或至少使用网格为基础的原则,在规划阶段。地球和邮件的网站几乎没有证据显示一格的格式。
基于网格的布局,适当的排水沟大小,允许部分之间的空间,并在许多情况下,它迫使设计人员能够实施就近的原则,甚至没有思考它。
下面是从两个网站,雇用了960网格系统的截图。他们都是相当简单的(即不是像上面所讨论的的新闻网站的内容重),但它们表明,电网给页面元素的喘息空间,给予每节其自身的视觉家园。
点击浏览下一页
点击浏览下一页
带领下来用户在正确的道路
另一项接近的主要好处是,它帮助用户浏览一个网站没有造成不必要的延误或障碍。当主导航显然是从页面上的其他元素分离,它会立即被发现,是不太可能被人遗忘。
受到适当的视觉层次接近的方式,帮 ​​助用户深入深入您的网站,而不必担心他们已经或他们要去哪里。
他们总是会感到舒适,他们会迅速和有效地得到您的网站最重要的部分。
很少或根本没有在平面设计经验的网页设计师可以大大受益的原则,打印设计师已经付诸实践,因为几年前的网络热潮。
接近是不是唯一的设计原则,这将有助于站点更实用,赏心悦目,但它是一个重要的考虑因素很多刚刚讨论过的原因。
Tags:如何设计 网站设计
上一篇文章:网站建设不能做的七件事
下一篇文章:网页设计如何获得正确的事情非常重要