网站设计原则：优势、重点和结构

客户曾经要求你使标志更大吗? 也许他们要求你完成他们的要求后一个标题更大。

新标题脱颖而出,但现在的标志太小相比,并没有注意到。 客户想要使标志更大。

当然,现在标志和标题更大,既要吸引更多关注的主要文字-动作按钮,这将需要更大的。 ,一旦大按钮,标题要重新开始看小。

你不能强调一切。 它失败点了 当你试图这样做,你的所有设计元素争夺注意力,脱颖而出。 他们都同时大叫。 一切都很响亮,但仍然没有听到。

重点是相对的。 一个元素脱颖而出,另一个作为背景,第一是脱颖而出。 需要一些元素占主导地位 别人为了你的设计来显示任何形式的视觉层次。

请注意 :这是第五个帖子在一系列设计原则。 你可以在这里找到前四本系列的文章:

• 设计原则:视觉感知和完形的原则

• 设计原则:空间和图形-背景的关系

• 设计原则:通过对比和相似性连接和分离元素

• 设计原则:视觉重量和视觉方向

主导地位

比较任何两个元素的设计。 元素将在各方面平等或人会产生某种程度的主导地位。 更主要的元素将吸引眼睛,先注意到。 它甚至可能出现少表现出某种控制主导元素。

更主要的元素可能有更大的视觉重量不是主导元素。 似乎将施加力量是什么。

圈对统治广场,因为它们的相对大小。 ( 查看大版本 )

当你开发一个作文,你会看到大量的元素相互施加统治。 一些元素将主导,和下属。 没有有意识的控制,你就希望事情所有的工作和重要信息将能吸引注意力的。 幸运的是,你有控制。

如何建立主导地位

你设计一个元素比另一个更有优势,给它更多的视觉重量。 更大的视觉重量,一个元素将吸引眼睛和具有主导地位。

您创建通过对比优势,强调和相对视觉重量。 相同的物品不能支配对方。 发挥优势,一个元素看起来不同的元素是为了占主导地位。

你的目标是创建元素和视觉重量的明显差异。

可以改变相同的特征,我们谈论在过去的几本系列文章。 作为提醒,这里有最常见的特征可以不同设置不同的视觉重量:

• 的大小,

• 形状,

• 的颜色,

• 值,

• 深度,

• 纹理,

• 密度,

• 饱和,

• 取向,

• 当地的空白,

• 内在兴趣,

• 感知到的身体重量,

您可以创建优势通过视觉方向。 例如,您可能围绕与箭头都指向一个元素,元素。 如果有足够的方向线索,元素将成为占主导地位的即使是较低的视觉重量比其他页面元素。

你也可以让co-dominance,两个主要元素存在于一个组合。 然而,争夺注意力和最终可能会分心,没有正确的综合平衡你的竞争对手。

理想情况下,你想要一个主导元素。

主要的元素

占主导地位的元素在设计中最大的一个视觉重量(或其他点)。 元素,首先吸引眼睛,比其他任何页面。

小心不要使元素占主导地位,完全掩盖了一切,但却使它在设计中脱颖而出。

你的主要元素是你告诉这个故事的起点。 这是入口点到您的设计。 它应该吸引游客首先你想让他们看。

这就是你开始与游客交谈。 主要元素是首先注意到,为接下来的设置上下文。 在层次结构的顶部。 它应该强调你的最重要的信息,因为它可能是唯一会看到任何人。 任何消息你希望人们带走应该清楚地传达或接近你的主要元素。

没有一个入口点,观众将不得不努力工作找到进入你的设计。 他们必须停下来思考,先去哪里看,思考什么是真正重要的。 缺乏入口点会增加游客的认知负荷。 不要让他们思考。 为您的设计提供一个入口点。

焦点

焦点也元素或领域的主导地位,就不是一个级别的作为你的一个主要元素,可以被定义为最主要的焦点。 焦点是感兴趣的领域,强调或不同组合,吸引并保留住观众的注意力。

重点在你的设计应该突出但后应注意元素最多的主导地位。 下图显示了一个孤独的圆的海洋中大部分是灰色的方块。 循环不仅是不同的形状,但大而明亮的红色。 很有可能你的眼睛注意到的第一件事的图形。

三四个方块也红的颜色,虽然不是一样明亮的圆。 他们同样大小的图像中其他方块,但是他们脱颖而出的灰色方块,因为它们的颜色。

圈和三个红色的方块都是焦点,因为他们脱颖而出的大多数其他图形元素。 他们与质量的灰色方块。 大而明亮的红色圆圈最突出。 这是主要的焦点,或这幅图像的主要元素。

红色圆圈和方块焦点。 圆是主要元素或主要焦点。 ( 查看大版本 )

与主导元素,您可以创建焦点,向他们提供更多的视觉重量比除了占主导地位的元素——再一次,是你最主要的焦点。 您还可以创建视觉方向,会导致不同的焦点。

您可以创建超过三个层次的主导地位,但每个额外的级别将减少对比周边的水平。 除非你确定你可以对比每个水平很好,坚持三个。

这是重点,除了占主导地位的元素或主要焦点。 就二次重点。 元素在这个层面上强调获得低于主要级别但比下属级别。

水平的主导地位

如果您创建焦点主要元素,使其中的一个点,然后你开始创建不同级别的主导地位。 占主导地位的元素将坐在一个级别,其他所有人之前都会被注意到。 剩下的焦点将坐在另一个水平。 有多少水平的优势能给你实际的设计吗?

三是一个很好的数字。 作为一般规则,人们可以感知三个层次的主导地位。 他们注意到最主要的,最主要的,其他的一切。 这些水平需要有足够的差别区分一个未来。 你想创建独特的水平,不是一个连续体。

• 占主导地位的 
  

• 这是最视觉重量和水平得到最多的重点。 你的主导水平通常会包含单个元素的前景。 
  当你设计不同的水平的主导地位,你

• 让您的视觉层次结构基于实际的优先级被呈现的信息。 首先,优先考虑的一切将会在页面上,一旦它的设置,设计视觉层次按照优先级。 
  对比是一个很好的方法来创建焦点,因为对比呼吁重视本身是不同的。 任何能够对比和任何能够影响视觉重量或方向可以用来创建一个焦点,以同样的方式,它可以被用来创建一个主要元素。 区别只是程度上的。

下属

视觉层次结构 创建视觉层次结构的设计 在几秒钟内,游客应该能够选择的要点和主要信息页面。 他们可以这样做如果你把最重要的信息最直观地突出。

。 理想情况下,这种视觉层次结构将匹配你的内容的概念层次结构。 如果一篇文章的标题是更重要的不是这篇文章的标题,那么标题应该更俱视觉占主导地位。

视觉层次结构允许游客扫描信息。 它帮助你消息迅速和有效地沟通。 层次结构的顶部(主要元素)应有助于回答访问者可能立即登陆页面。

逗留超过几秒钟的人应该能够通过焦点扫描设计中获得下一个最重要的信息(s),你想交流,用你其他的信息等。

的倒金字塔写作

建立层次结构方式设计类似于记者使用倒金字塔写作。 最重要的新闻都是在第一段或两个。 主要涵盖了谁,什么,何时、为什么以及如何。 它告诉你你需要知道的一切。

倒金字塔写作(图片: 维基百科 )( 查看大版本 )转载请注明北京网站建设

铅是紧随其后的是重要的细节,填写的故事。 他们的细节,提供上下文或帮助您深入了解这个故事。 文章的最后是通用和背景信息,很高兴知道,但没有必要理解发生了什么。

如果有人读只有一两句话,他们应该最重要的信息。 他们逗留的时间越长,他们消耗的越多,他们会得到的更多细节。

视觉层次结构相同的方式工作,但它没有从页面的顶部流线性。 你得到控制,人们看第一、第二等等

再一次,三个层次的主导地位或层次结构建议,尽管四个或五个仍然是可能的。

完形原则和视觉层次

的原因之一,我开始这个系列的文章对格式塔原则是展示他们如何导致许多与我们合作的设计原则。

格式塔视觉层次发展。 焦点是完形原则之一。 你的主要元素是一个极端的焦点。 都使用对比脱颖而出。 硬币的另一面是相似,它帮助我们看清事物的相同。 相似度和对比度是必要的成分在层次结构。

等法律的pragnanz和对称创造秩序,使事情更加简单和清晰。 这就是你在做什么当你在设计建立层次结构。 你组织设计元素建立秩序感。

主要的元素可能被视为图。 最可能被视为地面主要组成部分。 真的,任何连接或分离有关的原则可以应用于主导地位和层次结构。

例子

正如我在本系列中,我已经收集了一些网站的截图,分享我所看到的是占主导地位的元素,重点和层次结构。

这是我的意见。 你可能会看到一个不同的设计,很好。 批判性思考的设计比达成我们所认为的更重要。

一个事件分开

主要元素的主页上 一个事件分开 顶部的形象。 这是最大的元素。 它也是一个人的形象,我们通常所吸引。 对面的大白色文本图像提供对比图片,称你的注意力。

截图的主页 一个事件分开 ( 查看大版本 )

文本“人网站设计会议”可能是最重要的信息,任何登陆页面需要知道。 这是一个非常明确的声明事件是什么,网站是谁。 它可以说是一个新的人的第一件事应该看到的网站。

重点包括网站的标志,“即将来临的事件”,背后的黑暗背景证明设置为一个大大胆的标题。

如果您向下滚动页面,您会注意到,设计主要使用大小和颜色来创建额外的焦点和视觉层次。 重要的信息是更大的。 这是大胆的。 这可能是红色的。 偶尔一幅画。

如果你访问该页面,只是扫描它,你仍然会离开知道网站,了解是否有会议要来你的区域,和相信丰富的奖状。

支付存在

主要的元素 支付存在 的主页是背包的图形在页面的顶部。 这是一个形象和大于一切。 它与周围的环境,因为它是一个图形与内在的兴趣和不同的形状。

截图的主页 支付存在 ( 查看大版本 )

重点包括网站的名字,一些文本的右边的图形,和大绿色“下载”按钮。 社交分享按钮是另一个焦点。

看看下面的内容,您将看到三个大圈编号,作为焦点,引导你附带的内容。

你想读的信息。 注意上面的标题每一段反映其附带的圆圈的颜色,吸引你。转载请注明北京网站建设

想想圈和文本的视觉层次。 大的彩色圆(这是一个层次的)你的注意力,让你坐在另一个层次的信息。

曼迪西姆斯

曼迪西姆斯 有一个单页的网站。 顶端(不是截图所示)包含一个曼迪的形象,这对我来说是主要的元素。 曼迪的名字也显示为最大的文本。

然而,我想吸引你的注意力进一步降低页面的部分。 如您所料,部分的标题是最大的文本,因此它成为焦点。

部分的截图 曼迪西姆斯 的单页网站( 查看大版本 )

焦点也力荐右侧。 注意推荐的背景颜色与背景颜色相同的活动链接菜单。

没有阅读的文本在这一节中,您仍然可以清楚地看到,曼迪快乐的客户提供培训服务,因为一个层次沟通。

VANSEO设计

这最后的例子是 从我自己的网站 。 这是我几年前写的一篇博文中。 原谅放纵,但不像其他的例子,我知道为什么页面上的每个元素看起来的方式。 我是否成功是另一回事,但我肯定的意图。

截图的顶部 文章从Vanseo设计 ( 查看大版本 )

页面的主标题是占主导地位的元素。 这是一个博客,我希望人们阅读,但我想给人一种之前这篇文章是关于什么他们必须投入时间来阅读。

部分图片也吸引眼睛,你可能会认为它更占主导地位,但这样的形象并不是可见的顶部每发布在网站上。

左上角的标志和RSS图标右上的旨在突出多一点其他文本,所以都是红色的。 都将脱颖而出更亮红色,但是我不想让人心烦意乱。 同样的红色也在标题中使用。

左边的元信息是为了脱颖而出的主要文本。 在这里,我使用当地的空白,增加视觉重量的纯文本。 理想情况下,有人会看一眼它并得到信息关于我和邮局的分类和标签。

有一件事我决定与设计使链接的身体明显低于大多数网站。 我希望人们能够找到他们,但是我不想让他们把你的内容。 我用蓝色,黑色文字脱颖而出并不多,而我选择了斜体的大胆。 的链接并不是为了成为焦点,所以我不再以他们的视觉。

我希望有人登陆这个网站上或另一篇文章将能够非常迅速地告诉这篇文章是关于什么,发现关于我的一些基本信息,比如我的名字或者网站的名字,之前希望看帖子。

总结

你不能强调一切。 为了一些元素在设计中脱颖而出,其他元素必须消失在背景中。

通过不同的视觉重量的一些元素和别人的视觉方向,你可以建立不同层次的主导地位。 三个层次是理想的,他们大多数人都能辨别。

一方面将坐在你的主要元素。 这是一个入口点到你的设计,应该是附近或在页面上最重要的信息。 第二个级别的焦点可以关注下一个最重要的信息应该看到游客。 你的第三个层次拥有一切。 你的大部分内容将在这个水平。

设计不同层次的重点或主导地位将会创建一个视觉层次结构在你的设计,更重要的信息更直观地突出。 它将帮助你快速而有效地与游客沟通。

我们接近这个系列的结束。 下一次,我们将看看成分流运动和节奏。 我将讨论主要游客通过设计,让他们更容易找到信息的顺序你希望他们看到它。