的10个用户界面设计的可用性启发由雅各布·尼尔森（Jakob Nielsen）和罗尔夫·莫利奇（Rolf Molich）在26年前创造的，至今仍然适用。2020年，我们开始更新启发式的演示，添加解释、示例和相关链接。这次更新包括制作一套视觉海报。

在本文中，我们将讨论如何使用通常用于UI设计的方法，如线框图，迭代的设计和用户测试，以创建和改进静态工件:10个启发式的海报。

定义我们的设计目标

在设计这套海报时，我们有一个主要的项目目标——改进可读性并添加相关的示例和提示。这两项设计改进的结合旨在使可用性启发式更容易理解和应用。

除了这个目标，我们还创建了3个额外的要求:

1. 设计吸引人的海报，让人们可以展示和参考。和内容一样重要的是海报的视觉设计。如果海报看起来不错，人们会喜欢它们，作为回报，更有可能参考和展示它们(这再次有助于传播和宣传启发式)。
2. 确保海报与广泛的用户体验专家相关。我们希望确保海报不仅能让学生和入门级专业人员受益，还能让经验丰富的UXER受益。
3. 设计海报是一个连贯的集合，而不是单个的工件。由于启发法是要一起使用的原则，我们希望海报也像一套。

这些设计目标和需求成为整个项目决策的参考。当面临任何困境和决定时，我们回顾了目标。我们的建议是，在开始实际的设计工作之前，您总是要留出时间来定义设计目标:它们将使您在以后的工作中保持正轨。有总是设计权衡在任何UX项目中，从最大的应用到一组海报，定义的目标有助于解决这些权衡。

阶段1:低保真线框图

在开始任何线框图之前，我们通过更新过时的语言和删除行话来刷新启发式。我们还为每个启发式的相关例子和快速提示进行了头脑风暴。我们在简单的基于云的电子表格中捕获了这些编辑——这对我们的团队很有用，因为我们都已经可以访问允许实时协作编辑的服务。

一旦内容基本确定下来，我们就开始制作基本的、低保真度的手绘海报。然后我们创造了数字的，仍然非常低保真版本的手绘模型，所有工作与真实的内容。接下来，我们迭代海报的结构(例如，布局、编号或标签系统，以及每个海报如何与其他海报相关联)，并创建多个视觉版本。

例如，在最初的迭代中（上面的第一张海报），标题与相应的图片很接近（遵循接近）．然而，这种布局意味着海报的布局将因启发式而异，从而与我们的要求(设计要有凝聚力)相矛盾。我们选择上面的第二个布局是因为它允许我们在启发式上保持一致;它包括名称、定义、物理示例、移动示例和平板/桌面示例。

这一步非常类似于为网页创建线框。低保真度的迭代线框图让我们可以很容易地考虑多种选择，并选择最符合我们既定目标和用户需求的一个。

阶段2:高保真迭代

一旦我们确定了海报的结构，我们就转向高保真原型。

1.我们对视觉层次进行了迭代。为了实现一个强大的层次结构，我们对标题和正文的字体大小、元素的比例和颜色进行了调整。为了确保注意力被吸引到正确的海报元素上，我们依靠斜视测试：我们往后站，斜视设计，看什么突出。如果我们的眼睛没有被我们希望的元素吸引，we修改了视觉层次结构，直到它是正确的。

2.我们反复使用示例插图。插图很难画对，因为周围的环境(或缺少环境)会影响人们对插图的理解。例如，一张海报显示了一个自然的映射在炉顶控制和加热元件的布置之间。最初的插图是两个对比鲜明的炉灶布局的俯视图。然而，在厨房之外，这幅图本身就很难理解。我们将其更改为一个单一范围的3D绘图。在测试过程中，几乎所有的参与者都很容易识别出这张新图像。

3.我们反复使用调色板。为了限制视觉混乱，我们坚持在一个海报中使用不超过3种颜色的一般规则:一种颜色表示启发式文本的内容，一种作为示例，其他文本如解释或提示。为了避免让海报显得单调，每一张海报都有自己的调色板。除了迭代每个海报的颜色组合，我们还努力确保颜色足够对比在各种光照条件和满足的无障碍指引下。

4.我们用家用打印机打印了这张海报。我们意识到大多数人无法在一张足够大的纸上打印海报，相反，他们会平铺打印它(即，在多张纸上打印它)。所以，我们在家用打印机上打印了海报，作为一种廉价的方式来了解物理制品最终将如何生存。挂起瓷砖印花也为海报的视觉动态带来了清晰度。正是在这种面对面的规模下，我们调整了所有剩余的视觉细节。

我们在这个过程中重复了2-4个步骤。我们不需要再做第1步，因为海报的视觉层次(和布局)是相同的。

阶段3:测试内容和视觉设计

我们进行了两轮测试——一轮用于海报插图，另一轮用于一般海报内容和视觉设计。

1.图解试验。为了测试每个单独的插图，我们创建了谷歌调查，并使用Mechanical Turk招募了15名普通用户。我们让人们告诉我们，他们认为每个插图(没有周围的背景或文本)代表什么。这一步确定了几个需要更容易理解的插图。例如，我们发现海报中用于第一个启发式的商场地图插图需要更多的背景，以便人们理解它是什么。

在与用户体验参与者进行测试之前，我们使用这个测试的结果来改进海报。

2.内容和视觉设计测试．在这一轮中，我们招募了5名UX专业参与者(所有参与者都有不同的文化背景和经验水平)，并要求他们在观看每张海报时大声思考。我们将反馈分为两个主题:视觉风格和内容。根据反馈，我们调整或完全重新设计了海报的各个方面。

这一轮的结果是海报设计发生了更多的变化。例如，许多参与者将其右侧的定义和插图作为一个单元来阅读，而事实上，插图与下面的示例文本相关联。我们模拟了对设计的不同修改，将其展示给参与者，并最终改变了主题或插图的颜色，使其与相应的模糊颜色匹配。

我们流程中的关键收获

以用户为中心的方法，如迭代视觉设计、线框和用户测试，可以应用于许多不同的工件，从静态海报到交互式UI。

海报视觉设计的迭代方法让我们能够:

• 探索不同的视觉选择和布局，而不必在第一次就做出正确的设计。在整个过程中，我们不断改变设计，直到最后，在测试了无数次设计后，我们才将海报的像素化。
• 抓住小问题和未解决的问题。这些视觉细节确实会影响整体体验和用户的第一反应。

你可以在下面的下载链接上看到我们的最终海报。