内容优先原型

内容是数字经济的核心商品。 它是我们打造奢华体验的黄金，是我们在忠诚度计划和追加销售中封装的钻石。 然而，作为设计师，我们经常在事后将其插入。 我们将我们的交互和视觉设计原型化到筋疲力尽，但接受“真实的文字”可以稍后再加入。 有一个更好的办法。

我们创造的数字商品越来越多地在内容、功能、代码和意图的动态系统中运行。 我们的产品和服务漂移并溢出到合作伙伴网站、社交媒体源和无数电子聚合器中，所有这些都在寻求塑造访问者的行为和理解。 系统建立在系统之上，而且，在短时间内，我们拼凑出一个巨大的，其广度令人难以置信。

关于 SmashingMag 的进一步阅读：

• 优化您的设计以进行快速原型测试
• 选择正确的原型设计工具
• 响应式网页设计中的内容原型
• 复活用户界面原型

尽管我们过去很擅长找出简单的系统（想想静态网站和内部网），但事实证明，大型动态系统要复杂得多，而且可预测性也差得多。 随着系统的增长，它们变得指数级地变得更加复杂，并且随着它们的复杂性增加，它们的行为变得越来越非线性，并且对于我们这些可怜的猴子来说，难以预料。 在大型系统中，小数点后第 100 位的舍入误差会从根本上改变结果（Mitchell 33）。 随着互联网接近一万亿个节点，这就是我们现在设计的世界。

然而，我们习惯的那些简单系统可以为设计更复杂的空间提供关键。 正如系统理论家 John Gall 所说，“一个有效的复杂系统总是被发现是从一个有效的简单系统演变而来的。” 在数字设计领域，如果我们确保我们最简单的内容、结构和意义构建动态系统在基础层面按预期工作，那么我们就可以为更大、更复杂的系统奠定基础，这些系统也能按预期工作。

作为设计师，我们可以保持复杂性的一种方法是在一开始就将我们的内容带入原型制作过程。 内容优先的方法鼓励我们更早地面对内容的限制和机会，并在做出重大设计决策之前与真正渴望内容的用户对我们提出的解决方案进行功能测试。

在本文中，我将向您展示如何使用一组简单的开源工具从第一天开始将真实的动态内容引入您的原型制作过程。 这种方法使您可以从项目一开始就关注用户如何理解您的内容，然后在理解的基础上构建结构、视觉和技术元素。

内容的白盒模型

系统研究人员用来理解动态系统行为的工具之一称为“白盒”模型。 系统学者 Gerald Weinberg 写道，虽然黑盒模型的行为是“完全隐藏的”，但白盒模型的行为是“完全揭示的”。 对于复杂的系统，这种透明度很重要：温伯格进一步指出，“即使是最简单的系统有时也会给构建者带来惊喜”（172）。

内容优先原型的目标是为我们的内容、其内部结构及其支持信息架构创建一个白盒模型。 这将使我们能够在设计过程的早期发现我们的最终用户如何从我们的数字系统提供的结构化内容中构建意义。 通过花时间让我们的内容系统的结构在其核心是正确的，我们为这些简单的工作系统集成到更大、更复杂的工作系统奠定了基础。

为了为数字内容创建一个白盒，我们需要考虑三件事：

• 内容本身，由不同粒度级别的内容包组成，具体取决于内容的类型和目的；
• 结构，无论是在本地页面或屏幕级别，还是在全球网站或应用程序级别；
• 用户参与我们的内容最终将被消费的环境和姿势（台式机、平板电脑或手机）。

为了保持“完全可见”，该模型还需要在其功能上保持透明，以便设计团队的成员能够理解模型为何如此行事。 最后一点——透明度与用户参与相结合——对于白盒模型至关重要：我们构建原型不仅仅是为了展示功能，而是根据单词和我们使用的结构是由他们的目标受众解释的。

在为现有内容进行设计时，内容优先的原型制作方法很有用，但它也是让编辑团队参与内容创建过程的好方法。 在项目的早期将真实的文字、图像和资产呈现在用户面前，让每个人都有时间进行微调、调整或调整，以实现项目的目标。 如果您的项目计划是遵循稍后填写的策略，那么内容优先的原型设计让您有机会在用户面前获得一些内容变化——然后在利益相关者面前获得用户的反应。

内容优先的原型框架

考虑到上面描述的原则和目标，我整理了一个用于创建这种原型的入门框架。 本着系统思考本身的精神，这个工具依赖于简单系统的松散耦合，每个系统都能很好地执行简单的主要任务。

对于这个框架，我组装了 Excel、Jekyll、ZURB Foundation 和 Browsersync，并用 Gulp 脚本将它们链接在一起。 我之所以选择这些特定的应用程序和框架，是因为它们广泛可用、开源（大部分）、拥有活跃的支持社区和优秀的文档。

您可以从 GitHub 上的项目页面下载下面讨论的示例项目的副本和内容优先的原型设计框架入门工具包。 让我们来看看这些部分是如何组合在一起的，以及它们各自的作用。

Excel

Excel（或任何保存为 XLSX 格式的电子表格程序）用于创建和编辑结构化内容和分类系统。 每次保存文档时，内容集中的每个包（由电子表格中的一行表示）都会导出为 Jekyll 页面和 JSON 文档。 这允许您对内容执行页面和全局操作，并使用单个“保存”命令将内容更改传播到整个网站。

杰基尔

Jekyll 是一个开源静态网站生成器，用于阐明内容包、页面和类别之间的动态结构。 Jekyll 将您保存在电子表格中的内容表示为变量，并允许您对这些变量执行操作以创建结构。 Jekyll 还提供了“if/then”标签用于应用条件逻辑和for循环和过滤内容集的 for 循环。

基础

ZURB Foundation 是一个开源的移动优先前端框架，用于表达信息层次结构和构建响应行为。 Foundation 的网格、样式定义和响应行为允许您通过将类应用于 HTML 元素来创建几乎任何标准的 Web 布局模式。

浏览器同步

最后，Browsersync 将您的原型提供给浏览器，并在您进行更改时更新 CSS 和页面。 Browsersync 还允许您从连接到同一网络的任何设备访问原型。 这意味着当您在笔记本电脑上进行编辑时，您可以在手机和平​​板电脑上看到自动更新。

将这些工具链接在一起，您可以在类似于构成最终生产环境的动态系统的环境中构建原型，而不必遭受数据库、云服务和网络延迟的影响，这些延迟会在您需要移动时减慢您的速度快速尝试想法。

如果您因为涉及代码而感到恐慌……

不要惊慌。 这些工具对设计师友好，并拥有出色的支持社区。 您无需成为前端开发人员即可将您的想法变为现实。 您确实需要了解 HTML 和 CSS 的基础知识。 这些语言并不难——学习它们不会破坏你做好设计工作的能力。 用字体设计传奇人物 Erik Spiekermann 的话来说，“你必须学习，如果不编码，至少要欣赏代码，理解代码。 因为代码就是一百年前的具体细节。” 开始的最好方法是潜入。

内容优先的原型设计示例：Green Lake 社区中心

为了更好地了解内容优先原型的实际应用情况，让我们从现实世界中收集数字内容。

这是场景。 绿湖社区中心为绿湖社区的社区成员提供课程、计划和活动。 不幸的是，它所有当前的课程、课程和活动信息只能通过 PDF 在线获得，而 PDF 又只能从该中心的固定宽度桌面优化网站获得。 看哪：

为了接触越来越多地尝试通过手机访问课程、课程和活动信息的社区成员，该中心决定推出一个移动优先的课程网站。 这一举措最终将成为全市范围内的公园和娱乐响应网站的催化剂。

与任何其他设计项目一样，我将从启发式和竞争分析开始，并查看可用的流量和用户数据。 如果利益相关者和最终用户有空，我一定会与他们交谈。 一旦我觉得我对网站的目的有了很好的了解，我就会在纸上探索一些基本的高级信息架构和用户界面的想法。

随着初始设计方法开始成形，我可以使用内容优先的原型制作工作流程来获取我的初始想法——更重要的是，这些想法旨在服务的内容——进入它们最终将被使用的上下文中——在这种情况下，浏览器。 让我们详细了解一下这个过程的样子。

捕获内容

在此示例中，您可以看到我在内容优先原型设计框架电子表格中捕获的结构化内容是如何在我每次保存_data文件时自动写入页面模板的。 在这里，我使用“目录”表来构建内容。 “标题”、“描述”、“类别”和“标签”变量已包含在页面模板中，因此这些值会立即更新。 您可以根据需要向内容行添加任意数量的其他列 - 只需确保在模板中包含相应的变量（更多内容见下文）。

“目录”和“提要”表也包含在入门工具包中，并针对其各自的内容类型包括不同的类别（列）。 每个工作表都将内容导出到其自己的文件夹（在这些情况下为“catalogue”、“directory”和“feed”）和其自己的 JSON 文件。 您可以根据需要添加任意数量的其他工作表——只需确保更新您的 Jekyll 配置文件，以便它知道将它们拉入（请参阅“Jekyll 数据页面生成器”插件文档以获取完整详细信息）。

添加更多内容包

当我添加内容包（电子表格中的行）时，新页面会自动添加到原型中。 每行代表一个页面，该行中的每一列代表 Jekyll 在构建页面时填写模板中的一个变量。 在这个例子中，来自“社区中心”目录的内容是相当统一的，但是如果项目描述的长度变化很大，你可以很容易地看到（并体验）这种变化将如何影响页面的布局。 也许您可能会决定以不同的方式对内容进行分块或添加新元素，例如摘要或 slug。

该系统还可以让您轻松地试验标签、类别和标签。 通过更改“类别”列中的值，您可以测试不同的架构方法如何影响用户轻松查找给定内容的能力。 例如，在此示例中，我创建了基于班级类型和参与者年龄组的组织系统。 这使我可以在原型成型时轻松地在菜单和主页上测试不同的导航方法。

使用 HTML 添加结构和层次结构

一旦我对适当的内容感到满意，我将开始将该内容包装在标记中，以便其结构对用户有意义。 将此处的变量视为文本，并像在“平面”HTML 文件中标记文本一样标记它们。 这里的结果应该看起来很可预测（这是一件好事）。

Jekyll 的模板系统将获取您创建的页面模板，并用包含标题和导航图标的全局模板包装它们。 这就是“layout: default”的含义：我们称“default”模板为该模板的包装器。 您可以将模板嵌套到任意深度，尽管通常不需要一层或两层以上的模板。 为了容纳重复的元素，例如页面列表和全局链接，您还可以使用“包含”，它会在呈现网站时在模板中插入一段特定的代码。 查看 Jekyll 的官方文档，了解更多关于模板和包含的信息。

使用 Jekyll 标记添加逻辑

Jekyll 允许您通过包含特定于其模板系统的基本标签来添加基本逻辑。 在这里，我使用for标记循环浏览 Green Lake 社区中心的类列表（它是在我添加上面的多个内容包时创建的），并将列表中的每个社区中心类呈现为链接：

您还可以使用if语句来创建条件。 在这里，我使用if语句来隐藏指向我当前所在的课程页面的链接：

如果你的头刚刚爆炸，请不要惊慌。 添加逻辑是一种高级功能。 如果您坚持使用内容变量和 HTML，您的原型就可以正常工作。 然而，Jekyll 的模板系统非常易于阅读且易于上手。 查看其创建者关于基本作品如何工作的快速介绍。

使用 Foundation 的 CSS 添加样式和响应行为

一旦 HTML 结构的初稿就位，我可以简单地通过包含 CSS 类并保存文档来为原型添加样式。 ZURB Foundation 的前端框架已经链接在入门工具包中，为各种 Web 和原生应用程序模式提供样式类。 在此处显示的示例中，只需放入两个不同的类，我就赋予了我的移动原型更“可点击”的感觉，并引入了更清晰的视觉层次感。 这些更改会自动传播到使用此模板的所有内容。

Foundation 还可以轻松包含移动优先的响应行为并使用数十种预构建的布局、容器和媒体组件。 因为它都是 CSS，所以您可以根据自己的喜好修改和微调所有内容。 对于这些示例，我已将 Foundation 的基本调色板修改为“单色线框”样式，但您可以将 Foundation 调整为您喜欢的任何样式。 通过浏览其文档或教程或参加课程（顺便说一下，这些课程非常好），了解有关使用 Foundation 的更多信息。

尽早获得反馈并随时修改

一旦内容到位，创建和测试结构的多个变体就很容易了。 标签、类别、关键字和其他元数据可以直接在内容电子表格中更改。 同样，页面结构、流程和显示的变化只是创建 Jekyll 模板的替代版本的问题。 当您点击“保存”时，所有这些更改将立即在原型中级联。

为了完成 Green Lake 社区中心原型的第一个版本，我创建了移动主页的三个变体。 在这种情况下，我需要做的就是重新排列主页模板中的元素并交换两个导航元素的数据源（即全角按钮和图像图块）。

尽管我已经按顺序介绍了所有这些步骤，但请记住，每次保存文档时，Gulp（将我们所有简单系统链接在一起的 JavaScript 任务运行程序）都会更新更改。 这意味着您可以随时返回任何步骤，并根据用户响应、利益相关者反馈或有关内容或上下文的新发现进行调整。

这种灵活性使您可以轻松地与用户一起测试不同的屏幕层次结构和内容处理方式——并且它允许您在这些测试中使用真实的内容，即您的观众可以亲身体验（并做出反应）的内容。 因为原型的最终形式是 HTML、CSS 和 JavaScript，所以您可以使用您最熟悉的任何测试工具收集用户反馈（我喜欢 UserTesting 和 Lookback）。

原型的 HTML、CSS 和 JavaScript 格式也意味着您的工作将更容易为并行和后续工作提供信息。 例如，如果您的最终产品将建立在现有的 CMS 平台上，那么您能够阐明的内容、结构和显示要求将帮助您评估 CMS 选项。 同样，您的原型可以作为设计决策的规范文档，涉及前端开发人员的网格、层次结构、标题、链接行为和字体。

但是不要忘记，内容优先原型的目标不仅仅是在浏览器中进行设计：目标是使用浏览器和用户的反馈来微调内容的组织，以便构建简单的运作良好的结构。

此方法的优势在于允许您快速修改您的类别、标签和导航路径创建的系统。 这提供了优于静态内容建模的明显优势。 如果你发现你使用了很多额外的 CSS 来让你的动态内容以你想要的方式工作，那么回到源头。 您可以对内容进行不同的分块以使其更好地工作吗？ 添加（或删除）一组类或标签？ 尝试不同的变化，直到找到简单、优雅的解决方案，让其他一切看起来都到位。

超越网络的系统思考

这里显示的基本示例说明了内容优先的原型设计方法如何帮助我们创建简单的工作内容系统——这些系统反过来为更大、更复杂的工作系统奠定了基础。 内容优先的原型设计帮助我们发现对内容模型、层次结构、类别和标签进行细微调整的地方，可以为用户的信息需求带来更简洁、更优雅的解决方案。

虽然这个工具是建立在网络技术之上的，但我们构建内容以理解的方式超越了单个工具、技术和平台。 如果您的内容以其最基本的形式，去除了特定实现的要求和约束，对受众有意义，并以简单、优雅的方式实现您的沟通目标，那么您已经建立了一个超越单个技术实现的基础。 您构建的内容不需要特定的平台或脚本就可以理解； 它是一个希望以某种方式被理解的内容集。

当我们将内容置于设计过程的核心时，我们开始解决的不是特定的实现，而是理解。 其他一切都是中间步骤。 通过认识到我们设计的最终平台是人类思维，我们可以识别出能够引起理解的简单结构，并可以在整个设计过程中加强这些结构。

参考文献

• 复杂性，导游，梅兰妮米切尔（纽约：牛津，2009）
• 通用系统思维导论，Gerald Weinberg（纽约：Dorset House，1975 年）