Notion是一款融合筆記、任務、知識庫以及數(shù)據(jù)庫的生產力工具，主要服務于互聯(lián)網群體。本文作者對Notion 產品進行了體驗拆解，一起來看一下吧。

01 前言

Notion 是一款融合筆記（Notes）、任務（Tasks）、知識庫（Wiki ）以及數(shù)據(jù)庫（Database）的 all-in-one 生產力工具，產品主要服務于互聯(lián)網群體。2022 年，Notion 的用戶規(guī)模目前已經達到 3000 萬，付費用戶達到 400 萬。

國外用戶常用一個公式形容 Notion 是怎么 all-in-one 的：Notion = Google docs + Evernote + Trello + Confluence + Github + Wiki + Quip。同時，Notion 的產品風格也是走極簡主義，有著“合而為一”的野心。

如何高效地對信息進行整合、梳理， 是設計創(chuàng)作很重要的一環(huán)。基于此，這里給大家分享一下 Notion 的產品體驗設計拆解。通過對 Notion 的體驗設計拆解，為你提供一份文檔類產品的解題寶典！

1. 事先聲明

1. 強烈建議使用電腦查看，用戶體驗更佳；
2. 為了讓設計細節(jié)更容易被看到，用 Gif 來呈現(xiàn)展示；
3. Gif 體積較大，請耐心查看。

2. 適合人群

第一類，UI/UX設計師，可以跳出執(zhí)行層，去思考 Notion 的產品設計策略，提升產品分析能力；

第二類，產品經理/運營，通過全面的產品設計拆解、策略推導，獲取產品設計參考；

第三類，文檔產品從業(yè)者，通過全面的產品設計策略推導、用戶需求分析，獲取競品分析參考。

02 日常使用場景

1. 工作區(qū)和基礎概念

1）左側側邊欄

Notion 的側邊欄是導航系統(tǒng)，創(chuàng)建的所有頁面和數(shù)據(jù)庫都會出現(xiàn)在這里。可以將各個頁面嵌套在一起，實現(xiàn)無限的組織層次。

2）右側編輯器

這是創(chuàng)建的所有內容的所在地，映入眼簾的是宛如白紙一樣的畫布，工作和生活就從這里開始。

3）Workspace 工作區(qū)

在團隊中，側邊欄的Workspace標題下的任何頁面都可以被看到，并且很可能被工作區(qū)的所有成員編輯（除非另有權限配置）。

4）Teamspace 團隊空間

團隊空間可以配置開放式的還是封閉式的，有對應的不同權限的管理配置。

5）Private 私人的

個人工作空間默認為保持頁面的私密性，除非它們被明確地共享。

6）Page 頁面

Notion 的頁面是無限層級的，一個頁面能夠添加多個頁面，頁面中的頁面也可以繼續(xù)添加頁面。

7）Block 區(qū)塊

Notion 中的基本對象為 Block（區(qū)塊），它可以是任何形式：表格、文本、網頁、代碼塊、圖片、視頻、文件或者直接是一個Page（頁面）。

2. Notion 由 Block 組成

上圖標出了不同類型的 Block（區(qū)塊）。Notion 以 Block 為基本單位，圍繞筆記文檔、知識庫、任務、輕量的數(shù)據(jù)庫等方面來組織內容。

在這張白紙上，包括文字、表格、視頻、音頻、網頁、數(shù)據(jù)庫等等，各種類型內容都可以看作「區(qū)塊」。操作也非常簡單，點擊「+」或是輸入“/”即可調用，隨意將內容組織，并支持 Markdown 語法。Page（頁面）上的任何內容，不管是文字、圖片還是表格，都是一個 Block（區(qū)塊）。每個頁面都是各種 Block（區(qū)塊）的排列組合。

3. 新建工作區(qū)

工作區(qū)的新建頻率相對頁面來講是比較低的，因此新建工作區(qū)的入口相對較深，打開位于 Notion 窗口左上方的工作區(qū)切換器，會提供新建工作區(qū)的入口。嘗試新建一個 Workspace，選擇團隊使用，會直接在根節(jié)點創(chuàng)建好幾個對應的頁面模板可以快捷使用。點擊之后，又回批量生成很多模板頁面，幫助用戶快速上手，幫助用戶輕松愉快的度過試用產品的 Day One 。

4. 新建頁面

點擊側邊欄底部的+ New Page按鈕來創(chuàng)建一個新的頁面，這里新建的頁面會默認出現(xiàn)在Private下。或者當你把鼠標懸停在側邊欄上的任意節(jié)點時，點擊任何一個+按鈕，就會在對應的節(jié)點下新建頁面。

新建頁面后，會默認出現(xiàn)一些快捷的操作，例如使用模板、導入、數(shù)據(jù)庫等等，幫助用戶快速地使用 Notion 強大的頁面能力。如果自己嘗試輸入了一些文本，所有的模板提示和頂部的一些設置就會自動消失，映入眼簾的是宛如白紙一樣的畫布，工作和生活就從這里開始。

5. 頁面模板

在產品體驗中，對于初次上手的用戶而言，模板是最好的選擇。完全空白的 Notion 并不能解決用戶的需求，得先搭建出各種工具，用戶直接在工具里進行內容填充，才能滿足用戶的需求。所以，有了模板后，用戶價值的探索路徑縮短，減去了需要熟悉功能、自己動手搭建的負擔，讓用戶能夠迅速使用起來，并在持續(xù)使用的過程中不斷熟悉產品各個功能，從而創(chuàng)建出屬于自己的模板。

在空白頁面中點擊「模板」，就會進入使用模板的流程。最近 Notion 也對使用模板的界面做了升級優(yōu)化，記得之前選擇模板的彈窗，側邊欄是在右邊，左側預覽頁面，這次把側邊欄放到了左邊，在右邊預覽頁面，「使用模板」的按鈕位置也發(fā)生了變化。

總的來講會和用戶在日常使用 Notion 得行為方式非常一致，都是在左邊切換，右邊看頁面內容，減少用戶的認知成本。使用模板的流程也非常短，在側邊欄切換模板的同時，就能在右邊同步預覽模板的內容，點擊「使用模板」便能立刻將將模板內容應用到剛剛新建的頁面中，使用上的體驗也非常絲滑。

所以，正是因為模板在產品策略與市場策略中的重要性：既能促進用戶活躍，也能促進用戶留存，Notion 才會將模板視作一個單獨的模塊，不斷迭代更新。

6. Database 數(shù)據(jù)表

數(shù)據(jù)表幫助你在 Notion 中以各種方式組織信息–讓你組織、分類、標記、過濾、搜索、查看和利用它來完成工作。下面是一個關于 Notion 數(shù)據(jù)表幾種視圖和常見的使用場景的介紹。

1）Table 表格

表格形式，類似于 Airtable 表格，便于做數(shù)據(jù)統(tǒng)計。每一行都可以單獨打開變成一個 Page，添加更多的內容。

2）Board 看板

看板形式，類似于 Trello 看板，便于任務分配、分類。卡片中的選項可以完全由自己定義，看板的分組也可以用選項來改變。

3）Timeline 時間軸

時間軸形式，時間軸視圖，適合項目排期和計劃.

4）Calendar 日歷

日歷形式，便于查看時間相關的信息，可以在日歷上按時間順序查看任務。

5）List 列表

列表形式，便于查看一部分關鍵性的信息，比如只顯示名稱和進度，來明確任務的進度。

6）Gallery 畫廊

便于查看多張卡片中的開頭部分，可以在卡片開頭添加一些概要內容。

7. 工具欄

大部分同學應該習慣了 Word 這種工具欄，包括其它很多的在線文檔平臺，也都保留了這種設計。

而 Notion 的工具欄默認是隱藏的，在沒有開始第一個字輸入之前，頁面頂部還會有少量的功能外露，當開始輸入文本時，所有的多余功能都消失了，頁面就是一片白色，功能區(qū)全部隱藏，需要點擊或選中一些內容才能出現(xiàn)，看似更麻煩，但實則更高效。

8. 浮動工具欄

這種工具欄可以稱為「浮動工具欄」，與傳統(tǒng)的工具欄拋給你一堆選擇不同，浮動工具欄是圍繞內容服務的。你可以先書寫內容，再使用浮動工具欄中的菜單設置格式。讓設置就在你的光標旁邊，移動距離更短，日積月累能省下不少時間。當然，直接記住 Markdown 快捷鍵是更好的選擇。

當鼠標選中文檔內的已有內容時，界面會自動彈出浮動工具欄?？梢葬槍x中的文本內容進行常規(guī)操作。例如加粗、斜體、刪除線，或是將普通的正文文本轉化為一二級標題，也可以針對選中的文本內容進行評論。

9. 編輯工具

1）＋圖標

只要你把鼠標懸停在一個新的行上，左邊的空白處就會出現(xiàn)「+」圖標。點擊它可以打開一個下拉面板，你可以從中選擇想要使用的功能添加到頁面中。

2）??圖標

每當你將鼠標懸停在一個新的行或內容塊上時，「拖拽」圖標就會出現(xiàn)在左邊的空白處。點擊它可以打開一個菜單，讓你對該 Block 進行操作，例如刪除、創(chuàng)建副本、轉化成其他 Block 等。

3）/命令

/命令是最簡單的方法是向你的頁面添加內容或應用上述的操作。輸入/后跟任何類型的塊來添加它。如/bullet或/heading。一旦你輸入/，就會彈出一個菜單，你基本上可以實時搜索你想要的東西，只要按enter就可以選擇并使用它。

10. 分享頁面

在分享頁面的設置中，可以對不同的成員域做不同的權限配置。對于這些配置項，在鼠標懸停的時候會在彈出相應的圖示截圖和文字說明，告知用戶進行了這項設置后會發(fā)生的變化，給予了用戶清晰的配置界面。當用戶準備點擊右下方的「復制鏈接」時，還會再次出現(xiàn) Tooltips 提示用戶當前配置的分享權限說明，避免權限誤操作引發(fā)的不符合用戶預期的后果。

03 體驗亮點

1. 左側導航交互

日常中常見的 B端產品的導航欄一般都是要么展開，要么收起兩種固定的交互模式，而 Notion 左側導航非常靈活，尤其是導航欄收起狀態(tài)時候，鼠標只要懸停到左側區(qū)域，都可以將導航欄呼出，這時候通過導航欄切換到目標頁面后，將鼠標移到頁面內編輯內容時，懸浮的導航欄又回自動消失。在導航切換效率和頁面內容瀏覽的沉浸感上有了非常好的權衡。

2. 抽屜預覽

在數(shù)據(jù)表類型下打開頁面，默認會通過側邊抽屜的方式打開，側邊打開方式可以自定義拖拽側邊抽屜的寬度。當抽屜拖動到一定寬度時，會自定將左側的導航欄收起，再減小抽屜寬度時，側邊導航又回自動呼出。同時，側邊抽屜的交互方式并不是傳統(tǒng)意義上的直接覆蓋在當前頁面的上方，在內容層級上會將下放的內容進行推拉，例如我們能夠始終看到「新建」按鈕，讓用戶在查看抽屜內容時，也能夠靈活地操作后面的內容。

3. 視圖配置切換

數(shù)據(jù)表有 6 種視圖類型可以靈活切換，點擊「新建視圖」，切換的面板覆蓋在內容上方，默認聚焦到「視圖名稱」的輸入框中，在選擇不同的視圖類型時，能夠直接預覽到切換后的效果，并且能夠設置不同的視圖下，打開下一級頁面默認的打開頁面方式，整個使用體驗上非常順暢。

4. 頁面圖標

支持自定義給頁面設置表情或圖標。給予國際化和本地化的考慮，會有不同膚色的 emoji 配置，讓不同膚色的用戶能夠用對應膚色的 emoji 。對于一些只想加一個表情裝飾，卻有選擇困難癥的用戶來說，還提供了一個「隨機」的配置。更加智能的是，設置好的表情或圖標也會在頁面樹中呈現(xiàn)，當用戶的頁面書中有較多內容時，可以高效地幫助用戶對頁面進行識別。

5. 全局搜索

點擊「搜索」后，提前判斷用戶大概率要輸入內容，會自動幫用戶聚焦到搜索框當中。同時給出了幾個非常高效的篩選項，能夠幫助用戶更精確地查找內容。

底部提供了快捷鍵引導，這一點也是非常人性化，幫助不了解快捷鍵的用戶能夠迅速獲取快捷鍵的用法，提高操作效率和體驗。更令人驚喜的一點體驗是當搜索的關鍵詞沒有匹配到時，會引導用戶搜索已刪除的頁面，點擊后會將搜索的關鍵詞自動帶入到垃圾箱中進行檢索，提高了搜索能力的可用性。

6. Block 工具欄懸停預覽

Block 工具欄中，鼠標懸停某個工具時，右邊會出現(xiàn)對應工具的效果圖和簡單說明，能達到更好的引導目的，用戶能夠直接了解到這個 Block 是不是自己想要使用的，而不需要每次都一個一個插入試一下之后才知道，能夠幫助用戶更全面高效的了解 Notion 支持的能力，提高 Block 的使用效率。

7. 即時修改和創(chuàng)建屬性

在使用數(shù)據(jù)庫屬性設置的時候，可以即時地對屬性進行修改，使用檢索可以快速使用屬性，當檢索的內容不在已經設定好的選項中時，會智能地提示用戶可以創(chuàng)建一個新的屬性。把屬性配置的能力輕量化地外露出來，不再需要像傳統(tǒng)的軟件也癢屬性配置有一個單獨的屬性配置面板。

8. 圖片尺寸調整

圖片支持寬高等比拉伸調整，常見的拉伸點實在圖片的四個角，會容易引發(fā)的問題是當用戶拖拽右上方拉伸點縮小圖片時，因為圖片在編輯器中的定位是固定的，會導致圖片的縮放和鼠標指針沒有跟隨。

Notion 的處理很好地解決了這個問題，拉伸點位于圖片的左右兩側。同時圖片的拉伸也會根據(jù)所處的 Block 來自動適應，例如圖片位于折疊列表中時，由于圖片約束了只能左對齊，所以只在右邊有拉伸的手柄；而當圖片位于普通的 Block 時，左右都能進行拉伸。

9. 分欄交互

Notion 中的分欄交互也非常智能，只需要點擊并拖動你想放進另一列的文本或是其他類型的 Block (左邊空白處的??符號是你的拖放手柄)??，把它放到你想要的地方，就能夠智能地變?yōu)榉謾?。想要改變分欄的寬度也非常靈活，只需要拖拽兩欄中的豎線就可以智能的改變分欄的寬度。

10. 彈出下拉面板時禁用頁面滾動

在很多中后臺的系統(tǒng)中，經常容易發(fā)現(xiàn)的一個看似 BUG 的場景，就是打開了一個選擇器 or 下拉菜單時，再往下滾動屏幕，下拉菜單的面板沒有跟隨滾動，看起來會有點像是 BUG 。這個難題在 Notion 中有了一個非常巧妙的解法，在彈出下拉面板的時候，禁用頁面的滾動能力?？此坪唵螌崉t非常巧妙的解決了設計師在日常設計中經常遇到的難題。

11. 折疊塊

正常情況下，Toggle list 下有內容時，箭頭是深色的。當 Toggle list 的內容為空時箭頭是灰色的。通過一個非常小的細節(jié)給予用戶提醒，恰到好處。

12. 頁面為空時，圖標是空心的

頁面內可以嵌入頁面，如果嵌入的頁面是有內容的，圖標內也是會有幾根橫線；如果嵌入的頁面沒有內容，圖標內部就是空的。通過一個小小的圖標直接向用戶傳遞是否有內容的關鍵信息，省去了用戶需要去點進去頁面才知道是否有內容的步驟。

13. 拖拽小技巧

框選文本 Block 可以直接拖拽到數(shù)據(jù)表中，并且會自動根據(jù)所框選的文本的 Block 的構成去自動轉化為數(shù)據(jù)表中不同的行數(shù)據(jù)。批量變更 Block 類型時，非常高效。

14. Block 鏈接

文檔中的每個 Block 都有一個專屬的鏈接，復制這個鏈接發(fā)給其他人時，打開后會直接定位到對應的 Block，避免需要在一整篇文檔中去找想要的關鍵詞，非常靈活高效。

15. @now 會實時更新

Notion 還不容錯過的一個實用小功能是利用「@」快速輸入具體的時間戳，你可以把它用在日記里，或者是工作日志等。具體來說，假設今天是 17 號，當你在模板里用了「@Today」，無論你在多久之后利用這個模板創(chuàng)建新頁面的時候，它只會顯示「17 號」。而新的「@Today」則會動態(tài)更新，假設今天是 28 號，你用同個模板創(chuàng)建新頁面的時候，會發(fā)現(xiàn)它變成了「28 號」，而非之前的「17 號」了。

16. 任意空行都會快捷輸入提示

在所有的空段落前，都會有一個 Placeholder 提示用戶輸入「/」能夠快速插入 Block，潛移默化的引導用戶使用快捷鍵，起到了教育用戶的作用，提高用戶使用效率的同時也增強了用戶對產品的粘性。

17. Notion AI

2022 年 11 月 16 日晚，Notion 發(fā)布了 Notion AI 測試版寫作助手，來幫助用戶寫作、初稿整理以及記錄創(chuàng)意點子，標志著 AIGC 發(fā)展進入一個新的階段。申請了一下內測，已經排隊到 16w人了。

04 體驗槽點

1. 沒有固定位置的頁面目錄

原生能力不支持頁面目錄，雖然支持目錄 Block，但是插入的目錄 Block ，只能跟隨頁面內容顯示，當頁面內容往上滾動的時候，目錄就會消失。這里右邊還是通過第三方插件才實現(xiàn)了目錄的能力。

2. 沒有原生的思維導圖

Notion 目前還不支持原生的思維導圖，國內參考的競品 Wolai、FlowUS 都已經能夠支持思維導圖了。目前僅能是通過一些第三方插件置入思維導圖，整體的靈活性遠不如原生的 Block 那樣強大。

3. 原生不支持中文

目前對中文還不太友好，中文搜索不全面。12月14日的時候，Notion 在 Twitter 上有發(fā)布了德語版本的支持，好奇的在下面留言啥時候支持中文，網友有趣的回答道 100 years??。

不過目前有一些第三方的漢化插件可以使用，這里分享給大家：https://zhuanlan.zhihu.com/p/397634631

05 總結

Notion 團隊非常重視設計，創(chuàng)始人伊萬說：“設計意味著這里的一切，Notion 的感覺對他們來說具有重要價值”。不僅如此，你在他們的網站會發(fā)現(xiàn)，好像全部都是用 Notion 創(chuàng)建的一樣，有很強的認同感。

從少數(shù)派到嗶哩嗶哩，從知乎到小紅書，有大量的 Notion 用戶每天都在分享自己的 Notion 使用經驗。這導致關于 Notion的文章和視頻每天都在快速增長。

PLG 的發(fā)展模式，要面對大量的C端用戶，所以 Notion 必須要有非常好的產品體驗。通過極致的產品體驗，減少用戶使用中的阻礙與疑惑，使整個產品在使用上更為順暢，從而提高產品的易用性，減少在面向 C 端用戶過程中的運營咨詢，便于團隊將咨詢交付的精力集中 B 端用戶的服務上，從而創(chuàng)造更大的商業(yè)價值。

由于時間和篇幅有限，關于 Notion 的體驗設計拆解中存在的疏誤之處還望大家給與指正，歡迎大家一起學習和討論。

參考鏈接：

Notion 官網：https://www.notion.so/

Notion 幫助文檔：https://www.notion.so/help

http://theventurebank.com/evaluating/5594384.html

https://36kr.com/p/2025046266178056

注：部分圖示取自 Notion 官網