杭州做网站：沟通信息通过视觉层次结构

2019.08.21 杭州做网站

每一个设计的目标是成功地传达一个信息。视觉层次结构使您能够组织信息和元素,以便消息可以容易沟通。层次结构也使设计来讲述一个故事来传达消息。

视觉层次结构是什么?

杭州做网站当你组织信息重要性的基础上,这是层次结构。视觉层次仅仅是视觉上组织信息。为了创建层次结构,元素需要优先的重要性从最不重要。在视觉层次,这些元素是分化他们的长相。通过视觉线索,你强调一个元素或多或少比下创建一个重要的关系。

是什么让这个重要?

视觉线索让我们确定是什么,并不重要。通过给不同的元素更多的视觉重量,我们识别它们是更重要的。如果你理解设计原则,帮助创建一个视觉层次结构在你的设计中,它会让你更好的与游客沟通。

与层次结构,信息变得容易扫描和消化。深思熟虑的层次结构将允许游客快速完成一项任务,因为它是更容易理解的信息。这也使得一个更好的设计,因为页面上的各种元素看起来更有凝聚力。成功的视觉层次结构将强调动作或关键信息。

你能给我一个例子吗?

层次结构的一个简单但很好的例子可用六个标题尽管HTML。 H1是最大的,因为它是最重要的,虽然一直是最小的,因为相对于前面的五个最重要。更重要的然后任何六个标题样式的段落格式。所有这些元素,和相关的所有其他字体标签像强,或引用,是一个很好的例子,在排版的视觉层次。

这两种设计的容易阅读? 这更有可能是真的读吗? 有效沟通? 没有任何特色标签帮助创造视觉区别相比文本。你可以清楚地看到,简约的文字是难以理解。印刷的图像层次不仅容易扫描,很容易看,各种元素沿着文本帮助指导你的眼睛。

在线HTML电子邮件模板编辑器

与明信片你可以在线创建和编辑电子邮件模板没有任何编程技能! 包括100多个组件来帮助您创建自定义邮件模板的比以往任何时候都要快。现在试一试免费!

了解更多其他产品

如何营造视觉层级?

大小、对比度、颜色、距离、对齐、重复是简单的设计原则。他们的一些基本知识你了解当你首次设计和他们的原则,您可以使用为了创建层次结构。请再次查看上面的例子,你会注意到大小的关键因素区分h1和h2等等。

大小

更大的元素更快地吸引你的注意力。大的一个元素,更重要的应该。事实恰恰相反,在较小的元素应该持有更少的相对重要性。如果一切都是相同的大小,没有什么看起来或多或少地重要。大小指导你的眼睛从最大到最小的元素,使这种类型的差别很容易理解。

对比

元素之间的戏剧性的变化在一个层次结构有很大的影响,如颜色变化。如果一个部分在你的页面有一个黑暗的背景和未来有一种轻微的背景,它将把部分和元素,意味着相对重要性。对比可以成为一个伟大的和简单工具识别信息的重要性和发展层次。

颜色

颜色是一种有趣的方式将各种元素。你可以使用缺乏或丰富的颜色的注意指向的东西; 使用大胆的颜色来做一些乏味或柔和的颜色中脱颖而出,反之亦然(尽管彩笔脱颖而出大胆的将更难设计)。为了得到正确的颜色来创建层次结构,你将只需要配色方案进行试验,以确定哪些脱颖而出。

接近

距离可以创建元素的分离以及分组,可以认定为子层次结构。例如一个典型的博客布局与旧学校栏在典型的WordPress博客。侧栏标题,标题和段落的文本自己所有。这些元素的位置帮助识别它们的子群的整体页面的层次结构。博客本身也是如此; 博客文本元素的聚集使它呈现出自己的实体与不同的标题,副标题,等等。

对齐

对齐或放置元素也可以表示的重要性。最好的例子,这是一个典型的网站,最重要的信息被认为是在页面的左上角。因此,商品在页面也认为有更高的重要性——这就是为什么你经常看到标识在左上角和导航。使用这个对你有利; 用它来找出如何强调更重要的战略位置信息在不太重要的内容。

undefined

重复

重复是一个很好的工具来表示相对重要性。段落内的任何设计是一个很好的例子。在一个报纸,所有的段落将一定大小和颜色; 用户将看到一个模式,强调平等的重要性。这同样适用于标题或副标题。这就是为什么它是如此重要的区分在文本链接; 当它出现一样的文本的提醒,没有人会认为这是一个链接,因为没有视觉线索不是那么回事了。

杭州做网站