基于网格的设计背后的主要思想是您可以使用它们创建的网站在视觉和结构上的稳固平衡。
复杂的布局结构提供了更大的灵活性并增强了访客的视觉体验。事实上,用户可以更轻松地遵循页面的一致性,而开发人员可以以深思熟虑、一致的方式更新布局。然而,要通晓网格系统背后的所有理论是相当困难的:一点也不容易。
一些重要的概念和相关的关键事实可以帮助学习基础知识并牢记基本技术。 这就是本文的全部内容。我们决定深入研究有关基于网格的设计的文章。我们通读了 50 多篇文章,并选择了网站开发人员应该了解的关于基于网格的方法的一些最重要和最有趣的事实。此外,我们还列出了我们找到的最有用的参考资料、教程和工具 - 以及对文章内容的准确描述。
关于基于网格的设计,您可能不知道的事情 #
网格是图形设计中意志最生动的体现。[…] 单位是网格的基本构建块。他们都是统一的。列是创建页面视觉结构的单元分组。他们不需要制服。”
“网格是放置对象的一致系统。它在两个层面上工作:在单元格的单位层面(例如 20x20 像素)和列层面
“在网络上,垂直节奏——当读者向下浏览页面时文本的间距和排列——是由三个因素决定的:字体大小、行高和边距或填充。[..] 垂直空间的基本单位是行高。”
使用规范网格调整行中元素的大小和位置。短元素被扩展到网格边界的开始和结束,而长元素被允许跨越多个网格单元或被缩短以适应标准单元。这样,网格仅用于帮助建立一致的对齐关系。[…]对于动态布局,确定布局可以容纳的最小尺寸通常是比尝试为任意小的显示尺寸重新计算布局更好的解决方案。”