什么是栅格系统

“格栅系统”这个词经常被听到,但我不知道什么是真正的格栅系统,也不知道它是如何在设计中使用的 。大工厂 95%的设计将应用于格栅系统,格栅系统将应用于格栅系统中 UI 设计中的应用非常广泛和重要 。网格系统是什么?它有什么作用?

什么是栅格系统

文章插图
什么是网格系统?栅格系统(grid systems),又称“网格系统”,是一种应用固定网格设计网页布局,使布局简单、标准、有序 。二战后,它已成为当今出版物设计的主流风格之一 。
网格系统无处不在,但我们没有找到它 。网格系统就像一个部分布局的框架,就像一个标准我们设计的无形网络,使设计更有序和美观 。
网格最早从广告设计开始 。1692年 为了提高印刷水平,法国以网格为设计理论,将印刷部分分为数千个小网格,这是最早的网格原型 。后来,逐渐转变为应用固定网格设计布局的广告设计风格 。
定义为规则网格,标准页面上的版块布局及其信息部分,使页面简洁、整洁、有质感 。这也是设计的基本原则 。网格用于定期布局页面、广告布局、海报专辑、网站移动终端等
网格系统的功效1.协助大家更加规范排版布局和信息遍布,让页面创造纪律美
2.提高网页布局的一致性和复用性,减少设计师对基本布局的思考,提高设计效率
3.响应式布局,更强兼容不同设备,使开发更好的恢复设计效果
所有好设计的秘密都在于其视觉元素的组织模式和原始元素之间的相互关联 。网格系统正好有这个效果 。网格系统在网格系统中 UI 设计中的应用不仅可以使页面更加标准化,使原始元素更加平衡,看起来更加和谐;而且可以大大提高设计师和研发工程师的工作效率 。
为什么要做格栅系统设计内容应根据不同浏览器的分辨率尺寸调整界面显示宽度的缩放,确保页面显示完整,不变形网格系统的组成要素栅格系统是由栅栏组成的(Column)跟水糟(Gutter)更换遍布形成 。网格系统的组成要素有栏、水糟、边距 。
1.栏(Column)
栏是从上到下的垂直空间区域,是承重视频的器皿 。我们的内容一般放在栏内(栏与水糟结合用于承重视频) 。在 web 端栏一般为 12 列与 24 列,手机端一般为 6 列、8 列与 12 列 。实际栏数可根据产品内容确定 。界面布局风格越大,栏数提议越大,因为栏数越大,组合方式越多 。
2.水糟(Gutter)
水糟(Gutter)相邻两个栏之间的间隔控制着界面的空白和呼吸感 。水糟越多,网页布局间隔就越大,给人的视觉感觉是空白大,呼吸感强 。水糟越小,页面越紧,页面元素就越拥挤 。
3.边距(Margin)
页面边距可视为间距 。手机端通常是两侧与屏幕边缘之间的距离,网页端是指两侧的空白区域 。
【什么是栅格系统】