解读信息架构设计

什么是信息架构?

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

本质上讲,任何数字化产品,包括网站、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”,这样。不妨试着以“渐进增强”的思路来看待这件事。相比于彻头彻尾的重塑产品,在小处对信息架构进行优化调整,进而提升产品易用性的空间总是会有的。

blog.prototypr

译文地址:Be For Web
译者:: C7210
(0)

相关推荐

  • 「译文」信息架构设计大杀器-卡片分类法的实施细则

    主题:卡片分类法是一种用户体验设计中的调研方法,它可以帮助我们分析用户,构建符合用户预期的信息架构. 一个网站是否好用,判断标准之一就是信息组织的是否有条理,用户能否方便地找到他们需要的东西.但一个非 ...

  • 移动端设计——第一节:信息架构

    小编话:移动设备的种类影响着我们设计过程的方方面面,今天让我们跟着@网秦的同学一起来了解移动端设计的信息构架.很多刚入行的小伙伴们可能有些都不知道吧,那就跟着今天的文章涨姿势吧!对于设计过程可是是非常 ...

  • 如何规避Design System架构设计中的逻辑陷阱

    各位好.自从尝试录音之后,再写字就会有一种和从前不一样的感觉 – 要表达的东西像是更加口语化,要脱口而出的样子:但通过键盘落到文字上时,口吻又被另一个自己所占领,像是一直以来的文字人格. 周六的夜聊( ...

  • 微信公众号图文信息页面设计,你也可以牛起来!

    微信公众号图文信息页面设计,你也可以牛起来! 操作方法 01 首先,打开微信公众平台,登录我们的帐号 02 初次进入管理的朋友先单击添加功能,在插件库找到模版管理,添加 03 之后,我们单击模版管理, ...

  • 很棒的信息图表设计(设计欣赏)

    伦敦的插图画师.设计师以及排版设计师 Jing Zhang 制作的创意又精美的信息图表,无论是构图,还是颜色搭配,都非常的棒,我很喜欢这组设计,你喜欢吗? 作者:Jing Zhang ======== ...

  • 教你设计的精髓

    小编:设计内容有问题,下再多的模版也没法起到救病的作用.那就让我们借鉴下现成的设计模式吧. 下载各种UI模板/套件可以高效的改善界面设计的外观,但是无法解决设计问题,无法改良用户体验,无法真正意义上满 ...

  • 这些错误不止UX设计新人会犯

    今早的译文,"Confessions of a UX designer",UX设计师的忏悔,作者谈到了他在初入UX设计行业时犯过的一些典型错误. 觉得原标题有些言重了,虽是戏言:于 ...

  • 云计算交互设计师的必备知识!

    作为云计算的交互设计师需要学习哪些?文章为你解答. 最近有不少设计师会跟我聊到,做云计算的交互设计与其他设计师有什么区别吗? 我其实也不知道怎么回答,能够记起的最后一次 TC 类的项目已经是两三年前在 ...

  • 导航栏家族大揭秘

    前言 导航设计在产品或者页面中担任重要的角色,能在不同的场景下帮助用户快速找到自己想要的东西.我们如何区分在什么样的场景中使用那种导航设计是我们作为设计师必须要了解的,接下来我们会讲到我们经常用的 T ...