网页设计中如何有效地使用视觉层次分明?
发布日期:2020-07-08 浏览次数:838 关键词:网页设计
视觉层次结构对于良好的网页设计至关重要。 这是使您的网站有效实现其目标的主要原则之一。 视觉层次结构背后有许多理论,这些理论也非常重要,因此需要大量研究和工作才能理解其工作原理和原因。 知道它可以帮助您使用它。 本期深圳网页设计公司将带您一起了解它。
网页设计
1.设计是交流的一种形式
设计的核心是一种视觉传达形式。 这是关于通过视觉媒体与他人交流想法。 所有形式的设计都是如此。 信息产业设计学院的网页设计尤其如此。 由于人们实际上是视觉思想家,因此许多信息无法很好地传达。 我们不只是处理数据。 人们不仅看到事物。 取而代之的是,人类根据“视觉关系”来组织他们所看到的东西。
2.视觉等级制度的兴起
我们为什么从关系的角度将自己视为研究。 人类学家认为,狩猎和收集历史遗迹有助于我们的远古祖先生存。 一种实用的,学术性较低的方法是,这只是我们的大脑了解信息的一种方法。 我们将相似的元素组合在一起,并将它们组织成有意义的模式,我们可以简单地使用它们。 无论您如何看待人脑使用的视觉层次结构,它都是一种传达我们组织和使用的信息的非常有效的方式。
3.视觉层次结构工具
既然您已经了解了视觉层次结构是用于传达信息的有用工具,那么如何作为Web设计人员来创建它呢? 实现它的工具非常简单易学。 您需要做的就是弄清楚如何使用它们。
尺寸
本质上,较大的对象在大喊。 他们要求人们更多地关注他们。 在视觉上,观看者的眼睛自然会被更大的物体吸引。 这是可用于可视化组织的最强大的工具之一。 将大小与重要性相关联。 通常,最大的元素应该是最重要的,而最小的元素通常是最不重要的。
颜色
颜色既是一种组织工具,也是在网页设计中增加个性的一种方式。 粗体和对比色需要观看者的注意力和焦点。 最适合用于按钮和超链接。 作为增加个性的工具,您可以以更复杂的方式使用颜色。 有趣,明亮的色彩可以使页面令人兴奋,同时声称色彩可以营造出舒缓的感觉。 颜色非常重要。 它可以传达品牌(即百事可乐蓝色,麦当劳黄色)或可以用作符号(即热情的红色)。 您甚至可以应用颜色作为对视觉层次结构中的信息进行分类的一种方式。
字形
当您想创建视觉层次时,选择适合您设计的字体很重要。 不仅字体本身很重要,而且字体的使用方式也很重要。 您使用的重量和样式与放置它们的网站区域一样重要。 要组织重要内容,请尝试使用各种字体大小和粗细。 在某些情况下,斜体也可以达到目的。 您可以使用各种大小,粗细和间距的文本在网站上创建字体层次结构。 网站上是否使用单个字体都没关系。 通过使用尺寸和重量的变化,您不仅可以吸引人们对更重要元素的关注,还可以创建一个整体结构以使访问者易于阅读和理解。
空格处
在仔细使用视觉层次结构的所有步骤中,请确保保留空白。 您需要给内容提供喘息的空间。 负空间是视觉设计的重要组成部分。 空间的定义与积极利用空间同等重要。 通常将空白简单地定义为“页面上各种内容之间的空间”,但是这种额外的空间并不总是白色的,这导致更多的人称其为“负空间”。 空白本质上使您能够确定所构建的网站的哪些特定功能应比其他功能更好。 由于这种欢迎布局,访问者更有可能在网站上停留更长的时间。 空间给您带来清新的感觉,同时也突出了重要元素。 太多的拥挤和混乱将驱散观众,因为他们不了解什么才是真正重要的。
人眼和扫描模式
人眼以可预测的方式工作。 它们将自动吸引某些兴趣点。 其中一些确实取决于个人,但是大多数人会遵循特定的,可预测的趋势,即他们如何查看包括网站在内的所有内容。
F模式
这是大多数人用于博客或Wiki等文本丰富的网站的扫描模式。 阅读器首先扫描页面左侧的垂直线,以找到该段落的前几个句子中的关键字或其他兴趣点。 读者一旦发现有趣的东西,便开始以水平线正常阅读文本。 整体模式类似于字母F(或E)。
Z型
此扫描模式用于不在文本中心的页面。 阅读器首先扫描页面顶部的水平线。 这通常是由于菜单栏的缘故,但这也是从左到右阅读的习惯。 一旦眼睛到达水平线的末端,它将向左和向左移动,从左向右移动另一个阅读习惯,然后重新开始。 该模式类似于字母Z。这是在网站的可视层次结构中使用的有用模型。 它符合许多基本的网站设计要求:号召性用语,视觉层次结构和品牌。 对于那些简单性是首要任务,号召性用语是页面主要目的的时代,这确实非常重要。 它为简单的网站带来了秩序感。 但是,复杂的内容在Z模式下不能很好地工作,而F模式可能是更好的选择。
- GO 欣赏案例
- 查看经典案例