栅格化原子设计理论布局思想
时间：2023-09-27 03:54:02 | 来源：网站运营
时间：2023-09-27 03:54:02 来源：网站运营
栅格化原子设计理论布局思想：
一、栅格化布局的由来
栅格设计系统（又称
网格设计系统、
标准尺寸系统、
程序版面设计、
瑞士平面设计风格、
国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。
字体设计
1629年，法王路易十四命令成立一个管理印刷的皇家特别委员会，由数学家尼古拉斯·加宗（Nicolas Jaugeon）担任领导。委员会提出了新字体设计建议：以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36小格，这样，一个印刷版面就由2304个小格组成。这是世上最早对字体和版面进行科学实验的活动。也是栅格系统的雏形。
版式设计
20世纪50年代，栅格设计系统终于在前西德与瑞士得到完善。通过瑞士平面设计杂志的宣传，将瑞士苏黎士和巴塞尔两个城市的设计家从20世纪40年代探索的成果全面展示，并影响世界各国，因此也被称为“瑞士平面设计风格”（Swiss Design）。由于这种风格简单明确，传达功能准确，因而很快得到世界范围内的普遍认可，成为战后影响最大的一种平面设计风格，也是国际最流行的风格，因此又被称为“国际主义平面设计风格”（International Typographic Style）。
网页设计
万维网联盟发布的CSS Grid Layout Module Level 1制定了二维的基于网格的布局体系。
网页设计中的栅格化布局已从老旧的表格布局发展到Css布局。栅格设计的特点是重视比例、秩序、连续感和现代感。 以及对存在于版面上的元素进行规划、组合、保持平衡或者打破平衡，以便让信息可以更快速、更便捷、更系统和更有效率的读取；另外最重要的一点是，负空间的规划（即：留白）也是栅格系统设计当中非常重要的部分。
网页栅格系统可以定义为：
辅助和规范页面信息布局，使页面具有比例、秩序、连续感和现代感。
下面文中所提到的栅格化均为网页栅格。二、栅格化相关的概念
1、基础概念1）、网格 | Grid网格是构成页面栅格系统的最小单位。一般为8点栅格。
2）、栅格总宽度 | Container栅格宽度是页面栅格系统的总宽度。
3）、边距 | Margin 边距是栅格外边距，与屏宽保持合适的安全距离，让界面左右能保证可读性和美观度。
3）、列一列中包含了列宽（Column Width）以及槽（Gutter）两部分。
列（Column）列是栅格的数量单位，当界面设定好总宽度后纵向等分成几列，比如 Ant Design 采用的 24 栅格就是有 24 列。
槽（Gutter）槽是相邻两个列宽之间的间隔，通过设定列的左右内边距（padding）来决定槽的大小，列减去槽的部分为列宽。
槽用来规范页面中内容间的间距，槽的值越大，页面中留白部分的面积越多，视觉效果越松散；反之，页面越紧凑。槽通常设为定值。
2、区块 | Col-n建立好基础栅格之后，一块内容通常会占用几个列，把这个区域理解为内容区块，用于承载一个区域的内容。
24栅格区块展示区块从水槽开始到水槽结束。三、栅格化原子设计理论布局思想
栅格化原子设计理论布局思想：使页面的所有的元素尽量保持栅格化。
1、布局栅格化1）、页面框架2）、其他容器参考弹窗框架抽屉式导航框架尺寸1
尺寸1尺寸2
尺寸2尺寸3
尺寸32、业务栅格化指标大盘一般业务表格四、栅格化的设置
1、通过Sketch布局进行设置打开Sketch->视图->画布-布局设置：
2、通过JINGWHALE Sketch
插件进行自动设置选择页面的主内容区域，使用Sketch->JINGWHALE->Efficient Tool->Set Grid Layout：
JINGWHALE Sketch插件Set Grid Layout功能选择水槽宽度，插件会自动给所选主内容区域添加栅格化：
JINGWHALE Sketch插件Set Grid Layout功能五、与响应式布局的关系
关于响应式设计通常会有两个普遍认识，即 Aaron Gustafson 与 Ethan Marcotte 分别在 2011 年自己的著作中提出的 Adaptive Web Design (AWD)与 Responsive Web Design (RWD)概念，它们的核心区别在于 AWD 针对不同的设备或屏幕尺寸定制化设计多个固定布局的尺寸，而 RWD 是同一套代码做弹性的适应，本质上它们都在解决产品设计如何适应于不同设备以及不同屏幕规格的问题。
响应式设计包大致包含设计策略、设计模式、实施模式、组件应用四个方面的内容。而栅格化是属于设计模式的一种，它经常和相对尺寸单位、屏幕断点等设计模式综合在一起，完成响应式设计。
响应式设计请查看
INGWHALE，致力于设计出最符合用户体验的产品。
在线咨询
