信息架构关系

所谓信息展示设计，就是运用设计元素和设计关系组织信息、引导信息、表达信息。

《Web信息架构：设计大型网站》一书中讲到共享信息环境下的组织系统如何组织信息，标签系统如何引导信息，导航系统如何引导信息之间的流动，以及搜索系统如何搜索和表达信息。

信息组织——分类与结构

信息组织是定义产品如何组织信息、分类内容或分组的一种形式。设计就是筛选分类。在用户阅读前帮助用户筛选信息，过滤掉不重要的信息，突出主要内容。分类筛选是为了更好地传达信息，更快捷、更有效地对信息进行选择和获取。合理地筛选分类信息能够化繁为简，让信息逻辑更有条理，符合人类大脑的轻松阅读模式。

信息组织系统包括组织体系和组织结构

1.组织体系

组织体系是定义内容信息之间的共享特性、公共属性的逻辑式分组方式，能够让人们在获取信息时更加方便、快捷。主要通过找到对象内容的共性，将对象进行分类、排序，为搜索、浏览提供便利。

LATCH原则

理查德·沃尔曼（Richard Saul Wurman）在《信息焦虑》一书中提出：“信息或许是无限的，但是……组织信息的方式是有限的，因为它们只能通过LATCH原则来组织——位置（Location）、字母表（Alphabet）、时间（Time）、分类（Category）、层次（Hierarchy）。”

位置（Location）：基于位置组织信息。基于LBS位置的产品信息，根据导航位置组织信息和产品设计，如美团、大众点评等，用户可以通过地图位置信息快速查看周边的商铺距离和时长信息。

字母表（Alphabet）：基于字母顺序组织信息。最常见的就是手机通讯录的名称按首字母排序。

时间（Time）：基于时间组织信息。时间是最常用的线性叙事的归类方法。根据时间线性顺序来组织信息，人们能够更加舒适、自然地理解记忆，如新闻、微博、微信朋友圈等都是按时间排序展示的。

分类（Category）：基于分类组织信息。按照相似性、相关性归类排列信息，是最适合人类大脑工作的信息组织方式，能够轻松、快捷地被人们理解记忆。如资讯类App就是按照信息类型分类的。

层次（Hierarchy）：基于层次组织信息。逐级组织、排列信息可以有效地化繁为简，能够让人们更加清楚地了解信息的层级结构，更容易被理解和记忆。

组织体系又可以分为精确型组织体系和模糊型组织体系两类。

精确型组织体系：将信息定义成明确的互斥区域。比如，按地理位置：查找周围的餐厅、娱乐场地；按字母顺序：通讯录名称的排列方式；按时间顺序：新闻、朋友圈动态是根据时间顺序排列，这是典型的组织信息的LATCH原则中的位置、字母表、时间组织信息的方式。LATCH原则就是利用人类大脑最习惯、最常用的信息组织方式来组织信息，使人们能够清晰、快速地阅读，了解信息展示方式和内容层级关系。

精确型组织体系在产品的结构树中也比较适用。如微信分为“微信”“通讯录”“发现”“我”四大块，这四大块内容就具有互斥排他性，信息互斥，所以单条的结构线无法相互通达，只能给用户带来更多的操作步骤。无法让用户在第一时间看到其他内容，选择压力较大。如果分类信息错误，就会让用户在体验上存在一定的混淆，影响体验的舒适性。

模糊型组织体系：使用模糊或者主观的组织体系对信息进行分类。往往是让用户主动操作、自定义标签，让用户根据自己的偏好和兴趣对内容进行标签划分，使标签更具有个人特色。这增加了用户的个性化操作空间，同时也让用户对自己的个性化分类更容易记忆。

按主题：以主旨或者主题组织信息。

按任务：以任务导向对内容进行组织。

按用户：按用户的类型进行区分信息。

按隐喻：以用户熟悉的内容暗示新东西。

这也是典型的组织信息的LATCH原则中的分类、层次原则。按照相似性和相关性归类排列信息，是最适合人类大脑工作的信息组织方式，能够轻松快捷地被人们理解和记忆。

不管是精确型还是模糊型组织体系，它们都有固定的使用场景。精确型组织体系适合用户已知条目，或者用户已经知道他们想要什么。模糊型组织体系适合泛读、轻松阅读、浏览或者联想学习，用户对信息的需求不明确。LATCH原则让信息有顺序逻辑，有时间关系，能够有效减少用户的思考时间，提升用户的阅读效率和体验。

2.组织结构

组织结构是定义用户浏览、阅读时的主要结构方式，用于定义内容条目与群组之间的关系类型，找到分类与分类的关系、分类与内容的关系。信息可以进行分组分类，这样更有利于用户找到规律、记忆和获取。组织定义信息的主要结构方式是组织体系之外的，常用的分组信息方式为：层级结构、线性结构、矩阵结构和自然结构。

层级结构

层级结构也称树状结构，类似思维导图，是目前使用最广泛、最清晰的梳理结构的方式。节点之间存在明显的父子关系，结构清晰。自上而下的呈现方式，可以让用户快速地浏览主架构，树状结构更像是一个产品或者一个页面的整体结构图。

树状结构的体验方式是递进式的。点击进入App后，分别从一级导航、二级导航、三级导航再到产品详情进行浏览。

自上而下（等级式）

战略层、产品层等上层主导组织结构，用户被动接受。产品设定好规则和分类，用户进来后对号入座。目前大多数的站点和产品都采用这类层级结构。自上而下式是从上到下线性细分功能特征的。

自下而上（内容式）

从用户层面出发组织信息，对海量用户的底层内容进行分类组织，找到规律，然后自下而上地组织信息。

树状结构有以下两个特征。

·分类结构的排他性

产品功能点不容许其他事物与自己在同一范围内并存。

·深度与广度平衡

注意平衡内容的深度和广度。

自上而下主要是官方主导，但底层功能太多，可能会有些混乱；自下而上在分类上寻找组合逻辑与顶层方向，可能会很难找到两者之间的平衡点。所以最合适的应该是两者结合的平衡组织方式，从中间层开始。

线性结构

线性结构是最基本的连贯性信息结构类型，易于理解。适用于相对简单的内容结构，内容和功能以一定的顺序构成，逐一被串联起来，让用户根据线性流程操作。新产品注册体验的过程就是线性的。Web中的超链接是非线性的，它可以随意连接。

矩阵结构

矩阵结构展示给用户的是多维度的浏览和体验，目的是引导需求不明确的用户。用户查看商品时，可以从品牌、促销活动及内容专题的角度筛选浏览。

矩阵结构内容多样化、复杂化，用户可以完全根据自己的意向选择。

自然结构

自然结构是无规律、无组织的。适合轻松自由、闲散内容的布局排版，结构没有明显的层级和线性规律。目的就是让用户像在大自然里旅游一样，不遵循任何规律，没有明显的分类规则，关系不明确，没有明确的用户指示。

查看商品详情时，可以查看相关品牌商品。浏览某个商品后，再看看相关活动商品，在不同的商品列表与商品之间自由切换。

常见的自然结构如瀑布流、团购等浏览式，使用户浏览时处于轻松、逛街式的状态。用户看到感兴趣的内容便会进一步了解。

用户的操作和想法是随机的、偶然性的。我们无法判断用户的需求，但是产品信息本身的组织形式是明确的。

任务式的特点：如利用App查航班信息，目的明确，就是想快速、准确地找到登机口、登机时间等信息。

浏览式的特点：用户的时间是碎片的，没有明确的目的，可能就是打发时间，如漫无目的地刷微博、看知乎等。

自然结构很适合轻结构产品的浏览模式。大部分TOC产品都是任务式和浏览式相结合的。自然结构应该与其他信息结构结合使用，自然结构不是唯一的，必须有层级结构、线性结构、矩阵结构等其他信息框架来配合和约束，才能让产品的整体信息架构更加完整、可用性强、体验更佳。

目前常见的产品设计中，大多数信息结构都是一个复杂的综合体。组织信息时设计师要熟悉产品，兼顾顶层和底层设计，要让结构布局有一定的延展性、拓展性。同时，也要注意信息结构的深度与广度要保持平衡。

信息标识——制作标签

标签用来标示产品目标、分类或者内容，像是给目标确定的关键字词，便于自己和他人查找，以及定位自己目标的工具，它能够缩小搜索范围。标签具有明显的个性化、代表性，能够明显区分其他内容，表意相对准确。

网络标签是一种互联网内容组织方式，是相关性很强的关键字，它能帮助人们轻松地描述和分类内容，以便于检索和分享。网络标签已经是Web 2.0时代的重要元素。使用过博客、微博的用户都很清楚，当内容过多时，就需要把内容进行标签化，做信息标识，引导用户。

当我们提起一个人时，立马会联想到他会跳舞，字写得很好、很帅等。这些就可以称为标签，是用户检索或者记忆的快速关键词。

在设计中总是会遇到很多要处理的信息，如果要让这么多信息展示不产生迷惑和混乱，需要用相对简单的标识方式去呈现。标签存在的目的就是让人们更加有效地整合数据和内容。

常见的标签类型

1.文字型

文字型标签在PC端十分常见，因为PC端是通过单击进行链接的，所以文字型标签使用起来相对方便很多。如情境式文字链接：指向其他网页中大块信息的超链接，或者指向同一网页中的另一个位置。

百度百科这类标签常常出现在文章的内容中，它们作为一个单独的词汇可以在不同的词条中建立链接，这种标签很容易让用户留在网站中跳转和浏览。

导航系统选项标签

代表导航系统中选项的标签。如淘宝的海量商品，无法全部平铺展示，所以就需要很多不同类型的导航标签。标签导航越清晰，用户就越能快速地找到所需的商品。

索引术语标签

索引术语标签是指供搜索或者浏览的关键词和标题词。当用户不太清楚内容时，就能用部分关键词进行搜索，产品会提供与关键词相关的搜索服务。

搜索一些模糊内容时，如在淘宝搜索“袜子”，那么淘宝就会反馈给用户所有关于袜子的产品，我们将这样的关键词称为“索引术语”。

自定义标签

自定义文字类标签，一方面是对自己内容的概括和关键字的提炼，另一方面也是为了其他用户能够按标签快速标识查找。例如，人们在站酷、博客等上面发布作品时自己所设定的标签。

2.图标型

由于移动端手势滑动等触发操作更加便捷，手指点击触碰区域大，所以较多使用图标型标签，较少使用文字链接。

图标是图像的概括，比文字描述更加清晰直观，视觉权重相对较高，所45以在一级导航中使用更突出，最典型的就是移动端App底部的导航。

信息导航——导航与路径

导航也就是引导系统，是定位用户所处位置的方向标，指出当前位置在哪，下一步能做什么，上一步怎么返回。当用户在不同内容间自由跳转时，解决了层级式站点只能原路返回的问题，既带来了灵活性，也带来了混乱，用户不知道如何回去，所以需考虑如何在灵活性与混乱之间达到平衡。

导航的种类

1.原始导航

PC端的导航基本上都是最为常见的原始导航。相对来说，形式和功能基本一致。通过鼠标单击或者鼠标经过触发。

2.选项卡导航

选项卡导航是移动端最为常见的导航，又称“Tab式导航”“标签导航”，是产品设计的主功能入口。这里的图标标签、文字标签就是导航，单击即可查看该类版块内的相似信息。

选项卡导航又分底部导航和顶部导航两种。

底部导航：一般都是产品的一级导航，数量为3～5个。底部导航基本都带图标，也是为了突出其主要的功能作用。底部导航也称“全站导航”，功能类似网站地图，主要展示站点结构、最重要的区域或者作为功能页面的入口。一般情况下，人们能通过底部导航快速了解产品的内容关系，对了解网站的用户而言，方便其快速、直接地访问内容，所以底部导航一般不会太多。

顶部导航：一般是二级导航，以纯文字形式为主，权重低于底部导航。顶部导航可以点击，也可以左右滑动切换。顶部导航一般强化层次，引导用户探索强化信息层次，让用户获取更多内容。当顶部导航过多时，一般会用渐变或者露出部分的方式展示。目的是让用户看到后面的内容。如果直接断开，没有渐变或者部分露出提醒，用户可能会误以为没有后续导航了。

3.列表导航

在移动端空间较小的情况下，列表导航能够最大化利用竖屏空间，结构清晰。列表导航一般作为辅助导航来展示二级甚至更深层级的内容。

列表导航分为3类：标题式列表、内容式列表和嵌入式列表。

标题式列表：主要以文字展示为主，若配图表现会更生动。

内容式列表：以内容为主，列表会展示一定的信息吸引用户点击查看详情。

嵌入式列表：主要由多个层级的列表组合而成。一般被用于功能复杂的产品中。列表的层级通过间距、标题等区分，如微信的“我”模块。

当列表信息比较多时，可以对列表进行分类，可以添加小标题或者直接分隔开。

列表信息从上而下，扩展性强，功能信息分组越清晰，用户使用起来越简单舒适，用户体验也越好。

4.情景式导航

情景式导航一般是界面中可以跳转到相关内容的链接，如相关商品的卖家推荐、相似品牌等。目的是让用户对未了解、未关注的内容产生兴趣，从而提供交叉引导、向上引导的可能。

5.抽屉式导航

抽屉式导航，顾名思义，像抽屉一样的导航。为了节省空间将一部分内容隐藏，当用户触发按钮时再展开。目的就是为了更好地展示主题内容，让用户更加专注于核心内容，节省屏幕空间。所以当内容导航太臃肿时，可以考虑使用抽屉式导航。注意抽屉式导航隐藏的一般都是非核心的内容或者功能，用户点击的频率也不高。但有时候内容隐藏得深，不明显，用户就很难发现，需要及时做好用户指引。

6.下拉式导航

下拉式导航跟抽屉式导航类似，都是为了节省空间，点击图标可弹出相应的内容。下拉式导航的入口一般比较明显，特别是在空间有限的情况下，通过打包集合的方式呈现。

7.悬浮导航

权重很高，悬浮在内容之上，悬浮按钮始终位于内容最上面，用户可以随时触发。变体是点聚式导航，相当于隐藏了部分功能。当点击悬浮导航时将展开更多，再通过点击触发。

悬浮导航是MD设计中比较典型的按钮，因为MD设计强调利用侧屏空间，悬浮导航一般位于屏幕的侧面。其实悬浮导航在iOS设计中也非常常见，只不过两家公司的设计理念不同，在展示形式上稍有不同。

8.宫格导航

宫格导航又称跳板式导航、快速启动导航。宫格导航将全部内容展示出来供用户选择。以聚合式堆积展示为主，页面呈现的内容很多，以“图标+文字”的形式居多，扩展性强。宫格导航的变体形式也有很多种，如支付宝、微信界面等。

9.轮播导航

轮播导航通过大图展示，展示空间更加明显、突出。

信息查找——搜索信息

当内容太多时，就需要有便捷的搜索查找方式。通过关键词搜索或通过标签查找信息是最常见的搜索方式，这与前面的制作标签形式相呼应。只有制作了清晰的标签，才能够快速找到需要的信息。

搜索的过程一般分为3步，激活搜索框→输入搜索词→结果反馈呈现。信息结果呈现才是用户查找搜索的目的。

1.全站搜索一般占据界面头部核心位置，使用频率极高，搜索区域明显。2.搜索功能不是核心功能，有入口，但是不太明显，使用频次较低。

小结

产品设计中如信息组织和逻辑结构不清晰，堆积式的功能只会引起用户阅读焦虑，增加用户负担。了解信息架构，可以让设计师从表面思维逐渐转换为深层次思维。

信息架构的战略层、范围层、结构层、框架层、表现层这5个层面由里及表，贯穿产品体验的全过程，设计师也应该由表及里深层次地了解产品的信息架构，了解用户体验的深层次要素，以用户为中心进行设计，为设计创造更优体验。