Instapage 3.0 简介：更智能、更快、更大胆、更好。

多年来，Instapage 团队在构建我们的 UI 方面做得非常出色。 但是，我们注意到它不再满足用户的需求，是时候进行更改了。

Instapage 设计系统负责人 Przemek Cholewa 概述了团队在更新用户界面的过程中的想法：

我们知道，要实现生产力和性能，同时保持一切易于使用，需要改变观念。 我们的团队了解 UI 如何分散用户注意力或帮助用户实现他们的目标。 形式应该遵循功能，而不是相反。 我们希望 Instapage 设计系统不那么引人注目，而且更加简约和实用。

从历史上看，我们没有足够的时间、资源和知识来正确实施复杂的设计系统。 现在，我们做到了，今天我们重点介绍了这一切背后团队的最大改进。

（注意：这不是 UI 的最终演变，您可以在接下来的几周内期待许多更新。）

去噪 Instapage UI

在 Instapage，我们相信迭代设计，并且设计工作永远不会完成——它在不断发展。 我们的第一个 UI Kit 受到 Material Design 的启发，并且很好地为我们的产品服务，但随着时间的推移，我们意识到最初的 UI Kit 没有我们需要的所有组件，而且对于 Instapage 正在构建的内容来说太有限了。

你今天看到的新 Instapage UI 是我们努力提供不断改进的用户体验的迭代设计的美丽故事。 它首先采用我们对 Material Design 的实施，并将其演变为过渡（和临时）设计系统。 我们称它为“水晶”，因为它旨在提供更多清晰度。

Crystal 旨在使 Material Design 适应 Instapage 的需求，而不会过多地改变设计语言。 它解决了主要挑战——让我们需要的所有设计元素都可用、记录并有一个 Angular 代码片段。 我们于 2019 年年中开始工作并于去年年底完成，只是为了开始最后一步的工作——我们自己的视觉语言，称为“水晶般清晰” 。

Crystal Clear 是我们过渡的最后一步，它是我们自己的用户界面和我们自己的视觉语言，根据 Instapage 的需求量身定制，并用我们需要的细节精心制作。

首席设计官 Uldis Leiterts 解释说：

作为一个迭代过程，工作永远不会完成。 我们仍在修复、改进和更新。 例如，网格的某些部分仍然需要一些工作。 但是，我们不想把事情隐藏在幕后，我们想分享我们的工作，因为我们为我们预期的“最终”版本感到自豪，我们也为设计的迭代性质以及它如何服务于功能而感到自豪。

我们希望 Crystal Clear 的第一个版本和后续更新将不断改善我们客户对 Instapage 的体验，这是我们喜欢制作的产品。

Instapage UI 有哪些新功能？

总的来说，我们对整个用户界面进行了降噪处理，以便首先看到客户的内容，如下所示。

用户体验副本

除了过渡性的 Crystal 设计，我们还为我们才华横溢的设计团队引入了一位 UX 作家。 Instapage 是由工程师构建的，您看到的副本也是如此。 它对我们很有帮助，但也留下了改进的空间。

例如，一条空状态消息说“你的仪表板很孤独”——这本身没有错，但它可能不是最适合我们自己看到的严肃商业软件的语言。 借助 Crystal Clear，Instapage 的用户体验/内容作家 Mateusz Sochoń 与语气和信息更加一致。 正如马特乌斯所说：

我们消除了所有的障碍，使所有的空白状态和用户导向的交流变得有凝聚力。 每当有与语法或消息语气严格相关的改进空间时，我们都会修改副本。

新的款式和颜色

为了找到能够提高用户工作效率的平衡界面样式，我们将调色板和样式更新为中性的灰度色调。 新的调色板装饰性较低，但功能性更强。 例如，宝蓝色仅用于操作，主要是 CTA 按钮：

也就是说，好的设计是无形的，该团队从迪特拉姆斯那里获得了灵感，他为好的设计制定了规则。 根据 Rams 的原则，该团队更新了界面，使其更加永恒。

之前：水晶

当前： 晶莹剔透

新的层次层次结构和消除阴影

新的级别约定允许我们以更有目的和更有条理的方式将组件和元素层次结构的概念引入 UI。 Crystal Design 系统中的不同组件显示在不同级别，以突出显示某些元素并将它们分组到视觉上有凝聚力的上下文组中。

我们的应用程序中存在四个主要级别：

• 0 级：作为所有剩余内容的背景
• 级别 1：显示大多数组件的级别
• 级别 2：使来自较低级别的元素能够在其下方滚动
• 级别 3：覆盖所有较低级别的元素

（注意：中级 1.5 级别是包含所有组件的级别，这些组件显示在级别 1、2 或 3 的一部分上，但仍将隐藏在更高级别下。此类组件包括工具提示、弹出窗口、下拉列表。新更新从中间状态移除阴影。无论放置在哪个级别，它都更亮且视觉一致。）

此外，我们了解到保持 UI 干净的因素之一是最小化阴影的使用。 Material Design 历来使用阴影进行装饰，而 Instapage 使用阴影来分隔主要级别，例如叠加层：

一致的轮廓图

在整个应用程序中，您会注意到菜单、下拉菜单等中的图标。新的图标更清晰、更简单：

不同的间距网格

每个界面背后都有一个坚实的基础，包括结构和网格。 改进新的结构网格是必要的，而使用 Crystal Clear，界面有更多的呼吸空间，并帮助用户更轻松地扫描：

消除圆角

这次更新比较微妙，但值得指出，因为设计团队认为消除圆角更前沿：

构建器用户界面

您可以看到新的 Crystal Clear 更新是如何在构建器中实现的。 请注意灰度调色板，图像、CTA 按钮和徽标除外：

我们学到了什么

UI 开发主管 Łukasz Grądzki 强调了团队和技术是如何改进的。 另外，我们在 2016 年所做的投资现在如何获得回报：

在过去的四年里，我们已经从一个松散组合的通用组件转变为今天我们可以称之为成熟的设计系统。 在我们所有的产品和内部工具中共享的系统。

作为参考，2016 年，我们在前端重写了整个应用程序，并正在实现 UI Kit 的第一个版本。 历时三个多月的时间完成了这项任务，涉及十几个团队成员。 还值得一提的是，与现在相比，该应用程序本身相对较小。 现在，我们能够在一个开发周期内部署完整的 Instapage 应用程序重新设计，而不会出现重大问题。

亲自查看新 UI

新的 Crystal Clear 设计系统让您清楚什么才是最重要的——这是您使用 Instapage 应用程序的本质。 我们希望让您能够专注于任务，专注于您的日常 Instapage 使用。

如果您对我们如何改进或使用我们的新 UI 提出反馈意见，我们很高兴收到您的来信。 如果您有兴趣加入团队，请在此处登录以亲身体验并查看我们的空缺职位。