什么是
网格
网格--听起来像是数学课上的术语。但实际上,这个术语对于成功的网页设计有着难以置信的重要性,即使乍一看并不明显。网格可以提供结构和组织,大大改善网站设计的 "流程"。
网格的概念很简单:它基本上就是一个通过线条或区域来组织网页内容的模板。这一点很重要,因为它有助于以整齐、具有视觉吸引力的方式将相关内容集中在一起--有点像一个有条理的网站文件柜!使用网格可以让设计人员快速将页面上的元素排列成合理的模式,并控制所有内容如何相互堆叠。此外,当设计从桌面屏幕层叠到移动屏幕时,网格通常用于保持一致性,在页面之间提供清晰的路径,以便用户轻松找到所需内容。
当我们谈论网页设计中的网格时,经常会感觉像是在解开宇宙的琴弦(请尽情想象吧!)。这就是通过暂时化将复杂的数据分解成更小的块,这样你就可以以任何你认为合适的方式将它们重新编织在一起--无论是有序的还是混乱的!这里的目标不是完美,而是提出一些有意义的东西--就像我们头顶上浩瀚的星空一样;一次小小的尝试就能带来数十亿种我们无法理解的可能性。
为此,网络大师们特别强调基于网格的系统,例如列式布局系统,在这种系统中,项目沿着具体的垂直基线排列,或者模块化组织,将对象捆绑成块状集合,便于以后重新排列--我们说的是二维方框 x 3--但无论这些模板采取什么形式--这里确实没有错误的方法--它们将视觉与技术相结合,利用对象之间的基本关系,同时围绕它们所包含的每个元素提供周到的上下文(它们看起来也很不错,这也没什么坏处!)。
所以,下次再有人问为什么要使用这些讨厌的网格来布局网页时,请记住这一点:它们是有条不紊的指南,让我们的头脑不再混乱,同时也为创意探索留出了足够的空间!
实例
网格
- 列式布局系统
- 模块化组织
- 列宽变化
- 项目定位
- 排版网格系统
- 响应式设计网格
- 可变视口尺寸
- 内容优先级模式
- 媒体查询序列
- 下拉菜单布局
的好处
网格
- 使用网格创建网页的视觉层次--通过使用网格,你可以对齐网页上的元素,确保它们精确地嵌入指定区域。您可以轻松创建所有元素的节奏和一致性,使您的设计看起来更简洁、更有条理。
- 将注意力集中到关键内容区域--您可以使用基于网格的布局,以醒目的方式突出重要信息或图片。使用不同大小的列和行可以将用户的视线吸引到最重要的区域,让他们无需浏览不必要的内容就能快速获得所需信息。
- 与响应式设计保持一致--响应式设计是网格的另一种应用,它为设计师提供了一个基本的基础,让用户无论使用哪种设备都能获得相同的体验,从而使网站开发变得更容易。网格也非常适合响应式设计,因为元素会在不同尺寸的屏幕上进行适当调整,这样用户在浏览网站时就不必担心放大或缩小。
甜蜜的事实与统计
- 基于网格的网页设计越来越受到有经验的设计师和新手的青睐。
- 网格可以帮助设计人员以清晰、易于查看的格式组织数据。
- 如果使用得当,网格风格的网页设计可以为用户带来更高效的导航,并提高潜在客户的转化率和参与度。
- 网页内的内容按列、行和/或模块组织,以便根据页面上指定的方框或其他容器的尺寸限制或宽度,在整个页面上按比例间隔和设置内容。
- 基于网格的网页设计最方便用户的元素之一就是它的可扩展性--内容可根据浏览设备进行轻松调整,以确保在包括移动、平板电脑和桌面设备在内的所有平台上获得最佳浏览体验。
- 在宇宙学中,众所周知星系会形成网格,就像网站一样!
的演变
网格
网格在网页设计中的历史相当有趣。这一切都始于几十年前,当时网格被用作结构化页面设计的工具,在当时被认为是非常大的屏幕尺寸上保持一切井井有条。随着时间的推移,随着技术的飞速发展,这些网格也发生了很大的变化,现在已被用于实现全面的响应式网页设计,无论使用什么设备,内容看起来都是正确的。
追溯到设计人员使用直尺和圆规制作纸质原型的最初阶段,网格系统背后的理念至今未变--在布局中创建一致性,从技术角度实现灵活性,同时为美观的最终产品做出贡献。如今,网格系统的核心是在个人电脑或移动设备等各种媒体平台上以对用户有意义的方式排列对象,例如区分桌面视口和手持设备。
尽管有人尝试为网格设计创建特定的框架,如 960gs 或 Skeleton Grid System,但与 CSS Flexbox(它可以让我们轻松加快开发速度,无论我们希望网站以何种分辨率交付)或 Bootstrap 4(它可以让我们快速构建现代网站,几乎开箱即可提高响应速度)等新方法的多功能性相比,这些框架基本上是不够的。
综上所述,随着网络开发人员每天都在努力追求完美像素,网格技术很可能会继续受到更多关注!如今,无论你是创建基于代码的模型,还是使用 Photoshop 模板,每个人都能获得网格技术的诸多优势,这多棒啊?这确实说明了这一概念自诞生以来已经取得了长足的进步,同时在其发展历程中始终保持着技术和艺术上的真谛--确实令人印象深刻!