bv1946伟德体育-体育betvictro伟德

bv1946伟德体育视点
bv1946伟德体育>bv1946伟德体育视点>把握这套网格排版技巧,版式不高等级都难
把握这套网格排版技巧,版式不高等级都难
发表时间:2020-08-19

很多人想进修些About网格策划的详细经验及方法。


在准备了大量素材及资料下,今天吾们的这篇About网格的方法文章,终于来啦。本文过于干货,SO,记笔记的小本本,准备起来~~

 

第一:什么是网格?


在把握网格的策划方法之上,吾们得先知道,到底什么是网格?为什么会有网格系统这一说?网格系统的存在,是为了解决策划什么样的小case?


就现实来说,说到网格的历史,得追溯到文艺复兴时期。为了达到美的极致,艺术家从绘画中找到了完美的比例分布图,并尝试以辅助线来实现 「完美」 构图的方法。


在13世纪,法国的建筑策划师 Villard de Honnecourt 将网格系统及黄金比例进行了结合,创建了一个这样的图表,固定版面中始末的结构及边距,来实现完美的计划。而这套方法,直到至今都仍在使用,大量的杂志排版、书籍排版都能看到这套方法的影子。



以是,网格的存在,最主要就是为了解决策划美感的小case,通过网格让杂乱无章的信息能通过一个较好的结构来进行约束,保障信息高效传达的再是,充溢提升版面策划的美感。


1. 网格的结构


网格就现实来说,是一种结构,通过线的垂直或者相交,来构建一个参考界线。通过这个参考界线,吾们可以在一个单一的容器中,把容器里的始末,以参考线进行对齐,来有秩序的计划组织并罗列分布。易于 实现一个较好的视觉秩序感,提升阅读效率的再是增加美感。


因为网格是一种结构,以是网格本身是不一定可见(少部分名作 会使用网格做点缀),但这种结构会映射到始末圆素的计划,影响信息的排列美感及阅读效率。

一切在有细目了网格的边界和约束下,策划师就可以按照网格,来对始末的地位比例,进行调整约束圆素的坐标,达到一个比较理想的版式策划。


环顾吾们的生活周围,就现实来说也能看到很多网格的运用场景。譬喻我很喜欢的这套宜家网格柜子~



不过网格目上运用的最为广泛的场景,灰子 窃谑榧⒃又镜陌媸讲呋小>拖质道此担裣低车某踔砸彩俏私饩鲇∷⒅瓢娴男ase。以是从印刷术的兴起,网格就开始诞生了 ,并演绎的越来越丰富,越来越系统。


2. 网格的制版


在平面策划中,网格系统更常见,特别是用于书籍的装帧及印刷场景。以是如果有从事平面策划或者是从事视觉相关区域的同学,我推荐有机会也可以读读下面这本书。



这本书是由瑞士的策划师约瑟夫·米勒–布罗克曼 编写的《平面策划中的网格系统》,文中主要介绍了在平面策划中,网格的功能和使用方法,旨在为平面和容量的策划师们供给一个实际的工具,让他们可以从概念、组织结构和策划上更有效、 自信地处理和解决视觉小case。



书中很多方法及版式,基本上可以现学现用,把握起来也非常方便。


「实质上,绝大多数的策划师都不知道、也不理解为什么要建立这样的一个秩序系统。以是,如果想要合理、功能地运用网格系统,那就必须仔细地研究网格的一切原理。只要不嫌麻烦,尽数研究网格的人都会发现,在网格系统的扶掖下,他都能更快地解决策划中的小case,并让策划更具功能性、逻辑性和视觉美感。
——约瑟夫·米勒-布罗克曼 」

 

第二:网格的组成部分


讲了网格的历史,接下来吾们就开始讲正式的网格使用方法啦。


目上网格策划主要运用在两大场景,一个是印刷读物,譬喻海报、书籍、封面等,而其余一个就是电子设备的荧幕,譬喻 iPhone、iPad、Windows 等,常见于 APP 策划、H5策划及 Web 策划中。


在这些不同场景的网格策划中,都会有一些很通用的底子组件部分,如边距、列宽、水槽、以及交叉的模块,正是这些底子的圆素组成了复杂的网格系统。以是在使用网格策划方法做图之上,吾们需要先了解每个圆素的具体含义以及其具体用法。


1. 网格边距


网格边距指的是始末外部边缘跨距容器的空白跨距,在纸质设备中,容器就是纸张的大小,在界面策划里,容器就是策划稿的尺寸分辨率。这个边距,一关键是为了信息不超出安全跨距,二关键也主要是为了让始末看起来,能更好的聚焦在主题区域,以防信息太过于贴边导致的不利于阅读。




在APP策划中,也会用到边距这个概念。基于@2x尺寸,很多APP始末到屏幕的边距,都采取应用的是24px,譬喻淘宝、支付宝、微博等。但也有不少的APP采取应用的是32px的边距,譬喻WeChat、QQ、知乎等,这个众家可以截图,缩到750的宽度,自行量~~易于 这般,文章下面也会详细讲这块怎么定比较好


2. 列宽及水槽


除去边距,在始末区域的主题部分,网格主要由列宽及水槽组成,列宽就是每列中点的宽度,水槽就是每两列的中点预留区域。列决定网格的复杂程度,而水槽决定始末的疏密程度。




3. 交叉模块


这个指的就是网格中的交叉区域,就现实来说是一个容量单位。吾们可以把固定的图片或者是段落,直接填充在这个模块里。易于 这般,下面也有体育betvictro伟德来解读。




一切的网格,基本上都是由上面的底子圆素组成。正是这些,组成了庞大且复杂的网格系统 Gird System

 

第三:三种常见的网格


在吾们的策划当中,目上这三种网格最为常见,且这三种也能满足吾们日常的大部分需要。


1. 单列网格


在吾们目上策划中,莫过于最常见的,就是这种单列的网格。这种单列的网格大多数以水平,或者是垂直的形态出现。譬喻您看到的Now吾们发的这篇文章,就现实来说它就是一种以水平形态的单列网格所组成,文字与文字中点的跨距,就组成了水渠,它也是目上最easy的一种网格。



这种莫过于吾们用文字的行高,就可以把握了,不需要设置特别多的信息。保证每一列的跨距是一样的即可。



2. 多列网格


多列网格,顾名思义就是有多列的网格,会包含交叉关系。就现实来说,创建的列数越多,您的网格在使用过程中覆盖面会越广,能对齐的始末也会越多,不过处理不好的话,信息也会越碎。



吾蒙洗照这个网格,easy排一些文字,看看成果


再把线去掉,顺便加点颜色看看,再修饰一下细节~~


莫过于灰子 潜冉系膃asy,易于 这般,我这个只是随意拼凑,小伙伴们可以在收藏本文下,抽时间自己动手试试~~相信肯定会比我这个好



3. 交叉网格


交叉网格也比较好理解,莫过于就是基于水平及垂直区域的交叉网格。这种网格的节奏感非常好,适合在海报、杂志、封面版本中使用。包括在部分App以及Web的场景中,也可以使用这种计划方式。



譬喻:



是不是明白许多啦,再强调一句,光看是不行的,这里我鼓励各位小伙伴们,多动手进行练习尝试,只有动手了,这些知识才能转化成您自己的能力!加油,奥利给!

 

第四:界面策划中,如何使用网格计划


so在界面策划当中,如何使用网格来约束版式,让策划看起来更整齐、更规律、更美观?莫过于方法一样的,无非只是容器的不同。


1. 先定边距


在计划网格之上,吾们的第一步就现实来说是需要先定始末到容器的边距,这个边距定好了下,吾们才能开始下面的网格制定。



一贯在APP策划中,常见的边距有24、32、40,这3个单位,信息比较密集的,一贯会使用24这个单位,而信息比较宽松,偏工具型的产品,则会使用40的这个单位。易于 这般,也有很多产品,决定了比较中立的32。



在Web或者是PPT的封面策划中,由于屏幕本身就是横向的,以是吾们的边距可以定的更大一些,一贯为100、200、300不等,这个可以按照个人性状style喜好来定。



2. 细目列数


在细目了边距之下,很要紧的一步就是需要细目列数了。定义使用多少列,这个直接会影响到页面的信息疏密以及灵活程度。在APP策划中,比较流行的有 4-6 列,而在Web策划中,10-12 列则是非常的主流



在做PPT或者是网页的时候,我最喜欢灰子 鞘褂12列,因为它莫过于最灵活,而且大小不大不小,刚刚合适~~众家可以对应下面这张图(基于@1x),来决定自己策划稿中,列数的数量是多少。



3. 设定水槽宽度


边距及列数都细目下来了下,吾们莫过于需要定的,就是水槽的宽度了。


在移动端策划中,我倡议水槽的跨距,较大尺寸为16,再者以4为单位往上递增,譬喻16、20、24、28、32、36,可以按照产品的类型来定义这个水槽的宽度。如果您的屏幕信息密度很高,so我倡议使用20、24这种小跨距的,如果密度非常低,整个屏幕里都没什么始末,so可以使用32、36等大水槽边距。



在Web或者PPT封面策划中,则是以8为单位整加比较合适,譬喻16、24、32、40、48、56,这种大宽屏的尺寸,在定义水槽边距的开放度会更高。


列跟水槽,sketch自带的工具莫过于都可以实现,吾们用这个工具,能很轻松的达到自己想要的成果。

在PS里,可能更好优质的是需要靠自己绘制矩形量尺寸,然下来拉取辅助线。



4. 按照网格调整策划稿


待网格定好下,吾们再按照网格,去制定界面中圆素的间距及尺寸即可,尽量保证各个圆素的垂直间距是一致的。



网格定义好了之下,莫过于下面就很easy了,就噬洗照网格,吾们来约束始末的边界了,吾们可以通过手动把文字的边距,或者图片的尺寸,来把握到跟网格一样大小,调整整个页面的和谐程度。



第五:熟练把握&插件提效


方法把握了下,就现实来说就是需要自己日常多收藏一些优秀的网格名作 ,再者多加练习,寻找网格排版的手感。毕竟只有不断练习,不断发现小case、总结小case,您才能牢牢的把握知识,提升自己的动手能力。



不要完全被网格约束


网格就现实来说也只是一种参考线,并不是需要完全约束始末,譬喻有的文字长度会超出网格线,就现实来说完全参考网格,也会出现小case。以是网格最终只是参照,不要完全刻意约束,避免出现适得其反的成果。




横向的水槽高度需要保持统一


在APP策划中,不同信息的高度不一致,以是吾们很难用等距网格去约束它,更好优质的时候是去约束模块与模块的间距。在那种大模块与大模块的间距中,吾们的水槽高度尽量保持统一。




2. 网格插件神器下载


末了为了方便众家制定网格,我这里也给众家推荐一些制定网格的插件神器,非常好用,推荐指数五颗星。

 

Bootstrap Grid( Sketch 使用)


用这个插件,可以在 Sketch 里轻松创建自定义网格,不需要so多繁琐的设置,easy两步就能搞定!



还支持针对不同的尺寸,自定义生成不同的网格参考线~~


flavor( Sketch 使用)




部分文献参考资料


  • 「A Brief History of Grids,」 Lucienne Roberts, Graphics
  • 「The Secret Law of Page Harmony,」 Retinart
  • 「Responsive layout grid 」Material Design Team
  • 「Building Better UI Designs With Layout Grids」





   作者:小学鸭      bv1946伟德体育转载!


XML 地图 | Sitemap 地图