信息架构综合指南

收听本文的音频版本

作为 UX 流程的标准部分，设计师在构建产品时创建信息架构。 定义用户可以通过应用程序或网站采取的每条途径和路径，信息架构不仅仅是一个站点地图，用于显示哪个页面引导到哪里。

类似于建筑建筑师使用蓝图来建造房屋的每个部分，从物理结构到更复杂的内部工作（如电气和管道），信息架构描述了网站或应用程序的层次结构、导航、功能和交互。 正如蓝图是建筑师在建造建筑物时使用的最有价值的文件一样，信息架构也可以成为设计师武器库中最强大的工具。

然而，开发一个功能并不像将功能列表放在一起并绘制出它们的工作原理那么简单——让我们研究一下这个过程。

什么是信息架构，为什么它很重要？

信息架构 (IA) 就像蓝图一样，是产品基础架构、功能和层次结构的可视化表示。 详细程度取决于设计人员，因此 IA 还可能包括导航、应用程序功能和行为、内容和流程。 IA的大小或形状没有设定限制； 尽管如此，它应该包含产品的一般结构，因此任何人（理论上）都应该能够阅读并理解产品的工作原理。

我们将经常使用蓝图参考，因为这两个文档的用途几乎相同。 就像蓝图一样，IA 为设计师（以及产品开发和工程团队）提供了整个产品的鸟瞰图。 拥有一份文档以简单易懂地表示应用程序或网站的工作方式对于开发新功能、更新现有功能以及了解现有产品的可能性至关重要。

有了可用的 IA，为新功能和实施做出关键决策、了解产品更改的时间表以及通过多个流程跟踪用户行为变得非常容易。

让我们深入了解一个基本视频，了解如何构建 IA。

如何设计信息架构

作为 UX 流程的一部分，IA 设计遵循与流程图非常相似的模式：添加形状并以有组织的方式将它们与线条连接到单个文档。 构建 IA 的挑战在于从用户的角度了解您的应用程序或网站实际上是如何工作的，以及如何将这些信息组织成可读、易读的格式。

实际构建 IA 有两个主要要求：通过视觉层次结构（即特征、功能和行为的层次结构）对其进行组织，以及创建用于显示不同类型的特征、交互和流的图例。 对于标准流程图，形状遵循特定要求（矩形是流程，菱形是决策点等）； 但是，遵循该命名法不是必需的。

换句话说，构建 IA 的最重要因素是架构中各个组件的放置位置（分层），以及它们的标记和显示方式。

理解和展示视觉层次

创建新信息架构最具挑战性的方面几乎总是分层构建它。 IA 必须“自上而下”构建是一种常见的误解。 除非它是现有产品，否则几乎总是更难做到，例如上面的视频。

从头开始构建 IA 时，除非您的网站或应用程序遵循标准格式，否则在顶层之后绘制任何内容都非常困难。 这就像要求机械师从上到下而不是零件来制造汽车。 每件作品都必须通过自己的研究、设计和开发时间提前构建。 IA 也是如此。

显示视觉层次结构对 IA 来说是一项宝贵的资产，不仅因为它为读者提供了更好的上下文，而且还概括了产品的关键区域。 如果您的应用程序最重要的功能是可以从主页订购乘车（例如优步或 Lyft），那么该页面将具有最多的接触点和对产品的最大价值。 视觉层次结构也是如此。

站点地图可以方便地理解层次结构，因为它们以数字方式组织页面（例如 1.0 主页、2.0 付款、2.1 添加付款方式等）。 或者考虑下图中杜克大学图书馆网站的示例，其中顶部导航不仅位于顶部，而且突出显示以在整个应用程序中可见。

形状、颜色和其他视觉元素的层次结构

除了层次结构之外，上面的架构还做得很好：它通过一个简单的图例和一些关键短语根据需要唯一地显示每个参与点。 图例表示页面和内容类型，它表示形状颜色之间的变化。 这很重要，因为尽管 Duke 的网站看起来相当简单，但 IA 只深入了三层。 每个黄色矩形表示一个应用程序，因此每个框中的进程不包含在本文档中！

即使没有这些可用的部分，结构也是如此，我们可以理解如何仅通过 IA 浏览网站。 当我们到达网站内的应用程序时，这种情况就停止了——它不必这样做。

下面的 IA 是针对游戏的。 使用四种形状、无颜色和巧妙放置的文本片段，每个主要交互都可以在没有原型的情况下理解，更重要的是，任何参与它的人都可以理解。

这个模型并不完美，但它清晰地组织了应用程序层次结构，并描绘了用户在任何给定点看到或所做的事情。

最佳信息架构工具

有很多软件应用程序允许构建 IA，但很少有软件应用程序足够简单和快速以使体验愉快。 或者至少，易于管理。

上面视频中使用的 Draw.io 完全免费供个人和专业使用，并自动插入 Google Drive。 它还与付费的 Confluence 和 JIRA 集成。 Draw.io 非常适合流程图、创建用户流程和信息架构，并且借助 Drive 功能，多人可以处理同一个文档并实时查看更改。 还有一个免费的离线版本。

Lucidchart 是另一个很棒的工具，它提供了比 Draw.io 稍微好一点的体验，并且具有额外的好处，例如预建模板、更多集成、移动应用程序（在 App Store 上被评为 2.5 星）和对企业的支持。

Omnigraffle 和 Visio 是长期的行业支柱，在构建和维护 IA 设计方面表现出色，尽管 Visio 仅在线（较旧的离线版本仅适用于 Windows），而 Omnigraffle 仅适用于 Mac，需要单独购买 MacOS 和 iOS版本。 与主要竞争对手相比，OmniGraffle 的一个优势在于它提供了 JavaScript 和 AppleScript 自动化，这对于大多数设计师来说可能是不必要的，但通常全职信息架构师会欣赏它。

上面列出的所有工具都是为了速度和易用性而设计的，特别是围绕流程图，它遵循与信息架构几乎相同的原则。 Balsamiq、MindMeister、MindManager 或 XMind 等其他应用程序都提供类似风格的行为，但都是为其他主要目的而构建的，例如原型设计或思维导图。

信息架构最佳实践

虽然对于构成信息架构的内容几乎没有定义规则，但在完成该过程时，请考虑以下事项：

不要关注层次结构，关注结构

层次结构是可调的。 主页将永远是主页，但它指向哪里，用户如何到达这些地方，以及两者之间和之外的一切都是稍后确定的。

所有过程都应该是逻辑的

尽管 UX 流程中的 IA 是用于用户交互的，但每一步都必须有意义。 注册屏幕不应该导致设置，相机功能不应该跳转到地图视图......列表还在继续。

记住用户体验过程

一个常见的错误是只进行IA，没有资源、研究或其他资产或工作。 这就像告诉作者写一本没有大纲的书，或者告诉一个程序员编写一个没有原型的应用程序。

你是制图师

制图师会考虑地图的所有方面，从山脉到州界。 就像地图制作者一样，设计师决定 IA 设计的内容。 单个页面、特定的用户行为、决策点的上下文……等等。

最终，制图师根据用户需求决定地图上的内容。 设计师也是如此，因此为最终用户构建 IA，即产品开发和设计团队。

信息架构不断变化和发展

为了再次深入了解这一点，所有 IA 都是为改变而构建的。 产品不断发展，设计改变，用户适应，循环不断，一遍又一遍。 不要太认真，要知道总会有改进的余地。 不要追求完美； 构建一个简单、适应性强的 IA。

我的信息架构已经完成……现在呢？

任何设计工作都永远不会真正完成，这是一个普遍的概念，信息架构当然就是这种情况。 它们会随着我们的产品而增长、缩小和变化。 与建筑物的蓝图不同，IA 将始终基于从用户需求到新功能或产品大修的任何内容而发展。 大部分结构可能保持不变并提供版本之间的一致性，因此用户不会感到困惑。

这是一件好事。 知道 IA 是一个流动的文档——它可能每周甚至每天都发生变化——是维护你的应用程序或网站的整体结构的有效方法，而无需接触代码或创建新的原型。 整个产品开发团队对 IA了解得越多，每个人就会越快知道什么是可能的，什么是不可能的，以及任何所谓的“简单工作”实际上有多严重。

这给我们带来了信息架构的真正美：没有预定义的起点。 而传统的 UX 设计过程要求 IA 是在完成足够的用户流之后构建的； 凭借大量的用户和竞争性研究，它也可以是第一件事……或最后一件事。 原型制作过程通常会提供有关某些行为或动作应该如何发生的信息，这些信息很难从合乎逻辑或缺乏想象力的 IA 中想象。

作为一种不断发展的实践，IA 设计既是一门艺术，也是一门技能，这也是大公司拥有信息架构师职位的部分原因。 这些设计师是大型系统的守门人，他们对产品随时间增长的理解，有助于推动产品、设计和工程团队在多年内做出正确的决策。 这种组织规模并不适合所有设计师，但每个设计师都可以构建一个简单易懂的信息架构。

• • •

信息架构推荐阅读

面向 Web 及其他领域的 IA

如何理解任何混乱：每个人的信息架构

信息架构基础

信息架构和用户体验设计之间的区别

• • •

进一步阅读 Toptal 设计博客：

• 电子商务用户体验——最佳实践概述（附信息图）
• 以人为本的设计在产品设计中的重要性
• 最佳 UX 设计师作品集——鼓舞人心的案例研究和示例
• 移动界面的启发式原则
• 预期设计：如何创造神奇的用户体验