#
信息架构

我们盖一栋大楼，需要花几个月的时间来画图纸、测量、计算，一切显得非常严谨。其实做一个互联网产品一点也不必盖一栋大楼简单，但是通常实际情况是一个公司的老板让设计师、开发、产品经理三个月内做出一个产品，而不经过仔细地构建，这就像直接让工人盖楼是一个道理。也许他们有能力直接造出一栋平房，但是对于建高楼大厦，则是一件不可能完成的任务。

今天我们所说的信息架构，就是数字信息界的建筑图纸，它用来帮助产品来搭建最初的结构，这个结构能够适应将来填充进来的内容，使得用户在使用产品时能够快速定位、寻找、搜索等。

如何定义信息架构：

• 产品信息内容的结构化设计、有效编排
• 是标签、导航、搜索的结合
• 它既是艺术的也是科学的，它设计内容信息和体验，让产品具有可用性和可搜索性
• 是从设计领域和建筑学领域的实践中借鉴过来的规范

通俗一点的说法就是，信息架构是帮助用户明白他在哪，他要找什么，周围有什么以及他决定要做什么的设计。

它包括几方面的内容

• 分类和构建信息
• 标签系统：如何呈现信息
• 导航系统：如何通过信息来浏览或者操作网站
• 搜索系统：如何寻找信息

想要做一个好的信息架构设计，我们必须先得弄清楚以下三者的内容和关系：

• 产品所处的环境：商业目标、资金、政策、文化、技术、资源、限制等
• 产品所包括的内容：数据类型、产品体量大小、现有的产品架构等
• 使用产品的用户：用户是谁、他们的目标和需求、用户习惯等

了解产品的五个层级：

表现层-框架层-结构层-范围层-战略层
（图）

其中，这五个层级都与信息架构相关，其中结构层和框架层是信息架构的体现，表现层是视觉设计的体现，范围层是数据内容的体现，战略层是产品目标和商业目标的体现。这五个层级，从下往上产生影响：商业策略决定了产品所包含的内容范围，产品的内容范围又决定了它使用什么层级机构和框架，框架对最终的视觉表现产生影响。

1.战略层：

也就是商业策略，始终离不开钱—不是帮公司赚钱，就是替公司省钱，我们可以参考”商业画布”那一章来制定。

2.范围层：

这里包含两种范围，一是工作的范围，一个是产品内容的范围。工作的范围是指现有的团队能够做哪些事情，哪些事情需要留到以后再做，包括沟通、合作、研发等等；产品内容范围是指产品上线需要完成的全部工作，包括数据、内容文档、子系统等等。完成范围层的设计的标准是，你必须有一份内容清单，并且对清单上的内容有优先级的排列。

3.结构层：

这一层主要是对所确定的内容进行管理、分类、排序，建立一个分类系统，它主要有两种模式，一种是由上而下的分类方法，一种是由下而上的分类方法。

由上而下：

我们按照已经明确了的产品的商业策略，将产品的内容归类，然后依次往下分出层级。比如我们要做一个在线书城，靠售卖电子书来盈利。那么我们就可以把在线书城这个商业目标分解成若干个小目标：艺术类书城、科技类书城、教育类书城，再分别将这些类别按照价格区间分类，如下图：

这样所产生的一个问题是，按照商业策略所分的类别也许和实际所拥有的资源不匹配，或者与用户期待不匹配。例如在艺术类书城下面，高价的书很多，低价的书很少，大多数目录都是空的，用户会对这样的网站产生内容不充实的感觉。

由下而上：

我们按照已有的资料来分类。假如现在有中国、日本、韩国、英国、芬兰、瑞典、美国、加拿大的书各有一万本，最直观的分类就是按照国家来分，然后再把中国、日本、韩国归为亚洲书城，把英国、芬兰、瑞典归为欧洲书城，把美国、加拿大归为美洲书城。如下图：

这样产生的问题是，分类并不能满足商业策略，因为商业数据显示，以书的类型来分类是用户最喜欢的方式，能带来良好的体验从而提高用户活跃度，按照国家的分类使这种优势消失。

两种方式有各自的优缺点，我们再实际的操作过程中需要不断地碰撞，使得商业目标和内容之间有一个很好地平衡，而不是非黑即白地一味满足商业或者一味从现有资源出发。例如我们发现这两种分类方式都不是很合适，可以采取第三种设计方式：先制定一个从商业上和从内容资源上都接受的方案，即这个树状结构的中间点，设定按照书籍发售的时间，往上推把时间相同的艺术类书籍归在一起，向下推把相同时间不同国家的书籍分别归类。

把基本的分类做好之后，就要考虑这些分类之间的关系，它们也许是父子关系，也许是同级关系

• 树状结构：是最常见的一种结构，是不断收拢或者不断发散的结构。很多内容型的网站会用到这种模式，例如亚马逊、京东、网易新闻等等。
  （图）

• 矩阵结构：它不是一条胡同走到底的方式，而是在路径之间相互连接，这样可以满足不同用户的不同需求。例如有的用户喜欢按照类型查看商品，有的用户喜欢按照时间查看商品，单招树状结构，类型和时间的分类一定会有先后顺序—先按类型分，再按时间分。但矩阵结构可以在第一层级同时提供这两种方式让用户进行切换。
  （图）

• 自然结构：这种结构给用户一种全新的探索方式，它分类与分类之间待着某种惊喜和随机性。例如一些非常有个性的设计师个人网站，一开始出现动画，动画上有导航，从导航进去以后可能是他写的一段话，再点这段话到他的作品集，点击作品集又出现另一些动画等等。这种方式非常自由，它能给用户营造探索感，对于内容比较简单的产品比较适用。如果产品本身分类很复杂，又用了自由结构的方式，那对用户来说就是灾难。
  （图）

• 线性结构：一条线，没有分支的结构。比较适合看一篇文章、读一本书的产品。
  （图）

不管你用的哪种结构，最好都把它画出来，然后为每个模块去一个名字：
（图）

4.框架层

如果说结构层是偏向于立体的结构，它看上去像是一栋大楼的钢筋结构，那么，框架层就是这个大楼每一层的设计。既然我们已经在结构层确定了每一层楼放什么，那么在框架层要做的事情就是讲这些物品按照一定的方式摆放，它包括三方面的设计：界面设计、导航设计、信息设计。

• 界面设计
  界面设计要解决的最大的问题就是，当用户看到这个界面时，能不能马上找到他想要的东西。或者是，当用户无所事事闲逛的时候，能不能让某些内容进入他的视线和引起他的注意。我们最常用的一种方式就是把主要信息放在最显眼的位置并且放最大，如支付宝的界面：把扫一扫、付款、卡券和咻一咻放到了最显眼的位置。值得注意的是，如果在导航上面放四个内容，其实不能让用户很好地聚焦，那为什么支付宝要放如此多呢？我们可以知道扫一扫和付款一定是用户频率最高的功能，另外的卡券和咻一咻使用频率很低但由于是战略型的布局，所以不得不也把它放在了最显眼的位置。可见，界面设计不仅是要从用户角度考虑，更多时候商业的角度也是非常重要的一个方面。
• 导航设计
  导航设计也就像是一个网站的地图设计，你需要通过导航来告诉用户：“你现在在哪，你能去哪”。导航设计是呈现给用户看的产品内容结构、分类图，也是帮助用户明确页面内容、了解所处位置的标注图。
  导航大体上可以分为：全局导航、局部导航、辅助导航、上下文导航、友好导航、网站地图导航等。

全局导航：你可以在任何一个位置去到你想去的任何地方
局部导航：当你进入到某个区域时，你只能在固定区域内任意穿梭，要想去到其他的区域，得先返回到主页面。
辅助导航：在一个位置上，提供另一个位置的快速入口，比如在某个界面都去到另一个深层级的页面，例如一个网上商城你进入到服饰的导航页面挑选衣服，此时页面上除了展示服饰产品外，还提供有鞋包分类下运动鞋的链接，此时就可以直接跳转过去。
上下文导航：在一个位置上，提供相关信息的链接，例如当你看完一个新闻时，底部会有相关新闻让你跳转。
友好导航：在页面上提供用户他们可能平时并不需要的链接，例如，每个页面都会有产品母公司的联系方式。

• 信息设计
  界面上除了导航和控件元素之外，很重要的东西就是信息的设计，特别是对于信息类的网站，这类信息显得尤为重要。对于一个产品，你要展现哪些信息，哪些信息对用户最有效，它们之间的关系应该如何呈现，这些都是信息设计所要考虑的事情。如图：

5.表现层：

就是我们常说的视觉设计，主要是对用户的感知进行设计，让用户愉悦、让企业的品牌得到传播。具体的设计方法可以参照视觉设计那一章。