35. 🗂️ 信息架构 Information Architecture ★★★☆☆

🌏 Web 网页规范

  • 树状导航树与无限深度全站地图 (Site Map)
  • 卡片分类法 (Card Sorting) 科学归群检验
  • 面包屑导航链路与父级节点追踪

📱 App 移动端规范

  • 底部 3-5 个主页签扁平 Tab Bar 限制
  • 侧滑浮动汉堡抽屉导航设计要领
  • Deep Link 跨模块直达跳转路径规划

Web 多维导航与路径可视追溯

Web Site Maps, Hierarchical Trees & Breadcrumbs

Web 端承载的信息体量巨大,主要利用左侧树形目录和顶部下拉大菜单来展示信息深度。使用面包屑导航(Breadcrumbs)让用户随时能够返回各级父节点。

App 扁平视口与多页签导航限制

App Flat Tab Bars, Hamburger Menus & Quick Actions

App 端受限于屏幕尺寸,不能容纳复杂的树状目录,核心层级被压缩在 3-5 个常驻的底部 Tab Bar 里。更深的页面通过推进式层级栈或临时滑出抽屉来组织。

LIVE PLAYGROUND: 卡片分类法 (Card Sorting) 归类逻辑检验 点击下方的功能属性卡片,验证其理应属于“导航架构”还是“内容呈现”的分类中
https://web.meta-ui.edu/ia
09:41
📶 🔋
🗂️ Mega Menu 大菜单 — 顶部下拉展示信息深度 悬停触发

🌲 信息层级树形目录

  • 🏠 电商平台
    • 📦 商品中心
      • 📱 数码
      • 👗 服饰
    • 📋 订单管理
  • 👤 会员中心

层级联动下拉菜单

当前选择层级:无

💡 导航深度越浅,用户到达目标页面的点击次数越少;Mega Menu 把多层级平铺到一屏,树形目录则适合无限层级的文件系统式浏览。

🍞 面包屑导航 (Breadcrumbs)

展示当前页面的层级路径,让用户随时返回任意父级,是信息架构的"面包屑线索"。

首页 / 产品 / 功能介绍 / 集成方案 当前页

📊 信息深度对比 (Depth Comparison)

同样到达"集成方案"页面,三种架构的点击次数差异:浅层架构体验更佳,深层架构信息组织更精细。

✓ 扁平架构
首页 → 集成方案
点击次数: 1
~ 中等架构
首页 → 产品 → 集成方案
点击次数: 2
✗ 深层架构
首页 → 产品 → 功能 → 资源 → 集成
点击次数: 4

🔀 三种信息架构类型 (IA Types)

🌳 树状层级
首页 → 分类 → 子类 → 详情
适用:电商、文档站
🕸️ 网状结构
页面互相链接,无严格层级
适用:Wiki、知识库
➡️ 线性流程
步骤 1 → 2 → 3 → 完成
适用:向导、结账
📋 大模型统一 Prompt (LLM Prompt)