对于每一个软件行业的设计师和产品经理而言，软件的信息架构都是必须考虑的一件事。我记得我第一次接触这个概念，是在大学的课堂上。但大概是因为我当时没有认真听讲，之后我对信息架构的概念一直十分模糊，虽然我知道我们常常要思考它，处理它，但“信息架构究竟该如何准确定义”，“信息架构到底长什么样”这样的问题一直困扰着我。

前段时间，我在知乎上偶尔看到了一篇文章（怎样理解信息架构？ - 龙爪槐守望者的回答 - 知乎 ），并经由这篇文章推荐，阅读了《交互系统新概念设计 —— 用户绩效和用户体验设计准则》（以下简称《交互新概念》）。这本书非常准确形象地描述了信息架构的本质，并给出了一套行之有效的方法。收到书中内容的启发，我在项目工作中尝试建立了一套表达软件信息架构的图例方法。下面，我会详细介绍它的情况。

对信息架构的误解 —— 信息架构等于思维导图？

如果有人让你“画一下软件的信息架构”，你会不自觉地打开思维导图吗？曾经的我会。事实上，在课堂上第一次听到信息架构的概念时，我就下意识地打开了思维导图软件，开始按照树状的结构画了起来。之后的几年时间里，一直都是这么做的，而我看到的身边的同事也都是这么做的。

那么，这么做有什么问题呢？也许你会觉得，思维导图很好地支持了我的工作，我用起来也很顺手。但这与我们熟知的关于信息架构的另一些知识产生了矛盾，也就是常见的，信息架构的类型。

相信对信息架构的基础知识有过了解的朋友都很熟悉这几张图。这是软件信息架构的几种常见的类型，他们在软件当中可能独立出现，但更多的时候是多种模式混合出现。那么，问题来了：层级结构用思维导图软件当然可以很方便地表达，可另外两种结构呢？

问题正在于此。思维导图中的树状图事实上只能应对特定类型的软件信息架构设计，对于更加广泛的可能性，它根本无法有效地反应。也许你会说，我可以通过里面的各种连线工具来实现对其他类型信息架构的反应。但我要说的是，首先这样做是极其混乱和困难的，因为它本身就不是软件的主要功能，只是辅助性的因素而已。更重要的是，树状的思维导图的使用，不仅仅影响了你对于其他类型信息架构的表达能力，更影响了你自己的思维。无论是否合适，你都会下意识地用归类、树状的思维来分析每一个软件，形成一种狭隘的，固化的思维定式，失去寻找真正合适的信息架构的机会。

《交互新概念》中对信息架构的定义与解释

《交互新概念》这本书一开始，就介绍了信息架构的实质。不过，他并没有使用“信息架构”一词，而是使用了“概念模型”。书中提到“概念模型就是概念元素的结构和它们之间的导航”。这句话一出来，概念模型（信息架构）的概念和实质就变得清晰了，而我们在使用思维导图时犯下的错误也更为明显。这句话有两个关键词，“概念元素的结构”和“导航”。而其中的“导航”因素，正式我们在使用思维导图时忽视掉的。

其实也不能说完全忽视。只是说，相比于充满了可能性的，多种多样的导航方式，我们在绘制思维导图时，将导航的方式下意识地收缩为了一种，即下探式导航。只有这种导航在图中能够被完全地，充分地表达出来，其他导航方式都“只可意会，不可言传”。书中将每一个页面模块笔作“空间”，应用程序的交互流程比喻为用户“去”某个“空间”中，或者像是“到处行走”。而对软件信息架构的设计，就好像是你在设计一桩房子，你需要摆放好里面每个空间的大小，位置，并设计合适的通道和动线来连接每一处空间。

书中依据这样的思路，给出了一套行之有效的，全流程的设计方法。本文在此不再赘述，但非常推荐读者自行阅读。而笔者也收到书中的内容启发，尝试并提出了下面的方法。

一种新的信息架构图/交互图绘制方法

根据上面的内容，我们可以得知两个基本事实：

• 长久以来，我们对信息架构存在着误解。使用思维导图表示软件的信息架构，不仅限制了我们的表达能力，更扭曲了我们对信息架构本身的认知，在设计软件的过程中造成了很大的局限性。
• 信息架构的设置必须能够准确地描述导航路径。

根据这两点事实，我们需要一种能够准确反映信息架构图本质的图例。这样以来，我们才能够正确理解信息架构，并让图例引导我们观察到软件结构的本质，在设计中做出正确的选择。根据书中的内容和图例，并对其加以扩展，我自行建立了这样一种图例表示法。下面作为案例，我对于微信的信息架构，以页面和页面上的主要模块为单位进行了部分梳理。当然了，梳理是不完整的，但仍然可以从图中看出新方法的很多优势。以下是对微信进行梳理后的结果，以及对具体图例的说明。

微信信息架构的整理

这张图是我使用新的图例表示方法，对微信信息架构进行的一个不完整的梳理（无论是数量上，还是交互上都是不完备的。希望读者仅通过此图了解我的方法，不必探究其中的细节。）从中我们可以看出，传统的树状结构被更加灵活的空间和空间之间的关系所取代，箭头、方框和文字注释则详细地标注出了页面的内容，进行的操作，和用户进行移动的方向。

通过这样一种灵活的方式，我们得以对软件的结构具有更加清晰的认识。黄色部分是微信最高层级的四个页面，从中我们可以看出，这四个页面是一种互相之间可以随意切换平级导航结构。而从最高级到第二级别的大多数页面，呈现出树状的层级结构。或者说，第二级中的大多数页面（绿色部分），都强烈地依附于一集所存在，找到他们的主要方式是一级页面的下探导航。但仍然有一些二级页面（紫色部分），可以从软件的不同位置进入，也即这类页面更强地展示出其公共属性。相比起在层级结构中给他们强行安排一个位置，不如把它们提取出来，作为一种随时可以调用的模块来进行设计和调用。

以上只是微信的一个案例，凭心而论，这个案例的整理也是比较草率的。但在软件设计的过程中，如果能够在多轮迭代里贯彻这一方法，在不断的整理优化之下，我相信这张图将能够以更高的精准度，直观呈现出软件的抽象结构，并进一步辅助设计者评估设计中的优点和缺陷。下面，我来具体说明其中的每一种图例，并介绍其内涵。

页面模块

如上图所示，基础的页面模块共有两种，全页面模块和非全页面模块。顾名思义，全页面模块就是指某个模块能够覆盖整个屏幕。而非全页面模块，只能占据屏幕中的一部分。

同时，页面模块也可以互相进行嵌套。如果一个页面由多个值得描述的非全页面模块组成，就可以将这些非全页面模块的名称“装”在一个全页面模块当中。一个全页面模块同样可以嵌套多个全页面模块。常见的情况比如在微信>我>表情中，顶部有一个切换器，可以在“精选表情”和“更多表情”之间切换。但这两个页面相对于上一级导航而言，又统一为一个页面，此时就可以使用全页面内嵌套全页面的做法（图中的箭头在稍后说明）。将若干页面设置为平级页面，还是嵌套在另一个页面下，有时可能会是一个令人纠结的问题。

右边的模态模块也需要强调。在工作中，我们常常使用“弹窗”、“弹出框”这样的词。这也是一种不严谨的做法，它是一种经验性的模糊称为，混合了组件的形式和行为。这类组件行为的统一称呼应该是“模态”，其含义为“创建一个禁用主窗口的模式，模态窗口作为前面的子窗口使其保持可见。用户必须先与模态窗口进行交互才能返回父级应用程序。”（来自维基百科）。在页面模块中，开头写一个大写M,即可表示模态，而模态窗口，可以以各种各样的大小或形式出现。在绘制信息架构图的过程中，遇到模态窗口，需要特别注意其导航路径的设计，避免造成误解。

箭头

当前在绘图的实践当中，主要需要这四种箭头。第一种默认非对称箭头是最为常见的。

默认非对称箭头中，实心箭头所指的方向是用户主动发起的导航方向。而线条状尖头，只有在指向实心箭头方向的导航成立后，才能随之运行，否则便不成立。

举个例子，用户在聊天窗口，或联系人列表中，还有其他很多页面里，都可以通过点击用户头像来进入其个人页。而当用户从联系人列表点击进入个人页时，再点击返回按钮，他也只能返回联系人列表。他无法从聊天内容中点击头像进入个人页，再从个人页返回到联系人列表，这样的操作是不可能的。

其他几个箭头相对而言就很好理解了。单向箭头出现时，只能单向通行，无法原路返回。双向箭头，则代表两个页面互相都可以进行直接主动的导航移动，并不需要像非对称箭头那样，返回箭头依赖于主动发起的导航箭头。

最后，解释一下滑动/切换箭头。这种箭头常常出现在同一页面无法容纳所有元素，必须通过滑动或切换器来再页面模块内来回游走的情况。需要说明的是，滑动箭头的作用，和模块排列的方式紧密相关。此处模块排列的方式，反应的也正是真实界面中模块的虚拟位置关系。如左图中，支付里的多个模块从上到下顺序排列，但内容过多无法显示在一屏内，这时即可标注通过上下滑动查看这些模块，同时也进一步强化了这些模块的空间关系。在中间的图片里，箭头表示“联系人列表”这一模块内容较多，可以进行上下滑动。对上面的“搜索”，则无影响。右图里，在两个横向的全页面模块上画箭头，表示的是切换。对应界面中，通过切换器左右滑动，在两个页面模块之间移动。

更多

这个图例的表现方式还不止于此，有更多的方式有待探索。使用者可以通过添加颜色、符号等，对图例进行更多的扩展和研究。笔者希望认可这一方法的人能够尽量开发它的更多用途，在此便不再赘述。

写在最后

通过《交互新概念》的阅读，和自己的尝试，我认为终于算是找到了一种能够恰当反应信息架构本质的表示法。通过使用这种方法，也能够让我们进一步地摆脱束缚，充分认识软件系统的本质。当然了，这种方法截止目前实际应用的次数尚少，而且应用的项目颇为简单，后续一定还有很多改进与优化的空间。不过去探索更加合适，更加恰当的方法与工具，这样的过程不应止步于此。

扩展阅读

怎样理解信息架构？ - 龙爪槐守望者的回答 - 知乎 https://www.zhihu.com/question/19719820/answer/1964831774

《交互系统新概念设计 —— 用户绩效和用户体验设计准则》——（以）阿维·法利赛（Avi Parush）