web design uiMay 1, 202610 min read

为高级用户而设计

大多数产品只为首次使用的用户设计,却抛弃了每天回来的专家。高级用户 UX 的五个层次、守住底线的规则,以及一份可以直接落地的审计清单。

By Boone
XLinkedIn
design for power users

那个把每个按钮都点一遍的用户早就走了。真正住在你产品里的那位,一天打开它二十次,背下了一套你自己可能都没设计过的隐藏界面。如果别人的产品有更好的隐藏界面,专家就走了,而专家恰恰是付钱的那群人。

主流 UX 总在谈首次使用和激活。专家一眼都看不到这些。他们第八百次打开你的产品,按下 Cmd-K,要么行云流水地干完活,要么因为你的面板返回五条毫不相关的结果而气到摔键盘。高级用户 UX 是第二个产品,而大多数团队还没做出过一个。

可见产品背后的隐藏产品

每个伟大的产品里都藏着两个产品。 一个是给新用户看的可见产品,另一个是给已经懂行的用户准备的隐藏产品。

可见产品是按钮、菜单、提示气泡和引导。隐藏产品是按键、命令面板、已保存视图、多选,以及可通过路由寻址的状态。前者让第一次使用清晰易懂,后者让之后的一千次使用飞快。

Linear 两个都做了,而且是故意的。新用户看到的是干净的收件箱和明确的主操作。专家按 g 再按 i 跳到收件箱,按 c 创建 issue,按住 shift 点击进行多选,每个已保存视图都是一个可分享的 URL。同一个产品,两个产品。都经过设计。

高级用户是你输不起的群体

首次使用的用户声音大,专家却沉默,所以大多数团队都在为声音大的那群人优化。高级用户每月打开产品的天数更多,每个席位带来的收入更高,拉来的新用户比其他所有群体加起来还多。他们离开时也最响亮,因为他们在三个竞品里都体验过什么叫快。

解法不是“加几个快捷键”。解法是把高级用户界面当作一等产品来对待,给它独立的设计预算和路线图。

高级用户 UX 的五个层次

高级用户 UX 不是某一个功能,而是五个层层叠加的层次。大多数产品只做了一两个。最好的产品五个全做,而且各层互相强化。

五层体素框架朝镜头倾斜叠放:命令面板、键盘层、已保存视图、批量操作和高级界面,由细细的珊瑚色线条像脊梁一样连接起来
五层体素框架朝镜头倾斜叠放:命令面板、键盘层、已保存视图、批量操作和高级界面,由细细的珊瑚色线条像脊梁一样连接起来

1. 命令面板

Cmd-K 面板是统一的搜索与执行入口。一次按键就能唤出产品里的所有操作、路由和对象,并按最近使用和使用频率排序。Linear 的面板就是标杆。Raycast 围绕同一个基础元素搭建了整个操作系统层。Notion、Vercel、GitHub 和 Slack 也都有自己的面板。

真正的面板在同一个输入框里同时搜索内容和操作,在每条结果旁显示快捷键提示,并支持内联参数。“把 issue 移到进行中”应当是一条命令,而不是四次点击的链条。常见的失败形态是只能搜索的面板:一个只能找文档、不能触发操作的框,不过是一个有妄想症的搜索栏。Cmd-K 的意义在于找到并执行。空状态就是产品一文解释了为什么面板的默认状态很重要。

2. 作为一等系统的键盘快捷键

快捷键不是藏在帮助弹窗里的一串绑定列表。它是一个系统,要有可发现性、一致性和渐进的深度。Superhuman 是黄金标准。每个操作都有按键,速查表就在产品里,引导流程先教键盘,再教鼠标。

Linear 用的是可扩展的字母组合系统。第一个字母代表界面(g 表示 go),第二个字母代表目的地(i 是收件箱,p 是项目,m 是我的 issue)。用户学会一条规则,就解锁了五十个快捷键。Notion 用斜杠调出命令,用 Cmd-K 调出面板。Figma 使用单字母工具(V 是移动,R 是矩形,F 是画框,T 是文本)。Gmail 的键盘快捷键过了二十年仍是邮件领域的黄金标准。

平放的体素键盘,选中的按键被珊瑚色底座抬起:G+I 对应收件箱,V R F T 对应 Figma 工具,斜杠和 Cmd-K 在中央,J K 用于导航,其余按键为暗淡的灰色
平放的体素键盘,选中的按键被珊瑚色底座抬起:G+I 对应收件箱,V R F T 对应 Figma 工具,斜杠和 Cmd-K 在中央,J K 用于导航,其余按键为暗淡的灰色

系统本身就是产品。一堆零散的快捷键不是系统,只是团队忘了删除的待办积压。

3. 已保存视图、筛选器、书签

专家会围绕自己的工作流来搭建产品。Linear 的已保存视图出现在侧边栏,退出登录后依然存在,可通过 URL 分享,并且实时更新。Notion 的筛选数据库视图对内容也是同样的做法。Stripe 的已保存搜索存下了能抓出异常的精确筛选条件。Vercel 按书签固定团队和项目,让正确的仪表盘只差一次按键。

不可妥协的一点:已保存的状态必须可寻址。每个已保存视图都应该有一个 URL,能经受退出登录、更换设备和分享给同事。只存在于 localStorage 里的状态,用户在另一台笔记本上打开产品的那一刻就消失了。

4. 批量操作

专家一天要接触上百个对象。产品要么支持这一点,要么惩罚他们。Linear 用 shift 点击多选,再按 B 批量更新,堪称经典。Notion 数据库里的多选可以一步改完三十行的状态、负责人和标签。Gmail 的快捷键加上 shift-J,是收件箱在大规模下还能忍受的原因。

批量操作需要三个特性。选择必须一目了然。操作必须能从键盘触达。撤销必须真实可用。藏在右键菜单后的批量操作,就是你不会去用的批量操作;而没有一键撤销的批量操作,第一次出错就会毁掉信任。

5. 高级用户专属界面

有些界面只为专家存在。Figma API 控制台、Raycast 扩展库、Notion 数据库管理视图、Vercel CLI、Cron 以及 Notion Calendar 里纯键盘的时间块层。这些就是专家栖身的深度层。

Raycast 是最干净的范例。基础产品是一个命令面板。专家安装扩展和自定义脚本,把面板变成个人专属的操作系统层。Notion 的数据库也是同样的形态:新手看到的是一个列表,专家看到的是带汇总和公式的关系型数据模型。

这种模式就是渐进式的深度。渐进式披露原则是承重的核心思想:深度藏在一次按键之外,而不是摆在首页上。

解剖命令面板

Cmd-K 面板是最重要的高级用户界面,而大多数团队做出来的都很弱。五个要素把强大的面板和穿着戏服的搜索栏区分开来。

单个命令面板被拆开并标注各部分的体素解剖图:顶部是珊瑚色搜索输入框,中间是三行结果,底部是青色的快捷键提示页脚,一个 ESC 键帽飘在右侧
单个命令面板被拆开并标注各部分的体素解剖图:顶部是珊瑚色搜索输入框,中间是三行结果,底部是青色的快捷键提示页脚,一个 ESC 键帽飘在右侧

优秀的面板按最近使用和频率给结果排序,在每条结果旁显示按键提示,支持内联参数,按上下文限定范围,并且一次 Esc 就能关闭。Linear 五项全中。Raycast 五项全中,还把面板做成了整个产品。大多数面板只做到两项,用户就学会了无视它们。

设计高级用户 UX 的五条规则

五条规则把真正的高级用户界面和丢在帮助页脚里的快捷键清单区分开来。命中四条,界面通常就管用。只命中两条,专家就走了。

  1. 每个操作都有按键。 如果用户能用鼠标做,就应该能用键盘做。
  2. 展示按键,但别喧宾夺主。 在面板、提示气泡、菜单行里放上按键提示。快捷键应该在用户伸手去拿鼠标的那一刻可见,而不是埋在设置页里。
  3. 多选必须一目了然。 可见的复选框,或者清晰的 shift 点击模式。用户不知道其存在的批量操作,就等于不存在的批量操作。
  4. 已保存状态必须可寻址。 基于 URL、持久化、可分享。只活在浏览器里的状态,迟早会消失。
  5. 高级界面只差一次按键。 Cmd-K、斜杠,或者单个字母。如果专家必须导航过去,那它就是个功能页,而不是高级界面。

命中五条里的四条,产品在专家手里会感觉是活的。只命中两条,它就像一个临时硬塞了几个键盘小技巧的网站。

说明团队忘了专家的反模式

有五种模式杀死的高级用户界面比其他任何东西都多。

与浏览器冲突的快捷键。 在网页应用里重新绑定 Ctrl-W 或 Ctrl-T,会关掉标签页,用户丢掉未保存的工作。改在 Cmd-K 里做命名空间。

快捷键只记录在需要点三次才能到的帮助弹窗里。 藏在“设置、帮助、键盘快捷键”后面的速查表,用户永远看不到。要在操作发生的那一刻展示按键。Superhuman 把速查表做成一等屏幕。大多数产品只是放个页脚链接,还希望没人点。

需要右键的多选。 藏在上下文菜单里的批量操作,是写给更新日志看的,不是给用户用的。

对基础快捷键设置 Pro 付费墙。 有些产品把键盘快捷键、面板或已保存视图锁在“Pro”套餐后面。快捷键不是功能本身,而是功能被使用的方式。把它设为付费,就是把产品本身设为付费。

退出登录后就消失的已保存视图。 只存在 localStorage 里的筛选器,用户换台设备打开产品时就自己抹掉了。要持久化在服务器上,绑定到用户,让 URL 来承载它。

高级用户审计

拿任何产品过一遍这七个问题。有两个及以上答不上来,到季度末专家就已经在别人的产品上了。

七个问题方块沿画面向下排列的体素决策树:每个操作都有按键、按键可被发现、多选一目了然、保存状态可寻址、只差一次按键、无浏览器冲突、无付费墙
七个问题方块沿画面向下排列的体素决策树:每个操作都有按键、按键可被发现、多选一目了然、保存状态可寻址、只差一次按键、无浏览器冲突、无付费墙
  1. 每个主要操作都有键盘快捷键吗? 列出最常用的二十个操作逐一检查。如果超过三个需要用鼠标,键盘层就是不完整的。
  2. 有能搜索并执行的 Cmd-K 面板吗? 不是搜索栏。而是能运行命令、接受参数、显示快捷键提示的面板。
  3. 快捷键能在上下文中被发现吗? 提示气泡、面板提示、菜单标签。用户应该在做操作时学会快捷键,而不是靠读文档。
  4. 多选能用键盘完成,并且有清晰的撤销吗? Shift 点击,然后一个按键操作,再一键撤销。任何一环缺失,链条就断了。
  5. 已保存视图可通过 URL 寻址并且持久吗? 复制 URL,粘贴到另一个浏览器,登录。如果视图加载不出来,已保存状态就是作秀。
  6. 高级界面在任何地方都只差一次按键吗? 控制台、API 界面、扩展库。如果专家必须导航才能到达,它们就是功能页,而不是高级界面。
  7. 产品把键盘当作一等公民吗? 没有与浏览器冲突的快捷键。没有付费墙后的快捷键。没有只能用鼠标的批量操作。

七项全过的产品默认就能留住专家。有三项及以上不过的产品,会把专家输给 Linear、Raycast,或者任何有意识地做出第二个产品的竞品。反仪表盘讲的是同一门学问的布局侧面,视觉层级一文则讲专家如何阅读高密度信息。

这在产品中处于什么位置

高级用户 UX 是首次使用 UX 的对应面。没有引导的引导处理的是从没见过产品的用户。本文处理的是已经见过它九百次的用户。有意设计摩擦的想法在这里要反过来用:对新用户来说,恰到好处的摩擦能教会他们产品。对专家来说,每一点不必要的摩擦都是税。落地页设计原则和网页设计原则则分别讲了同一门学问在营销页和整个产品中的版本。

有意识地打造隐藏产品

可见产品得到发布文章和演示视频。隐藏产品得到续费和口碑。Linear、Raycast、Superhuman、Notion、Cron、Figma、Gmail、Vercel、Slack、GitHub、Stripe 和 Cursor 都有一个共同点。它们为已经懂行的用户做出了真正的第二个产品。

大多数团队做出第一个产品,然后让第二个碰运气自己长出来。这个选择代价就是专家。选定键盘层。选定面板。选定已保存视图系统。选定批量操作。选定高级界面。复利效应,就是专家勉强忍受的产品与专家主动传教的产品之间的差别。

FAQ

什么是高级用户 UX?

高级用户 UX 是面向已经熟悉产品的用户的设计层。它包括命令面板、键盘层、已保存视图与筛选器、批量操作和高级用户专属界面。新用户不需要它。专家就住在里面。

每个产品都应该有 Cmd-K 命令面板吗?

几乎所有效率类产品都应该有。面板会成为统一的搜索与执行入口,让专家用一次按键打开所有操作。Linear、Raycast、Notion、Vercel、GitHub 和 Slack 都有。只有单一主操作的消费级产品可以省掉。大多数 B2B 和专业消费级工具则不行。

不做引导,怎么教会用户键盘快捷键?

每次都在操作旁边展示快捷键。提示气泡、面板提示、菜单标签。Superhuman 把速查表做成用户可随时唤出的一等屏幕。Linear 在面板和菜单里展示每一个快捷键。用户在干活的过程中学会键盘。

打造第二个产品

如果你想要一个把键盘层、命令面板和保存状态系统当作产品本身来设计,而不是最后才收拾的团队,雇用 Brainy。我们有意识地打造隐藏产品,让专家明天打开你的工具时,感觉比昨天更快。

Want a product where the expert user gets a real surface instead of a help-menu footer? Brainy designs the keyboard layer, the command palette, and the saved-state system as part of the product, not as cleanup.

Get Started

More from Brainy Papers

Keep reading