編者按：飛書文檔作為國(guó)內(nèi)首屈一指的文檔類產(chǎn)品，有非常多的設(shè)計(jì)細(xì)節(jié)值得學(xué)習(xí)。本文總結(jié)了22個(gè)優(yōu)秀的體驗(yàn)設(shè)計(jì)，非常詳細(xì)值得收藏。

往期拆解：

1. 前言

如何高效地對(duì)信息進(jìn)行整合、梳理， 是設(shè)計(jì)創(chuàng)作很重要的一環(huán)?；诖?，這里給大家分享一下飛書文檔的產(chǎn)品體驗(yàn)設(shè)計(jì)拆解。通過對(duì)「飛書文檔」的體驗(yàn)設(shè)計(jì)拆解，為你提供一份文檔類產(chǎn)品的解題寶典！

Ps：筆者之前寫文章主要是使用語雀或 Notion，這次為了拆解「飛書文檔」，就專門用飛書文檔寫文章來拆解飛書文檔～（套娃警告）

?① 事先聲明

1. 強(qiáng)烈建議使用電腦查看，用戶體驗(yàn)更佳；
2. Gif 體積較大，請(qǐng)耐心查看；
3. 為了讓設(shè)計(jì)細(xì)節(jié)更容易被看到，用 Gif 來呈展示。

② 適合人群

第一類，UI/UX 設(shè)計(jì)師，可以跳出執(zhí)行層，去思考飛書文檔的產(chǎn)品設(shè)計(jì)策略，提升產(chǎn)品分析能力；

第二類，產(chǎn)品經(jīng)理/運(yùn)營(yíng)，通過全面的產(chǎn)品設(shè)計(jì)拆解、策略推導(dǎo)，獲取產(chǎn)品設(shè)計(jì)參考；

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

2. 日常使用場(chǎng)景

① 飛書文檔導(dǎo)航欄

進(jìn)入飛書文檔，首先看到的便是這幾個(gè)一級(jí)的導(dǎo)航欄，先來對(duì)這幾個(gè)導(dǎo)航欄做一下梳理

1. 主頁：個(gè)人的主頁，展示快速訪問、最近訪問的文檔；
2. 我的空間：你的個(gè)人內(nèi)容空間，你創(chuàng)建、上傳的全部云文檔、文件等內(nèi)容都默認(rèn)存儲(chǔ)在我的空間。你可將我的空間中的內(nèi)容分享給他人；
3. 共享空間：在共享空間中顯示你與他人共享的云文檔、文件及文件夾。為個(gè)人文件夾添加協(xié)作者后，該文件夾將自動(dòng)從我的空間移至共享空間 ；
4. 知識(shí)庫：面向組織的知識(shí)管理系統(tǒng) ；
5. 百科：云文檔主頁導(dǎo)航欄新增企業(yè)百科入口，你可以直接在云文檔主頁查看和搜索百科詞條；
6. 收藏：添加到收藏夾的所有文件 ；
7. 回收站：被刪除的項(xiàng)目將在回收站儲(chǔ)存 30 天，之后自動(dòng)徹底刪除 。

② 權(quán)限概念

飛書文檔是一個(gè)可多人實(shí)時(shí)編輯的在線文檔，在使用過程中自然需要對(duì)團(tuán)隊(duì)協(xié)作中的所涉及到的相關(guān)權(quán)限進(jìn)行了解

③ 新建知識(shí)空間

設(shè)計(jì)思考：

1. 此處「新建」按鈕下拉面板的觸發(fā)方式是鼠標(biāo)懸停即觸發(fā)，用戶可以減少一次點(diǎn)擊次數(shù)，提高操作效率；
2. 知識(shí)空間模板：點(diǎn)擊「新建知識(shí)空間」后，會(huì)有很多系統(tǒng)內(nèi)置推薦的空間模板，選中模板后可以直接在右側(cè)對(duì)空間模板的目錄結(jié)構(gòu)進(jìn)行預(yù)覽，讓用戶在使用空間模板之前能夠有一個(gè)預(yù)期；
3. 點(diǎn)擊下一步，是完善知識(shí)空間信息，到這一步會(huì)默認(rèn)聚焦到「名稱」，通過默認(rèn)聚焦的處理方式，便于用戶直接更改知識(shí)空間的名稱。在「完善知識(shí)空間信息」這一步可以注意到兩個(gè)必填信息并沒有在一起，可以理解為名稱和簡(jiǎn)介的相關(guān)性是更大的，同時(shí)可見范圍用的是 Radio 單選控件，會(huì)給一個(gè)默認(rèn)的選項(xiàng)，因此「可見范圍」這個(gè)必填項(xiàng)在此并不會(huì)阻塞用戶的操作流程。

④ 模板聯(lián)動(dòng)

設(shè)計(jì)思考：

新建空白文檔后，輸入文檔標(biāo)題，會(huì)自動(dòng)在下方將已輸入的文檔標(biāo)題關(guān)鍵詞帶入模板庫搜索框進(jìn)行檢索，幫助更加便捷的使用推薦的模板。這個(gè)聯(lián)動(dòng)第一次用起來的時(shí)候感受非常巧妙，由于沒有內(nèi)部數(shù)據(jù)，不好推斷實(shí)際的使用頻率，不過單從創(chuàng)意上來講不得不說飛書文檔的產(chǎn)品設(shè)計(jì)還是下了一番功夫的。

⑤ 文檔模板

飛書文檔提供了非常豐富模板，在點(diǎn)擊新建文檔后，會(huì)直接彈出「模板庫」彈窗，飛書文檔提供了「實(shí)用」「專業(yè)」「豐富」的文檔模板，非常推薦用戶使用系統(tǒng)推薦的模板，進(jìn)一步加強(qiáng)用戶和飛書文檔的粘性。

模板很實(shí)用。用戶畫像精準(zhǔn)，產(chǎn)品定位清晰：垂直服務(wù)互聯(lián)網(wǎng)人群、高端職場(chǎng)人群、需要方法論模型做寫作依據(jù)的人群在工作中會(huì)用的文檔模板。它的主要受眾群體是互聯(lián)網(wǎng)從業(yè)者，但很多方法論模型的模板，其實(shí)是通用的，比如：工作周報(bào)、會(huì)議紀(jì)要、年度規(guī)劃等等，適用于各行各業(yè)在工作中可以直接套用。

模板很專業(yè)。基于精細(xì)化有寫作需求的場(chǎng)景，都提供了一套總結(jié)好的方法論模型，你可以直接用模板，無腦做事。模板開頭往往還會(huì)配一張腦圖，告訴你寫作的思路，給工作、開會(huì)沒有頭緒的人很大的幫助，也可以讓有準(zhǔn)備的人更加全面的思考，提高創(chuàng)作者思考效率和產(chǎn)出質(zhì)量。

模板很豐富。針對(duì)互聯(lián)網(wǎng)人群不同的工作崗位、工作中的每個(gè)環(huán)節(jié)，全部都遍歷到，并提供對(duì)應(yīng)的模板，比如：它的分類方式直接面向崗位：產(chǎn)品、研發(fā)、設(shè)計(jì)、運(yùn)營(yíng)、市場(chǎng)、銷售、hr 等等； 針對(duì)崗位的每個(gè)環(huán)節(jié)全部遍歷，單拿產(chǎn)品崗說：BRD、競(jìng)品分析/體驗(yàn)報(bào)告、各種需求分析方法、各種流程圖腦圖模板、PRD 或需求評(píng)審模板、項(xiàng)目計(jì)劃里程碑管理、產(chǎn)品功能 Checklist、上線前說明、業(yè)務(wù)培訓(xùn)等。覆蓋工作全流程，靈活遍歷可能需要文檔編輯的工作場(chǎng)景。

「實(shí)用」「專業(yè)」「豐富」的模板還都是免費(fèi)的。飛書畢竟還在起步期，產(chǎn)品應(yīng)該已經(jīng)得到市場(chǎng)驗(yàn)證了，但新產(chǎn)品讓其他產(chǎn)品的用戶主動(dòng)遷移的成本很大，推廣時(shí)期還需要獲客，所以這些模板就成了飛書獲客的手段，全部文檔模板免費(fèi)使用。

⑥ 文檔編輯

沒有頂部固定工具欄

大部分同學(xué)應(yīng)該習(xí)慣了 word 這種工具欄，包括其它很多的在線文檔平臺(tái)，也都保留了這種設(shè)計(jì)。

而飛書的工具欄默認(rèn)是隱藏的，在沒有開始第一個(gè)字輸入之前，進(jìn)入頁面就是一片白色，功能區(qū)全部隱藏，需要點(diǎn)擊或選中一些內(nèi)容才能出現(xiàn)，看似更麻煩，但實(shí)則更高效。 這種工具欄叫做「浮動(dòng)工具欄」，與傳統(tǒng)的工具欄拋給你一堆選擇不同，浮動(dòng)工具欄是圍繞內(nèi)容服務(wù)的。你可以先書寫內(nèi)容，再使用浮動(dòng)工具欄中的菜單設(shè)置格式。

讓設(shè)置就在你的光標(biāo)旁邊，移動(dòng)距離更短，日積月累能省下不少時(shí)間。當(dāng)然，直接記住 Markdown 快捷鍵是更好的選擇。

浮動(dòng)工具欄

當(dāng)鼠標(biāo)選中文檔內(nèi)的已有內(nèi)容時(shí)，界面會(huì)自動(dòng)彈出浮動(dòng)工具欄。

你可以針對(duì)選中的內(nèi)容進(jìn)行常規(guī)操作，例如改變字體樣式或顏色、加粗或者加刪除線、添加有序列表或無序列表、插入網(wǎng)站鏈接等，也可以針對(duì)選中內(nèi)容進(jìn)行評(píng)論

點(diǎn)擊工具欄中的 ∨ 按鈕，有更多內(nèi)容呈現(xiàn)形式的選擇，如調(diào)整內(nèi)容布局、插入引用和代碼塊功能等

區(qū)塊菜單工具欄（ Block ）

在文檔中，我們用塊去稱呼結(jié)構(gòu)化元素（Notioin 中稱之為 Block）。文檔里的每一種內(nèi)容類型都屬于塊，包括標(biāo)題、文本段落、列表、表格、圖片、多媒體文件、投票、第三方網(wǎng)頁等。例如，下圖文檔中的每一個(gè)藍(lán)色區(qū)域，都表示一個(gè)單獨(dú)的塊。文檔支持插入這些塊元素，讓你通過簡(jiǎn)單的鼠標(biāo)點(diǎn)擊，便捷完成一篇高信息量的文檔。

/ 快速插入

在文檔任意空白行輸入 / ，或正文任意位置輸入空格 / 即可觸發(fā) 快速插入，可見工具欄菜單。

+ 工具欄

鼠標(biāo)懸浮在文檔任意空白處，即浮現(xiàn) + 工具欄。將鼠標(biāo)光標(biāo)懸浮在 + 工具欄上，可見 + 工具欄菜單。

?? 工具欄

將鼠標(biāo)懸浮至想要編輯的區(qū)塊，在區(qū)塊左側(cè)可以看到 ?? 工具欄。將鼠標(biāo)光標(biāo)懸浮在 ?? 工具欄上，可見此工具欄的菜單，你可以進(jìn)行以下操作：

你可以調(diào)整本區(qū)塊的格式，設(shè)置 標(biāo)題、有序列表、無序列表 等，或是剪切、復(fù)制、刪除本區(qū)塊的內(nèi)容。

你可以在此區(qū)塊的下一行添加區(qū)塊。

按住 ?? 工具欄，待頁面出現(xiàn)藍(lán)色分欄線 | 或 — 后松開鼠標(biāo)，將當(dāng)前的區(qū)塊靈活拖動(dòng)到文檔中任意位置。

⑦ 文檔分享

設(shè)計(jì)思考：

1. 飛書文檔支持分享到組織內(nèi)或互聯(lián)網(wǎng)，同時(shí)支持更高級(jí)的權(quán)限設(shè)置，例如復(fù)制文檔內(nèi)容、創(chuàng)建副本、打印、下載、導(dǎo)出等權(quán)限。在文檔協(xié)同便捷性的同時(shí)又提升了文檔的安全性；
2. 鼠標(biāo)懸停到「分享」按鈕上可以發(fā)現(xiàn)一個(gè)小細(xì)節(jié)，會(huì)通過 Tooltip 直接提示用戶目前的分享類型，幫助用戶更高效的獲取信息；
3. 不僅文檔可以分享，整個(gè)知識(shí)空間也可以分享到互聯(lián)網(wǎng)，給知識(shí)空間增添了更多的使用場(chǎng)景，例如企業(yè)可以直接用飛書知識(shí)空間來做產(chǎn)品的幫助手冊(cè)。

⑧ 多人協(xié)同編輯

設(shè)計(jì)思考：

飛書知識(shí)庫的文檔沒有區(qū)分查看態(tài)和編輯態(tài)，所有的修改會(huì)實(shí)時(shí)同步給正在預(yù)覽文檔的用戶；在多人協(xié)作的場(chǎng)景中，會(huì)把編輯者的光標(biāo)實(shí)時(shí)顯示出來，把線上協(xié)作的氛圍感演繹得淋漓盡致。

3. 體驗(yàn)亮點(diǎn)

今年飛書悄悄上線了「新文檔」，以下內(nèi)容拆解均基于「新文檔」拆解

Markdown

談到飛書文檔與傳統(tǒng)文檔最大的不同，我認(rèn)為是飛書文檔編輯器支持 Markdown 語言，并按 Markdown 的理念打造。Markdown 可以讓你在編寫文檔時(shí)一氣呵成，省去通過菜單欄手動(dòng)調(diào)整文本結(jié)構(gòu)的繁瑣。

飛書文檔繼承了 Markdown 不允許改字號(hào)的理念。在這里，只有「一級(jí)標(biāo)題」「二級(jí)標(biāo)題」「三級(jí)標(biāo)題」這些格式，沒有「20 號(hào)」「15 號(hào)」這些字號(hào)的設(shè)置。Markdown 的本質(zhì)是讓我們回歸到內(nèi)容本身，而不是文檔的樣式。

此外，對(duì)于組織來說，讓所有文檔整齊劃一，一級(jí)標(biāo)題都是一樣字號(hào)的一級(jí)標(biāo)題、二級(jí)標(biāo)題都是一樣的二級(jí)標(biāo)題，一定程度上對(duì)降低閱讀難度有幫助。

這里分享一下 Markdown 的快捷鍵

N 級(jí)標(biāo)題

在飛書的工具欄中，默認(rèn)只會(huì)顯示 H1、H2、H3 這三級(jí)標(biāo)題，乍一看好像不太夠。然后當(dāng)文檔里如果有使用到 H3 標(biāo)題，那么 H4 就會(huì)自動(dòng)出現(xiàn)在工具欄中，以此類推，最多可以有 H9。這種設(shè)計(jì)的處理方式非常人性化，既避免了一開始就出現(xiàn)到 H9 帶來的復(fù)雜，畢竟很少有人會(huì)用到 H9，但是如果你真的用到了很多級(jí)別的標(biāo)題的時(shí)候，又回自動(dòng)出現(xiàn)下一集標(biāo)題，非常巧妙。

列表首字母自動(dòng)大寫

國(guó)內(nèi)很多在線文檔，都不會(huì)注意到首字母自動(dòng)大寫，而飛書文檔沒有遺漏。 飛書文檔不但沒有遺漏上述細(xì)節(jié)功能，而且使用藍(lán)色的編號(hào)，讓列表的存在感更強(qiáng)了， 讓用戶在寫文檔時(shí)能夠更加清晰。

錯(cuò)別字修正

在撰寫文檔的時(shí)候，難免會(huì)有一些錯(cuò)別字，飛書文檔會(huì)自動(dòng)識(shí)別可能是錯(cuò)別字的地方進(jìn)行高亮，微信公眾號(hào)也有類似的功能，但是公眾號(hào)只會(huì)告訴你哪里錯(cuò)了，不會(huì)給出解決方案。但飛書文檔更加人性化的是方式是直接給出了系統(tǒng)認(rèn)為修正后的結(jié)果，而且大部分情況都是和編輯者預(yù)期的結(jié)果匹配的，用的過程中非常令人驚喜。

百科詞條與文檔打通

飛書百科是最近新上的功能，不僅僅是做成了企業(yè)的「百科全書」，而且能夠和文檔內(nèi)部打通。當(dāng)文檔中有百科中的詞匯時(shí)，關(guān)鍵詞會(huì)自動(dòng)高亮，鼠標(biāo)懸停會(huì)展示這個(gè)百科詞條的相關(guān)解釋。對(duì)于一些大公司內(nèi)部的黑話大全特別管用，當(dāng)新人入職新公司的時(shí)候，對(duì)于一些企業(yè)內(nèi)特有的名詞就能夠通過百科詞條輕松 Get 到意思。

飛書剪存

飛書剪存是一個(gè)兼容于各大瀏覽器的擴(kuò)展程序。它可以將自動(dòng)剝離廣告后的網(wǎng)頁正文一鍵保存至飛書云文檔。一鍵保存網(wǎng)頁正文，告別手動(dòng)復(fù)制粘貼：瀏覽到喜歡的網(wǎng)頁，點(diǎn)擊飛書剪存，即可將網(wǎng)頁內(nèi)容保存至你的飛書云文檔中，而且標(biāo)題格式還能完美保留。對(duì)于用飛書來搭建個(gè)人知識(shí)庫的場(chǎng)景非常方便，再也不需要手動(dòng)復(fù)制然后一個(gè)一個(gè)調(diào)整標(biāo)題格式了，效率大大提升。

文檔點(diǎn)贊

當(dāng)看完一整片文檔，在下方會(huì)出現(xiàn)點(diǎn)贊的按鈕，這時(shí)候會(huì)習(xí)慣性的把鼠標(biāo)放到按鈕上，然后考慮要不要點(diǎn)贊，當(dāng)我們鼠標(biāo)懸停的時(shí)候，會(huì)觸發(fā)點(diǎn)贊按鈕蓄力的動(dòng)態(tài)效果，而且點(diǎn)贊完成之后還會(huì)有撒花的動(dòng)態(tài)效果，用情感化設(shè)計(jì)的方式引導(dǎo)用戶給文檔點(diǎn)贊。一定程度上提高了文檔的活躍度，讓文檔的編輯者也能夠有更好的正向反饋，進(jìn)而激勵(lì)文檔的創(chuàng)作。

支持個(gè)性化封面

在文檔標(biāo)題上方可以 添加封面，從官方圖庫選擇封面圖或從本地上傳，讓文檔看起來更有生氣，呈現(xiàn)個(gè)性。官方圖庫中提供了很多高質(zhì)量的配圖，尤其是前面 3 排的配圖還融入了飛書的品牌宣傳元素。

橫向圖文分欄

在文檔中使用分欄功能，讓你的文檔版面更加緊湊，實(shí)現(xiàn)圖文、圖表等各種功能的混排；還可以通過調(diào)整分欄的大小，調(diào)整高亮塊、流程圖等區(qū)塊大小。有了分欄功能，可以將飛書文檔打造成一個(gè)非常簡(jiǎn)單的個(gè)人網(wǎng)頁的形式，通過簡(jiǎn)單的拖拉拽就能形成一篇精美排版的網(wǎng)頁。

4. 體驗(yàn)槽點(diǎn)

圖片默認(rèn)對(duì)齊方式

插入圖片后，調(diào)整圖片大小時(shí)會(huì)發(fā)現(xiàn)圖片默認(rèn)是居中對(duì)齊的，但是就個(gè)人而言，大部分時(shí)候多使用習(xí)慣都會(huì)手動(dòng)再去調(diào)整回左對(duì)齊，每次都得手動(dòng)調(diào)一邊，顯得很繁瑣。

圖片區(qū)塊手勢(shì)不符合預(yù)期

新文檔下，選中圖片后鼠標(biāo)懸停的手勢(shì)會(huì)變成放大鏡手勢(shì)；舊文檔下，選中圖片后鼠標(biāo)懸停的手勢(shì)會(huì)變成抓手手勢(shì)；這兩種手勢(shì)與本身圖片支持的兩種拖拽和放大的交互行為不太符合預(yù)期。有時(shí)候會(huì)誤認(rèn)為只能進(jìn)行鼠標(biāo)手勢(shì)對(duì)應(yīng)的操作。

工具欄不一致

點(diǎn)擊「+」和「/」呼出的工具欄的樣式不一致，其實(shí)仔細(xì)瞧會(huì)發(fā)現(xiàn)里面內(nèi)功能內(nèi)容其實(shí)是一致的，看了下 Notion 是一致的，不知道飛書文檔是出于什么考慮這里處理成了兩種工具欄的樣式。

6. 總結(jié)

在設(shè)計(jì)方法論中有一個(gè)概念叫「?？硕伞梗纯晒┻x擇的刺激越多，用戶決定與哪一個(gè)進(jìn)行交互的時(shí)間就越長(zhǎng)，受到選擇轟炸的用戶必須花時(shí)間來理解和決定，這相當(dāng)于加重了他們不想要的工作。相比于競(jìng)品「騰訊文檔」、「石墨文檔」、「有道云筆記」等，進(jìn)入文檔邊界會(huì)提供你豐富的文檔編輯工具而言，「飛書文檔」整個(gè)使用上的交互體驗(yàn)就是極簡(jiǎn)。

在《簡(jiǎn)約至上:交互設(shè)計(jì)四策略》一書中提到的四大策略：合理刪除、分層組織、適時(shí)隱藏和巧妙轉(zhuǎn)移。飛書文檔可以說是將這四大策略用到了極致.

合理刪除：去掉所有不必要的按鈕，直至減到不能再減。在沒有開始第一個(gè)字輸入之前，進(jìn)入頁面就是一片白色，功能區(qū)全部隱藏。需要工具欄的時(shí)候，導(dǎo)航欄、編輯區(qū)通過間距做分割，沒有復(fù)雜的色彩、邊框、邊界，非常極簡(jiǎn)。

分層組織：在刪除了那些不必要的、無法實(shí)現(xiàn)的的功能之后，需要對(duì)保留下來的核心功能和輔助功能進(jìn)行組織。進(jìn)入寫作時(shí)，因?yàn)槟阍诓煌恢眯枰墓δ懿煌?，飛書已經(jīng)提前分類整體好，在你需要用的時(shí)候恰到好處的提供給你。例如各種「/」「+」「?? 」召喚出來的工具欄。

適時(shí)隱藏：將不常用的功能隱藏在常用功能背后。寫作過程中，頁面也絕對(duì)不會(huì)出現(xiàn)你不需要的功能，但當(dāng)你一旦需要某項(xiàng)功能時(shí)，它會(huì)立刻出現(xiàn)在你鼠標(biāo)輸入位置交互最方便的地方。例如框選文字后，便會(huì)立馬在上方出現(xiàn)浮動(dòng)工具欄，可以對(duì)文字的樣式進(jìn)行設(shè)置。

巧妙轉(zhuǎn)移：把合適的功能轉(zhuǎn)移到合適的組件或平臺(tái)中去。編輯區(qū)、編輯工具沒有固定的位置，而是根據(jù)人機(jī)交互規(guī)則，需要的時(shí)候的時(shí)候適時(shí)巧妙顯示。

整個(gè)編輯器中的交互設(shè)計(jì)，相比于傳統(tǒng) Word 類型的工具欄，不需要滿屏找想要的功能在哪里。當(dāng)用戶需要的時(shí)候，會(huì)立刻出現(xiàn)在距離鼠標(biāo)最近的地方，提高文檔編輯的效率。整體使用飛書文檔的感受會(huì)發(fā)現(xiàn)很多除了期望型需求外，還滿足了用戶很多的興奮型需求。

由于時(shí)間和篇幅有限，關(guān)于飛書文檔的體驗(yàn)設(shè)計(jì)拆解中存在的疏誤之處還望大家給與指正，歡迎大家一起學(xué)習(xí)和討論。

參考鏈接

1. https://zhuanlan.zhihu.com/p/532734411
2. https://www.feishu.cn/hc/zh-CN/categories-detail