图形设计的叙事

让我先为你设定一下场景：我们将从 Sketch 文件中获取一个生产 UI 部分，将其分解成信息片段，然后将其构建成一个我们与朋友分享的故事。我们的朋友可能在听、看或触摸这个故事，所以我们将为不同的人解读和翻译相同的信息。我们将解读颜色、排版甚至尺寸，并以不同的方式表达它们。而且我们真的希望每个人都能关注。这个故事不能枯燥乏味或令人沮丧；它必须易于遵循、理解和记忆。而且它必须，*必须*，从头到尾都有意义。

我请我的同事 Katie 选择她在 Sketch 中设计的一个组件。我将逐步进行标记（我们主要使用 SCSS、Twig 和 Craft，但模板语言并不重要），然后她会简要地回复。希望我能正确理解大部分内容，然后一两处出错，这样我们就可以看看在移交过程中哪些内容会丢失。

在白标或框架类型的前端中，重点在于构建尽可能灵活和适应性强的组件，以及尽可能与内容和样式无关（在产品范围内），因为你根本无法知道代码最终将用于何处以及用于何种目的。但最近我加入了一家网页设计公司，其重点完全相反。它是特别的。它是定制的。一切都与你所拥有的特定客户以及*他们*所拥有的特定客户深度互动，并设计出适合他们的东西，就像裁缝一样。

与像 Katie 这样的图形设计师紧密合作，使用高度精细的像素间距 UI，而不是直接从线框图或故事开始，这是一个调整和学习的过程，但我仍然可以贡献很多东西。主要是：**文档设计**。

文档设计，诚然只是戴着辅助功能帽子的旧语义网，实际上是在观察图形设计，将其作为一种沟通系统，并将颜色/字体/布局的底层目的转换为可访问、可线性化和可遍历的 DOM。孩子们，这是 HTML。这只是 HTML。你以为我们现在都应该知道了……但看看你周围。你会发现你错了！

Katie 给了我一个充满了画板的 Sketch 文件，而且她非常擅长写出她的想法，所以我不用想太多。

首先，我浏览整个 UI 文件，并找出在这个网站上什么是卡片——事实证明，有六七个组件使用了这种范式。让我们做一些观察。

• 卡片是关于网站上某个页面的元数据块。
• 它包含图像/媒体和元数据——它是一个媒体对象。
• 它显示在一个对象组中。
• 该组始终是类型化的（没有视图显示搜索结果、新闻文章和课程全部混合在一起）。
• 每个对象都只有一个指向页面的链接，没有其他操作。
• 每个对象都有一个号召性用语（预订等）。
• 每个对象可能包含时间、类别、徽章和号召性用语。
• 每个对象必须包含媒体、标题和链接。

因此，卡片是我用户浏览此网站的主要方式。他们将通过引导路径点击，在这些路径中，他们会获得一组可供选择的卡片，这些卡片基于“正在进行的活动”或“课程”等顶级页面。他们不会在此卡片上获得选项。它并不是一个真正的交互式元素——它是一个指南，一个索引卡，引导用户进入他们的路径：在本例中，是一个购买路径，用户可以在其中预订该艺术中心的演出门票。

在继续之前，让我先为你设定一下场景。

想象一下，你在看一场演出的传单，并在电话中讨论它。如果你真的想在现实生活中去看这场演出。你会怎么做？你不会只是把传单读出来，对吧？那是文本。如果你从最上面开始逐字阅读，它上面可能会有各种各样的随机内容。你不会以“二十世纪福克斯”或“购买热狗送可乐”或“喜剧戏剧音乐合家欢”开头。（如果你真的这么做了，我可能会挂断你的电话！）你也不会仅仅描述颜色或字体。那是 CSS。你会*通读*传单上的信息。你会说，“是《马戏之王》，星期二晚上7:30开始。在牛津街的奥德恩剧院，电车站旁边。”对吧？

这就是文档。记住电话那头的人。

计数、分组和命名

所以假设我们将卡片作为列表项的内部内容传递。我们想要一个组，并且该组应该是可计数的。我们已经用<h1>命名了页面，所以我们将用标题<h2>来介绍和描述该组。我们将先命名它，然后传递它，以便使用屏幕阅读器的人可以

1. 获得标题概述中指示的列表。
2. 提前获取页面上项目数量的计数。
3. 知道他们可以跳到下一个列表项以获取下一张卡片。
4. 知道他们可以在任何时候跳过该组并转到下一页——分页是紧随其后的下一个元素，并且将被标记为一个路标。

查看 CodePen 上 limograf (@Sally_McGrath) 编写的
作为可计数列表传递的卡片，并带有描述性标题。
在 CodePen 上。

锚点

在本例中，我将把整个卡片包装在一个锚元素（<a>）中。卡片上只有一个链接，我想*预先加载*该信息，以便用户在知道它是正确的卡片后*立即*点击，而不是必须向前搜索操作。较大的可点击区域也很好，当然，这可能会过头，使界面变成一种陷阱！但这些卡片并不太大，我可以看到它们周围有很好的间距，因此有一个休息空间，可以减少操作灵活性有限的用户意外点击的情况。

标题

然后我们将降低一个标题级别，并将每个演出的名称标记为标题<h3>。设计师已将此字体设置为焦点，我们也将这样做。有些人通过跳到下一个标题、再到下一个标题来超快速浏览，因此我不会在标题之前放置任何重要信息——他们会直接跳过它。不过，我会将图像放在那里，因为我知道在本例中，我无法从 API 获取 有意义的图像描述，因此这些图像被隐藏并具有空 alt 属性。现在，用户可以猜测（在我的情况下是正确的）开发人员实际上以某种有意义的方式描述了内容，并且可能会翻回标题概述（列表标题级别 3），并只获得演出列表。

现在让我们传递我们的元数据。让我们列出它。

• 徽章
• 日期/时间
• 类别

徽章

这似乎是场地添加到卡片以突出显示它的内容。作为开发人员，我无法立即看出用户为什么要寻找它，但设计师对其进行了重点强调，因此我将确保它保留下来。Katie 已将徽章移出了流程，但我知道通过标题跳转，我们的用户可能会错过它。所以我想我会直接将措辞放在标题之后。我会将其放在开头或结尾，以便在非视觉浏览中更容易考虑，并且在选项卡式视觉浏览中不会过于 疯狂铺设。

<p class="c-card__badge"><abbr title="Harrow Arts Centre">HAC</abbr> Highlight.</p>

……但再仔细想想，我不会使用<abbr>。它是品牌颜色，因此实际上是该场地所有权的声明，而且我们现在已经说了很多次 HAC，所以用户知道他们在哪里。

<p class="c-card__badge">HAC Highlight </p>

查看 CodePen 上 limograf (@Sally_McGrath) 编写的
徽章。
在 CodePen 上。

日期/时间

现在日期和时间。Katie 通过将日期样式设置为粗体来提醒我这个决策点。日期很重要。我打算把它放在一个<h4>中，因为我认为有人可能会快速浏览一页事件，例如寻找午场演出，或者寻找在特定日期发布的新闻文章。我并不总是将日期放入标题中，尤其是在一页上有数百万个日期时，但我始终确保它们位于一个带有完整值的<time>元素中，以便Katie 指定的<time>Thu</time>或<time>Mon</time>被读作可理解的英文单词“星期四”，而不是乱码。我也可以使用隐藏的完整值或带有标题的<abbr>。

类别/标签

接下来是类别，我将它们放在徽章和日期之后。此部分在视觉顺序上从上到下、从左到右排列，当然，但它似乎也被降级了：它在左侧被向下推，字体也更小。这适用于我们的线性叙事。通常，我们不希望用户为了获得唯一或更具体的内容（周一、周二、周三）而浏览重复或更通用的内容（电影、电影、电影）。请记住，我们身处卡片内部：我们知道它已经在几个通用方面进行了排序（新闻、节目、课程等），因此它可能包含许多重复的部分。如果可以，我们希望确保用户能够从具体到一般地浏览。

有一个主要类别首先排序，然后有时还有一些其他类别。我不会将其作为可计数列表提供，因为大多数情况下只有一个类别，而大量只有一个项目的列表并没有多大用处。但我会事先添加一个小标签，因为否则它会显得有点难以理解。运动！口语！（我的意思是，你可以追溯地理解它，但我们总是尝试先命名事物，然后按线性顺序显示它们。这可不是记忆碎片。）我以前经常使用title=""，但收到了关于工具提示的投诉，所以我绕过了它。请注意使用冒号或句号来为我们提供一个“呼吸”。这是一个不错的润色。

<p class="c-card__tags h-text--label>
  <span class="h-accessibility">Categories: </span>
{% for category in categories.all() %}
  <span class="c-card__tag c-tag">{{category}}{% if not loop.last %} / {% endif %}</span>
{% endfor %}</p>

此外，我还硬编码了空格，以确保即使在管道中某个位置启用了文本压缩或无空格渲染，类别也不会合并成完全的乱码。（这在屏幕阅读器和跨度中可能会发生，这相当令人担忧！）

设计中有一部分我将在 CSS 中完成，但尚未真正将其纳入文档设计：主要类别的颜色编码。我没有向读者描述颜色，因为它看起来是任意的，没有表现力。如果颜色编码除了标记类别之外还有一些隐含的元素（例如，园艺课程为绿色），那么我可能会将其传达出来，但在这种情况下，它是一个非语言键，用于表示一个类别，因此我们不希望它出现在我们的语言键中。

我将主要类别排序到类别段落的前面，但没有将其标记为主类别。这是因为在此列表之前有一个排序过滤器，该过滤器按主要类别排序，我推测从该下拉列表中选择一个类别比阅读每一张卡片上显示的“类别 主要类别 音乐 次要类别 舞蹈”更容易且更不烦人。我可能错了！在有用和过度标记之间取得平衡有时有点棘手。您必须考虑页面上下文。我们可能正在构建组件，但我们的用户是在页面上。

查看 CodePen
页面上下文中的虚拟数据，作者是 limograf (@Sally_McGrath)
在 CodePen 上。

操作

最后，是操作。对用户的指示，例如“预订”或“了解更多”或其他任何指示，都已设置为按钮的样式。它实际上并不是一个按钮，而只是一个指示，因此在这种情况下，我将其标记为一个跨度。我绝对希望它在线性文档中最后出现。它是一个号召性用语，也是一个表明我们已到达此卡片末尾的信号。操作在两种情况下都是退出点：如果用户执行操作，我们转到目标条目；如果他们不执行操作，我们转到下一张卡片。我们绝对不希望在操作之后出现任何数据，因为他们可能已经离开了。

查看 CodePen
卡片，作者是 limograf (@Sally_McGrath)
在 CodePen 上。

我的结论

此标记通过对数据进行计数、分组和命名，实现了线性和非线性交互。如果您从上到下阅读页面，则页面有意义，如果在上下文中阅读部分内容，则页面也有意义，并且可以帮助您随意跳转。

Katie，轮到你了……

多么棒的文章！非常有趣。（我特别喜欢卡片上的“Mon”、“Tue”等被读作“星期一”、“星期二”……很聪明！）

我注意到的一件事是，使用辅助技术意味着用户会按照我们设定的“固定”顺序获取信息。因此，除非有过滤器，否则例如浏览舞蹈活动的某个人必须浏览标题、徽章、日期，以及可能还有几个其他类别，才能确定某个活动是否适合他们。有点乏味。但这并不是你做错了什么——只是互联网的工作方式。我将来需要考虑一下。

我们的大多数客户都是艺术和文化场所，需要为活动售票，因此我设计了很多事件卡片。它们是我设计网站时最先处理的事情之一。（甚至在确定网站其余部分的类型层次结构之前。）

从视觉上思考，以下是我对事件卡片的一般惯例的描述

• 它必须看起来像一个列表——这样人们才能理解如何使用它。
• 它需要提供足够的信息，让人们决定自己是否感兴趣。（最低限度信息可能是图像、标题、日期和链接。）
• 它需要包含一个清晰的号召性用语——通常是一个了解更多信息的链接。
• 它需要易于视觉扫描。

使信息在视觉上易于扫描是一个非常简单的案例，即确保每种信息类型（例如图像、标题、日期、类别、链接）都位于每张卡片上的相同位置，并遵循清晰的层次结构。

我的工作本来就非常注重排版，但很明显：标题的样式使其非常突出；日期的样式彼此相同，但与标题不同；类别的外观再次不同——这样人们就可以轻松地从简单地扫描页面中挑选出他们感兴趣的信息。我正在为用户创作卡片，说：“嘿，看看事件名称，这是事件时间——以及您去哪里获取门票！”

类型样式——尤其是它们之间的间距——起着很大的作用，因此我在这里指出代码示例中的间距并不完全正确

这一点很重要。用户需要能够快速扫描信息，因为他们并非都在寻找相同的信息，以便做出参加活动的决定。元素之间过大或过小的空间可能会分散注意力。

完美！

有些人只是想大致了解一下他们当地场馆即将举办的活动。另一些人可能在广告中看到了一场让他们感兴趣的特定演出，并希望购买门票。有些人喜欢音乐，但不喜欢戏剧，他们只想要一份演出清单；仅此而已。还有一些人在周末想出去玩，但并不太在乎去哪里玩。因此，我设计卡片使其易于扫描——因为大多数用户根本不会从上到下阅读。

尽管我刚刚列出了这些惯例，但卡片在不同的项目中肯定看起来并不完全相同——或者以相同的方式工作。

在网页设计中，始终存在着在使界面对用户熟悉和对客户具有独创性之间取得平衡的张力。自定义字体和调色板在这里发挥了很大的作用，但另一部分是通过发现。

我会花时间了解客户，包括他们的受众是谁，阅读他们在评论网站和社交媒体上的言论，以及直接与客户合作。倾听人们如何描述他们的工作以及他们从受众/用户那里获得的反馈，通常会发现一些有趣的细微之处，这些细微之处会影响设计。开发人员通常不会过多地参与发现，这是我想改变的事情，但目前，我需要向 Sally 清楚地说明每个新项目中此事件卡片的特别之处。我在 Sketch 文件中写了很多很多（很多）笔记，但发现它们很容易丢失，因此有时我们会使用电子表格来定义特定的功能。

查看 CodePen
页面上下文中提取自生产环境的卡片，作者 limograf (@Sally_McGrath)
在 CodePen 上。