「飛書(shū)文檔」產(chǎn)品體驗(yàn)設(shè)計(jì)拆解丨22 個(gè)優(yōu)秀體驗(yàn)細(xì)節(jié)

17 評(píng)論 16422 瀏覽 118 收藏 26 分鐘

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

一、前言

如何高效地對(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ū)文檔」,就專(zhuān)門(mén)用飛書(shū)文檔寫(xiě)文章來(lái)拆解飛書(shū)文檔~(套娃警告 )

1. 事先聲明

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

2. 適合人群

第一類(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)、用戶(hù)需求分析,獲取競(jìng)品分析參考。

二、日常使用場(chǎng)景

1. 飛書(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)徹底刪除 。

2. 權(quán)限概念

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

3. 新建知識(shí)空間

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

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

4. 模板聯(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ì)還是下了一番功夫的。

5. 文檔模板

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

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

6. 文檔編輯

(1)沒(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 快捷鍵是更好的選擇。

(2)浮動(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)容布局、插入引用和代碼塊功能等

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

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

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

(4)/ 快速插入

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

(5)+ 工具欄

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

(6)?? 工具欄

將鼠標(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)到文檔中任意位置。

7. 文檔分享

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

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

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

三、體驗(yàn)亮點(diǎn)

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

1. 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 的快捷鍵:

2. 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)下一集標(biāo)題,非常巧妙。

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

國(guó)內(nèi)很多在線文檔,都不會(huì)注意到首字母自動(dòng)大寫(xiě),而飛書(shū)文檔沒(méi)有遺漏。

飛書(shū)文檔不但沒(méi)有遺漏上述細(xì)節(jié)功能,而且使用藍(lán)色的編號(hào),讓列表的存在感更強(qiáng)了, 讓用戶(hù)在寫(xiě)文檔時(shí)能夠更加清晰。

4. 錯(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ò)程中非常令人驚喜。

5. 百科詞條與文檔打通

飛書(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 到意思。

6. 飛書(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)題格式了,效率大大提升。

7. 文檔點(diǎn)贊動(dòng)效

當(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)用戶(hù)給文檔點(diǎn)贊。

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

8. 支持個(gè)性化封面

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

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

9. 橫向圖文分欄

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

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

四、體驗(yàn)槽點(diǎn)

1. 圖片默認(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)一邊,顯得很繁瑣。

2. 圖片區(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)的操作。

3. 工具欄不一致

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

五、總結(jié)

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

相比于競(jìng)品「騰訊文檔」、「石墨文檔」、「有道云筆記」等,進(jìn)入文檔邊界會(huì)提供你豐富的文檔編輯工具而言,「飛書(shū)文檔」整個(gè)使用上的交互體驗(yàn)就是極簡(jiǎn)。

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

飛書(shū)文檔可以說(shuō)是將這四大策略用到了極致。

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

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

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

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

參考鏈接:

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

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

作者:波波 Bobby He ;深耕 B端體驗(yàn)設(shè)計(jì),持續(xù)學(xué)習(xí)輸出中。

本文由 @波波Bobby He 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash,基于 CC0 協(xié)議。

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 個(gè)人覺(jué)得有以下幾個(gè)槽點(diǎn):
    1、文檔寬度無(wú)法拖長(zhǎng);
    當(dāng)用戶(hù)使用大屏顯示器時(shí),看到小小的文檔居中,且只能顯示那么窄,十分想拖寬一點(diǎn)。
    2、閱讀模式的文檔分享出去后,還需要接收者登錄;
    知識(shí)庫(kù)的文檔由于需要登錄,則局限了使用場(chǎng)景;

    來(lái)自湖南 回復(fù)
    1. 1 確實(shí)是個(gè)槽點(diǎn),很多文檔產(chǎn)品目前都支持寬屏模式,飛書(shū)目前還不支持
      2 是不是分享的設(shè)置沒(méi)配置好?我記得如果是開(kāi)啟了互聯(lián)網(wǎng)均可訪問(wèn)的話,是不需要登錄的

      來(lái)自廣東 回復(fù)
    2. 第二點(diǎn),那也是槽點(diǎn)。
      因?yàn)槲覟榱苏业讲恍枰卿浀脑O(shè)置,翻了一遍設(shè)置功能,沒(méi)有找到。這讓分享大打折扣。
      再退一步講,分享真的很有必要用戶(hù)登錄么,為什么默認(rèn)需要登錄?主要目的和主要場(chǎng)景是什么,導(dǎo)致用戶(hù)寧愿拋棄也要堅(jiān)持必須登錄?

      來(lái)自湖南 回復(fù)
  2. 點(diǎn)擊「+」和「/」呼出的工具欄的樣式不一致
    —-
    我理解可能針對(duì)不同場(chǎng)景?
    +是鼠標(biāo)操作場(chǎng)景,上面高頻基礎(chǔ)工具用鼠標(biāo)點(diǎn)選,工具名稱(chēng)不外顯,鼠標(biāo)懸浮的時(shí)候才展示,緊湊排布減少鼠標(biāo)移動(dòng)
    /是鍵盤(pán)操作場(chǎng)景,使用鍵盤(pán)↑↓切換,因此縱向排列,工具名稱(chēng)外顯也便于識(shí)別吧

    來(lái)自北京 回復(fù)
    1. 學(xué)習(xí)了~

      來(lái)自廣東 回復(fù)
    2. /呼出的工具欄名稱(chēng)外顯也比較方便用戶(hù)瀏覽到名稱(chēng)直接用鍵盤(pán)輸入名稱(chēng)選擇。

      來(lái)自上海 回復(fù)
  3. 干貨滿(mǎn)滿(mǎn)~

    來(lái)自浙江 回復(fù)
  4. 可以再深度點(diǎn),期待,從 表面的如何設(shè)計(jì) 到 為什么這么設(shè)計(jì)

    來(lái)自廣東 回復(fù)
    1. 下次一定??

      來(lái)自廣東 回復(fù)
  5. 飛書(shū)文檔這種根據(jù)情景匹配控件類(lèi)型的模式,對(duì)新用戶(hù)不友好的一點(diǎn)是:像我這樣的習(xí)慣一開(kāi)始先了解軟件中提供哪些功能、以決定自己編輯的內(nèi)容及方式的人,會(huì)很別扭甚至勸退,感覺(jué)不夠自由,而且限制了我的內(nèi)容輸出范圍,探索功能的成本也高

    來(lái)自廣東 回復(fù)
    1. 飛書(shū)有多種情景模式,可供用戶(hù)選擇合適的,且可以保存自己想要的,去掉覺(jué)得繁雜的。推薦你用,用習(xí)慣后你會(huì)發(fā)現(xiàn)飛書(shū)編輯起來(lái)會(huì)更自由,更舒適,且靈活

      來(lái)自湖北 回復(fù)
  6. 一直不理解飛書(shū)即然都支持桌面版了,為啥每次打開(kāi)文檔總要跳到瀏覽器打開(kāi),而且還得重新登錄。

    來(lái)自湖北 回復(fù)
    1. 可能是考慮到安全。
      但是文檔分享的地址許需要登錄才能看,這個(gè)有點(diǎn)局限性了。

      來(lái)自湖南 回復(fù)
  7. 厲害厲害 哈哈哈 希望作者可以再出一篇釘釘文檔~~

    來(lái)自福建 回復(fù)
    1. 哈哈,日程安排上~~

      來(lái)自廣東 回復(fù)
  8. 這篇文章也太干貨滿(mǎn)滿(mǎn)了吧!真的學(xué)習(xí)到了很多關(guān)于產(chǎn)品體驗(yàn)設(shè)計(jì)的東西

    來(lái)自江西 回復(fù)
  9. 愛(ài)了愛(ài)了,個(gè)人認(rèn)為飛書(shū)確實(shí)是工作效率的好幫手,企業(yè)辦公未來(lái)發(fā)展的新方向,太好用了

    來(lái)自山西 回復(fù)