web设计规范02-删格布局2

今天为大家分享的是网页中的栅格布局,基于Antdesign基础上并结合自己网页实践经验,本篇文章从「栅格 的概念」、「栅格的应用」、「栅格搭建方法」三个方面带大多家了解网页中的删格系统。

一、栅格系统简述

栅格最早来源于平面设计中的网格系统,以方格为设计基础,将一个印刷版面分成上千个小格。1692年新登 基的法国国王路易十四感到法国的印刷水平不尽人意,因此命令成了立一个管理印刷的皇家特别委员会。他们的首 要任务是设计出科学的、合理的、重视功能性的新字体。委员会由数学家尼古拉斯加宗担任领导,他们以罗马体 为基础,采用方格为设计依据,每个字体方格分为64个基本本方格单位,每个方格单位再分成36个小格,这样, 一个印刷版面就有2304个小格组成,在这个严谨的几何网格网络中设计字体的形状,版面的编排,试验传达功 能的效能,这是世界上最早对字体和版面进行科学实验的活活动,也是栅格系统最早的雏形。再后来在平面设计 中,,慢慢演变成运用固定的格子设计版面的平面设计风格「网格系统」

互联网发展之后,Ul界面设计将这一概念借用过来,简单的理解栅格就是一种有规则的参考线。

UI中的栅格

我们将网页端的栅格和移动端的栅格都称为UI中的栅格,定更为以规则的网格陈列来指导规范界面中的版面布局 以及信息分布,通俗一点讲,就是根据一定逻辑,在界面中中绘制出一个一个的小格子,然后将内容摆在这一个一 个小格子里组合起来的一种设计形式。

删格系统的优势

对于用户:内容布局更加规范,减少认知成本

设计更有秩序和节奏感,页面信息更加清晰,从而提高用户户的阅读和浏览效率,提供更好的用户体验。

对于设计师:统一规范、提高效率

帮助设计师统一规范、强化视觉逻辑、生成组件复用、提高工作效率、节约时间。

对于开发:提高设计还原度,节约时间成本

栅格系统提高了网页的规范性,有利于开发人员对组件和模块的为复用,提高设计还原度,进一步提升效率。

二、删格系统的基本构成元素

栅格系统的三个基本元素主要有:列、水槽、边距。此外还有最小单位、删格总宽度、列数三个计算参数

1.最小单位:栅格的基础单位

栅格内容元素和布局规则都是基于它的整数倍递增的。如最小单单位是8px,水槽的宽度可设为8n;最小单位是10 px,水槽的宽度可设为10n。8px和10px都是删格布局常用常用的基础单位,个人比较倾向8px,在12删格 布局排版时,画面更加紧凑。

2.删格列数

目前有两种比较主流的等分方式:12删格与24删格。列的数量即栅格数量,如12栅格就有12列。列数越多,排 版就越精细,通过控制列数就可以控制版面的留白和呼吸感。

3.删格容器总宽度：页面中自适应内容部分容器宽度,而非屏幕事宽度。

比如在12删格系统下,总宽度=列宽*12(列数)+水槽宽)度*11(水槽数量)+边距*2

4.水槽宽度

水槽也称为间距,水槽是相邻两个列宽之间的间隔,用来分割内容,水槽的值越大,页面中留白的面积越多,视觉效 果越松散;反之,页面越紧凑。一般水槽宽度设为固定值,是最最小单位的两倍,比如在8px最小单位基础上,水 槽宽度建议16px

5.容器删格边距

B端网页设计:一般情况下,删格容器内边距24px

C端网页设计:由于容器宽度一般为安全宽度,属于固定删格布局,在没有特殊要求情况下,默认容器内边距=0

6.列宽

列宽一般最后确认,主要通过以上参数计算得出,在实际应用中中软件会根据填写的容器宽度、边距、水槽宽度、 列数的参数值自动计算。

三、删格系统搭建与应用

B端网页设计-删格系统搭建

上篇文章《web规范01-画布》说到B端画布默认宽度为1440px。 B端网页设计左侧导航为固定宽度,在布局时不做响应式布局,左侧导航栏常用宽度为256px、208px。

左侧导航256px删格系统

剩余容器宽度=1440 - 256 = 1184px,删格布局内容区域宽度=1184 - 24 x 2 =1136px。

24删格布局

12删格布局

左侧导航208px删格系统

剩余容器宽度=1440-208=1232px,删格布局内容区域宽度=1232 - 24 x 2 = 1184px。

24删格布局

12删格布局

C端网页设计-删格系统搭建

C端网页设计内容宽度往往与安全宽度一致,位置相对界面居中。为了方便前后端设计组件复用,建议安全宽度 与B端网页设计中内容区域宽度保持一致,为1136px或1184px;删格容器两侧内边距默认为0

1136px删格系统

删格内容宽度=网页安全宽度=1136-0=1136px

1184px删格系统

删格内容宽度=网页安全宽度=1184-0=1184px

四、其他宽度下的删格布局

在此列举一些常见网页宽度的12删格布局、24删格布局,供大家参考，网页宽度在没有特殊要求的情况下,建议首选1136px或1184px,方便组件复用;另外水槽宽度首选16 px。

12删格布局参考

规定:网页宽度为W、栅格宽度为X、水槽宽度为Y,则:W=12 X+11Y

1. W=1000px X=65px Y=20px;

2. W=1016px X=70px Y=16px;

3. W=1060px X=70px Y=20px;

4. W=1076px X=75px Y=16px;

5. W=1100px X=77px Y=16px;

6. W=1120px X=75px Y=20px;

*7. W=1136px X=80px Y=16px;

8. W=1180px X=80px Y=20px;

*9. W=1184px X=84px Y=16px;

10. W=1196px X=85рx Y=16px;

24删格布局参考

规定:网页宽度:W、栅格宽度:X、水槽宽度为Y，则:W=24X+23Y

1. W=1040px X=28px Y=16px;

2. W=1088px X=30px Y=16px;

*3. W=1136px X=32px Y=16px;

*4. W=1184px X=34px Y=16px;

五、删格布局在sketch中的搭建方法

在sketch中选中需要搭建删格系统的画板,视图菜单-画布-布局设置置

在布局设置面板中依次填写对应的参数即可

总宽:输入删格容器宽度,不是画布宽度;

偏置:选择居中或输入删格容器距离画布左侧的位置;

列数:输入12或24;

间距宽度:间距宽度即水槽宽度16;

列宽:删格宽度,最后一个参数不需要输入,会根据以上参数自动计算;

视觉:选择填充网格,颜色设置为半透明色;

以上参数设置完成后确认即可。

最后

写在最后，设计规范可以让我们在做设计时有逻辑依据，工作中组件方便调用、提升效率，还可以作为走查依据。web设计规范系列章节结合大厂设计规范（antdesign、Tdesign等）以及实际工作经验整理的心得笔记。在此分享给大家，希望能给您带来帮助。写的不好的地方地方还请留言讨论。

我们下一篇见《web设计规范03-B端色彩体系》

查看更多文章，关注微信公众号：设计便利签