35. 🗂️ 信息架构 Information Architecture ★★★☆☆
🌏 Web 网页规范
- 树状导航树与无限深度全站地图 (Site Map)
- 卡片分类法 (Card Sorting) 科学归群检验
- 面包屑导航链路与父级节点追踪
📱 App 移动端规范
- 底部 3-5 个主页签扁平 Tab Bar 限制
- 侧滑浮动汉堡抽屉导航设计要领
- Deep Link 跨模块直达跳转路径规划
Web 端承载的信息体量巨大,主要利用左侧树形目录和顶部下拉大菜单来展示信息深度。使用面包屑导航(Breadcrumbs)让用户随时能够返回各级父节点。
App 端受限于屏幕尺寸,不能容纳复杂的树状目录,核心层级被压缩在 3-5 个常驻的底部 Tab Bar 里。更深的页面通过推进式层级栈或临时滑出抽屉来组织。
LIVE PLAYGROUND: 卡片分类法 (Card Sorting) 归类逻辑检验
点击下方的功能属性卡片,验证其理应属于“导航架构”还是“内容呈现”的分类中
https://web.meta-ui.edu/ia
🗂️ Mega Menu 大菜单 — 顶部下拉展示信息深度
悬停触发
🌲 信息层级树形目录
- 🏠 电商平台
- 📦 商品中心
- 📱 数码
- 👗 服饰
- 📋 订单管理
- 📦 商品中心
- 👤 会员中心
层级联动下拉菜单
当前选择层级:无
💡 导航深度越浅,用户到达目标页面的点击次数越少;Mega Menu 把多层级平铺到一屏,树形目录则适合无限层级的文件系统式浏览。
📊 信息深度对比 (Depth Comparison)
同样到达"集成方案"页面,三种架构的点击次数差异:浅层架构体验更佳,深层架构信息组织更精细。
✓ 扁平架构
首页 → 集成方案
点击次数: 1
~ 中等架构
首页 → 产品 → 集成方案
点击次数: 2
✗ 深层架构
首页 → 产品 → 功能 → 资源 → 集成
点击次数: 4
🔀 三种信息架构类型 (IA Types)
🌳 树状层级
首页 → 分类 → 子类 → 详情
适用:电商、文档站
🕸️ 网状结构
页面互相链接,无严格层级
适用:Wiki、知识库
➡️ 线性流程
步骤 1 → 2 → 3 → 完成
适用:向导、结账
📋 大模型统一 Prompt (LLM Prompt)