F7.05.1Direction as hierarchy设计研究

方向表达层级的进入与退出

别名: 进出方向 · 层级方向 · push pop

概念解释

页面从哪一侧进来,是在说「我比上一层更深还是更浅」,不是在说「我从哪个按钮长出来」。向前进一层用一个方向,退出这一层用相反方向,层级就被编码进空间轴。方向一旦既用于打开详情又用于关掉详情,轴上就没有「深 / 浅」可写。这是层级语法,不是对象身份,也不是产品里每一类表面住在哪一侧的总地图。

机制

导航栈是时间上的后进先出,屏幕却是二维的。把栈映射到一条空间轴(常见是沿阅读方向向前推),人可以用身体方向感模拟深度:向前是压入,向后是弹出。方向因此成为层级的外部表征。

没有这条轴时,每一页都像在原地替换,深度只能靠标题记忆。记忆在三层之后就不可靠,返回时会问「我是在往上走还是又进了一层」。方向把这个问题变成可感知的位移符号,类似于括号的开合。

怎么研究

给同一条三层路径配上「前进与退出同向」和「退出反向」两种转场,测事后画出来的层级图、返回是否点对层、以及「现在在第几层」的估计。自变量:方向是否按栈对齐、轴是水平还是垂直。因变量:层级图正确率、错误返回、层深估计。

阅读方向是协变量:从右向左书写的用户对「向前 = 从右来」的默认可能相反,需要按语言分组,不能把一种轴当成宇宙默认。

边界

  • 模态覆盖不是压栈的一层,用推进方向会把它说成更深的页;模态更适合原地升起或从垂直轴来,前提是全产品一致。
  • 平板分栏里「详情」可能只是邻栏替换,没有新的栈深度,硬加推进方向会假造一层。
  • 减弱动效拿掉位移后,方向语法消失,需要标题、返回按钮语义把层深补上。

怎么落地

  • 为真正的栈导航选定一条轴:进入用正向,退出用反向,不要把这条轴借给非栈的表面。
  • 打开详情与关闭详情必须成对出现在轴的两端,而不是都从同一侧滑入。
  • 验证:让人看完三层导航后画出栈。方向乱时层数会画错;方向成对时即使没读标题也能标出「往里 / 往外」。

延伸

  • 同组F7.05.2 方向不一致会破坏空间模型 · F7.05.3 返回的方向应是前进的逆向
  • 相邻F7.07 动效表达空间关系 · G4.01 返回栈与返回语义
  • 站内检索hierarchical direction · push pop · spatial model

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F7.05.1