超实用!信息架构基础知识科普手册

2017/07/15

@C7210 :什么是信息架构?简单来讲,信息架构指的是app或网站当中全部信息的组成结构。经过认真梳理的信息架构可以使产品更加易于理解和导航。这有些类似于作家在动笔之前首先拟出故事的大纲,或是建筑师需要以精准的蓝图作为一切工作的基础。

欢迎关注译者@C7210 (高级交互设计师、猫奴、吉他手、鼓手、老狗,现就职于腾讯ISUX)的微信公众号:Beforweb

本质上讲,任何数字化产品,包括网站、app等等,都是信息的集合。信息架构设计通常需要解决两方面的问题,一是怎样使信息更易理解与浏览,二是如何确保扩展性,使其在未来能够承载更为复杂的信息与功能。

拥有良好信息架构的产品在结构上非常坚固。这与建筑是相同的道理 – 从地基和支柱入手,基础便会稳固;基于稳固的基础一步步扩大建筑规模,一切都将有条不紊的从容进行。

以Spotify为例,通过对UI进行解构,我们可以了解其表面之下的基础信息架构:

信息的抽象结构

要实现结构清晰、重点突出的界面设计方案,你必须首先梳理出结构清晰、重点突出的信息架构。作为产品设计师,我们需要在这里承担思考与分析的责任,否则这一重担势必会落到用户身上。

在思考信息架构时,出现在我们头脑中的应该是一系列抽象的信息单元,包括名词与动词等等,而非具体的像素、组件或页面。这样,你很快便会发现,任何产品无非只是信息的集合;而用户怎样理解和使用产品,最终将取决于我们以怎样的方式将这些信息进行整合。

这就像在造句 – 各种名词、动词的组合方式决定着最终能够传达出怎样的信息。

产品也是如此。一个app可以抽象成若干名词与动词的组合,包括“事物”以及“我能对这个事物执行的行为”。其中的名词非常重要,app的信息世界正是由它们组成的。在产品当中,一些典型的名词通常包括:

  • 歌曲
  • 路径
  • 用户
  • 照片
  • 餐厅
  • 账款
  • 友人

而动词则是人们以这些名词为对象所执行的行为,包括:

  • 播放歌曲
  • 创建路径
  • 新建用户
  • 分享照片
  • 点评餐厅
  • 发送账款
  • 添加友人

大体上讲,app界面当中存在着这样一种比例关系 – 绝大多数的界面元素(约80%)用于呈现“名词”;一小部分用于呈现“动词”,即用户可以对那些名词进行的操作。

信息架构的普遍适用性

经年累月,我们发现良好的信息架构通常具有普遍适用性,其中一些原则与模式更是被众多不同类型的产品所采纳。最具典型性的,譬如app的顶级导航需要呈现出产品最重要的功能模块。仍以Spotify为例,这些模块包括“Home”、“Browse”、“Search”、“Radio”和“Your Library”。在你的app当中,哪些模块是最为重要的?试着列出来,并尽量约束在3到5个之内。

我们还意识到,无论产品类型及信息的本质属性是否相同,信息架构总会呈现出相似的架构。譬如我们都知道一种最为常见的模式,当我们沿着信息架构深入导航时,我们总会倾向于从宽泛的“信息面”逐步定位到特定的“信息点”。这种探索信息架构的行为通常被称为“钻取”(drilling down)。

UI虽在进化,但底层信息架构并未发生很大变化

共通模式

在设计过足够多的app、网站或其他数码产品之后,我们会发现各层信息之间的结构其实具有很强的相似性,有时只是信息层级的标题发生了变化。有经验的设计师知道怎样从这些久经验证的结构模式出发来设计产品。本质上讲,这些结构是一种形而上的抽象存在,并非以其中所包含的实际信息为依托

音乐

照片

“Things”

万变不离其宗

于是,我们可以将这样的抽象结构作为容器,将信息“灌入”其中,然后在表现层面上进行订制处理,使其能够呈现出特定产品的信息独特性。譬如对于照片app来说,信息会以可视化的图片格式作为最主要的呈现形式;而对于金融类产品来说,则以数字格式的内容为主。

打造清晰、稳固的信息架构

Tip 1:明确哪些是最为重要的(以及哪些不是)

不要担心降低一部分信息的重要度,因为只有这样才能将重要信息的优先级提到最高。“对比”是构造清晰度的重要途径,尽可能移除无关紧要的信息,或至少将其优先度将至最低。

Tip 2:从分类结组的角度思考

思考哪些信息在逻辑上适于归属一处,譬如将所有与用户相关的信息归纳于“个人资料”这个概念当中,而不是让它们散落在信息架构的其他分支当中。

Tip 3:适时检视与迭代

随着产品规模与复杂度的提升,要适时检视现有信息架构是否足够适用。很多团队之所以疏于维护信息架构,是因为他们认为这是一项需要孤注一掷的、极端性的工作,譬如“我们很希望整理一下架构,但真的没有足够的资源来重新设计整个app”,这样。不妨试着以“渐进增强”的思路来看待这件事。相比于彻头彻尾的重塑产品,在小处对信息架构进行优化调整,进而提升产品易用性的空间总是会有的。

欢迎关注译者的微信公众号:


【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/nformation-architecture-guideline

界面设计 交互设计师 HTML5 素材 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 设计规范 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里