CloudFlare最初的界面以惊人的速度增长。从视觉上看，自2010年CloudFlare发布以来，它并没有发生太大变化。在几年的新功能、设置和辅助用户界面被埋没在点击之后，用户体验明显不足，而且随着我们不断增加功能，用户体验只会变得更糟。问题变成了：我们如何才能制作出一个多功能、可伸缩和一致的UI？如果您还没有，请务必阅读Matthew关于我们新界面背后的哲学的文章。这篇文章将深入讨论设计我们的新仪表板背后的细节和思考过程。为什么要重新设计？我们需要多样化的用户和设备随着CloudFlare的发展，我们现在拥有了跨越四个非常不同计划级别的大量客户。我们需要一个界面，既适合于一个博客的临时所有者，也适合管理许多客户站点的代理，也适合需要最终控制权的企业客户。此外，响应式设计的兴起是我们想要认真对待的事情——仪表板应该足够多功能，以便在每一台设备上都能正常工作。我们可以在此基础上建立一个平台我们不能永远把新功能塞进"装备菜单"。我们需要一个可伸缩的导航隐喻，以及一个一致的视觉框架，使新功能的开发更容易、更快、更容易被用户理解。刚开始的时候，我们对新功能有了很大的计划；下面我将介绍其中的一些功能。我们需要与一个更成熟的品牌保持一致CloudFlare品牌在过去几年中不断成长和发展。在重新设计的过程中，我们更新了我们的视觉识别系统，为我们的名片、印刷品、展位展示和视频提供了新的字体、调色板和图像。我们的新仪表板是朝着更新、更干净的外观迈出的又一步。过程新概念从一个干净的开始，我们有能力完全重新考虑界面的信息架构和可视化层次结构。记住多年来用户的反馈，现在是时候勾勒出一些想法了。以下是该过程早期制作的许多草图的小样本：应用程序随着布局框架的建立，对设置和功能进行分类的概念开始形成。当我们注意到导航行与当今智能手机的视觉相似性时，这些类别演变成了"应用程序"。它也符合在CloudFlare提供的应用程序中添加第三方应用程序的概念（我们很快就会实现这一点）。将应用程序作为我们框架的开始，我们有一个层次结构：用户可以选择一个网站，有一个CloudFlare和第三方应用程序的清晰列表，无论选择哪个应用程序，都会显示特定的设置和功能。模块当我们的导航围绕着应用程序的概念固化时，我们开始着手于更小的部分。在应用程序中，我们将封装每个设置的"模块"。顾名思义，这些模块是模块化的——它们由几个部分组成，它们相互锁在一起，从而在整个UI中创建一致的外观，即使以各种方式使用时也是如此。我们决定每个模块都包含一个名称和描述，并且在底部有一个可折叠的面板。有些模块的右侧有一个"控制区"。其他更复杂的模块可以包含数据表，甚至可以是数据表和控件的组合。下次登录时查看仪表板，您将看到它们的许多变体。我们希望集成的最大改进之一是内联帮助内容。再也不用去其他标签去了解更多关于设置的信息了。帮助内容包含在可折叠面板中，可展开以供进一步阅读。我们还计划将来将这个可折叠面板用于其他特定于模块的内容，比如API信息。响应式设计我们开始这一设计过程的目标是使每个CloudFlare功能可从您的手机上进行调整。上面提到的模块设计用于调整大小并回流到您的设备大小，允许您轻松控制网站的CloudFlare设置。应该可以在桌面计算机上以及在会议之间运行时检查网站的性能。虽然通过手机设置SSL证书可能有点疯狂，但我们绝对不想阻止你！新造型我们为仪表板建立了一个新的风格指南，新的字体、颜色和界面元素，如按钮、切换和选择菜单。当我们试图让所有的东西都完全响应，高密度显示就绪，并且总体上更具性能时，我们决定放弃所有的图像，其中有大量的阴影、渐变和噪音，这些都是我们以前的按钮和控件的组成部分，专注于用CSS来制作所有东西。结果是更清爽，更干净的外观，更快的加载。我们还创建了一个自定义图标集，用于我们的应用程序图标和按钮，以及一些新的插图，我们用它来介绍一些有趣的地方。只是个开始这个新的仪表板为我们提供了一个平台，可以为用户提供更多的功能，同时更容易地不断地改进UI本身。你今天所看到的只是我们未来希望做的事情的一小部分，而这并不是唯一让人耳目一新的事情。正如马修暗示的那样，我们的旧营销网站将进行整容，一个新的支持网站正在建设中。敬请期待！如果你认为我们的设计过程是你想参与的，我们正在招聘。