E5.03.1sidebar for deep IA设计

侧边栏适合层级多、条目多的结构

别名: 侧栏导航 · navigation rail · 多层级侧边栏

概念解释

侧边栏导航(sidebar navigation)是贴在内容一侧的纵向清单,用来承载比底栏或顶栏槽位更多的目的地,以及这些目的地下面的子层。它适合的不是「看起来像后台」,而是信息架构本身又深又宽:条目多到一行放不下,层级多到不能全部摊成一级。用底栏硬塞、或把整棵树藏进一个按钮,都是在用错误的容器装这棵树。

机制

纵向列表的增长方向和屏幕高度一致,条目可以滚动,分组、缩进、展开/折叠都能落在同一条视觉脊上。用户扫的是一条可滚动的目录,而不是有限的几个图标槽。深度靠缩进和展开来表达:父级仍在视口里,子级在它下面出现,位置本身在说「谁属于谁」。宽度方向留给文字,长名称不必立刻截成图标。

这套机制有前提:人愿意把一部分横向空间让给目录,并且会反复在目录和内容之间切换。工作台、文档库、设置中心、后台管理符合这个前提——任务是在一棵稳定的树里找地方干活。消费型信息流不符合:目的地少、层级浅,侧栏会变成一条空荡荡的装饰,还把内容挤窄。侧栏也不是「能放很多」就该把低频入口、账号设置和当前上下文动作全部倒进去;它装的是可停留的地方,不是工具箱。

边界

手机竖屏几乎没有可让出的宽度,同一棵树通常改成推入式抽屉或分层列表,不能声称「侧栏在任何宽度都合适」。树很浅、条目只有四五个时,底栏或顶层页签的扫描成本更低。树极深(四五层)时,侧栏里连续展开会变成第二套页面栈,用户会迷失在缩进里,这时该把深层改成内容区里的钻取,而不是继续在侧栏里加缩进。频繁改动的个性化入口也不适合钉死在侧栏结构里。

怎么落地

  • 先数清一级目的地和典型深度。一级超过底栏能同时显示的数量、或稳定存在两层以上,再选侧栏;否则不要为了「后台感」加一条栏。
  • 侧栏里只放可停留的空间:分组标题是标签不是链接,动作(新建、导入)放在组内或内容顶,避免和目的地抢同一列。
  • 默认展开到用户当前所在的那条路径,不要把整棵树一上来全部打开,也不要只留图标让人猜层级。
  • 验证:把侧栏文案打成目录,找没做过这个产品的人指出「去某深层功能该点哪」。指错的路径说明深度不该继续堆在侧栏里,而应改成内容区钻取。再在最窄可用桌面宽度看内容是否还放得下主任务。

延伸

  • 同组E5.03.2 常驻侧边栏挤占内容宽度 · E5.03.3 折叠为图标后需保留可辨识性
  • 相邻E5.04 汉堡菜单 · E5.12 下拉菜单与子菜单
  • 站内检索sidebar navigation · deep information architecture · navigation rail

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E5.03.1