信息架构综合指南 _原型设计

本文概述

什么是信息架构？为什么重要？
如何设计信息架构
了解和显示视觉层次结构
形状, 颜色和其他视觉元素的层次结构
最好的信息架构工具
信息架构最佳实践
我的信息体系结构完成了……现在呢？

听本文的音频版本
作为UX流程的标准部分, 设计人员在构建产品时会创建信息体系结构。信息体系结构定义了用户可以通过应用程序或网站使用的每条途径和路径, 而不仅仅是显示可以将页面引向何处的站点地图。
类似于使用蓝图来构建房屋的每个部分的建筑设计师, 从物理结构到更复杂的内部工作(如电气和管道工程), 信息体系结构都描述了网站或应用程序的层次结构, 导航, 功能以及交互。就像蓝图是建筑师在建筑物建造中使用的最有价值的文件一样, 信息体系结构也可以成为设计师库中最强大的工具。
但是, 开发功能并不像将功能列表放在一起并规划它们的工作原理那样简单, 让我们来研究一下过程。
什么是信息架构？为什么重要？信息架构(IA)就像蓝图一样, 是产品基础结构, 功能和层次结构的直观表示。详细程度取决于设计人员, 因此IA也可能包括导航, 应用程序功能和行为, 内容以及流程。 IA的大小或形状没有设定的限制。但是, 它应该包含产品的通用结构, 因此任何人(理论上)都应该能够阅读并理解产品的工作原理。
我们经常使用蓝图参考, 因为两个文档的目的几乎相同。就像蓝图一样, IA为设计师(以及产品开发和工程团队)提供了整个产品的鸟瞰图。对于开发新功能, 更新现有功能以及了解考虑使用现有产品可能实现的功能, 拥有一个单一的文档以简单易懂的方式表示应用程序或网站的工作方式至关重要。
有了IA, 就可以轻松地为新功能和实现制定关键决策, 了解产品变更时间表并通过多个流程来跟踪用户的行为。
让我们看一个基本的视频, 看看IA是如何构建的。

如何设计信息架构作为UX过程的一部分, IA设计遵循与流程图非常相似的模式：添加形状并将它们与线以有组织的方式连接到单个文档。建立IA时面临的挑战是从用户的角度了解你的应用或网站的实际工作方式, 以及如何将这些信息组织为可读易懂的格式。
实际构建IA有两个主要要求：通过可视层次结构(即功能, 功能和行为的层次结构)进行组织, 以及创建图例以显示不同类型的功能, 交互和流程。在标准流程图中, 形状遵循特定要求(矩形是过程, 菱形是决策点等)；但是, 无需遵循该命名法。
换句话说, 构建IA的最重要因素是架构的各个组件的放置位置(层次结构)以及它们的标记和显示方式。

文章图片
Yegor Mytrofanov的信息架构
了解和显示视觉层次结构创建新的信息体系结构最具挑战性的方面几乎总是分层构建。一个普遍的误解是, IA必须” 自上而下” 构建。除非它是现有产品, 否则几乎总是很难做到, 例如上面的视频。
从头开始构建IA时, 除非你的网站或应用程序遵循标准格式, 否则在顶层之后绘制任何内容都是非常困难的。这就像要求技工从上到下而不是零件制造汽车。每件作品都必须事先进行自己的研究, 设计和开发的时间来构造。 IA也是如此。

文章图片
杜克大学网站的结构非常简单：首页显示了全球导航链接以及内容, 每个全局链接都指向相对地位的各种页面。
形状, 颜色和其他视觉元素的层次结构除了层次结构之外, 上面的体系结构还可以做得很好：通过简单的图例和一些关键短语, 根据需要唯一显示每个参与点。图例表示页面和内容类型, 并表示形状颜色之间的变化。这很重要, 因为尽管Duke的网站看起来相当简单, 但IA仅深入了三个层次。每个黄色矩形表示一个应用程序, 因此本文档中未包含这些框中的每个过程！
即使没有那些可用的部分, 结构也是如此, 我们可以了解如何仅通过IA导航网站。当我们到达网站中的某个应用程序时, 该操作便会停止, 而不必这样做。
以下IA用于游戏。使用四种形状(无颜色)和巧妙放置的文本片段, 无需原型即可理解每个主要交互, 而且更重要的是, 任何从事此交互的人都可以理解。

文章图片
学生IA-Queendy Chan
【信息架构综合指南】这个模型并不完美, 但是可以清晰地组织应用程序的层次结构, 并描述用户在任何给定时间点所看到或所做的事情。
最好的信息架构工具有许多软件应用程序可用于构建IA, 但是很少有足够简单和快速的程序可以使体验愉快。或者至少是易于管理。
上面的视频中使用的Draw.io完全免费供个人和专业使用, 并会自动插入Google云端硬盘。它还与Confluence和JIRA集成, 需要付费。 Draw.io非常适合用于流程图, 创建用户流和信息体系结构, 并且借助Drive功能, 多个人可以处理同一文档并实时查看更改。还有一个免费的离线版本。
Lucidchart是另一个很棒的工具, 它提供了比Draw.io更好的体验, 并具有其他优点, 例如预构建的模板, 更多的集成, 移动应用程序(在App Store上被评为2.5星), 以及对企业的支持。

文章图片
Draw.io是一个免费的在线工具, 用于创建流程图, 图表, 信息体系结构等。
Omnigraffle和Visio是长期的行业支柱, 并且在构建和维护IA设计方面表现出色, 尽管Visio仅在线(旧的脱机版本仅Windows), 而Omnigraffle仅Mac且需要单独购买MacOS和iOS版本。 OmniGraffle提供了JavaScript和AppleScript自动化, 因此与主要竞争对手相比有一个好处, 对于大多数设计人员而言, 它们可能是不必要的, 但是通常, 专职信息架构师会喜欢它。
上面列出的所有工具都是为了提高速度和易于使用而制作的, 尤其是围绕流程图, 遵循与信息体系结构几乎相同的原理。 Balsamiq, MindMeister, MindManager或XMind等其他应用程序都提供类似的行为, 但它们是为其他主要目的而构建的, 例如原型设计或思维导图。
信息架构最佳实践虽然几乎没有定义什么构成信息体系结构的规则, 但是在进行此过程时, 请考虑以下几点：
不要专注于层次结构, 专注于结构
层次结构是可调的。主页将始终是主页, 但是稍后将确定其指向何处, 用户如何到达这些地方以及之间的所有内容。
所有过程均应符合逻辑
即使UX流程中的IA是用于用户交互的, 但方法的每一步都必须有意义。注册屏幕不应引导设置, 摄像机功能不应跳转至地图视图…列表将继续。
记住UX过程
一个常见的错误是仅在没有资源, 研究或其他资产或工作的情况下进行IA。就像告诉作者写没有大纲的书, 或者告诉程序员编写没有原型的应用程序一样。
你是制图师
制图师考虑到了从山脉到州界的所有地图内容。就像地图制作者一样, 设计师可以确定IA设计的内容。各个页面, 特定的用户行为, 决策点的上下文等等。
最终, 制图人员根据用户需求决定在地图上显示的内容。对于设计师来说也是如此, 因此为最终用户(即产品开发和设计团队)构建IA。
信息架构日新月异
为了再次说明问题, 所有IA都为更改而构建。产品不断发展, 设计不断变化, 用户不断适应, 并且循环不断重复。不要太当真, 要知道总会有改进的空间。不要追求完美；建立一个简单, 适应性强的IA。
我的信息体系结构完成了……现在呢？普遍的观念是, 任何设计工作都不会真正完成, 信息体系结构当然就是这种情况。它们随着我们的产品而增长, 收缩和变化。与建筑物的蓝图不同, IA始终会根据从用户需求到新功能或产品检修的任何内容而发展。许多结构可能保持不变, 并在各个版本之间保持一致性, 因此用户不会感到困惑。
那是一件好事。知道IA是一个不稳定的文档(一个文档可能每周甚至有时每天更改), 是一种无需更改代码或创建新原型即可维护应用或网站总体结构的有效方法。整个产品开发团队对IA的了解越多, 每个人就会越快知道可能和不可能的事, 以及所谓的” 轻松工作” 的严重程度。
这带给我们信息架构的真正美：没有预定义的起点。传统的UX设计过程要求IA是在完成足够的用户流之后构建的；拥有大量用户和竞争研究能力, 这可能是第一件事……或最后一件事情。原型制作过程通常会提供有关某些行为或动作应如何发生的信息, 而这是很难从逻辑或非想象的IA来想象的。
作为不断发展的实践, IA设计既是一门艺术, 又是一种技巧, 这也是为什么大公司拥有信息架构师职位的部分原因。这些设计师是大型系统的守门员, 他们随着时间的推移对产品增长的了解, 可以帮助推动产品, 设计和工程团队在多年的时间内做出正确的决定。这样的组织规模并不适合所有设计师, 但每个设计师都可以构建简单易懂的信息架构。
? ? ?
关于信息架构的推荐阅读
IA超越互联网
如何理解任何混乱：适合所有人的信息体系结构
信息架构基础
信息架构与UX设计之间的区别
? ? ?
在srcmini设计博客上进一步阅读：