如何设计符合气候变化主题的插画banner？

谈论气候危机并不容易。但是，如果有更好的方式呈现它呢？

关于气候危机

当我们开始这个项目时，我们有一个目标：以令人愉悦和引人入胜的方式讲述令人不安和困难的主题的令人信服的故事。我们希望人们完全沉浸在一个主题中 - 一个真正激励他们深入潜水的主题 - 所有这一切都没有受到恐吓。

由于当今世界正在发生的所有事情，我们对气候变化有着强烈的倾向，这是每个人都可以联系到的问题。这是一个全球性的紧急情况，超越了我们作为人类的差异 - 每个人和每件事都受到影响。没有双方采取。

人类。动物。微生物。一切。

危机只会越来越严重。然而，对于这样一个激烈的问题，我们的大多数反应仍然不冷不热。我们怎么可能不太了解地球如何迅速消耗？那么，当实际问题对我们来说感觉如此遥远时，谁能责怪我们呢？

气候危机一直被视为这个大问题，只有政治家和世界领导人才有资格解决。我们常客？完全脱离了联盟。我们只是觉得我们无法发挥作用，因为我们的日常努力似乎微不足道。没有人有兴趣成为他们认为不能解决的问题的一部分。或者至少我们已经被教导如何相信。

随意交谈是一个困难的话题，这无济于事。厄运和阴郁的氛围并不总是好好放在咖啡上，在你的主菜之前分享一只饥饿的北极熊令人沮丧的画面可能不是一个好主意。

所以，我们知道气候危机从来都不容易谈论。而我们现在所遇到的令人痛苦的材料也没有完全帮助。但如果我们要鼓励更多人谈论它，那么必须改变一些事情。

这就是我们问自己的地方......

如果我们可以改变我们呈现它的方式怎么办？并改变我们分享的方式？

该作品项目旨在成为一个微型网站，旨在通过现代UI设计激发人们的兴趣并鼓励在这种可怕的情况下进行对话。我们希望探索将一个深刻紧迫的问题与平易近人的审美并置的可能性，希望将冷漠转化为灵感和对知识的无知。

由于严酷的事实和可怕的数据到目前为止还没有起作用，我们认为：为什么不吸引他们吸收更多的信息呢？我们通过将复杂数据翻译成美丽，易于理解的形式来完成大多数设计，从而解决了这个问题。

我们希望减少恐惧，距离和无助，并用希望，相关性和力量取而代之，这样人们就可以开始意识到他们可以为气候做多少。

但完全披露：我们显然不是气候专家， 这纯粹是实验性的。我们只是想做一些挑战我们技能的事情，同时提供重要的，有意义的信息。因此，令许多人感到沮丧的是，尽管我们认为应该这样，但这不是一个真实的网站。

那么，我们的设计方法是什么？

让我们分解我们的关键点：

·水平滚动

·视差

· 几何+有机形状

·款式和颜色

·活版印刷

水平滚动

横向滚动的想法很大程度上受Apple的iPad Pro产品页面的启发。这感觉就像一个流畅的故事情节，我们也想模仿同样的探索感。

水平滚动最具挑战性的实现之一是在我们的动物列表页面上。我们的目的是创造一些很酷，有趣和有趣的东西，但我们很快意识到我们太过膨胀了。我们推出了第一个版本，因为它感觉更像是翻页而不是页面。视觉上有太多的东西，但没有什么有价值的信息。白色空间只是不平衡。你们都知道我们喜欢一个好的白色空间。

当我们拨回并磨练真实的列表概念时，我们发现更少的肯定更多。静态信息标题突出了连续性，白色空间是平衡的，整个页面比以前更具信息性和魅力。

视差

Parallax是一个非常好的理由，我们非常兴奋地进行实验，因为它提供了很多让事情变得疯狂的空间。但是，除了通常由分层图像构成的视差之外，我们还决定采用一个缺口和分层平面插图。我们老实说不确定它是否会起作用（甚至可能会受到影响！）但我们冒险将它们结合起来创造出具有深度感和现实感的东西。

我们得到了许多问题，询问我们的视差是如何在Adobe After Effects上完成的，并且听起来很简单，它基于一个基本原则：离你最近的物体/层最快。

这是我们图层的简单细分：

上：背景; 从左向右移动; 最慢的层。

中心：中间地; 几乎总是居中; 中速。

底部：前景; 从右向左移动; 最快的图层

你会看到，当背景和前景以不同的速度和方向移动时，它会产生这样的摄像机平移错觉，就像它转向180度一样。

几何+有机形状

从我们的环境中汲取灵感，我们平衡了几何和有机形状之间的对比，以表示人造结构和自然的共存。但我们必须小心使用它们; 我们不得不用结构编织可接近性，而且太多都会导致太僵硬或过于顽皮的东西。

严格的网格布局将网站结构保持在一起

例如，我们巧妙地将结构整合到站点中的一种方式是通过固定的网格布局。一切都故意跟随隐形网格，因此UI看起来很有条理，没有增加任何不必要的重量。

即使在我们的视觉数据中，强烈的直线与粗略绘制的圆形形成对比，因此在数据保持有序的情况下，页面不会失去友好性。

强烈的直线与粗略绘制的圆形形成对比，以平衡与结构化数据的可接近性

动物实际上是这种对比平衡的完美例子。它们全部由基本的几何形状组成 - 圆形，矩形，梯形 - 但经过精心的使用和操作，以保持其自然形态和曲线，同时仍保持强大，独特的结构。

动物是基于基本几何形状建造的。

这种平衡一直延伸到我们的排版选择。你可以看到它们也是相互对比的：一个是圆润的，充满活力的无衬线字体，另一个是经典，优雅的衬线字体 - 但是它们一起使用，它们以某种方式发挥彼此的优势。

风格和颜色

因为我们主要处理平面插图，所以我们的风格和颜色选择要解决两个主要问题：

a）尺寸

b）颜色和谐

外形尺寸

由于视差效应是我们的主要概念之一，使用重叠技术来进一步推动视差包络似乎是理想的。结合起来，它们创造了一种空间错觉，同一x和y轴上的元素可以存在于同一平面上。

这种错觉有可能创造尺寸，深度，透明度，甚至可以揭示隐藏的元素。它增加了奇思妙想和奇迹，我们正在寻找洒在这个黑暗的主题上。

最上面的樱桃是一层随机的有机纹理，可以为2D空间添加更多尺寸。所有不使用任何阴影效果。

左：重叠以创造深度; 右：重叠以创建透明度

色彩和谐

在这个项目中平衡颜色感觉就像穿过峡谷走钢丝一样。我们必须记住每个元素如何相互作用，确保一切都是可见的，并且不会在混合中迷失。

因此，我们不是试图处理有限的一些颜色，而是将我们的调色板打开以适应自然界中无限的配色方案。这是一个在某个页面内仔细地配对颜色而不会偏离其自然表现的过程。

颜色，纹理和重叠技术（隐藏元素）之间的相互作用。它是对我们消失的森林进行评论的同时创造了一种奇迹感。

关键要点

我们希望您从中获得的第一个关键点是尽管Web开发存在局限性，但始终要突破设计界限。当我们进行投资组合项目时，我们有机会回答“假设”问题。按照技术和设计的进步，我们无法再衡量什么是不可能的了。

第二个关键点是我们如何传达信息或故事有时比内容本身更重要。就像他们说的那样：这不是你说的，但这就是你说的。

最后也是最重要的一点是，我们希望您能够更多地了解气候变化。我们人类对目前大规模灭绝的99％负有责任，因此我们应该对自己的行为负责，并弄清楚我们可以停止或开始做什么。

原作者： Daphnie Loong

原文链接：https://blog.prototypr.io/how-we-used-ui-ux-to-confront-an-inconvenient-truth-5b70eb9e3c85