用 CSS Grid 征服五种设计恐惧

CSS 网格连同其他一些新的 CSS 属性正在彻底改变网页设计。不幸的是，行业尚未拥抱这场革命，其中很大一部分原因是基于恐惧，而这些恐惧可以追溯到当前 CSS 网格教程存在的问题。

它们中的大多数属于以下两类之一

1. 重新创建经典的网页设计模式。 网格非常适合复制经典的网页设计模式，例如 卡片网格 和 “圣杯”页面。
2. 随意尝试。 网格也非常适合创建有趣的东西，例如 大富翁棋盘 或 电子游戏界面。

这些类型的教程对于新技术来说非常重要。它们是一个起点。现在是时候，正如 Jen Simmons 所说，走出我们的老路。为此，我们必须抛弃我们的设计恐惧。

恐惧 1：不对称

我们在框架时代接受过训练，认为对称且有序的设计更好。确实，对于许多应用来说，对称设计或有序的项目网格是首选。然而，不对称能够以对称永远无法实现的方式吸引眼球和思维。不对称在其无序中令人感兴趣。如果您感到紧张，可以从小处开始。

查看 CodePen 上 Bryan Robinson (@brob) 编写的 不对称促销网格。

在此示例中，我们有一个简单的促销空间。通过使用不对称的垂直和水平布局，我们可以使我们的图标和按钮之间形成更强的视觉匹配。这不是一个很大的空间，但它不害怕使用空白区域来吸引用户的注意力到我们希望他们去的地方。

说到空白区域……

恐惧 2：负空间

当我们离开 21 世纪初时，我们决定如果用户需要滚动也没关系。我们开始在设计中引入空白区域，其中大部分位于内容行之间。这使我们的设计更加简洁，但垂直空白区域是唯一有效的选项吗？

在此示例中，设计结合了负空间，以在页面上营造一种探索感。通过不使用传统的 content 行，用户的眼睛有机会以更慢的速度扫描和获取信息。

查看 CodePen 上 Bryan Robinson (@brob) 编写的 实验性主页。

恐惧 3：朋克摇滚？

专注于 20 世纪 70 年代印刷版式的设计讨论并不少见。这是设计工具非常稳定的时期，这使得创造力得以蓬勃发展。随之而来的是以朋克摇滚场景为中心的充满灵感和前卫的设计作品。

所以我的问题是：我们可以在网页设计中成为朋克摇滚乐手吗？

在此示例中，设计并不关心您的先入为主的观念。文本重叠是错误？不，它是功能。图像不应该相互竞争？适者生存！

查看 CodePen 上 Bryan Robinson (@brob) 编写的 网格重叠与朋克摇滚冥想。

正如本例所问，这是一个好主意吗？完全可以争论。我知道的是：我们的工具已经成熟并变得更加稳定；现在是进行实验的时候了。我们希望网络年复一年地看起来一样，还是希望设计出新的、令人兴奋的模式？

恐惧 4：新的灵感来源

灵感来源不应该引起恐惧，但它们确实经常引起头痛。请记住，灵感并不意味着对概念进行 1:1 的翻译。

朋克摇滚平面设计

我之前提到了 70 年代和 80 年代出现的一些令人惊叹的设计。以下是一些链接，您可以继续研究朋克摇滚设计

• Sean O’Hagan 的《朋克海报艺术》
• Simon Martin 的《混沌的艺术：朋克摇滚对平面设计的永恒影响》

复古电影平面设计

在大学学习电影让我对复古电影平面设计有了极大的欣赏。我的一个教授曾经告诉我：“你应该能够通过电影的片头字幕来判断电影的基调和主题。”

这在二战后的电影中尤其如此。它们的片头序列和海报是设置场景的设计创意宝库。

• Rebecca Gross 的《贯穿电影史的电影片头设计平面艺术》
• 美国电影艺术与科学学院的《索尔·巴斯关于他设计电影片头序列的方法》

学习如何创建平面设计网格

平面设计师几个世纪以来一直在使用网格进行布局，并且有大量关于创建这些网格的优秀文献

• 视频：Mark Boulton | 设计网格 | CSS Day 2017
• Guity Novin 的《平面设计史：第 58 章，布局设计史与现代报纸和杂志》
• Beth Tondreau 的《布局要点：使用网格的 100 个设计原则》

恐惧 5：回退

确实，网格在美国的浏览器支持率仅为 74%（在撰写本文时）。

但这不应该阻止您推动设计向前发展。有很多策略可以从支持所有浏览器开始，然后逐步采用新的模式。

• Rachel Andrew 的《使用 CSS 网格：支持不支持网格的浏览器》
• 视频：Jen Simmons 的《改进我们的布局》
• Bryan Robinson 的《向前跌倒——重新思考渐进增强、优雅降级和开发人员道德》

接下来是什么？

推动我们行业向前发展是我们每个人的责任。现有的技术可以挑战我们去创造新的、有趣的设计。这不必像这些示例中的一些那样尖锐和激烈。它始于意识到我们可以做惊人的事情……或者我们可以停滞不前。

您将如何推动行业向前发展？