做产品 PMaker
空格的键盘
宽而浅 一级五到九项,两三层到底 一眼扫完,选一次就到 第 2 层 第 3 层 第 4 层 · 基本没人到 窄而深 每层选项少,但要点很多次 每多一层,流失一批人

同样多的内容,两种铺法。人扫一眼九个选项,比连点四次要轻松得多。

Wide and Shallow

Scanning ten options on one screen is far easier than tapping through four levels in a row. The former is one act of recognition; the latter is four decisions.

What you'll run into
  • 某个功能确实存在,但用户说从来没发现过
  • 三级以下的页面几乎没有访问量
  • 为了让导航看起来清爽,把东西一层层往里塞

The range of five to nine top-level items comes from the amount of information human short-term memory can handle effectively at once. Fewer than five usually means this level doesn't need to exist; more than nine and you should group them.

But the real point is depth. Every extra level loses a batch of people. Not because the click is effort, but because each level demands the user guess "which category does this belong to"—guess wrong once and they have to back out and start over.

What to do when you exceed nine

做法什么时候用
分组但不加层 在同一屏内用分隔线或小标题把十几项分成三组。用户还是一眼扫完,没有多点一次
砍掉低频的 先看数据。一个月没人点的项,收进设置页比留在导航里好
加搜索 项数确实多且都需要(比如设置项),做一个能搜的入口比精心分类有效
改用矩阵 如果内容有多个属性、用户从不同角度找,用筛选代替分类
再加一层 最后才考虑。它看起来最整齐,代价也最大
The first option is underrated. Visual grouping and structural layering are two different things—the former doesn't add steps for the user; the latter does.
真正的重点不是宽度,是深度 一级 全部人 二级 三级 四级 几乎没有访问量 流失不是因为点击麻烦,是因为每一层都要求用户做一次「猜它在哪一类里」的判断——猜错一次就得退回来重来。 视觉上分组 同屏内用小标题分成三组,一眼扫完,不多点一次 结构上分层 看起来最整齐,但每个人都要多做一次判断
The first option is underrated. Visual grouping and structural layering are two different things—the former doesn't add steps for the user; the latter does.

How to fix it when it's already too deep

Breadcrumbs don't solve the depth problem—they only solve "where am I." The user not getting lost on level four doesn't mean they're willing to tap four times every single time.