脑课堂编程教育

网页版式设计如何增强空间层次感

开发无忧 3年前
1886 0 0
脑课堂编程培训

  以图片、文字、色彩为基本元素的版式设计,是平面设计的重要基础。要增强版式设计的空间层次感,需要特别注意各元素之间比例关系、位置关系、疏密关系、黑白灰关系及动静关系的协调和有机结合。

  版式设计作为视觉传达的重要手段,有规则无定式地配置点、线、面视觉元素于在二维的载体上,版式设计应在遵循鲜明主题与导读、形式符合主题思想内容、技术与艺术统一的基本原则上,对图片、文字色彩等的元素进行理性安排。

  1.版式的空间层次感

  版式的设计根据不同的主题,按照一定的规则进行不同方式的组合,表现出多姿多彩的空间关系,通过元素在二维空间上建立的近、中远的视觉效果,借助比例、动静、前后等对比关系表现出来, 从而超越二维空间,产生三维空间关系的立体层次感,使主题更突出。

file

  2.比例关系的空间层次

  版式设计元素按照不同比例关系呈现出来,可以 呈现出近大远小的效果,通过控制版面中元素面积大小及比例关系的大小,调整不同元素的位置,就可以达到呈现近、远、中的空间层次感觉的目的。

file

  在具体的编排应用中,按照版面中文字、图片的主次关系来统筹安排各个元素在版面中的位置。如果编排标题文字或主题形象,则需要将所需元素适当放大,并放置于版面中的鲜明位置,与其它次要文字或形象的大小比例区分开来,强调了近、中、远的空间层次关系,使版面更明快,从而唤起大众的注意力。

  3.位置关系的空间层次

  版式设计元素位置关系的空间层次,简单说来就 是不同元素前后叠压的位置关系所形成的空间层次感。 在排版过程中,将文字和图片叠压排列,通过元素的上、下、左、右位置的部分重叠,从而建立起三维关系,产生出强烈的节奏感及空间层次感。

file

  版式设计的位置关系所呈现的空间层次,同样需要对版面中的元素进行主次区分。先将主要文字及主要图形放置于版面中的最佳视域,占领视觉的中心位置;次要文字及次要图片则应避开视觉焦点,排列于版面的其它位置;再对版面中不同区域中的元素,做前后左右叠压关系的调整。

  4.疏密关系的空间层次

  疏密关系所形成的空间层次感,指的是版由中的 元素根据主次之分,按照一定的次序进行疏密、轻重、缓急的排列,以此达到烘托主要文字或图片信息,削弱次要文字及形象的目的。

file

  版面中元素的疏密关系需做到有所对比,即主要文字及形象做到相对密集,次要文字及图片相对稀疏;主要形象排列疏松,次要文字及形象就应相对密集。按此规律排列所产生的空间层次不仅富有弹性,也给大众以紧张感或舒适感。

  5.黑白灰关系的空间层次

  黑白灰三色调与其它色彩一样,可向人们传达不同的情感。黑色与白色对比极其突兀,产生出的视觉效果也最为强烈和醒目。视觉冲击力越大,作用于人心理产生的远距离效果越明显。灰是一切中间色的灰色调,可以协调画面中黑、白色调的强对比关系,使得整个画面更加和谐、统一。

  有彩色或无彩色的版式设计中也均有黑、白、灰关系。 点、线、面是版式设计的基本元素及主要视觉语言形式,而版式设计中所有元素,在版面中的配置关系也均可看成黑、白、灰关系: 黑、白、灰的点,黑、白、灰的线,黑、白、灰的面。

file

  ①版面中黑、白、灰不同的点元素, 版面中黑、白、灰不同的点元素,按其主次,根据大小、位置、形态的不同,排列出来的效果也不相同。

  ②版面中有明确形态的实线及虚线,包括无明确形态的视觉流动线都具备分割和引导视觉,约束及强调的作用。版面中的黑、白、灰的线元素,同样按其主次关系进行排列,传达出的画面空间效果也会不同。

  ③版面中面元素的不同,即可形成黑、白、灰三色调的面。 而不同色调的面又会在版面中起到平衡、烘托深化主题、丰富空间层次的作用。

  整个版面既有大的黑白灰关系,又有小的黑白灰的关系。这些密不透风的黑,疏可走马的白,疏密不同形成不同的灰色,所产生的黑白灰关系,直接导致整个版式设计的色调,或对比明快或对比柔和的视觉效果及近、中、远的空间层次。

  6.动静关系产生的空间层次

  版式设计中元素的动与静并非真正意义上的动静。

  ①动指版面中点线面元素,按照一定的规律排列,在画面形成韵律及节奏感。看似在动,实则只是画面元素所呈现的视觉错觉。

  ②动指画面中具有动态的图像形态。

file

  版面中稳定的静使版面更加含蓄和冷静。动和静的关系,是在相互烘托和对比中产生的,这种动静对比关系使版面充满活力,产生出空间层次,获得更高注目度。

  版面设计是在特定的平面进行的,面积受到限制,但却要在其上将不同的图形、文字和色彩等元素有机地组合起来,还要呈现出或动或静、 或近或远、或人或小、或长或短的视觉和感官效果,将之打造成为一幅充满活力和生机的“画卷”,这是版式设计的目标所在。

收藏

本文标题:网页版式设计如何增强空间层次感

本文链接:https://naoketang.com/p/360qxkon5k2j

评论区

推荐课程