如何高效地對信息進行整合、梳理， 是設(shè)計創(chuàng)作很重要的一環(huán)。本篇文章中作者給大家分享了飛書文檔的產(chǎn)品體驗設(shè)計拆解，感興趣的朋友們快來一起看看吧！

一、前言

如何高效地對信息進行整合、梳理， 是設(shè)計創(chuàng)作很重要的一環(huán)。

基于此，這里給大家分享一下飛書文檔的產(chǎn)品體驗設(shè)計拆解。

通過對「飛書文檔」的體驗設(shè)計拆解，為你提供一份文檔類產(chǎn)品的解題寶典！

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

1. 事先聲明

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

2. 適合人群

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

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

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

二、日常使用場景

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

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

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

2. 權(quán)限概念

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

3. 新建知識空間

設(shè)計思考：

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

4. 模板聯(lián)動

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

5. 文檔模板

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

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

6. 文檔編輯

（1）沒有頂部固定工具欄

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

而飛書的工具欄默認(rèn)是隱藏的，在沒有開始第一個字輸入之前，進入頁面就是一片白色，功能區(qū)全部隱藏，需要點擊或選中一些內(nèi)容才能出現(xiàn)，看似更麻煩，但實則更高效。

這種工具欄叫做「浮動工具欄」，與傳統(tǒng)的工具欄拋給你一堆選擇不同，浮動工具欄是圍繞內(nèi)容服務(wù)的。

你可以先書寫內(nèi)容，再使用浮動工具欄中的菜單設(shè)置格式。讓設(shè)置就在你的光標(biāo)旁邊，移動距離更短，日積月累能省下不少時間。當(dāng)然，直接記住 Markdown 快捷鍵是更好的選擇。

（2）浮動工具欄

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

• 你可以針對選中的內(nèi)容進行常規(guī)操作，例如改變字體樣式或顏色、加粗或者加刪除線、添加有序列表或無序列表、插入網(wǎng)站鏈接等，也可以針對選中內(nèi)容進行評論
• 點擊工具欄中的 ∨ 按鈕，有更多內(nèi)容呈現(xiàn)形式的選擇，如調(diào)整內(nèi)容布局、插入引用和代碼塊功能等

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

在文檔中，我們用塊去稱呼結(jié)構(gòu)化元素（Notioin 中稱之為 Block）。文檔里的每一種內(nèi)容類型都屬于塊，包括標(biāo)題、文本段落、列表、表格、圖片、多媒體文件、投票、第三方網(wǎng)頁等。

例如，下圖文檔中的每一個藍(lán)色區(qū)域，都表示一個單獨的塊。文檔支持插入這些塊元素，讓你通過簡單的鼠標(biāo)點擊，便捷完成一篇高信息量的文檔。

（4）/ 快速插入

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

（5）+ 工具欄

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

（6）?? 工具欄

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

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

7. 文檔分享

設(shè)計思考：

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

8. 多人協(xié)同編輯

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

三、體驗亮點

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

1. Markdown

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

飛書文檔繼承了Markdown 不允許改字號的理念。在這里，只有「一級標(biāo)題」「二級標(biāo)題」「三級標(biāo)題」這些格式，沒有「20號」「15號」這些字號的設(shè)置。

Markdown 的本質(zhì)是讓我們回歸到內(nèi)容本身，而不是文檔的樣式。

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

這里分享一下 Markdown 的快捷鍵：

2. N級標(biāo)題

在飛書的工具欄中，默認(rèn)只會顯示 H1、H2、H3 這三級標(biāo)題，乍一看好像不太夠。

然后當(dāng)文檔里如果有使用到 H3 標(biāo)題，那么 H4 就會自動出現(xiàn)在工具欄中，以此類推，最多可以有 H9。

這種設(shè)計的處理方式非常人性化，既避免了一開始就出現(xiàn)到 H9 帶來的復(fù)雜，畢竟很少有人會用到 H9，但是如果你真的用到了很多級別的標(biāo)題的時候，又會自動出現(xiàn)下一集標(biāo)題，非常巧妙。

3. 列表首字母自動大寫

國內(nèi)很多在線文檔，都不會注意到首字母自動大寫，而飛書文檔沒有遺漏。

飛書文檔不但沒有遺漏上述細(xì)節(jié)功能，而且使用藍(lán)色的編號，讓列表的存在感更強了， 讓用戶在寫文檔時能夠更加清晰。

4. 錯別字修正

在撰寫文檔的時候，難免會有一些錯別字，飛書文檔會自動識別可能是錯別字的地方進行高亮，微信公眾號也有類似的功能，但是公眾號只會告訴你哪里錯了，不會給出解決方案。

但飛書文檔更加人性化的是方式是直接給出了系統(tǒng)認(rèn)為修正后的結(jié)果，而且大部分情況都是和編輯者預(yù)期的結(jié)果匹配的，用的過程中非常令人驚喜。

5. 百科詞條與文檔打通

飛書百科是最近新上的功能，不僅僅是做成了企業(yè)的「百科全書」，而且能夠和文檔內(nèi)部打通。

當(dāng)文檔中有百科中的詞匯時，關(guān)鍵詞會自動高亮，鼠標(biāo)懸停會展示這個百科詞條的相關(guān)解釋。

對于一些大公司內(nèi)部的黑話大全特別管用，當(dāng)新人入職新公司的時候，對于一些企業(yè)內(nèi)特有的名詞就能夠通過百科詞條輕松 Get 到意思。

6. 飛書剪存

飛書剪存是一個兼容于各大瀏覽器的擴展程序。它可以將自動剝離廣告后的網(wǎng)頁正文一鍵保存至飛書云文檔。

一鍵保存網(wǎng)頁正文，告別手動復(fù)制粘貼：瀏覽到喜歡的網(wǎng)頁，點擊飛書剪存，即可將網(wǎng)頁內(nèi)容保存至你的飛書云文檔中，而且標(biāo)題格式還能完美保留。

對于用飛書來搭建個人知識庫的場景非常方便，再也不需要手動復(fù)制然后一個一個調(diào)整標(biāo)題格式了，效率大大提升。

7. 文檔點贊動效

當(dāng)看完一整片文檔，在下方會出現(xiàn)點贊的按鈕，這時候會習(xí)慣性的把鼠標(biāo)放到按鈕上，然后考慮要不要點贊，當(dāng)我們鼠標(biāo)懸停的時候，會觸發(fā)點贊按鈕蓄力的動態(tài)效果。

而且點贊完成之后還會有撒花的動態(tài)效果，用情感化設(shè)計的方式引導(dǎo)用戶給文檔點贊。

一定程度上提高了文檔的活躍度，讓文檔的編輯者也能夠有更好的正向反饋，進而激勵文檔的創(chuàng)作。

8. 支持個性化封面

在文檔標(biāo)題上方可以 添加封面，從官方圖庫選擇封面圖或從本地上傳，讓文檔看起來更有生氣，呈現(xiàn)個性。

官方圖庫中提供了很多高質(zhì)量的配圖，尤其是前面 3 排的配圖還融入了飛書的品牌宣傳元素。

9. 橫向圖文分欄

在文檔中使用分欄功能，讓你的文檔版面更加緊湊，實現(xiàn)圖文、圖表等各種功能的混排；還可以通過調(diào)整分欄的大小，調(diào)整高亮塊、流程圖等區(qū)塊大小。

有了分欄功能，可以將飛書文檔打造成一個非常簡單的個人網(wǎng)頁的形式，通過簡單的拖拉拽就能形成一篇精美排版的網(wǎng)頁。

四、體驗槽點

1. 圖片默認(rèn)對齊方式

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

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

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

3. 工具欄不一致

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

五、總結(jié)

在設(shè)計方法論中有一個概念叫「?？硕伞?，即可供選擇的刺激越多，用戶決定與哪一個進行交互的時間就越長，受到選擇轟炸的用戶必須花時間來理解和決定，這相當(dāng)于加重了他們不想要的工作。

相比于競品「騰訊文檔」、「石墨文檔」、「有道云筆記」等，進入文檔邊界會提供你豐富的文檔編輯工具而言，「飛書文檔」整個使用上的交互體驗就是極簡。

在《簡約至上:交互設(shè)計四策略》一書中提到的四大策略：合理刪除、分層組織、適時隱藏和巧妙轉(zhuǎn)移。

飛書文檔可以說是將這四大策略用到了極致。

1. 合理刪除：去掉所有不必要的按鈕，直至減到不能再減。在沒有開始第一個字輸入之前，進入頁面就是一片白色，功能區(qū)全部隱藏。需要工具欄的時候，導(dǎo)航欄、編輯區(qū)通過間距做分割，沒有復(fù)雜的色彩、邊框、邊界，非常極簡。
2. 分層組織：在刪除了那些不必要的、無法實現(xiàn)的的功能之后，需要對保留下來的核心功能和輔助功能進行組織。進入寫作時，因為你在不同位置需要的功能不同，飛書已經(jīng)提前分類整體好，在你需要用的時候恰到好處的提供給你。例如各種「/」「+」「?? 」召喚出來的工具欄。
3. 適時隱藏：將不常用的功能隱藏在常用功能背后。寫作過程中，頁面也絕對不會出現(xiàn)你不需要的功能，但當(dāng)你一旦需要某項功能時，它會立刻出現(xiàn)在你鼠標(biāo)輸入位置交互最方便的地方。例如框選文字后，便會立馬在上方出現(xiàn)浮動工具欄，可以對文字的樣式進行設(shè)置。
4. 巧妙轉(zhuǎn)移：把合適的功能轉(zhuǎn)移到合適的組件或平臺中去。編輯區(qū)、編輯工具沒有固定的位置，而是根據(jù)人機交互規(guī)則，需要的時候的時候適時巧妙顯示。

整個編輯器中的交互設(shè)計，相比于傳統(tǒng) Word 類型的工具欄，不需要滿屏找想要的功能在哪里。

當(dāng)用戶需要的時候，會立刻出現(xiàn)在距離鼠標(biāo)最近的地方，提高文檔編輯的效率。整體使用飛書文檔的感受會發(fā)現(xiàn)很多除了期望型需求外，還滿足了用戶很多的興奮型需求。

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

參考鏈接：

https://zhuanlan.zhihu.com/p/532734411

https://www.feishu.cn/hc/zh-CN/categories-detail?category-id=7099738910548312066