关于信息架构设计的方法总结

信息架构是我们在平时工作中经常提到的一个词，但经常用并不代表真的理解，笔者也是对其有一些困惑，所以借此文学习如何合理优化设计信息架构。关于信息架构的定义，百度百科的解释如下，将“某一特定内容里的信息”（数字媒体中可理解为各种图像，文字等信息等）进行统筹、规划、设计、安排。这是一段很字面的说明，《信息架构 —— 超越Web设计》一书中说明了信息架构的目的即为了让信息可查找，可理解，也阐述了信息架构的交互元素即标签、菜单、搜索和导航系统等。

在用户体验五要素中，结构层是关于交互设计和信息架构的设计，另外框架层也提到了信息设计。这里可能就会有混淆，其实结构层的产品信息架构侧重于产品业务功能结构的搭建，与用户执行和完成任务的流程步骤相关的，是为了将复杂产品系统的内在联系有序的展示出来，设计过程中需要运用到系统思维。而框架层的信息设计，是对界面元素的管理，组织，分类，排序等，为了实现信息的有效沟通。

信息架构设计的维度

产品承载的是一个系统，设计好的信息架构需要有“系统性思维”，系统性思维在我们生活中有很多应用，在产品设计中是需要从全局出发，多维度看待并客观分析业务和用户目标，梳理挖掘出功能与功能，信息与信息之间的联系，从而找到产品的核心元素，构建产品的运转规则。通过系统思维的分析，可以从四个维度去做好信息架构即：导航/流程/界面/模块

结合上述系统思维的三个步骤，尝试分析了微信读书的功能信息架构，在通过信息架构的四个维度即导航，流程，界面，模块切入，完成整个产品的信息架构设计。以微信读书为例，首先整体分析微信读书的主要功能为：

1. 找书：查看书架，用户自行搜索、朋友在读和系统推荐4个途径；
2. 读书：可设置阅读页面进行个性化阅读风格；阅读页面还原纸质书籍质感，强调精致排版；阅读时可划线、写想法和分享，主打精心打磨的阅读体验；
3. 社交：通过朋友在读书籍/收藏书单推荐、分享/评论/点赞/组队、个人主页设置、阅读时长比拼等途径实现

基于产品定位和用户目标的分析确定产品的主要业务为找书，读书，社交。然后将三个业务拆分为相关联的功能，比如读书延展出的书架和记笔记，社交中的组队和圈子等，划定好关联功能后整体功能的关联关系，确定为阅读、书架、发现、我为四个一级页面，其中阅读页主要实现找书和参加活动功能，书架页主要实现看书功能，发现页主要实现社交和参加活动功能，我页主要实现信息查看（个人信息、购买信息及阅读信息）和设置。

一.导航

不管是在PC端还是在移动端，导航就像是一座建筑里面的导视系统，导航栏能告知用户当前所在位置，并提供回到上一步或部分下一步操作入口，不至于让用户迷失方向；其次，常见的以顶部Tab的方式将当前页面内容作出整理分类，并将各类型入口聚合在导航栏，可以给用户提供快捷操作。

导航的自我解释

成功的导航设计可以自我解释，让用户在导航系统中清楚的认识到信息结构和自己所处的位置，为用户解释“我从哪里来”“我现在在哪里”我能去哪里”
在web端的设计，界面中的信息往往较多，跳转也比较复杂，可以通过面包屑或者页签与界面元素呼应的方式，让用户理解信息架构。在app的设计中，收集屏幕较小，会采用更加扁平化的信息架构，更加沉浸式的设计形式，更强调“从哪里来回哪儿去“的单一路径，即纵深式的导航方式。

导航的逻辑分类

信息的分类和功能的分类，对于不同属性的产品侧重会不一样。对于信息电商类产品，用户找寻信息和商品是重要的目的之一，信息的分类和组织是产品的基础，我们需要根据用户的逻辑习惯及心智模型对信息进行分类，就好像顾客去商场买一件男士T恤，首先会找到商场中卖男装的楼层，到店铺中摆放上衣的区域去挑选T恤，商场的楼层，店铺的区域划分都是按照人的习惯逻辑去划分，方便顾客更好的找到商品。产品的搭建是也要遵从目标用户的习惯逻辑。

深度及广度的平衡

导航的信息组织中，层级的数目可以称为导航的深度，每一层级包含的选项数可称为导航的广度。如果导航过深用户需要多次点击才能找到信息，容易令用户迷失方向。相对于点击，眼睛在界面上扫视的成不要低许多，但是如果广度超出用户接受的范围，也会增加用户的选择负担，一般来讲，超过7个选项用户就会选择困难。所以设计导航是需要将信息合理分组，注意深广度的平衡，对于核心内容突出的产品，更适合比较扁平的信息架构，避免多次跳转到只用户流失。

导航的类型

顶部标签导航：顶部Tab最早是谷歌提出来并使用的，主要是为了区分与iOS的一种导航模式。与底部标签导航不同，由于在顶部，手指一般很难触及，所以顶部标签导航功能展现更细化，标签也就更多，通常是通过左右滑动来切换标签。
底部标签导航：当产品的体验流是以几个功能模块贯穿，用户在使用时需要在几个标签入口之间来回切换时，这就是底部标签导航。底部标签导航里面的标签一般是不会超过五个，因为超过五个标签之后，就没有核心功能的体现。将贯穿产品整个体验流的模块平铺在Tab Bar位置，在保证了切换效率的同时也保证了用户在使用过程时的任务路径扁平化。在实际项目中，顶部与底部基本都是配合使用。
舵式导航：舵式导航是将多个核心功能汇聚在一个标签内，方便用户点击呼出使用。所以舵式导航一般会搭载其他导航样式出现（如标签式导航）。舵式导航与底部标签导航类似，会有一个非常突出的选项，让它在视觉上有别于底部其他的选项，这个选项一般是产生内容的主要触发按钮。
抽屉导航：一般是通过点击屏幕左上角来呼出侧边栏的导航内容，用来放置一些对用户来说不会经常用到或者是产品不核心的功能，例如设置、关于、个人信息这类不需要频繁切换内容的功能。
宫格导航：将产品的主要功能集中在首页，让用户快速了解产品的所有服务分类，单击每个入口将进入独立的界面。适合具有多个体量相当，功能内容垂直的平台类产品。

二.任务流程

信息架构的概念上文已经提到，在以内容为主的网站上，信息架构主要的工作是设计组织的分类和导航结构。如果把产品比作一座购物商城，那么导航就能够素你商城有所少层，每层都卖什么东西，有哪些品牌店，那么任务流程就相当于里面的过道，用户沿着过道完成“逛街”支付等主要任务，通过商城其他提示完成去卫生间，换停车票等次要任务，用户在完成任务时满足了自己的需求，产品也获得了商业利益。设计任务流程架构的意义：通过清晰的主线和支线，架构起整个产品的功能和内容

符合用户心智的主要任务

符合用户思维习惯和行动习惯，以达成用户的目标和期望，要设计出符合用户心智模型的心智流程，设计师需要多关注用户现实生活中时怎样做的。
大众点评选择店铺吃饭的场景
1）从上到下（top-down approach）：从战略层所考虑的内容，即根据产品目标与用户需求直接进行结构设计
2）从下到上（down-top approach）：从内容和功能需求的分析入手。
值得注意的是：结构质量最重要的标准，不是“整个过程一共需要多少步骤”而是“用户是否认为每一个步骤都是合理的”，以及“当前的步骤是否自然地延续了上一个步骤中的任务”。

结合场景融入次要任务

在产品主线流程规划好后，结合场景，在各个主线流程中设计次要任务。对于用户的分支需求，需要理清用户在哪个环节会产生分支需求，以及会产生什么样的分支需求，从而规划次要任务。并不是每一项次要任务都要被满足，要排列次要任务的优先级，既能提升用户满意度，又能提升商业价值的分支需求。

三.界面布局

在页面的信息组织上，界面主要是起到操作引导和信息传递的作用。好的操作引导类似动线设计，映射到人的行为上就是“心流”，人们能全心全意的投入到某个活动，不被干扰对周边视而不见，很多界面在设计时，会有意无意为用户创造这种“心流”体验。对于信息的传递，即为信息的合理编配，通过信息的“编配”让用户更好的理解信息以及信息之间关联性，例如表单页的和谐组织能够帮助用户快速完成信息录入，详情页的和谐组织能够帮助用户快速理解一个描述对象

布局设计基本维度

信息的复杂度：信息量的大小，包括类别，数量等
信息的关联性：信息之间的潜在关联或者相互影响
信息的优先级：评估信息的主次关系做出合理引导
以B端产品中常见的表单页的设计为例子

四.模块容器

界面的上不同模块通过逻辑关联性进行区分，确定容器信息内容，再通过视觉关联性加以表达，让用户可以更加直观的去关注哪些信息是重要，以及信息之间有什么关系。

逻辑关联性
被称之为信息架构之父的Richard Saul Wurman在他的“《信息焦虑》一书中重新定义了“五帽架”的概念，“信息可能是无限的，但信息的组织是有限的，因为它只能由LATCH组织：Location位置,Alphabet字母,Time时间Category类别 ,Hierarchy视觉层级
即信息可以通过以上五个维度进行编排组织

视觉关联性
视觉层级关系有几种常见的区分方式：
强调：使用基本的视觉元素（颜色/形状/大小等）
亲密性：位置接近的元素通常是有关系的，而且位置越近，关系越强
图胜于言：视觉符号和对象关联
浏览顺序：根据浏览顺序，从左到右(部分地区）或从上到下的信息重要程度依次减弱
根据逻辑关联性和视觉关联性可规范同类模块的信息布局模式如图

扩展阅读：
《信息架构 —— 超越Web设计》-LouisRosenfeld,PeterMorville,JorgeArango
《信息焦虑》-Richard Saul Wurman