搜索内容：
时间：2019-08-01
编辑:网站制作公司
954
0
视觉层次结构是有效网页设计背后最重要的原则之一。本文将探讨为什么开发视觉层次结构在网络上是至关重要的，它背后的理论，以及如何在自己的设计中使用一些非常基本的练习来将这些原则付诸实践。
郑州网站制作在它的核心，设计就是视觉传播：要成为一名有效的设计师，你必须能够清楚地向观众传达你的想法，否则就会失去他们的注意力。人们变幻无常; 如果你给他们一大堆信息，那么100人中有99人不会费心去阅读它。为什么？因为大多数人本质上是视觉思考者，而不是数据处理者。
要弄清楚为什么这是真的，重要的是要了解我们看待事物的方式。人们不是你所谓的“平等机会见证人”。人们不是采用视觉信息并对其进行均匀处理，而是根据“视觉关系”组织他们所看到的内容。让我们考虑两个普通圈子的以下图像：
机会是，你没有看到“两个圈子”; 相反，你看到“一个黑色圆圈和一个较小的红色圆圈”。
原因很简单：当呈现像两个圆圈一样简单的东西时，一个人不会只看到两个普通的圆圈，他们会找到区分两者的方法。一个圆圈可能更大，更小，或有色，或任何其他各种差异。这些差异使我们能够区分对象并赋予它们独特的含义。
现在让我们看一个更复杂的图像：
增加的复杂性实际上强化了我们根据关系对对象进行“分类”的愿望。相似和不同成为我们通过观察形状的框架。规模的差异表明，一个对象比另一个对象更接近我们，或者一个对象比另一个对象更具优势; 颜色的变化可能表明一个对象拥有一个独特的个性，使其与另一个对象区分开来。通过使用一些非常基本的工具，可以在一个图像中提供大量信息。
......了解人们会在关系方面看到我们的设计对于成为更有效的设计师至关重要。
让我们把这个例子带回网页设计; 因为网页设计完全是为了传达视觉信息，所以理解人们会在关系方面看到我们的设计对于成为更有效的设计师至关重要。虽然看起来只是提供信息就足够了，但作为网页设计师，我们的任务是将原始信息分解为易于看到的美味的视觉相关信息，更重要的是，有效地传达信息在网页后面。
关于人们为什么在关系方面看到的原因，有一百种解释; 如果你在人类学上追溯它，你可能会得出结论，狩猎 - 采集者的心态迫使人类在某一点上认识到看到关系是一种生存技能。
看，甚至史前人对视觉对比有一个健康的尊重。
也许更实际的解释是，它只是我们的大脑对信息进行分类的方式：将类似的视觉元素分组并将其组织成有意义的模式，这与我们的饮食习惯一样。无论哪种方式，事实是即使在最基本的形式中，以层次结构组织的信息在沟通方面总是比无组织信息更有效。
考虑以下两个文本块的图像：
在上面的示例中，我们看到应用于文本的视觉层次系统的最基本形式。这两个例子中的每一个都没有任何不同，但它如何分解会大大改变读者看待和接受的方式。当我们谈论排版方面的视觉层次时，这就是我们的意思。文本格式的接近度，比例和相似性允许读者将较低的示例组织成标题和段落。层次结构使标题比其他信息更具意义，并使扫描更容易。
好吧，所以这都是非常基本的东西，对吧？让我们深入探讨如何将这个非常基本的原理应用于一些非常复杂的设计：
了解视觉层次结构很重要，一切都很好，但设计师如何实际创建呢？我们将看到的“工具”就像木匠的工具集一样简单 - 锤子，钉子，锯子等 - 你用它们做的就是重要的！
更大的物体需要更多关注。使用大小作为分层工具是将观看者的眼睛引导到页面的特定部分的有效方式。由于尺寸是最强大的组织形式之一，因此在设计中将尺寸与重要性相关联非常重要。在大多数情况下，最重要的因素应该是最重要的; 最小的元素应该是最不重要的。
BIG，粗体的使用为这种混乱的设计增加了一定的秩序。眼睛应该自然地从大元素向下移动到较小元素。
颜色是一个有趣的工具，因为它既可以作为组织工具，也可以作为个性工具。网站特定元素的大胆对比色将需要注意（例如按钮或错误消息或超链接）。当用作个性化工具时，颜色可以扩展到更复杂的层次结构类型; 使用郁郁葱葱，舒适的色彩可以为页面带来情感吸引力。颜色可以影响从网站品牌（即：CocaCola Red）到象征主义（即：酷炫，柔和的色彩）的一切。颜色的高级应用程序甚至可用于在层次结构中“分类”信息，如以下示例所示：
Spectra Viewer网站使用颜色来表示不同的新闻类别，因此很容易根据颜色键找到特定类型的信息。
对比显示相对重要。文本大小或颜色的显着变化将传达一些信息，即某些事物是不同的，需要注意。从浅色背景颜色变为深色背景色可以快速地将页面的核心内容与页脚分开。
轻盈，通风的标题部分和黑暗，朴实的页脚之间的对比创建了一个独特的信息层次。
对齐在元素之间创建顺序。它可以像“内容列”和“侧栏”之间的差异一样简单，但是对齐也可以采用更复杂的层次角色。例如，考虑放置在网页右上角的信息的力量。因为用户通常希望屏幕的该部分中的信息与简档，帐户，购物车等相关联，所以它使该区域中的所有地方都具有“官方”的感觉。如果以独特的方式使用，对齐也会引起兴趣，例如在以下示例中：
Stuff Template使用独特的水平对齐系统将品牌和导航与博客文章内容分开。
Flex模板使用网格灵感布局来开发视觉兴趣以及分类驱动的视觉层次结构。
重复赋予元素相对含义; 如果所有“段落”文本都是灰色的，当用户看到一个新的灰色文本块时，他可以认为它是另一个基本段落; 当同一个用户遇到蓝色链接或黑色标题时，他可以放心地认为它与灰色文本不同且独特。
维珍站点创建重复元素，如段落文本，然后在想要引起注意时打破重复（如红色引用文本）。
Proximity将元素彼此分开并创建子层次结构。在页面中可能存在通过空间彼此分开的小部件; 在这些小部件中，有一个新的标题，副标题和内容层次结构。邻近度也是关联类似内容的最快方式。在下面的示例中，只需基于彼此的接近度即可轻松找到某些类型的内容。
Tuts +网站实际上做得非常好（不是为了自己的号角！）。左侧“内容”列明显与侧边栏小部件空间分开。此外，特定博客文章中的元数据被放置在该帖子附近并且远离其他帖子，增强了“归属感”。
密集地将元素装入空间使其感觉“沉重”和杂乱; 当元素间隔太大时，它们可能会失去彼此之间的关系。当页面设计为“恰到好处”时，眼睛将很容易识别元素何时相关以及何时相关。
通过将元素间隔开并在页面上保留足够的空白，这种设计使人们更容易漫游并找到小而密集的内容盒。
也许是层次结构工具箱中最开放的工具，样式可以用来赋予一种层次结构，既包含又超越其他工具。例如：平坦的灰色背景将“感觉”与沥青纹理背景不同。设计师给出的这种风格或个性自然会在如何形成不同的视觉关系中发挥作用。
值得一提的是，样式也是设计师可以使用的最危险的工具之一。就像木匠用带锯切断手指一样，设计师可以通过风格过度强调某些元素来轻易误导人们。想象一下，一个纹理粗糙，设计严谨的网站元素，需要如此多的关注，它分散注意力而不是通知。同样的想法扩展到字体，按钮，选项卡和其他元素。当您选择为元素添加额外的样式和润色时，请考虑对整体设计的影响。
Jeff Finley的网站很好地结合了我们在这里讨论过的许多工具，但是他使用最初设计的元素而不是标准的UI饲料，这使得整个设计意味着有意的层次结构。杰夫设法添加足够的风格，使他的网站感觉个人，而不会过分。
良好的视觉层次结构不是关于疯狂和疯狂的图形或最新的photoshop过滤器，它是关于以日常网站访问者可用，可访问和逻辑的方式组织信息。
正如我在上一节中所建议的那样，重要的是要注意层次结构可以用于善恶。想想网络多年来一直困扰着的所有烦人的Flash广告，弹出窗口，闪光标语等等！虽然这些广告成功引起了人们的注意，但它们最终会破坏网站所有者和观看者，从而打破网站内的视觉层次结构。类似地，如果设计者构建视觉层次结构，使得几乎不可能找到某些关键信息，那么设计者将无法完成任务。良好的视觉层次结构不是关于疯狂和疯狂的图形或最新的photoshop过滤器，它是关于以日常网站访问者可用，可访问和逻辑的方式组织信息。
“设计师可以摆脱混乱的局面; 他们可以通过组织和操纵文字和图片清晰地传达思想。“ - Jeffery Veen，网页设计的艺术与科学
杰弗里·维恩（Jeffrey Veen）在2001年写下了这些话，但他们今天仍然拥有很多权力，其中“信息超载”似乎是司空见惯的。作为人，我们始终对视觉组织有敏锐的洞察力。然而，作为一个社会，我们在过去的几十年中一直受到真正的视觉信息海啸的抨击; 因此，现在人们对视觉层次结构过于敏感。在网络上尤其如此，研究证明常规网络冲浪者已经学会了天真地“扫描”内容; 自动寻找与其利益相关的信息，并丢弃/忽略不符合其利益的信息。
因此，成为视觉层次结构的主人不是可选的，它是强制性的。随着典型的网络冲浪平台从传统的显示器扩展到手机，平板电脑甚至电视，我们使用强大，清晰的视觉系统与网络冲浪者进行交流变得越来越重要。
最后，我想以一个非常简单的练习结束。作为示例，我们将使用您经常访问的网站，或者您最近使用过的项目; 练习如下：
列出访问者可能寻求的关键信息点。
根据对普通访客的重要性分配值（1-10）。
现在，再看看实际设计。
根据实际设计中的实际视觉重要性分配值（1-10）。
考虑：预期的重要性是否与实际设计的重要性相匹配？
郑州网站制作在大多数情况下，答案将包括“不”的阴影。这有很多原因 - 客户需求，缺乏经验的设计师，委员会设计 - 或者您可能阅读的其他一百个原因。哎呀，在某些情况下，设计师可能想误导观众（考虑一个试图引导用户使用付费内容的“免费”网站）。无论是什么原因，理解视觉层次结构并尝试解释它是一种改进您在全新视角下看待网页设计的方式。希望它也有助于为您自己的工作提供帮助！
3
s后返回登录
3
s后返回登录
