01 前言

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

Ps：筆者之前寫(xiě)文章主要是使用語(yǔ)雀或 Notion，這次為了拆解「飛書(shū)文檔」，就專門(mén)用飛書(shū)文檔寫(xiě)文章來(lái)拆解飛書(shū)文檔～（套娃警告）

事先聲明

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

適合人群

第一類(lèi)，UI/UX設(shè)計(jì)師，可以跳出執(zhí)行層，去思考飛書(shū)文檔的產(chǎn)品設(shè)計(jì)策略，提升產(chǎn)品分析能力；
第二類(lèi)，產(chǎn)品經(jīng)理/運(yùn)營(yíng)，通過(guò)全面的產(chǎn)品設(shè)計(jì)拆解、策略推導(dǎo)，獲取產(chǎn)品設(shè)計(jì)參考；
第三類(lèi)，文檔產(chǎn)品從業(yè)者，通過(guò)全面的產(chǎn)品設(shè)計(jì)策略推導(dǎo)、用戶需求分析，獲取競(jìng)品分析參考。

02 日常使用場(chǎng)景

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

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

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

權(quán)限概念

飛書(shū)文檔是一個(gè)可多人實(shí)時(shí)編輯的在線文檔，在使用過(guò)程中自然需要對(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)聚焦到「名稱」，通過(guò)默認(rèn)聚焦的處理方式，便于用戶直接更改知識(shí)空間的名稱。在「完善知識(shí)空間信息」這一步可以注意到兩個(gè)必填信息并沒(méi)有在一起，可以理解為名稱和簡(jiǎn)介的相關(guān)性是更大的，同時(shí)可見(jiàn)范圍用的是 Radio 單選控件，會(huì)給一個(gè)默認(rèn)的選項(xiàng)，因此「可見(jiàn)范圍」這個(gè)必填項(xiàng)在此并不會(huì)阻塞用戶的操作流程。

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

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

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

文檔模板

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

1. 模板很實(shí)用。用戶畫(huà)像精準(zhǔn)，產(chǎn)品定位清晰：垂直服務(wù)互聯(lián)網(wǎng)人群、高端職場(chǎng)人群、需要方法論模型做寫(xiě)作依據(jù)的人群在工作中會(huì)用的文檔模板。它的主要受眾群體是互聯(lián)網(wǎng)從業(yè)者，但很多方法論模型的模板，其實(shí)是通用的，比如：工作周報(bào)、會(huì)議紀(jì)要、年度規(guī)劃等等，適用于各行各業(yè)在工作中可以直接套用。
2. 模板很專業(yè)。基于精細(xì)化有寫(xiě)作需求的場(chǎng)景，都提供了一套總結(jié)好的方法論模型，你可以直接用模板，無(wú)腦做事。模板開(kāi)頭往往還會(huì)配一張腦圖，告訴你寫(xiě)作的思路，給工作、開(kāi)會(huì)沒(méi)有頭緒的人很大的幫助，也可以讓有準(zhǔn)備的人更加全面的思考，提高創(chuàng)作者思考效率和產(chǎn)出質(zhì)量。 
3. 模板很豐富。針對(duì)互聯(lián)網(wǎng)人群不同的工作崗位、工作中的每個(gè)環(huán)節(jié)，全部都遍歷到，并提供對(duì)應(yīng)的模板，比如：它的分類(lèi)方式直接面向崗位：產(chǎn)品、研發(fā)、設(shè)計(jì)、運(yùn)營(yíng)、市場(chǎng)、銷(xiāo)售、hr等等；針對(duì)崗位的每個(gè)環(huán)節(jié)全部遍歷，單拿產(chǎn)品崗說(shuō)：BRD、競(jìng)品分析/體驗(yàn)報(bào)告、各種需求分析方法、各種流程圖腦圖模板、PRD 或需求評(píng)審模板、項(xiàng)目計(jì)劃里程碑管理、產(chǎn)品功能 Checklist、上線前說(shuō)明、業(yè)務(wù)培訓(xùn)等。覆蓋工作全流程，靈活遍歷可能需要文檔編輯的工作場(chǎng)景。
4. 「實(shí)用」「專業(yè)」「豐富」的模板還都是免費(fèi)的。飛書(shū)畢竟還在起步期，產(chǎn)品應(yīng)該已經(jīng)得到市場(chǎng)驗(yàn)證了，但新產(chǎn)品讓其他產(chǎn)品的用戶主動(dòng)遷移的成本很大，推廣時(shí)期還需要獲客，所以這些模板就成了飛書(shū)獲客的手段，全部文檔模板免費(fèi)使用。

文檔編輯

沒(méi)有頂部固定工具欄

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

而飛書(shū)的工具欄默認(rèn)是隱藏的，在沒(méi)有開(kāi)始第一個(gè)字輸入之前，進(jìn)入頁(yè)面就是一片白色，功能區(qū)全部隱藏，需要點(diǎn)擊或選中一些內(nèi)容才能出現(xiàn)，看似更麻煩，但實(shí)則更高效。 這種工具欄叫做「浮動(dòng)工具欄」，與傳統(tǒng)的工具欄拋給你一堆選擇不同，浮動(dòng)工具欄是圍繞內(nèi)容服務(wù)的。你可以先書(shū)寫(xiě)內(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ú)序列表、插入網(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)容類(lèi)型都屬于塊，包括標(biāo)題、文本段落、列表、表格、圖片、多媒體文件、投票、第三方網(wǎng)頁(yè)等。例如，下圖文檔中的每一個(gè)藍(lán)色區(qū)域，都表示一個(gè)單獨(dú)的塊。文檔支持插入這些塊元素，讓你通過(guò)簡(jiǎn)單的鼠標(biāo)點(diǎn)擊，便捷完成一篇高信息量的文檔。

/ 快速插入

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

+ 工具欄

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

?? 工具欄

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

• 你可以調(diào)整本區(qū)塊的格式，設(shè)置 標(biāo)題、有序列表、無(wú)序列表 等，或是剪切、復(fù)制、刪除本區(qū)塊的內(nèi)容。 
• 你可以在此區(qū)塊的下一行添加區(qū)塊。 
• 按住 ?? 工具欄，待頁(yè)面出現(xiàn)藍(lán)色分欄線 | 或 — 后松開(kāi)鼠標(biāo)，將當(dāng)前的區(qū)塊靈活拖動(dòng)到文檔中任意位置。

文檔分享

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

1. 飛書(shū)文檔支持分享到組織內(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ì)通過(guò) Tooltip 直接提示用戶目前的分享類(lèi)型，幫助用戶更高效的獲取信息；
3. 不僅文檔可以分享，整個(gè)知識(shí)空間也可以分享到互聯(lián)網(wǎng)，給知識(shí)空間增添了更多的使用場(chǎng)景，例如企業(yè)可以直接用飛書(shū)知識(shí)空間來(lái)做產(chǎn)品的幫助手冊(cè)。

多人協(xié)同編輯

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

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

03 體驗(yàn)亮點(diǎn)

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

Markdown

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

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

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

這里分享一下 Markdown 的快捷鍵

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

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

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

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

錯(cuò)別字修正

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

百科詞條與文檔打通

飛書(shū)百科是最近新上的功能，不僅僅是做成了企業(yè)的「百科全書(shū)」，而且能夠和文檔內(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)特有的名詞就能夠通過(guò)百科詞條輕松 Get 到意思。

飛書(shū)剪存

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

文檔點(diǎn)贊

Powered by Froala Editor