了解网站设计中的视觉层次结构

视觉层次结构是有效的网页设计背后最重要的原则之一。本文将探讨为什么开发视觉层次结构在网络上至关重要,其背后的理论,以及如何在自己的设计中使用一些非常基本的练习来将这些原理付诸实践。

设计=沟通

从根本上说,设计就是视觉传达:要成为一名有效的设计师,您必须能够将自己的想法清晰地传达给观众,否则就会失去他们的注意力。如果您为他们提供了大量信息,那么很可能有100人中有99人不会花时间去阅读它。为什么?因为大多数人天生就是视觉思想家,而不是数据处理器。

要弄清楚为什么这样做是正确的,重要的一点是要了解一些我们看待事物的方式。人们不是您所说的“机会均等观察者”。人们不是在获取视觉信息并对其进行平均处理,而是按照“视觉关系”来组织他们所看到的内容。让我们考虑以下两个普通圆圈的图像:

可能是,您看不到“两个圆圈”。而是看到了“一个黑色圆圈和一个较小的红色圆圈”。

原因很简单:当呈现两个圆圈之类的简单内容时,一个人不仅会看到两个普通的圆圈,还会找到一种区分这两个圆圈的方法。一个圆圈可能更大或更小,或者有颜色,或者其他任何形式的差异。这些差异使我们能够区分对象,并赋予它们独特的含义。

现在让我们看一个更复杂的图像:

增加的复杂性实际上增强了我们根据关系对对象“分类”的愿望。异同成为我们查看形状的框架。规模上的差异表明,一个物体比另一个物体离我们更近,或者一个物体比另一个物体更占优势。颜色的变化可能表明一个物体具有独特的个性,这使其与另一物体区别开来。使用一些非常基本的工具,就可以在单个图像中传递大量信息。

…了解人们将在关系方面看到我们的设计对于成为一名更有效的设计师至关重要。

让我们把这个例子带回网页设计。因为网页设计全都涉及交流视觉信息,所以了解人们将在关系方面看到我们的设计对于成为一名更有效的设计师至关重要。作为网站设计师,虽然似乎仅散布信息就足够了,但我们的任务是将原始信息分解为可口的,视觉上容易看到的美味信息小块,更重要的是,有效地传达了信息在网页后面。

层次结构的黎明

人们为什么会从关系上看到一百种解释。如果您要从人类学上追溯它,您可能会得出这样的结论,即猎人与采集者的心理迫使人类在某一时刻认识到看到人际关系是一种生存技能。

看到,即使是史前的人也对视觉对比有着健康的尊重。

也许更实际的解释是,这仅仅是我们的大脑对信息进行分类的方式:将相似的视觉元素分组并将其组织成有意义的模式,就像人类饮食所固有的。无论哪种方式,事实都是,即使以最基本的形式,考虑到层次结构来组织的信息也总是比未组织的信息更有效地进行交流。

考虑以下两个文本块的图像:

在上面的示例中,我们看到了应用于文本的视觉层次系统的最基本形式。这两个示例中的每个信息都没有什么不同,但是如何将其分解会极大地改变读者看到并吸收它的方式。当我们用印刷术来谈论视觉层次时,这就是我们的意思。 。文本格式的接近度,比例和相似度使读者可以将下部示例组织为标题和段落。层次结构赋予标题比其他信息更多的含义,并使其更易于扫描。

好了,这都是非常基本的东西,对吧?让我们深入研究一些如何将这一基本原理应用于一些非常复杂的设计的更深入的示例。

层次主义者的工具箱


很好地理解了视觉层次结构很重要,但是设计师实际上是如何创建视觉层次结构的呢?我们将要看的“工具”就像木匠的工具集一样简单-锤子,钉子,锯子等-您要用它们做什么才是最重要的!

尺寸


较大的对象需要更多关注。将大小用作层次结构工具是一种将查看者的眼睛引导到页面的特定部分的有效方法。由于规模是组织中最强大的形式之一,因此在设计中将规模与重要性相关联非常重要。在大多数情况下,最大的要素应该是最重要的;最小的元素应该是最不重要的。

BIG粗体字的使用为这种原本混乱的设计增添了层次感。眼睛自然应该从大元素移到较小元素。

颜色

颜色是一种有趣的工具,因为它既可以用作组织工具,又可以用作个性工具。网站上特定元素上的粗体,对比色将引起注意(例如,带有按钮或错误消息或超链接)。当用作个性工具时,颜色可以扩展到更复杂的层次类型中。使用郁郁葱葱,令人愉悦的色彩可以为页面带来情感上的吸引力。颜色会影响从网站品牌(即:可口可乐红)到象征意义(即,冷酷,柔和的颜色)的所有内容。颜色的高级应用程序甚至可以用于对层次结构中的信息进行“分类”,如以下示例所示:

Spectra Viewer网站使用颜色表示不同的新闻类别,因此很容易根据颜色键查找特定类型的信息。

对比

对比显示相对重要。文本大小或颜色的剧烈变化将传达出一些信息,即有些不同,需要引起注意。从浅色背景颜色更改为深色背景颜色可以快速将页面的核心内容与页脚区分开。

浅色,通风的页眉部分与深色,泥土的页脚之间的对比创建了独特的信息层次结构。

结盟

对齐会创建元素之间的顺序。它可以像“内容列”和“侧边栏”之间的区别一样简单,但是对齐还可以承担更复杂的层次结构角色。例如,考虑放置在网页右上方的信息的力量。因为用户通常希望屏幕的该部分中的信息与配置文件,帐户,购物车等相关联,所以它使该区域中的所有位置都具有“正式”的感觉。

重复

重复为元素赋予相对含义;如果所有“段落”文本均为灰色,则当用户看到一个新的灰色文本块时,他可以认为这是另一个基本段落;当同一用户遇到蓝色链接或黑色标题时,他可以放心地认为它与灰色文本不同且唯一。

Virgin网站会创建重复的元素(例如段落文本),然后在希望引起注意时中断重复(例如红色引号文本)。

接近

邻近将元素彼此分离并创建子层次结构。在页面内,可能有一些小部件,这些小部件之间用空格隔开。在这些小部件中,有一个新的标题,字幕和内容层次结构。邻近度也是关联相似内容的最快方法。在以下示例中,仅根据彼此之间的接近程度轻松查找某些类型的内容。

Tuts +网站实际上确实做得很好(不要吹牛角!)。左侧的“内容”列与侧边栏小部件空间的位置明显分开。此外,特定博客文章中的元数据被放置在该文章的附近,并且远离其他文章,从而增强了“归属”感。

密度和空白

将元素密集地包装到一个空间中,使它感到“沉重”且混乱;当元素之间的间距太大时,它们可能会失去彼此之间的关系。当页面被设计为“恰到好处”时,眼睛会轻易识别出元素何时相关以及何时不相关。

通过将元素分隔开并在页面上保留大量空白,此设计使人们更容易漫游并找到内容密集的小包装盒。

风格和质感

样式也许是Hierarchists工具箱中最开放的工具,可以用来赋予一种既包含又超越其他工具的层次结构形式。例如:平坦的灰色背景将“感觉”不同于沥青质感的背景。设计师赋予的这种风格或个性自然会在如何形成不同的视觉关系中发挥作用。

值得一提的是,样式也是设计师可以使用的最危险的工具之一。就像木匠在带锯上割断手指一样,设计师可以通过过分强调样式中的某些元素来轻易地误导人们。想象一下,一个结构繁琐,设计繁琐的站点元素需要太多的关注,以至于分散了注意力而不是通知。同样的想法扩展到字体,按钮,选项卡和其他元素。当您选择向元素添加额外的样式和修饰效果时,请考虑对整体设计的影响。

Jeff Finley的站点很好地完成了我们在此讨论的许多工具的组合,但是他在标准UI饲料上使用最初样式化的元素使整个设计具有了有目的的层次感。Jeff设法添加了足够的样式,以使自己的网站显得个性化而又不过度。

层次结构失败

良好的视觉层次结构与疯狂的图形或最新的Photoshop过滤器无关,而与对日常站点访问者可用的,可访问的和合乎逻辑的方式组织信息有关。

正如我在上一节中所建议的那样,重要的是要注意层次结构可以用于善与恶。想想这些年来困扰网络的所有烦人的Flash广告,弹出窗口,闪光横幅等!尽管这些广告成功吸引了人们的注意,但它们却最终破坏了网站的视觉层次结构,最终使网站所有者和浏览者失望。同样,如果设计人员建立了视觉层次结构,以致几乎无法找到某些关键信息,那么设计人员将无法完成任务。良好的视觉层次结构与疯狂的图形或最新的Photoshop过滤器无关,而与对日常站点访问者可用的,可访问的和合乎逻辑的方式组织信息有关。

为什么层次结构与Web设计师特别相关

“设计师可以摆脱混乱而创造常态;他们可以通过组织和操纵文字和图片来清晰地传达思想。” — Jeffery Veen,网络设计的艺术和科学

杰弗里·芬恩(Jeffrey Veen)在2001年写下了这些话,但在如今“信息超载”似乎司空见惯的今天,它们仍然占有很大的力量。作为人,我们一直对视觉组织有着敏锐的意识。但是,在过去的几十年中,作为一个社会,我们一直饱受着名副其实的视觉信息海啸的袭击;结果,当今的人们对视觉等级非常敏感。在网络上尤其如此,研究证明常规的网络冲浪者已经学会了天生地“扫描”内容。自动寻找与他们的兴趣相关的信息,并丢弃/忽略无关的信息。

因此,成为视觉层次结构的主人不是可选的,而是强制性的。随着典型的网络冲浪平台从传统的显示器扩展到电话,平板电脑甚至电视,使用强大,清晰的视觉系统与网络冲浪者进行交流变得越来越重要。

测试视觉层次结构的练习

最后,我想以一个非常简单的练习结束。例如,我们将使用您经常访问的网站或您最近从事的项目;练习如下:

  • 列出访问者可能寻求的关键信息点。
  • 根据值对普通访问者的重要性分配值(1-10)。
  • 现在,再次查看实际设计。
  • 在实际设计中,请根据实际视觉重要性分配值(1-10)。
  • 考虑:预期重要性是否与实际设计重要性相匹配?


在大多数情况下,答案将包含阴影“否”。造成这种情况的原因很多-客户需求,经验不足的设计师,按委员会设计-或您可能已经读过的其他一百种原因。哎呀,在某些情况下,设计师可能希望误导观众(考虑一个试图引导用户获得付费内容的“免费”网站)。无论出于何种原因,理解视觉层次结构并尝试对其进行解释都是一种以全新的方式改进您查看Web设计的方式。希望它也能帮助您了解自己的工作!

注:本文翻译引用自国外