Notion是真的厉害，交互都藏在魔鬼细节中

之后收到很多读者反馈说，Notion才是真的厉害，飞书很多设计都是借鉴的Notion。

对Notion我是久仰大名，但是因为网络的问题，即没有深入使用过，也不方便分享给大家。

然而今天3月事情发生了反转，Notion终于可以无访问了～

再加上我因为一个设计项目而研究了一下Notion的用户体验，发现了很多让我惊艳的细节。

没错，真的是「惊艳」，甚至有点脑洞大开的感觉。

注意，我这里不是讲AI之类的高级功能，而是几乎每个用户都会接触到基础功能，都能做得非常轻量无感。

而Notion能做到这些，虽然也少不了过硬的技术，但更多的是打磨细节的态度，真是令我佩服。

我整理了6个比较好理解的设计点，加上跟国内竞品的比对，来和大家分享一下这些魔鬼细节：

快速创建

无感选择

⌨️ 键盘操作

清晰易懂

遵循直觉

自动存档

快速创建

在Notion新建文档时，会先打开一个弹窗，如果想要全屏也有操作入口：

这个对我自己来说还是挺有用的——轻量迅速，啥都不写直接关掉就不会存档。

如果只想全屏创建也是有入口的，但也是直接在当前页创建：

这两种创建方式，都是不需要加载新页面的，这样做最大的好处，当然就是速度快。

其它的在线文档，不管是飞书、腾讯文档还是是 Google Drive，都需要加载新页面，流畅性肯定会打折扣。

无感选择

Notion新建文档后，跟很多其它在线文档一样，会有一个选文件/模板的步骤。

但是这个步骤非常轻量，如果你不需要模板，甚至察觉不到它的存在。

因为写完标题后用户都会回车开始写正文，而这个回车步骤刚好就同时选择了空白文档。

如果用户随手点击空白处，也会进入空白文档，不会有任何拦截的感觉。

如果用户真要选，只需在回车之前用方向键切换即可，手指不需要离开键盘。

为什么说这个交互做得好呢？我们对比了一下竞品就知道了。

不论是飞书还是腾讯文档，创建文档时都要先在菜单里选择文件类型。

腾讯文档创建后，会在空白页的底部显示几个模板，这个还算轻量，不需要可以忽视。

飞书则会给你一个大弹窗，相当于强制多一个步骤。

就算选了空白模板，进去后底部又出现了和腾讯文档类似的模板卡片，再问一次要不要选。

我估计只有少数高级用户才会依赖模板，普通用户都是从空白创建，所以Notion的交互更胜一筹。

当然，我没有数据，这个分析只能算经验之谈。

但有句话说“最好的交互就是没有交互”，我觉得用来解释Notion的这个「无感选模板」的交互再好不过。

⌨️ 键盘操作

写文档和写代码类似，都是以键盘操作为主，这个时候最麻烦的就是不停地在键盘和鼠标之间来回切换了。

刚才分析的选模板的步骤不需要离开键盘，其实Notion里大部分菜单是如此。

只要输入“/”就能唤起菜单，然后方向键配合回车即可选择，不需要无视即可。

腾讯文档没有这种唤起菜单的方式；飞书有，但一定要从空白行唤起。

除此之外，就连鼠标按出的菜单，Notion都提供键盘操作，其它大部分竞品都做不到这么全面——飞书和腾讯文档从左侧点击出来的菜单里，最顶上的图标都无法用键盘选择。

这种键盘交互虽然不一定有多大用处，但细节是真的到位。

清晰易懂

在Notion文档内创建内容时，会提供很大的列表菜单，鼠标悬停上去还有图文说明。

飞书和腾讯文档也提供类似的列表，但描述没那么详细，几乎没有悬停可见的图文说明（录屏演示中只看到一个）。

虽然，我还是觉得有些东西不需要搞那么多说明，尤其是正文、标题这种很基本的东西。

但 Toggle List、Callout、Board View 这些还是有必要配图解释清楚的。

总之，至少算是精神可嘉吧。

遵循直觉

其实在线文档这种产品已经比较标准化了，很多差异只有靠细节来体现。

尤其是拖拽这种交互，就是最能“细节处见真章”的。

我之前还专门写过一篇文章，对比了拖拽没做好和做得好，差别有多大。

反例

正例

有兴趣看细节分析的，可以去：一个拖拽，就暴露了国内外大厂的差距

Notion和腾讯文档以及飞书都能把内容区块拖拽到其他地方，但效果就有明显的差异。

Notion拖拽时，被拖拽的部分在页面上没有任何变化，但会形成一个半透明的浅色投影跟随鼠标移动，甚至可以拖到侧边形成左右布局。

飞书在拖拽的时候，被拖拽的部分在原位变浅，然后形成一个很重的阴影框跟随鼠标，不能拖到侧边只能上下排列。

看上面这个交互，最大的问题是阴影框距离鼠标太远，而且完全没有透明度（遮盖下面的内容）。

腾讯文档和飞书类似，不过好一点，因为阴影框的位置不会偏离鼠标太远，也有一定的透明度。

这三种拖拽交互，你认为哪种最好呢？

个人喜好或许有差异，我来做个纯技术分析吧。

Notion相对比较自然，因为被拖拽的部分是慢慢拉出来的，没有丝毫跳跃感。

Notion的投影很浅但有能看懂，对页面的内容几乎没有什么遮挡，看起来就很像是我在白纸上拿起一个东西，从灯光自然投下的阴影——这就是源于生活的设计灵感吗？

相比之下，飞书一点透明度也没有，关键是跳得距离鼠标太远了。

腾讯文档好点，虽然有点透明度，但还是能把下面的字挡得看不清。

当然，Notion也有点儿改善空间，要是拖动时，页面上被拖动的元素有点状态变化就更清晰了。

你认为需要这个强调这个状态吗？

自动存档

文档写到一半后，直接关掉网页。

下次从官网地址进入，就自动打开上次没关掉的文档：

如果上次有没写完的文档，这次就省去了翻找的麻烦。

说到这里，我不禁想吐槽一下飞书，每次重新打开都是进官网。

虽然飞书功能多，但这个官网定位明显是宣传用的，给我这个老用户每次展示一次没必要吧？

说说感想

这里要明确一下，Notion的定位本身于飞书和腾讯文档还是有所区别，很多东西不便直接对比。我是为了让大家看得更加直观，才选了这两款比较知名的大厂产品。

但Notion的很多设计细节，让我在这个同质化的焦躁年代看到了难得用心——这才是我写这篇文章的初衷。

其实国内有很多优秀的产品，但优势主要在技术、运营、成本、效率等方面。

而真正在设计上，尤其体验设计上拿得出手的产品，其实很少。