立即注册 登录
 找回密码
 立即注册
搜索

版式设计中的"网格"!有条有理

2018-8-15 09:57| 发布者: cocoo| 查看: 596| 评论: 0|原作者: 文/武小红

摘要: 网格是现代版式设计中最重要的基础构成之一,它能将版面中的点、线、面构成元素协调一致地编排,并具有秩序感、比例感和整体感。
 

画面布局是版式设计中让很多设计师“头疼”的问题,如何在有限的空间中让文字、图片、图像、符号等大量设计元素出现在合适的位置,并能产生合理的层级关系,是设计师需要解决的难题,而通过划分网格可以高效的对这些元素进行合理放置。


网格是现代版式设计中最重要的基础构成之一,它能将版面中的点、线、面构成元素协调一致地编排,并具有秩序感、比例感和整体感。在版式结构的搭建过程中,通过对版面划分网格线条后,并将元素整齐排列后隐藏“网格线”,在视觉中会产生某种相互关联,使阅读更加具有逻辑性和层次感。


网格的种类 

①对称式网格系统设计。这种设计一般采用左右两页、两栏或者三栏等,页面、页码的位置对称,左右两页可以互为镜像,从而表现出一种严谨、分明、理性的特点。

②不对称式网格系统设计。这种设计一般用于较为轻松内容的表现,例如散文、诗歌、女性、体育等,这也就决定了不同版式的平衡性。


③模块网格系统设计。这种设计最早使用于报社编辑,可以将多个模块快速的拼装在一起,从而提升了排版速度。

④复合网格系统设计。这种设计方式可以说是以上三种网格的综合使用,从而得到极具现代气息的设计。


网格规律

网格可将版面的构成元素如点、线、面协调一致地编排在版面上。网格在实际版式设计中具有比例感、统一感和准确感强烈等版面艺术特点。


①根据主题要求确定网格风格。由于网格的数量以及设计的主题与媒介的特点有着极为密切的关系,为此一般在娱乐性的主题上使用活跃的版面设计,例如复合网格系统设计;而在严肃的主题上使用理性的版面设计,例如对称式网格系统设计。


②根据版面的宽幅确定网格的数量。关于通栏的大小以及变化在西方已经有较为严格的规定,例如在每栏中的字母不超过50个,日本是28个字,而我国至今还没有明确定规定,设计中一般依靠设计师的感觉决定。


③在保持页面风格一致的前提下还要有灵活多变的特点。网格系统的设计能够提供方便快捷地形成系列版面的基础,在保持页面风格一致的前提下还要有灵活多变的特点,以保证信息的传递更富有层次与条理。


网格构建

①确定页面版心的尺寸比例。在版面的成品尺寸确定之后,作为设计师必须对页面容纳的图形及文字的多少进行大致规划以确定版心面积。这里不仅涉及到宽度与高度,同时还包括字体的字号及多少以及页面数量等都是需要考虑到的问题,如采用黄金分割作为基础的页边空白距离可设定为3:5:8。在这一问题决定之后就可以进一步的对标题以及所要安排的文字内容进行各种组合尝试,从而确定最优的方式。 推荐阅读:版式设计需要对比与调和!你注意了吗?


②网格数量。由于一个空间或者平面可以被分割成的网格数量是没有上限的,为此针对具体的作品要通过仔细地研究以获得与作品主题风格相适应的网格形式。例如常用的2、3、4、6栏等均匀排列的方式,极易产生严谨、整齐划一的视觉感受。而将这些简单的分栏在局部进一步细分,例如将两栏变为4栏、8栏,3栏变为6栏或者9栏等,逐步细化的分栏变化,大大提高了版面的内容承载量,为编排内容容量及多样性奠定了坚实的基础。


根据设计经验,眼睛从左到右的标准阅读距离是30~35cm,为此处于这一范围的文字是最适合阅读的。这为栏宽的设置提供了一定的依据。栏宽对于文字的排列有较大影响,一般是栏宽越窄所使用的字体越小。如果设计中在较窄的栏宽中使用较大的字体就会造成同一行的文字数目过少,从而导致阅读过程中频繁换行,加速眼疲劳。


标题位置设计。在进行版式设计中,采用网格系统设计必须要确定好文字与图片的网格分配。确定好之后,就要对标题的位置进行规划,标题位置设计要根据栏目的大小、宽度等要素,要具有直观性。标题直观地体现出文章的中心思想,因此也是设计的重点。在网格设计中,要对标题的大小、横竖变化及字体、字号变化进行详细设计,根据文章轻重,对每篇文章的标题大小适当变化。


④文字行距设计。字行之间的距离称之为行距,是从本行字的基线到上一行字基线之间的距离。行距已经将文字的高度包含在内。在设计的时候要考虑行距的大小,根据对阅读的速度及版面的清爽度等因素对行距进行设计。要求行距控制不能过大,不能对版面造成浪费,段落之间要清晰,以适应读者阅读的间歇性。一般来讲120%~180%的行距比较适合阅读。


⑤图片编排设计。进行图片编排的时候,要与图片的说明文字相协调。图片可以退底,可以出血,也可以是方块图。以方块图为例,一般图片说明放在图的左右侧或上下侧,大多数情况下需要与图片的边线对齐。图片说明的编排不能一行与边线对齐,下一行又缩进两个字符,这样就会显得杂乱无章。


网格形式的多样化是网格系统的属性之一。除了文字和图片在固定栏宽中的穿插外,还可以为版面内容提供复杂多变的结构,如注释、图标、小幅说明性照片、装饰等相关元素。例如题图,根据文章内容,可以对标题进行设计,由多种图案共同构成题图,尤其是采用大场面照片作为标题背景,可以形成强烈的视觉效果。再如页眉、页码等装饰性元素的设计运用,可以提高版面的整体性。

网格设计的一个主要优点是它强加给缺少经验的设计师以规矩和限制,当他划分所要处理的空间时,会得到一个紧密连贯、结构严谨的方案。此外,当我们把技巧、感觉和网格这三者融合在一起进行设计时,就会出现精美大方、令人印象深刻的页面,在整体设计上给人一种清新感和连续感,有一种与众不同的统一效果。


网格的运用

①画册。网格系统编排,理性秩序,操作性强是其优势,但易造成视觉上的呆板感觉。上面画册中的版式设计整齐划一,只需井然,不难想象这个画册风格十分统一,但是细细品味,还是觉得有些呆板枯燥。由于严格按照预先规划好的网格构成进行排版,版面的风格虽然统一,但是令人乏味。 推荐阅读:探究!自由版式设计的趣味性


②杂志。突出美感是杂志版面设计重要原则,版式设计要做到美观大方,匠心独具,讲究艺术,满足读者的审美心理要求,同时营造轻松愉快的阅读心境是设计师的使命。但是,网格在杂志的版式设计中是隐形存在的,打破网格设计的手段也很盛行。 

③网页。网格设计在网页设计中运用的十分普遍,并且网格系统在设计流程中非常重要。和“排版”一起,它们决定了信息的“视觉组织形式”。

注:本文为 设计智造编辑整理,转载请注明 来源:设计智造 http://cocoo.top

本文版权归原作者所有,如有侵权请来信告知(cocootop@163.com),可合作,我们愿意支付稿费。

相关阅读

  • 学配色!紫色系色彩搭配攻略
  • 学配色!红色系色彩搭配攻略
  • 如何巧妙的运用色彩?你造吗?!
  • 学配色!色彩应该如何搭配?
  • 合理运用色彩!提升设计作品吸引力
关闭

站长推荐上一条 /1 下一条

免责声明|小黑屋|网站备案信息代码:冀ICP备16009769号|COCOO.TOP 设计智造

GMT+8, 2020-8-15 01:05 , Processed in 0.139456 second(s), 18 queries .

Powered by CO2! X3.2

© 998866 Comsenz Inc.

返回顶部