Notion是一款融合筆記、任務、知識庫以及資料庫的生產力工具，主要服務於網際網路群體。本文作者對Notion 產品進行了體驗拆解，一起來看一下吧。

01 前言

Notion 是一款融合筆記（Notes）、任務（Tasks）、知識庫（Wiki ）以及資料庫（Database）的 all-in-one 生產力工具，產品主要服務於網際網路群體。2022 年，Notion 的使用者規模目前已經達到 3000 萬，付費使用者達到 400 萬。

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

如何高效地對資訊進行整合、梳理， 是設計創作很重要的一環。基於此，這裡給大家分享一下 Notion 的產品體驗設計拆解。透過對 Notion 的體驗設計拆解，為你提供一份文件類產品的解題寶典！

1. 事先宣告

強烈建議使用電腦檢視，使用者體驗更佳；

為了讓設計細節更容易被看到，用 Gif 來呈現展示；

Gif 體積較大，請耐心檢視。

2. 適合人群

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

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

第三類，文件產品從業者，透過全面的產品設計策略推導、使用者需求分析，獲取競品分析參考。

02 日常使用場景

1. 工作區和基礎概念

1）左側側邊欄

Notion 的側邊欄是導航系統，建立的所有頁面和資料庫都會出現在這裡。可以將各個頁面巢狀在一起，實現無限的組織層次。

2）右側編輯器

這是建立的所有內容的所在地，映入眼簾的是宛如白紙一樣的畫布，工作和生活就從這裡開始。

3）Workspace 工作區

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

4）Teamspace 團隊空間

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

5）Private 私人的

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

6）Page 頁面

Notion 的頁面是無限層級的，一個頁面能夠新增多個頁面，頁面中的頁面也可以繼續新增頁面。

7）Block 區塊

Notion 中的基本物件為 Block（區塊），它可以是任何形式：表格、文字、網頁、程式碼塊、圖片、影片、檔案或者直接是一個Page（頁面）。

2. Notion 由 Block 組成

上圖標出了不同型別的 Block（區塊）。Notion 以 Block 為基本單位，圍繞筆記文件、知識庫、任務、輕量的資料庫等方面來組織內容。

在這張白紙上，包括文字、表格、影片、音訊、網頁、資料庫等等，各種型別內容都可以看作「區塊」。操作也非常簡單，點選「+」或是輸入“/”即可呼叫，隨意將內容組織，並支援 Markdown 語法。Page（頁面）上的任何內容，不管是文字、圖片還是表格，都是一個 Block（區塊）。每個頁面都是各種 Block（區塊）的排列組合。

3. 新建工作區

工作區的新建頻率相對頁面來講是比較低的，因此新建工作區的入口相對較深，開啟位於 Notion 視窗左上方的工作區切換器，會提供新建工作區的入口。嘗試新建一個 Workspace，選擇團隊使用，會直接在根節點建立好幾個對應的頁面模板可以快捷使用。點選之後，又回批次生成很多模板頁面，幫助使用者快速上手，幫助使用者輕鬆愉快的度過試用產品的 Day One 。

4. 新建頁面

點選側邊欄底部的

+ New Page

按鈕來建立一個新的頁面，這裡新建的頁面會默認出現在Private下。或者當你把滑鼠懸停在側邊欄上的任意節點時，點選任何一個

+

按鈕，就會在對應的節點下新建頁面。

新建頁面後，會默認出現一些快捷的操作，例如使用模板、匯入、資料庫等等，幫助使用者快速地使用 Notion 強大的頁面能力。如果自己嘗試輸入了一些文字，所有的模板提示和頂部的一些設定就會自動消失，映入眼簾的是宛如白紙一樣的畫布，工作和生活就從這裡開始。

5. 頁面模板

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

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

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

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

6. Database 資料表

資料表幫助你在 Notion 中以各種方式組織資訊–讓你組織、分類、標記、過濾、搜尋、檢視和利用它來完成工作。下面是一個關於 Notion 資料表幾種檢視和常見的使用場景的介紹。

1）Table 表格

表格形式，類似於 Airtable 表格，便於做資料統計。每一行都可以單獨開啟變成一個 Page，新增更多的內容。

2）Board 看板

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

3）Timeline 時間軸

時間軸形式，時間軸檢視，適合專案排期和計劃。

4）Calendar 日曆

日曆形式，便於檢視時間相關的資訊，可以在日曆上按時間順序檢視任務。

5）List 列表

列表形式，便於檢視一部分關鍵性的資訊，比如只顯示名稱和進度，來明確任務的進度。

6）Gallery 畫廊

便於檢視多張卡片中的開頭部分，可以在卡片開頭新增一些概要內容。

7. 工具欄

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

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

8. 浮動工具欄

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

當滑鼠選中文件內的已有內容時，介面會自動彈出浮動工具欄。可以針對選中的文字內容進行常規操作。例如加粗、斜體、刪除線，或是將普通的正文文字轉化為一二級標題，也可以針對選中的文字內容進行評論。

9. 編輯工具

1）＋圖示

只要你把滑鼠懸停在一個新的行上，左邊的空白處就會出現「+」圖示。點選它可以開啟一個下拉麵板，你可以從中選擇想要使用的功能新增到頁面中。

2）⋮⋮圖示

每當你將滑鼠懸停在一個新的行或內容塊上時，「拖拽」圖示就會出現在左邊的空白處。點選它可以開啟一個選單，讓你對該 Block 進行操作，例如刪除、建立副本、轉化成其他 Block 等。

3）/命令

/

命令是最簡單的方法是向你的頁面新增內容或應用上述的操作。輸入

/

後跟任何型別的塊來新增它。如

/bullet

或

/heading

。一旦你輸入

/

，就會彈出一個選單，你基本上可以實時搜尋你想要的東西，只要按

enter

就可以選擇並使用它。

10. 分享頁面

在分享頁面的設定中，可以對不同的成員域做不同的許可權配置。對於這些配置項，在滑鼠懸停的時候會在彈出相應的圖示截圖和文字說明，告知使用者進行了這項設定後會發生的變化，給予了使用者清晰的配置介面。當用戶準備點選右下方的「複製連結」時，還會再次出現 Tooltips 提示使用者當前配置的分享許可權說明，避免許可權誤操作引發的不符合使用者預期的後果。

03 體驗亮點

1. 左側導航互動

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

2. 抽屜預覽

在資料表型別下開啟頁面，預設會透過側邊抽屜的方式開啟，側邊開啟方式可以自定義拖拽側邊抽屜的寬度。當抽屜拖動到一定寬度時，會自定將左側的導航欄收起，再減小抽屜寬度時，側邊導航又回自動撥出。同時，側邊抽屜的互動方式並不是傳統意義上的直接覆蓋在當前頁面的上方，在內容層級上會將下放的內容進行推拉，例如我們能夠始終看到「新建」按鈕，讓使用者在檢視抽屜內容時，也能夠靈活地操作後面的內容。

3. 檢視配置切換

資料表有 6 種檢視型別可以靈活切換，點選「新建檢視」，切換的面板覆蓋在內容上方，預設聚焦到「檢視名稱」的輸入框中，在選擇不同的檢視型別時，能夠直接預覽到切換後的效果，並且能夠設定不同的檢視下，開啟下一級頁面預設的開啟頁面方式，整個使用體驗上非常順暢。

4. 頁面圖示

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

5. 全域性搜尋

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

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

6. Block 工具欄懸停預覽

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

7. 即時修改和建立屬性

在使用資料庫屬性設定的時候，可以即時地對屬性進行修改，使用檢索可以快速使用屬性，當檢索的內容不在已經設定好的選項中時，會智慧地提示使用者可以建立一個新的屬性。把屬性配置的能力輕量化地外露出來，不再需要像傳統的軟體也癢屬性配置有一個單獨的屬性配置面板。

8. 圖片尺寸調整

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

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

9. 分欄互動

Notion 中的分欄互動也非常智慧，只需要點選並拖動你想放進另一列的文字或是其他型別的 Block （左邊空白處的

⋮⋮

符號是你的拖放手柄）⋮⋮，把它放到你想要的地方，就能夠智慧地變為分欄。想要改變分欄的寬度也非常靈活，只需要拖拽兩欄中的豎線就可以智慧的改變分欄的寬度。

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

在很多中後臺的系統中，經常容易發現的一個看似 BUG 的場景，就是打開了一個選擇器 or 下拉選單時，再往下滾動螢幕，下拉選單的面板沒有跟隨滾動，看起來會有點像是 BUG 。這個難題在 Notion 中有了一個非常巧妙的解法，在彈出下拉麵板的時候，禁用頁面的滾動能力。看似簡單實則非常巧妙的解決了設計師在日常設計中經常遇到的難題。

11. 摺疊塊

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

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

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

13. 拖拽小技巧

框選文字 Block 可以直接拖拽到資料表中，並且會自動根據所框選的文字的 Block 的構成去自動轉化為資料表中不同的行資料。批次變更 Block 型別時，非常高效。

14. Block 連結

文件中的每個 Block 都有一個專屬的連結，複製這個連結發給其他人時，開啟後會直接定位到對應的 Block，避免需要在一整篇文件中去找想要的關鍵詞，非常靈活高效。

15. @now 會實時更新

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

會實時更新

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

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

2022 年 11 月 16 日晚，Notion 釋出了 Notion AI 測試版寫作助手，來幫助使用者寫作、初稿整理以及記錄創意點子，標誌著 AIGC 發展進入一個新的階段。申請了一下內測，已經排隊到 16w人了。

04 體驗槽點

17. Notion AI

原生能力不支援頁面目錄，雖然支援目錄 Block，但是插入的目錄 Block ，只能跟隨頁面內容顯示，當頁面內容往上滾動的時候，目錄就會消失。這裡右邊還是透過第三方外掛才實現了目錄的能力。

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

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

2. 沒有原生的思維導圖

目前對中文還不太友好，中文搜尋不全面。12月14日的時候，Notion 在 Twitter 上有釋出了德語版本的支援，好奇的在下面留言啥時候支援中文，網友有趣的回答道 100 years？？？？。

不過目前有一些第三方的漢化外掛可以使用，這裡分享給大家：https：//zhuanlan。zhihu。com/p/397634631

05 總結

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

從少數派到嗶哩嗶哩，從知乎到小紅書，有大量的 Notion 使用者每天都在分享自己的 Notion 使用經驗。這導致關於 Notion的文章和影片每天都在快速增長。

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

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

參考連結：

Notion 官網：https：//www。notion。so/

Notion 幫助文件：https：//www。notion。so/help

https：//www。woshipm。com/evaluating/5594384。html

https：//36kr。com/p/2025046266178056

注：部分圖示取自 Notion 官網

作者：波波 Bobby He ；深耕 B端體驗設計，持續學習輸出中。

本文由 @波波Bobby He 原創釋出於人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基於 CC0 協議

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。