如何制定栅格系统

乐多 问答 2022-06-05 19:05:23 阅读(...)

制定栅格系统首先选择画布尺寸;确定栅格区域,将页面按照功能模块划分为全局控制区、内容区、背景区、弹层区;网格设置,现在主流网格单元的尺寸为8PX;栅格计算,常见栅格有12栅格和24栅格,栅格分的数量越多承载内容结构越复杂,展示信息更详细。

栅格系统 是运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一。因为规律高效的适配的特性,栅格系统被逐渐应用到网页设计中。那如何制定栅格系统呢?

grid system 格栅系统

什么是栅格系统

网页栅格系统是从平面栅格系统中发展而来,网页栅格以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。合理的栅格系统可以通过调整布局网格以满足产品和各种设备尺寸的需求。

如何制定栅格系统

1. 选择画布尺寸

目前 PC 端主流的设备尺寸是 1920X1080、1366X768、1440X900、1280X720、1024X768,其中占比最大的设备尺寸为 1920X1080。

如果将较大的屏幕尺寸定义为基础的设计尺寸,虽然可以在设计稿中呈现更多的内容,但向较小屏幕尺寸适配时会出现显示不完整的情况。因此我们建议以较小的屏幕尺寸为设计尺寸,同时向大尺寸进行适配。

对于 SaaS 类产品而言,其用户设备比较广泛,可以选择 Ant Design 推荐的设计尺寸 1440X900(近些年来随着屏幕尺寸的增加,Ant Design 也将设计尺寸改为 1440X900,同时主字号调整为 14PX )。

2. 确定栅格区域

将页面按照功能模块划分为全局控制区、内容区、背景区、弹层区。通常我们对内容区域进行栅格化。Web 端的布局通常包括上下布局、左右布局、T 字形布局。建议按照业务场景的不同灵活地选择布局形式。

3. 网格设置

现在主流的网格单元的尺寸为 8 PX, 如 Ant design、Zan design、Arco.design 均选择 8PX 作为最小的网格尺寸。因为目前主流的显示屏横向和竖向都可以被 8 整除,可以做到完美适配。但所有的设计都不是绝对的,我们在选择最小的栅格单元时,也可以根据业务需要选择 4PX 作为最小的网格单位。

4. 栅格计算

PC 端常见的栅格有 12 栅格和 24 栅格,栅格分的数量越多可以承载更复杂的内容结构,展示更详细的信息。国内较为主流的企业级设计系统 Ant Design、Element 均采用 24 栅格。

12 栅格:将页面分为 12 份,在流行的前端开发工具库 Bootstrap 与 Foundation 中广泛使用,适用于业务信息分组较少,单个盒子内信息体积较大的中后台页面设计

24 栅格:将页面分为 24 份,变化更加灵活,适用于业务信息量大场景复杂的后台产品。

通常我们看到的各家系统对于栅格的名词各有不同,新手往往会迷失在这些名词中,其实虽然名词略有不同,但总体表达的意义和划分原则是一致的,大可不必在这些名词中纠结,这里我们对名词作一些解释。

注意事项

1. 尽量保证偶数思维

尽量保证偶数思维,所有的数值保持偶数思维,可以在放大缩小时保证页面不失真。

2. 字段元素的起始点必须落在 column 上

字段元素必须要落在 column 上,不要将字段元素的起始点落在水渠中。这样就违背了栅格的目的。

如何构建一套 B 端栅格体系?我总结了五个方面!

3. 可以让父级容器对齐栅格,子元素可以不落在栅格上

很多时候我们发现如果一味的将元素与栅格对齐,可能会导致我们设计美观度降低。这时候我们需要把整个元素想象成为一个更大容器,运用盒子的原理,只需要把父级元素和栅格对齐即可。

0个人收藏 收藏

评论交流

泪雪默认头像 请「登录」后参与评论
  1. 加载中..

相关推荐

  • grid system 格栅系统

    栅格系统怎么应用

    栅格系统在使用核心思想是,内容元素必须位于若干列,可以任意分割,比如 6x2、3x4、4x3;水槽内禁止放任何内容元素,内容元素应该要在列宽以内;父级元素对齐栅格,子级可以不完全对齐列;除非特意设计,否则不要在列之外区域放置元素。
  • 栅格系统 grid system

    什么是栅格系统

    栅格系统是一种运用固定的格子来设计页面布局,使布局简洁规范有秩序有层次感,这也是设计的基本原则,利用网格有规律的对页面进行排版布局,适用范围广告排版、海报画册、网站移动端等。
  • cdr

    cdr文件是什么

    cdr是平面设计软件CorelDraw的源文件保存格式,它是一种矢量图文件,cdr文件在CorelDraw应用程序中能够以源文件的方式使用、编辑,其他图像编辑软件打不开此类文件,需要下载安装CorelDraw软件之后才能打开图形文件。
  • Photoshop

    cdr文件怎么用ps打开

    cdr文件用ps打开可在Coreldraw中选取相应的对象,COPY,然后再在Photoshop中开个新档,粘贴上去,这是最简便的方法; 还可以使用Coreldraw的输出功能(有些版本叫导出),将Coreldraw的矢量图形输出为点阵图。
  • website

    怎么提升网站排名

    首先需要做好内部优化,从网站定位、关键词链接、网站结构和内容等多个方面入手,不断调整网站的各个细节指标,不断提升网站的收录和权重,从而达到提升网站用户体验和排名的目的。
  • wepoker

    wepoker到底能不能开挂

    wepoker开挂是被抵制的。wepoker是一款专业扑克游戏的社区,喜欢的玩家能够在手机上玩到丰富的扑克游戏。挂是一种作弊的软件,开挂的人在游戏中可以通过作弊取得非法的分数,开挂在单机游戏是被允许的,网络游戏中是被抵制的。