做产品 PMaker
空格的键盘空格的键盘
设计结构

宽而浅

宽而浅 | 设计结构 | 做产品

宽而浅

在同屏扫十个选项,比连续点四次进四层容易得多。前者是一次识别,后者是四次决策。

你会遇到的现象

  • 某个功能确实存在,但用户说从来没发现过

  • 三级以下的页面几乎没有访问量

  • 为了让导航看起来清爽,把东西一层层往里塞

一级菜单五到九项这个范围,来自人的短期记忆一次能有效处理的信息量。少于五项通常说明这一层没必要存在,多于九项就该分组。

但真正的重点是深度。**每多一层,就会流失一批人。**这不是因为点击麻烦,是因为每一层都要求用户做一次「猜它在哪一类里」的判断,判断错一次就得退回来重来。

超出九个怎么办

做法什么时候用

分组但不加层 在同一屏内用分隔线或小标题把十几项分成三组。用户还是一眼扫完,没有多点一次

砍掉低频的 先看数据。一个月没人点的项,收进设置页比留在导航里好

加搜索 项数确实多且都需要(比如设置项),做一个能搜的入口比精心分类有效

改用矩阵 如果内容有多个属性、用户从不同角度找,用筛选代替分类

再加一层 最后才考虑。它看起来最整齐,代价也最大

第一种被低估了。视觉上分组和结构上分层是两件事——前者不增加用户的操作步骤,后者增加。

真正的重点不是宽度,是深度

一级

全部人

二级

三级

四级

几乎没有访问量

流失不是因为点击麻烦,是因为每一层都要求用户做一次「猜它在哪一类里」的判断——猜错一次就得退回来重来。

视觉上分组 同屏内用小标题分成三组,一眼扫完,不多点一次

结构上分层 看起来最整齐,但每个人都要多做一次判断

这两件事经常被当成同一件,其实差别就在那一次点击。面包屑也解决不了深度问题——它只回答「我在哪」,用户在第四层不迷路,不代表他愿意每次都点四下。

已经太深了怎么改

  • **把高频的提上来。**看数据找出访问量最高的三级页面,给它们加一个一级或二级的直接入口。

  • **用搜索抹平深度。**好的搜索能让层级失效,用户直接跳到目标。这也是层级实在压不下去时的兜底方案。

  • **做「最近使用」。**把用户上次去过的地方放在首屏,绕开层级本身。

  • **合并只有一个子项的层。**一个分类下面只有一项内容,这一层就是纯粹的浪费,直接合掉。

面包屑不能解决深度问题,它只解决「我在哪」。用户在第四层不迷路,不代表他愿意每次都点四下。

接着看

四种导航形式 一级项超过九个的时候,换一种导航形式往往比加层更好,比如改成左一级顶二级。

分组与命名 分组分得好,宽也不乱。乱的原因通常不是项数多,是相邻两项看起来没有区别。

一屏一件事 宽而浅说的是导航结构,一屏一件事说的是页面内部。两者一起才不会又宽又乱。