开始网站发现过程的一个核心地方是了解客户的目标和目的。了解网站需要做什么，哪些事情是最重要的是必要的。为了做到这一点，我们需要建立一个等级制度。
一个层次结构本质上是项目、目标、想法和/或需求的顺序。网站设计中的层次结构主要是影响用户理解和接受网站的主要目标，并以理想的顺序与材料进行交互，以促进网站的顺畅和愉快的体验。
实用的层次结构
如果你曾经学过商业理论，玩过电子游戏，从菜单点菜，或与企业互动，那么等级制度已经是你的常识的很大一部分。层次结构是传达价值、重要性和顺序的关键。
的权力结构
层次结构不需要一个实际的图表或图表来解释其内容的位置、关系、重要性和相对价值，但它肯定是一个有用的练习。层次结构的实际结构称为权力结构-一个非常合适的名字。为了创建一个网站的层次结构，大多数设计师会从a开始站点地图或者网站的流程文档。
一个站点地图是站点架构的路线图。这是一个构建和驱动网站的固有结构。如果没有计划，网站将一事无成。
就像网站地图指引我们决定内容结构一样，权力结构也可以作为视觉层次结构的指引和参考点。下面是网站的基本权力结构。这将涵盖许多常见的网站设置，但也有一些例外(如资源站点和企业级结构)。
电源故障
在任何层次结构中，没有任何元素高于自身，因此必须将其赋值为等级和级别。此外，层次结构必须具有绝对高级元素，即教主．我想给你一个基本的模板和路线图来建立你自己的权力结构。
的教主
毫无疑问，一个网站需要有一个终极目标或目的。当然，一个网站可以有多个目标和目标，但在一天结束的时候，有一个目标是衡量网站成功的关键。无论层次结构是X数量的页面浏览量，获得2%的联系页面转化率，还是推动每个客户呼叫客户，都必须清楚你的目标是什么。
没有人能在黑暗中荡得很远。
排名
在等级制度下，兴趣对象必须根据转化率和重要性进行排名。这就有点棘手了。你可能会认为，如果某物处于更高的层次，它就会立刻优先于较低的元素，对吧?
错了。两者之间有一个微妙但重要的区别优先级而且重要性．高级元素当然更重要，这意味着它们严重依赖对其下属要素的成功和曝光。
略读:能量等级1
有一个设计的基本概念:我将其称为“略读”。即使你从未听过这个词，你仍然可能知道它的意思。常识,热点图追踪眼球运动和活动的研究，以及人类的大脑会告诉我们，我们有较短的注意力比我们想象的。
我们先略读，然后再读。在决定阅读这篇文章之前，您很可能会先浏览一下感兴趣的文字和图像。尽管解决“揩油”问题属于底层权力，但它仍然是必不可少的。
如果用户已经离开了网站，您就不能将其导向分支机构、行动号召或转换目标。好吧，那么如何称呼“略读”呢?这并不像你想的那么难，但它需要一些计划和组织。
幸运的是，HTML为我们提供了这样的结构。标题标签(例如。<标题>，< h2 >，< h3 >)是标记的重要组成部分，而不仅仅是for搜索引擎优化，也有利于你的等级制度。
这一特殊的概念与视觉层次直接相关。简单地说，就是让你最基本的要点要大，大胆而清晰。在下面的例子中，我们可以看到“略读”层已经用一个值语句和一些简单的特性列表解决了。
很明显，这个网站是为了什么，我为什么在这里，以及我可以做什么。
DeployCMS
支路:功率2级
现在我们已经跳过了“略读”的障碍，让用户留在网站上，我们已经在用户的脑海中建立了一个基本的结构。这就好比你走进一家麦当劳，心想:“嘿，他们的汉堡很好吃。”层次结构的下一个功能级别是设置和处理分支。一个分支意思是说不是每个人都会点击相同的东西。
一个分支应该以广泛的主题、一般的兴趣点或重要的点来攻击。通常，分支分为典型的项目，如特定的服务或网站的区域，并将用户分支到不同的主题。永远记住，你不需要有很多分支——很多时候，简单更聪明。
当用户选择一个分支时，层次结构永远不应该消失。在网络上，重复是你的朋友。在巴利的例子中，分支是大胆而明确的:菜单或啤酒．
许多用户对选择感觉良好。但不是太多选择——足够帮助他们做出明智的决定。
大麦的格林维尔
呼叫行动:能量等级3
大多数设计师都熟悉行动号召。这与等级制度的关系是显而易见的。这是因为行动呼吁必须引人注目，吸引注意力。
然而，有些事情你可能不知道。有时候，行动的号召更有力量当它不是一个按钮，或者更确切地说，不是对直接行动。就像人们不喜欢在餐馆或电子产品商店被推销一样，他们在网上也会有类似的反应。
用户相信他们知道自己想要什么。如果超级大、响亮、醒目的行动号召按钮效果良好，那么按照同样的逻辑，闪烁的在线网页横幅广告将更受欢迎。温和的——但仍然是命令式的——行动号召可能会更有效。
在这个例子中，“继续读下去”很大声，能吸引你的注意力，但它不需要像“现在注册!”或“现在购买!”
TNVacation.com它引起了人们的注意，但没有那么粗暴。我听许多设计师说过，我应该把我的纽扣做得尽可能花哨和醒目。我们是什么?
二手车推销员?没有人喜欢这种营销方式，网站用户也不例外。基本理念是清晰和尊重。
使用行动呼吁来让你的用户意识到主要要点，并专注于支持高层的理想，但不要把它塞到他们面前。
促进:能量4级
层次结构的促进级是用户在进入层次结构之前与之交互的最后一个对象。许多设计师在制定他们的权力结构和策略时都会犯一个致命的错误，那就是他们将促进与等级制度相结合。也就是说，登陆联系页面并不等于收到一封电子邮件或一个电话。
仅仅因为你让用户进入了对话点，并不意味着战斗结束了——你仍然需要进行转换。为了让这部分在层级中发挥作用，促进页面必须强化所有之前的对象，并诱使用户继续到达终点线。我们怎么做呢?
简单!确保标签容易浏览，包括你需要的核心信息，要求最低限度的承诺，记住要友好和命令，但不要令人不快或粗暴。在这个例子中，我们正在寻找一个网页设计公司的联系页面。
在“略读”中，我们能够快速地找出每个部分是什么。
基金会6格式简洁，吸引人，没有威胁。联系表单会问一些问题，但它们都是直接的，而且大多利用下拉菜单，所以提供回答需要的时间和脑力都很少。
注意，使用的语言仍然是一种命令的语气，但是友好和平易近人的。最后，我们来到“提交”按钮，它是这个页面的层次结构。
力量了!
这涵盖了权力结构的基础。我鼓励你为你现有的任何网站创建一个结构，然后将它与你的网站进行比较分析报告看看你的目标和等级制度是否一致。
实际上，有更多类型的层级情况，比你可能认为的要多。现在你已经对如何构建层级有了一定的感觉，让我们来谈谈我们在每个网站上都在进行哪些战斗。让我们暂时抛开等级制度，看看这一切的心理层面。
格式塔在权力结构中的应用
我们刚刚回顾了构建层次结构的元素。让我们更进一步，深入研究等级制度的心理层面。
了解全局
格式塔(Gestalt)在英语中大致翻译为“统一整体”(来自德语)，是一种研究人类视觉感知的心理学流派。我强烈推荐你看看这个格式塔在设计中的应用概述对格式塔进行更广泛的讨论。格式塔专门寻求解释人类如何根据一系列因素和组织范式将视觉元素组织成组或整个信息片段。
格式塔帮助我们认识到，即使每一个单词都是错误的，但你刚刚读懂了它是多么的简单。这是什么意思?设计是各个部分的总和，但这些部分必须相互契合，必须解决问题。
如果我们不了解各个部分如何组合在一起，我们就不能指望正面解决问题。许多设计师会根据他们个人对事物的感知来做出关于层次结构、可用性或设计的重要决定。当你客观地去理解用户会如何看待同样的内容时，这是很危险的。
花一些时间学习视觉感知的一般方面将有助于你的设计方法超越你自己的感知，创造更有效的设计。我们想要攻击如何建立你的权力结构，并使用少量格式塔理想与其他方法和技术。层次结构不仅与信息的排序有关，也与整个设计如何组合在一起有关。
等级制度的使用就像一个体育团队的一个好策略:虽然团队可能有一些明星运动员，但他们不能独自运作。团队的有效性取决于他们的团队合作和整体方法;它们必须作为一个统一的整体发挥作用，以最有效地利用战略。
延续
当眼睛被暗示的运动从一个物体推进到另一个物体时，延续就是一个原理。延续在网页设计中的恰当应用是不可否认的。设计师应该建立一个设计，引导用户的眼睛从一个物体到另一个物体。
延续的最简单例子便是指向下一个道具的箭头，但精心制作的装饰物或平滑曲线也同样有效。
让我们来看一些例子。
Bam创意看不出吗?
我明白了。
在这个例子中，bomb首先吸引我们的注意力，因为它是强形式。顶部的保险丝有一条曲线，然后向下移动。
它几乎迫使用户的眼睛沿着保险丝移动，然后跳转到固定在高对比度文本块上的问候文本，背景是微绿色的。看看下面的例子，看看你是否能辨别出延续的用法:
网络:/ /接触你找到了吗?答案如下:
虽然延续可能并不总是合适的，但请记住，当您需要帮助用户定位特定元素时，您可以这样做引导他们的视线他们在这个问题上没有太多选择。
相似
当一组物体看起来彼此相似时，人类通常会将它们视为一个相关的群体。具体来说，就是人类的思维将搜索模式即使不存在，也能形成它们。这使我们能够将导航栏理解为一个元素，将停靠栏理解为一组工具，或将一组项目符号理解为一个列表。
Baney设计在下一个示例中，实际上有两个简单但有效地执行相似性的示例。旋转的图标和带有客户标志的旋转木马都利用相似性来驱动良好的用户体验。标题中的图标是由一致的黑圈制成的相似的不同形状。
我们将它们理解为一组相关的图标，因为这个类似的元素。底部的旋转木马向我们展示了许多软白色和灰色的盒子里的多个不同的标志。再次，我们立即将它们组合在一起，因为这是一致的框架，而不考虑其中的形状或设计。
赫尔数字直播10这个例子让我们看到另一个相似的原则，被称为异常．通过用白色圆圈突出显示活动页面，我们的思维立即集中在与相似对象组不同的元素上。正如您所看到的，许多元素都实现了格式塔原则，即使我们没有意识到我们正在使用它。
关闭
闭合的原则解决了人类在脑海中完成一个形状的倾向，即使他们只呈现了一个部分的形式。这与我们将负空间解释为特定形状的原理是一样的。我们也可以在网页设计中看到封闭效果。
例如，闭包可以让我们看到没有附件或指导原则存在的列，或者把一个按钮圈理解为一个导航菜单，而不是一堆圆圈。在下图的例子中，我们可以看到关闭的应用是微妙的，但关键的网站布局。当你看到这种布局时，你会看到2个整洁的列，但你也会看到在中间和底部有3个列，以及一个由美术片段组成的方块网格。
充分说明了闭包使您能够看到列。这里没有边框、连接、边界或指导方针，只有一致的对齐用法和图像、文本块、图像链接和左对齐中的正方形形状的呼应。一个区块列是隐含的，我们的大脑会做一些工作来完成它。
这样想似乎有点奇怪，但我们的大脑是非常善于分析的。人类的大脑在不断地回忆惯例，以前的经验和范例来构建你周围的世界，因此你的网站体验。让我们再来看看《完整插图》。
当他设计这个网站的时候，设计师可能没有想到，“我想让用户看到正方形”。相反，重要的信息在于隐含的形状、特定的排列和利用人类思维能力填补空白的设计技术。我们的感知是不断移动、适应和建立的。
这是设计哲学的核心原因极简主义还原论非常有效。有时我们需要让开，让用户的大脑为我们做一些工作。
接近
“接近性”解决了这样一种倾向，即大脑会把许多形状紧密地放在一起作为一组，而不是把许多单独的物体放在一起。作为设计师，我们可以使用这种感知原则来传达层次关系，并形成具有多个视图或分支的形状。在下面的例子中，您将看到邻近性的具体使用是如何成为分支和可用性的有效工具的。
日产叶在这个例子中，我们可以看到不同的浮动项的放置是分开的，因此读取为不同的选项和形状。我们知道每个点会把我们带到网站的不同部分。我们还可以看到这里的相似性的使用，以区分较小的圆圈将带我们到汽车的特征，而大的多颜色的圆圈将带我们到更多的专题文章或媒体，与车辆相关。
此外，在特定的距离内，圆点与汽车的整体接近有助于用户立即理解圆形形状与汽车有关。下一个截图来自相同的日产网站，但在这种情况下，网页设计师利用接近来表示关系。
注意到中间的圆圈是如何使用接近来传达所有的彩色圆圈都与倡导有关。
虽然使用相似性来帮助我们感知较小灰色点的相关性质，但我们并没有将它们视为一组直接相关的链接，因为它们之间的距离不够近。
整个攻击计划
现在我们已经对网页设计中的权力结构和格式塔有了很好的感觉，我们可以首先进入层级设计和我们可以用来赋予我们的结构的工具。
两种层次结构
对于网站设计来说，有两种类型的层次结构是必不可少的，而且总是存在的:
- 目标层次结构
- 视觉层次结构
目标层次结构目标层次是控制、影响和定义元素的顺序，引导用户实现网站的总体目标、目标和转换点。目标层次是指对你的目标进行排序，并围绕目标的成功和突出程度以适当的顺序进行设计。权力结构是这些目标的可视化。
让我们以“Build”会议的网站为例:
建立会议在这个网站上有很多关于目标层次的智能信息。突出的主要元素是什么?标志和前提，“立即注册”按钮和发言者阵容。
毫不奇怪，这与目标的层次结构相对应。目标列表大概是这样的:
- 告诉人们会议的名称和地点
- 让他们注册
- 吹嘘一下演讲嘉宾的阵容
让我们再看一遍主页，并附上一些有用的注释:
让我们分解一下影响这个设计中的层次结构的一些决策:
- 你会注意到这次会议的目标是西方文化(如美国和欧洲)。西方文化倾向于从左到右阅读。
Build在左上角开始了他们的标志。“构建”标志的角度使用延续来移动我们的眼睛到右边。
- 毫无疑问，我们的眼睛已经发现了导航中的相似类型，并将其分组在一起，但是“这个亮黄色的盒子是什么?”它不属于那里!”由于异常现象，我们被吸引到了那里。
- 此时，我们的大脑已经成功地合成了页面上的所有数据并将它们分组在一起，所以我们从顶部向下移动，走向speaker部分(使用类似形状的框架和去饱和的照片将元素分组为相关集)。
总而言之，页面的流动是简洁的，并迅速将我们推向最重要的元素。设想目标的一个好方法是问你自己(和你的客户)，用户在离开页面之前必须看到什么东西。当你浏览“构建”的网站时，不管你喜欢与否，你离开网站时就知道有一个网页设计会议，它被称为“构建”，你必须注册才能参加，它有一组发言者。
这并不是你需要知道的关于会议的所有信息，但这些是核心信息，对于大多数情况来说已经足够了。这为您的分支奠定了基础。如果你设法抓住用户的注意力，并迅速传达用户为什么应该关注——以及他们如何采取行动——那么你就完成了作为设计师的工作。
视觉层次结构视觉层次结构指的是设计如何有效地传达哪些元素相互关联，以及这种关系如何影响我们看待它的方式。当你在处理分支和“略读”时，实现可视化的层次结构更为重要。
层次结构的可视化方面更直接一些，但它不能被轻视。
与层次结构的面向目标方面不同，这种类型特别关注于易读性而且清晰．这两种层次结构都应该是你的设计方法的支柱，但在视觉层次结构的情况下，我们将更加表面化。在下面的例子中，注意你应该读的内容和它的目的是什么。
混合在线最大的文字是标题，大写的红色字体是作者，正文后退，但有喘息的空间和清晰。在精确使用尺寸和颜色的基础上，我们可以看到导航和设计元素闭包的相似性。
构建层次结构的工具
当你在为实现网站的层次结构构建策略时，注意哪些属性在视觉语言中特别有用是很有帮助的。
大小
按钮或文本的相对大小是吸引注意力的坚实工具。基本上，让它更大，更突出。这一元素是显而易见的，但我经常看到设计师将一些不那么重要的内容变得比他们的“大”元素更重要。
为了让大小和比例发挥作用，你关注的元素必须与大小相关。
万花筒
- 大字体“文本范围”使用其过大的尺寸来传达其重要性。
- 在标题文本周围的顶部栏中，用法的延续很明显。
- 顶部标题描述了功能，但不是页面上最重要的信息，因此有意降低对比度。
对比
对比可能是让人们注意到一个元素的最基本的方法之一。不要把对比与颜色混淆。只有在正确的情况下，颜色才是有效的工具。
在黑色背景下，黄色文本可能会让用户感到突兀，但在白色背景下，它是无用的。记住,使用的颜色这可以归结为对比。如果某样东西很难读，说明它不够好。
在构建一个专注的元素时，你可能会犯的最大错误之一是说服自己易读性是不这是最重要的。不要落入这个陷阱。不管图片有多酷，或者自定义插图有多酷，如果用户无法阅读内容，这场战斗就已经失败了。
他们在哪里
- logo在完全不饱和的背景上使用了饱和度很高的颜色(黄色)
- 相反的颜色形成对比
- 对于选择，颜色被注入到活动照片的黄色和褪色的不饱和的背景，这创造了一个鲜明的对比
- 我们的目光转向异常点
公约
惯例是以熟悉为中心的规则。约定应该利用人们普遍理解的用法、符号、上下文和方法来产生影响。例如，一个网站链接通常被理解为下划线和蓝色。
如果你足够一致，你可以在你的设计中建立你自己的惯例(比如网站链接没有下划线或蓝色)-甚至打破惯例来创造极其有效的异常。这意味着使用一致的语言和线索指向一个任务或行动。这可以用来推动用户进入特定的任务或对话点。
- 清晰而简单的视觉关卡
- 在传统的左对齐菜单中，所有的列都以清晰的间距左对齐
- 优雅的延续和闭合的使用
- 使用视觉效果来解决“浏览”问题
层次结构中的约定也可以应用于文化传统．不同国家和地区的网站不一样。确保你知道你的用户会期待什么。
让我们来看看日本的麦当劳，对比一下美国的麦当劳网站(如上所示):
麦当劳日本它和美国的同类产品不太一样。当为一个国际观众，坚持使用简单的工具，如大小和对比度。
结论
最后，只要记住，当你建立网站时，你是在为用户构建体验。不是每个人都能一直井井有条。然而，当你理解了你的技巧的心理和结构，通向可测量的解决方案的道路就变得清晰了。
许多成功的公众演说家在采访中透露，当他们理解原始材料，而不是背诵预先写好的演讲稿时，他们的演讲效果会更好。就像一辆耐用的汽车，精心准备的饭菜，或者一笔稳固的生意，成功不仅仅是你看到的:它还在于计划、结构、方法和执行。
