TEL: 180-210-69380

Figma博客:什么是信息架构?

Dec,15,2023 << Return list


what is information architecture cover photo

想要为新应用程序制定全局导航,或为重新设计的网站制定内容分类吗?“信息架构是为您正在设计的产品组织内容的艺术,以便内容层次结构和寻路对您的用户有意义,”Figma 设计师倡导者 Clara Ujiie 解释道。

您可以使用信息架构的原则来提高可用性、可查找性和用户体验。通过标记和结构化内容、全局导航和搜索元数据,您可以更好地满足用户需求。继续阅读以了解更多信息:

  • 每个人如何从良好的信息架构中受益

  • 如何应用信息架构设计的四个原则 - 以及信息架构师的专业技巧

  • 如何使用 figma.net.cn/lm2/3383.html">FigJam 模板更快地构建信息架构

智能信息架构的好处

“帮助用户寻路是产品、站点和/或页面级别精心设计的 IA 的重要组成部分,”Clara 说。“当用户尝试完成任务或目标时,信息架构会帮助实现它。”

她说,映射信息对于有效的用户体验和用户界面设计至关重要。“信息需要自然地从一个步骤流向另一个步骤。设计师需要问自己,“从用户的角度来看,内容应该如何连接?”直观的流程可以帮助用户轻松找到他们正在搜索的内容。

克拉拉说,清晰的内容标签使信息架构更加直观。简单的导航系统提示使登录流程易于完成,从而获得快速、令人满意的用户体验。

信息架构原理

有效的信息架构从信息架构的四个构建模块开始:

  1. 组织系统卡片分类创建角色等用户研究活动可以帮助您了解用户行为并确定主要用户任务。这些见解可以为您的内容层次结构和用户流程提供信息。

  2. 标签系统。这包括分类、上下文链接、导航术语、关键字和分类法。具有准确、有意义的标签的一致信息系统可帮助用户快速了解您的网站或应用程序。

  3. 导航系统。用户可以通过全局、本地和上下文导航系统了解如何从主页或屏幕到达最终目标。如果早期可用性测试表明用户流程不直观,您可以使用向导和指南来改进功能。

  4. 搜索系统。为了帮助用户搜索您的网站或产品,您需要决定如何对内容建立索引,例如按主题、细分受众群或内容类型。用户测试可以帮助您决定如何最好地显示和排序搜索结果以满足用户需求。

信息架构示例和关键步骤

用户研究帮助用户体验设计师了解他们的用户是谁,他们需要哪些信息,以及他们检查哪些网页或应用程序来查找信息。用户访谈是定性数据的重要来源,并且它们与反映使用模式的定量数据完美匹配,”克拉拉说。

克拉拉建议通过卡片分类来了解目标受众如何使用信息。她建议:“要求参与者将相关内容分组到带有现有标签的存储桶中”,或者邀请他们列出所需的内容列表,并为其添加标签。

用户洞察可以帮助您的团队设计信息架构可交付成果,包括用户流程、线框图、分类法和导航系统站点地图。

站点地图

设计师为数字产品创建站点地图或导航流程图,以显示页面或屏幕如何相互关联。站点地图捕获数字产品的组织和导航系统,反映用户的需求和行为。

用户流量

用户流程图显示用户如何浏览一组屏幕或页面以实现目标。测试并修改您的流程和交互设计,直到您的目标用户发现它们可用且有用。

线框

线框图概述了 UI/UX 元素如何出现在用户界面上。设计人员使用线框图以较低的保真度展示界面设计,并获得有关高级架构和设计决策的反馈。

分类

良好的信息架构将内容分为清晰、标准化的类别、子类别和标签。这种分类法可以帮助用户通过动态内容、过滤搜索以及内容个性化和推荐找到他们需要的内容。

信息架构师的专业提示

  • 以良好的 IA 为主导。“IA 是您设计的基础,”Clara 说。“如果没有它,可能会犯一个代价高昂的错误。你可能必须彻底重构一个产品。”

  • 尽早并经常进行合作。设计师应该与用户研究团队、开发人员、产品经理和利益相关者合作,以更好地了解用户行为和业务目标。

  • 始终以用户为中心。“这句话永远不会出错,”克拉拉说。良好的网站组织、标签、导航、搜索和内容管理始于了解您的用户。

figma" class="css-1spgrty" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; font-weight: 500; font-size: var(--h2-fs); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); position: relative; color: rgb(40, 40, 40); font-family: __whyte_5bb98a, __whyte_Fallback_5bb98a, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">使用 Figma 快速启动信息架构

使用 figma.net.cn/lm2/3383.html">FigJam 的现成模板来启动您的 IA 设计流程,用于站点地图线框图分类开发figma.net.cn/lm2/3383.html">FigJam 让您远离空白画布,让您与团队协作,”Clara 说。“你不需要准备任何东西。你们可以开始一起创造一些东西。”

为了获得灵感,她推荐Figma 的用户体验设计社区“它是最丰富的设计资源之一,包括信息架构示例,”她说。要使用 Figma 进行信息架构设计,请查看Figma 的 YouTube 频道“有大量的提示、教程、课程和配置演示可供深入研究,”Clara 说。