为什么要进行信息架构设计，以及如何进行用户体验设计？

从用户体验设计的五个层次来看，结构层和框架层是交互设计师设计的核心领域：

▲图1 用户体验设计各角色分工

框架层呈现各个界面中文字、图片、按钮、控件等元素的具体内容、位置和关系，包括界面布局、导航设计和信息设计。 结构层决定了每个界面应该有哪些文字、图片、按钮和控制元素，以及这些元素交互前后的逻辑对应关系。 如果框架是一张脸，那么结构就是一张脸+脸串联而成的关系网络。

对于交互设计师来说，信息架构设计是每个交互设计师必须掌握的基本技能。 那么信息架构设计到底是什么？ 为什么要进行信息架构设计，如何进行信息架构设计？ 让我们一一看看。

1.什么| 什么是信息架构？ 一、信息架构的起源

信息架构（ ），简称IA。

1976年， S. 在担任美国建筑师学会主席时创造了“信息建筑”一词，以应对当代社会信息的不断增长和爆炸。 “他作为建筑师、绘图员、平面设计师、企业家、出版商和作家的所有培训本质上都是为了培养人才，”她的妻子说。 信息变得清晰易懂。”

“信息架构”是一种澄清问题的方法。

2.信息架构的定义

IA的主要对象是信息，信息架构师设计结构、确定组织方法、分类以便用户方便地查找和管理，是一门艺术和科学。

不同的组织对信息架构有不同的定义：

▲图2《信息架构》一书中的定义

在《信息架构——超越Web设计》一书中，信息架构的定义如下：

我很同意上面的定义，但是对于设计师来说，这个定义比较复杂，很难记住，所以我结合自己的经验给出了自己对信息架构的理解：

▲图3 悦姐对信息架构的理解

信息架构=信息+架构。

信息包括各种文字、图片、音视频等元素； 该架构对应于这些元素的选择、分类、导航和检索。

通俗地说，信息架构就是通过各种信息元素的合理组织和表达，使用户更容易获取和理解信息。 在信息与用户认知之间架起一座顺畅的桥梁。

2. 为什么 | 为什么要进行信息架构设计？ 1、信息爆炸

60年来，人类社会的数据经历了爆炸式的增长。

▲图4 信息爆炸的速度

2008年，人类创造了大约10亿张DVD数据，相当于过去5000年人类创造的数据总量。

Web 2.0的UGC时代之后，短视频爆发，数据呈爆炸式增长。

回到产品，不同的业务部门/产品经理有不同的KPI，大家都在努力在产品上占有一席之地。 毕竟，有入口才有流量，否则整个业务/产品/功能可能无法被用户感知。 那么他们的目标就无法实现。

2. 人类生理限制

在信息爆炸的时代，人类进化的速度缓慢。 我们现在的大脑与250万年前的原始人类没有太大区别。

▲图5 人体生理限制

我们的大脑每秒接收大约 4000 万个感觉信息输入，但意识一次只能注意到其中大约 40 个，其中只有 4±1 个可以被短期工作记忆处理。 （可以看左边的视频感受一下意识的局限性）

正是由于现代信息数据的爆炸式增长、大多数产品的结构日益臃肿以及人类处理能力的有限，使得信息呈现什么、以什么形式呈现的信息架构设计就显得非常重要。

▲图6 不同信息架构示意图

作为设计师，我们有必要根据用户的行为和特点，结合信息环境，选择合适的信息，并以合适的方式组织和呈现，让用户更容易获取和理解信息，完成信息的组织和沟通。 。

3.如何| 如何设计信息架构？

本章我们首先了解构建信息架构的三种方式，然后学习信息架构的四种常见类型，然后学习信息架构的设计逻辑流程，最后给大家一个非常小的设计案例来帮助大家理解。

1、如何构建信息架构

构建信息架构有自上而下、自下而上和综合应用三种方式。

▲图7 如何构建信息架构

1）自上而下的构建方法

自上而下的构建方法是由战略层驱动的。 它直接根据产品目标和用户需求进行结构设计，在规划新产品或重新定义产品时使用。

▲图8 自上而下的施工方法

自上而下的构建方法会首先从最有可能达到目标的最广泛的内容和功能开始，然后根据逻辑细分子类别。 （MVP设计思路）所有类别都是空槽，最后按顺序填充内容和功能。 它有一个明显的缺点：可能会导致现有的重要内容被忽略。

2）自下而上的构建方法

自下而上的构建方法由范围层驱动，在分析现有内容和功能需求的基础上进行设计。 这是项目实践中最常用的方法。

▲图9 自下而上的构建方法

在具体项目的实践中，产品或者设计师根据对现有内容和功能需求的分析，将其归入更高级别的类别，从而逐步构建反映我们产品目标和用户需求的结构。 （常用作卡片分类方式）它也有一个缺点：可能不灵活，无法兼容未来的内容更改或添加。

3）综合应用施工方法

正是因为自上而下和自下而上都有其明显的缺点，理想的信息架构构建方法是综合性的，从战略层和范围层驱动，构建一个适应性强的系统。 。

▲图10 综合应用施工方法

适应性强的信息架构系统可以容纳新内容作为现有结构的一部分（图左侧），或者添加新内容作为完整的部分（图右侧）。

信息架构的基本单元是节点。 节点可以对应于任何信息元素或信息元素的组合。 它可以小到字段/控件，也可以大到接口/功能。 不同场景下，节点的粒度是不同的。

这些节点的排列方式有4种常见类型，也就是我们所说的信息架构类型。 大家在进行具体设计时可以参考。

2. 信息架构的类型

信息架构有四种常见类型，层次结构、矩阵结构、自然结构和线性结构：

▲图11 信息架构类型

1）层次结构

也称为树形结构或轮辐结构。

▲图12 层次结构

层次结构中的节点与其他相关节点之间存在父子关系。 每个节点都有一个父节点（不一定是子节点），最顶层的父节点称为根节点。

层次结构的优点是：结构清晰，关系清晰，具有一定的冗余性和可扩展性。 缺点是：改变父结构必然影响其所有子结构； 层次结构适用场景广泛。 可以说是互联网产品最常见的结构。 它既可用于主产品，也可用于子模块。

▲图13 层次结构示例

例如美图秀秀底部的选项卡形式、首页的网格形式、设置的列表形式、官网类别的导航栏形式等都是层次结构的应用。

2）矩阵结构

矩阵结构允许用户沿着两个/多个维度在节点之间移动，最终帮助用户找到他们想要的信息。

▲图14矩阵结构

矩阵结构的优点是支持从多个维度访问同一内容，也可以从同一内容了解多维度信息。 获取信息既快捷又丰富。 缺点是内容信息较复杂，学习成本较高。 矩阵结构适合高频函数/信息，需要全局考虑。

▲图15 矩阵结构全局图

比如微信的核心对话功能是社交的核心，需要多维度的无障碍。 因此，微信设计了多个入口，比如最近记录、通讯录、朋友圈头像等。

▲图16 矩阵结构部分图

例如大众点评的美食列表中，不同的用户对美食的核心诉求不同，因此大众点评提供了多种过滤和排序的方式，方便用户快速找到符合自己需求的美食，也可以在整个美食中找到美食。基于特定食品协会的类别。

3）自然结构

自然结构不遵循任何一致的模式。 节点一一连接，节点之间有连接，但没有分类。

▲图17自然结构

自然结构的优点是：自然流畅，接近现实认知。 缺点是：随机性、用户不可控、再次查找困难。 通常在子模块中用于探索一系列关系不明确或不断演变的内容。

▲图18 自然结构案例示意图

例如，在每个产品的推荐模块中，推荐内容之间没有明确的归属或分类关系。

4）线性结构

在线性结构中，用户无法跳跃，只能按顺序逐步浏览相应的信息。

▲图19线性结构

线下传统媒体：书籍、文章、影视等都是线性结构。 其优点是：易于理解、操作简单。 缺点是：可扩展性有限，用户控制能力差。 常用于小节点，如新功能引导、H5活动等。

▲图20线性结构案例图

除了H5活动和新手引导之外，很多教育产品通常都会采用线性结构，以保证学习难度的不断增加。

3. 信息架构的组织逻辑和呈现

以前面的构建方法和信息架构类型为指导思想，结合我们的设计分析，可以帮助我们梳理出特定结构的信息架构和任务流程，并以观众容易理解的方式呈现出来。

▲图21 信息架构梳理流程

在梳理过程中，我们根据业务方在范围层提供的信息范围，通过竞品分析（了解竞品的组织体系、标签体系、导航体系、搜索体系规则），结合现有信息这个产品的架构数据表现（了解用户在我们产品中的行为偏好），结合用户研究（通过用户问卷或卡片分类，了解用户对信息进行分类和组织的心理模型），最后使用逻辑推理，我们可以梳理出适合我们产品信息架构和任务流程的解决方案。

因此，在实际项目中构建信息架构不仅仅是简单地将产品提供的功能和内容进行分类和分组。 还需要考虑其自上而下的可扩展性，将重要节点过滤/补充到信息架构中。 还要考虑它的命名（标签系统）是否容易被用户理解。

然后把所有信息按照一个或多个具体维度（组织体系）进行分类和组织，最后考虑如何呈现、表达给大家，让大家更容易理解。

严格来说，信息架构并没有标准的表达模型。 在《信息架构——超越Web设计》一书中，列出了信息架构的多种表达方式。 只要能清晰地传达给观众，任何表达形式都可以。 的。

▲图22 信息架构表达

在互联网项目中，最常用的形式包括：信息架构图和逻辑流程图。

▲图23 信息架构的常见表现形式

就像交互设计原型一样，重点不在于这张图的形式（技术层面任何人都可以画出这种图），而是这张图背后的组织系统、标签系统、导航系统、搜索系统。

1）组织体系：选择合适的维度和结构

组织体系：应该用什么维度来分类和组织这些信息？ 我就以我曾经做过的组件分享为例。 官网提供的组件如下图：

▲图23MD的部件

在组织过程中，我将其信息架构分为3大类8小类：

▲图23MD的部件

但分类方式肯定不止一种。 大家在学习的时候，可以根据自己的组织体系进行分类整理。

以新闻呈现为例，可以按照时间维度分类，可以按照主题维度分类，可以按照媒体维度分类，可以按照视频、图形的表现层分类和文本。 依据什么？ 维度应该划分为单一类别还是划分为矩阵类别，这是您的组织系统需要解决的问题。

2）标签系统：选择合适的语言和图像

通俗地说，标签系统要求我们对整个系统当前的信息节点进行命名，让信息的呈现更容易识别，包括文本标签和图像标签。

比如我分类的列、控件和视图，用户是否习惯这种分类方式，以及我选择的图标是否能够准确表达文本标签的含义。

3）导航系统：选择合适的导航结构

导航系统的内容比较多，我们下节课会单独讲解

4）搜索系统：是否选择搜索

搜索系统是我们日常生活中最常用的查找信息的功能。 它可以帮助我们快速检索信息。 虽然搜索功能很重要，但并不是每个系统的每个页面都需要搜索。 在决定是否添加搜索时，我们需要考虑三点：

▲图24 搜索系统的考虑

内容丰富度：产品所承载内容的丰富度/复杂度较低，内容很少（搜索往往不会有结果），往往不需要提供搜索。 内容性质：如果产品提供的内容是基于兴趣的探索，则无需搜索浏览类型； 搜索场景：如果搜索场景很简单，考虑是否仅过滤或分类就可以解决问题； 反之，如果搜索内容比较复杂，我们还可以进行搜索和过滤，以更好地查找信息。

以上3点决定了我们是否需要考虑搜索功能。 搜索的具体设计也是一个很大的话题，我们就不进一步阐述了。

信息架构图是一个中间产品。 它的呈现形式比较简单，但是这种形式背后的思维（组织系统、标签系统、导航系统、搜索系统）需要设计者在做信息架构时仔细思考。 ，一定要既考虑信息（有哪些信息，如何命名）又考虑架构（如何分类组织，如何呈现），这样后续的框架层设计才能更加清晰。

#专栏作家#

尽情发挥你的想法，每个人都是产品经理专栏作家。 10年经验设计经验，崇尚理论指导实践，践行迭代理论，热衷于交互设计、服务设计、行为设计等设计相关领域知识的学习、解构、构建和传播。