返回
南京学码思教育
置顶
该校与厚学网暂未合作,平台不保证课程的真实有效性,如有侵权等争议,请及时与厚学网联系处理
招生热线:400-656-3385

学校地址:南京市秦淮区科巷10号三楼301室

如何在网页设计中使用可视化层次结构?

345 2018-06-29 10:00:00

学习笔记

视觉层次对良好的网页设计至关重要。这是使的网站有效实现目标的关键原则之一。视觉层级背后有很多理论。重要的是经过大量的研究和努力才能理解它的工作原理和设计规则。下面苏州学码思小编就为大家详细介绍一下。

  

  设计是一种交流形式

  

  设计的核心是一种视觉交流。这是通过视觉媒介向他人传达想法。所有形式的设计都是如此。信息产业的设计尤其如此。

  

  由于人们实际上是视觉思维者,因此大量的信息块不能很好地交流。我们不会简单地处理数据。人们不会简单地看事物。相反,人类通过“视觉关系”组织他们所看到的东西。

  

  视觉层级的兴起

  

  为什么我们从关系的角度来看,这本身就是一个研究。人类学家争辩说,这是狩猎采集历史的残余,帮助我们的古代祖先生存下来。

  

  一个实用的,不那么学术化的看待它的方式是,它只是我们的大脑理解信息的方式。我们将类似的元素组合在一起,并将它们组织成有意义的模式,我们可以使用它们。

  

  无论您认为人类大脑使用的视觉等级是如何产生的,我们如何组织信息并利用它是传达信息的一种非常有效的方式。

  

  视觉层次的工具

  

  现在您了解视觉层次结构是传达信息的有用工具,您如何将其创建为网页设计?

  

  使用它的工具非常简单,易于学习。你需要做的就是弄清楚如何使用它们。

  

  尺寸

  

  较大的元素可以吸引多的关注。就视觉层次而言,观众的眼睛自然会被吸引到更大的物体上。

  

  这是您可以用于视觉组织的强大的工具之一。将大小与重要性相关联。你大的元素通常应该是你重要的,而小的元素通常是不重要的。

  

  颜色

  

  作为设计师,你必须懂得如何在网页设计中使用可视化层次结构

  

  色彩既是一种组织工具,也是为您的网页设计添加个性的一种方式。大胆而鲜明的对比色自然引起观众注意和关注。

  

  这适用于按钮和超链接。作为增加个性的工具,颜色可以以更复杂的方式使用。

  

  有趣的,明亮的色彩可以使一个页面激动人心,而声称颜色创造舒缓的感觉。颜色非常重要。它可以传达一个品牌(即百事可乐蓝,麦当劳黄)或可以用作象征(即激情红色)。您甚至可以应用颜色作为在视觉层次结构中对信息进行分类的方式。

  

  字体

  

  当想要创建视觉层次结构时,为您的设计选择适当的字体至关重要。这不仅仅是字体本身很重要,而且你如何使用它。您使用的重量和样式与您放置网站的区域一样重要。

  

  要组织什么是重要的,请尝试使用各种类型的大小和权重。斜体在某些情况下也可以达到其目的。

  

  您可以在网站上创建具有各种尺寸,重量和间距的文字的字体层次结构。即使你在你的网站上只使用一种字体。

  

  通过使用它的大小和重量的变化,你不仅吸引了更多重要元素的注意力,而且你正在创建一个整体构图,这对访问者来说很容易阅读和理解。

  

  白色空间

  

  在所有这些视觉层次的谨慎使用中,确保有空白。你需要给你的内容空间呼吸。

  

  负空间是视觉设计的重要组成部分,定义它与空间的积极使用一样。

  

  白色空间通常被简单地定义为“页面上的东西之间的空间”,尽管这个额外的空间并不总是白色的,这导致更多的个人将其称为“负面空间”。

  

  空白空间本质上使您可以决定您正在构建的网站的哪些特定功能应该突出其他功能。由于这种欢迎类型的布局,访问者将更有可能在网站上停留更长时间。

  

  Whitespace提供了一个休息的眼睛,也突出了重要的元素。太多的拥挤和混乱可能导致观众离开,因为他们无法理解真正重要的东西。

  

  人眼和扫描图案

  

  人眼以可预测的方式工作。它们被自动吸引到某些兴趣点。其中一些确实取决于个人,但大多数人都以特定的可预测的趋势来看待他们对包括网站在内的所有事物的看法。

  

  F-模式

  

  这是大多数人用于博客或维基等网站的扫描模式。

  

  读者首先扫描页面左侧的垂直线,在段落的前几个句子中查找关键字或其他兴趣点。

  

  一旦读者发现了一些有趣的事情,他或她就开始以水平线正常阅读文本。整体模式类似于字母F(或E)。

  

  Z-模式

  

  此扫描图案用于未位于文本中心的页面上。读者首先扫描页面顶部的水平线。这通常是因为菜单栏,但它也是一个从左到右阅读的习惯。

  

  一旦眼睛到达水平线的末端,它就会向下移动到左边,从另一个左边到右边的阅读习惯,然后重新开始。该图案类似于字母Z.

  

  这是一个有用的模式,可以充分利用您网站的视觉层次结构。它解决了许多基本的网站设计要求:号召性用语,视觉层次结构和品牌。

  

  当简单性成为主要优先事项并且号召性用语是该页面的主要目的时,这真的非常棒。它给简单的网站带来了秩序感。然而,复杂的内容在Z模式下效果不佳,而F模式可能是更好的选择。

  

  这些是一些佳实践:

  

  分开你的背景,使观众的视线保持在视觉模式框架内。

  

  标志在左上角看起来不错,立即可见。

  

  Z形图案中丰富多彩的辅助呼叫可以成为用户的有用指南。

  

  页面中央的特色图片滑块帮助分离Z图案视觉路径的顶部和底部。

  

  将图标添加到页面左侧以引导用户参见号召性用语。

  

  视觉模式应以您的主要号召行动结束。

  

  了解视觉模式和人眼的自然运动可以帮助您安排自己的网站设计以获得佳优势。当你知道人们会寻找什么时,你可以安排信息,以便好地引起他们的注意,并引导他们到你想要的地方。

  

  结论

  

  视觉层次结构是网页设计的重要组成部分。了解它的工作原理将使您可以创建尽可能有效的网站。

  

它提供了组织您的内容的指导方针。看看你见过的一些的网站设计,看看他们如何使用它来有效地传达他们的信息。

 

自学平面设计难吗?自学平面设计方法步骤about/faq/3495.html


文中图片素材来源网络,如有侵权请联系删除
来源:南京学码思教育
热门课程 全部课程

热门动态

申请免费试听

只要一个电话

我们为您免费回电

立即申请