协同设计
第3部分：设计系统背后的决策

|由Gabe和用户体验团队|

这是用户体验团队（userexperience team）周二接管Tech的第三部分，也是最后一部分。以前，我们确定了在Gale创建设计系统的必要性，并解释了UX是如何支持这一目标的。我们还概述了用于实现设计系统的工具和技金宝搏彩票术。现在，我们将研究我们设计的用户界面（UI）元素，以及它们将如何为我们的产品提供更好的用户体验。最后，随着设计系统的不断发展，我们将对它的未来远景有一些见解。

组件

设计系统由单独的组件组成，这些组件共同构成一个产品或一组产品的UI。根据设计系统创建组件的目的是让设计师和开发人员有一个共同的参考点，即产品的外观和行为，以及通过构建早期原型快速构思概念的能力。组件由在整个产品中反复使用的UI元素组成；例如按钮、搜索结果和导航栏。

我们设计系统中的组件分为三类：交互组件、排版和图像。Gale设计系统中的组件总数太大，本文无法详尽地研究。不过，我们将重点介绍每个类别中最重要和最有趣的部分。金宝搏彩票

交互式组件

交互组件是用户通过单击、悬停、滚动等方式直接与之交互的UI元素。在本节中，我们将了解用于显示和访问内容的块和卡的设计背后的思想。

块和卡片通常出现在主页和其他内容页上以突出显示特色信息，或者出现在用户浏览内容的搜索结果页上。目前，块和卡在不同产品中的设计不同，如下所示。

我们的产品中有成千上万的出版物，所有这些出版物都可以通过多种方式进行过滤、分类和查看，包括按主题、类别、内容类型、时间段等。随着时间的推移，随着用户越来越多地搜索我们的内容并遇到多个Gale产品，我们的内容显示方式的设计缺乏一致性将被注意到。这就给已经复杂的内容集合留下了混淆的空间，并最终使用户更难决定他们想要在产品中采取什么行动。金宝搏彩票

用户在我们的产品中面临的复杂性和潜在的困惑告诉我们，我们需要设计一种一致的显示内容的方式，同时能够灵活地适应各种变化。特别是，我们需要考虑我们的内容的某些现实情况，例如冗长的出版物标题和不可预测的图像大小、分辨率和使用权限。考虑到这一点，我们设计了对内容块和卡片的一些更改。

我们从集合级别开始，在集合级别上，一组出版物看起来彼此相邻，因为为许多项目设计可伸缩性比为单个项目设计更具挑战性。结果是两种不同的方式在卡片中显示出版物组的内容。

左侧的卡片显示没有图像的内容组的设计。对于具有长出版物标题的内容以及需要跨不同内容集进行搜索的情况，它们也很有用。相比之下，右边的卡片主要用于将电子书分组在一起，因为书籍封面图像总是可用于该内容类型，并且使用图像查看内容比仅查看文本更吸引用户。

我们开发的另一个卡片设计是为文章设计的，我们内部使用这个术语来表示电子书的定期条目和章节。我们在这个设计中遇到的主要区别是，用户通常期望更多关于期刊和章节级内容的预先上下文，以帮助他们确定某个项目是否是他们想要阅读更多的内容。因此，我们不得不为内容的描述留出空间。我们还必须面对这样一个事实，即并非所有这类出版物都有可用的图像，或者，与电子书相比，图像大小和分辨率会有更多的变化。基于这些原因，我们为文章设计了三种不同的内容卡。一种是正方形，垂直分割以显示图像和文本。另一种是矩形的，大约是高的三倍宽，这为图像创造了更小的空间，对于分辨率较低的图像效果更好。第三种设计是简单的文本卡，为了解决没有可用图像的情况，完全消除了图像。

这些设计既考虑了研究发现的用户需求，也考虑了现有内容的局限性，但它们也做出了一定的牺牲。例如，此设计创建了有关多个商品卡布局的约束。特别地，它阻止我们将这种类型的卡片自由地分组到一个网格中。取而代之的是，我们必须将正方形卡片放在其他正方形卡片的旁边，矩形卡片放在其他矩形卡片的旁边，以此类推。这不是一个完美的解决方案，但它是向前迈出的一步，可以随着我们了解的更多而不断重复。188金宝搏北京赛车

最后，我们设计了一个卡片网格，当多个内容类型同时出现时使用。在这种设计中，每张卡片都有一个图像和一个彩色横幅，横幅覆盖在底部，以突出出版物的标题和日期。不可避免的是，这种设计并不能避免图像不能用于特定出版物的情况。然而，它所做的是允许我们在没有图片的出版物上使用库存照片，因为只有在显示在其他有自己图片的出版物中时，才会很少使用库存照片。当多个内容类型一起显示时，这种设计也很有用，因为每页显示更多的出版物，并且图像将为用户提供一种直观区分内容的快速方法。

排版

设计系统中的排版处理产品中每一段文字的样式和外观。由于Gale是一家文本内容丰富的数字出版商，排版在我们的作品中扮演着重要的角色。它能让读者对他们正在阅读的内容有一个清晰、强烈的理解。它可以传达风格和个性，消除阅读的劳累，金宝搏彩票甚至使它充满愉悦感。因此，随着设计系统的发展，我们将更加注重排版。

在我们的产品中，有许多关于类型组件的决策需要做出，其中一些是复杂的，需要其他团队的输入。我们已经开始了这个过程，但是我们还没有定义文本的风格外观。因此，我们无法在这里展示什么类型的设计，但我们将概述其背后的总体思路。首先，让我们看一些示例，说明当前Gale产品中如何处理字体。金宝搏彩票

从这两个样品可以看出，我们的产品字体比较统一。我们目前使用一种称为opensans的无衬线字体，然后调整大小和权重，以区分出版物中使用的多种文本类型，如标题、副标题、标题、正文等。在改变文本的大小和重量时，我们遵循了一种叫做冯·雷托夫效应的理论的发现。这一理论也被称为隔离效应，它预测当存在多个相似的物体时，与其他物体不同的物体更容易被记住。当应用于设计时，其含义很简单，即重要信息应具有视觉上的独特性。然而，纵观其他数字阅读体验，重要文本元素之间的视觉区别比我们自己使用的要多。请考虑以下来自Oxford Academic和开放存取期刊资源Frontiers的示例。金宝搏彩票

在这些例子中，由于使用了不同字体系列的粗体大字体，出版物标题脱颖而出。一些数字出版物更进一步与这种视觉变化。以彭博社（Bloomberg）的以下例子为例，其中重要段落用放大的首字母区分，关键点用斜体大引号表示。

从字体设计的世界中寻找灵感，我们的前进之路将从分析各种出版物类型和检查它们的文本结构开始，以创建这些出版物中存在的所有文本元素类别的清单。最后，我们将在这些不同的文本元素上尝试不同的字体样式，直到我们有一个组织良好的结构和这些元素之间更清晰、更具风格的区别。

图像学

图标是通过插图简洁表达复杂信息的常用方法。对于设计师来说，创建图标是一项更令人愉快的任务，但也是一项更具挑战性的任务。一般来说，图标被用作用户可以在产品中执行的重要信息类别、关键功能和关键操作的视觉标签。这是困难的，因为挑战通常包括在24像素区域内以风格一致的方式可视化非常具体的概念和动作。

在仔细检查了我们产品的构成之后，我们确定了以下类别的图标：帐户、搜索、导航、工具、图像查看器、内容类型和主题。以下是这些类别中图标的几个示例：

帐户

搜索

导航

工具

图像查看器

内容类型

学科

我们收集的内容非常丰富，用户可以通过多种方式与这些内容进行交互。使用图标的目的是帮助用户更容易识别和记住我们产品中的可用内容。

前面是什么

设计系统正在顺利进行，并将继续形成随着时间的推移。在接下来的几个月里，我们将定期设计、测试和迭代新的和现有的组件。我们还将采取措施使用设计系统来改进我们团队的原型工作。正如我们在上一篇文章中所讨论的，我们已经抓住了React JavaScript库的好处，努力改进从设计到开发的转换。我们下一步打算做的是开发一个系统，用我们设计的组件快速原型化。为此，我们设想了一个环境，在需要任何软件开发工作之前，我们可以抓取组件并快速拼凑一个交互式原型与用户进行测试。在设计系统之前，我们主要从零开始构建原型，因此有一个适当的系统来加速这一过程将允许我们在将原型交给开发人员之前尝试更多的设计。

这是一个令人兴奋的挑战，使设计系统的生活在盖尔，我们希望这是一个同样令人兴奋的经验，我们的读者了解更多。接下来，当设计系统完全站起来的时候，金宝搏彩票我们希望能给出另一个更新。同时，密切关注我们的产品，您将亲身体验到我们开始实施的设计变更。