在設計創(chuàng)作中，如何高效的對信息進行整合、梳理？對此，本文分享了對Confluence 的產品體驗設計拆解，從日常使用場景、體驗亮點、體驗槽點三個方面分析并總結了文檔類產品的解題寶典，一起來看看吧。

一、前言

Confluence 是一個由 Atlassian 公司所開發(fā)的專業(yè)的企業(yè)知識管理與協(xié)同軟件，可以用于構建企業(yè) Wiki。它能夠幫助團隊成員之間共享信息、文檔協(xié)作、集體討論，信息推送等。

如何高效地對信息進行整合、梳理， 是設計創(chuàng)作很重要的一環(huán)?；诖耍@里給大家分享一下 Confluence 的產品體驗設計拆解。通過對 Confluence 的體驗設計拆解，為你提供一份文檔類產品的解題寶典！

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

1. 事先聲明

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

2. 適合人群

第一類，UI/UX設計師，可以跳出執(zhí)行層，去思考 Confluence 的產品設計策略，提升產品分析能力；第二類，產品經理/運營，通過全面的產品設計拆解、策略推導，獲取產品設計參考；第三類，文檔產品從業(yè)者，通過全面的產品設計策略推導、用戶需求分析，獲取競品分析參考。

二、日常使用場景

1. Confluence 基礎概念

首先了解一下這幾個 Confluence 中的基本概念，頁面都是以樹狀結構放置與空間之中，頁面之間也可以互相鏈接和訪問。創(chuàng)建頁面時除了采用空白文檔，也可以選擇模板。權限控制分了 3 個維度，分別是團隊、個人和匿名用戶，按照權限最小化原則，分空間和分頁面管理。

2. 頁面模板

點擊「+」號新建頁面后，這里并沒有像飛書一樣把推薦使用哪些模板作為一個彈窗打斷用戶，而是直接進入到新頁面的編輯流程，光標聚焦到標題，整個過程更加自然。給用戶的預期還是直接新建頁面，當用戶在右側瀏覽到有很多豐富的模板時，如果有需求便會主動地去觸發(fā)使用。

Confluence Cloud 附帶了 100+個模板，覆蓋了非常多的主題，如人力資源、軟件開發(fā)、團隊合作、項目規(guī)劃等。這些模板幫助能夠用戶制作精美有效的頁面內容。并且模板預覽的交互也非常輕量，不需要再次跳轉或者打開彈窗去中斷用戶的操作行為，而是直接鼠標懸停便能預覽模板的詳情。

3. 讀寫分離

關于讀寫分離，看起來是和語雀類似的，把讀和寫區(qū)分為兩種場景。語雀考慮的更多的是希望對作者來說，他的寫能夠在一種平靜又沉浸的一個創(chuàng)作環(huán)境中，他能夠無所顧慮的寫。而讀者他能夠放心的去閱讀。然后在這兩個體驗之間，用一個“發(fā)布/更新”的動作來實現(xiàn)連接。這個發(fā)布讓作者更加有儀式感，這個動作告訴作者，你的內容將交給讀者，由讀者來閱讀。

而 Confluence 的考慮更多的應該是基于團隊協(xié)同的辦公場景。期望團隊中被大家看到的的文檔也應該是一個相對穩(wěn)定或者是被審閱過后的版本，即通過「發(fā)布」這個行為來進行確認。

在編輯頁面時，進行的更改會自動保存并同步，以便編輯這個頁面的所有人都能看到。不過，只有在您發(fā)布后，查看頁面的人才會看到這些更改。您每次發(fā)布更改時，Confluence 會啟動頁面的一個新版本，并將它存儲在版本歷史記錄中。這樣，用戶可以跟蹤不同時間的更改，并在需要時輕松恢復到以前的版本。

4. 插入?yún)^(qū)塊

Confluence 支持非常可插入的區(qū)塊，點擊「+」或者輸入「/」，通過下拉菜單可以展示一些常用的區(qū)塊，在「查看更多」內，可以顯示所有支持插入的區(qū)塊，并且還有一個專門的應用市場可以去安裝更多的應用，例如可以安裝 Mind Maps ，在 Confluence 中就可以直接繪制思維導圖。

5. 草稿和已發(fā)布頁面

基于讀寫分離的設計理念。Confluence 也區(qū)分草稿和已發(fā)布的頁面。創(chuàng)建了新頁面后，在未發(fā)布之前它會以草稿形式存在，直到發(fā)布為止。草稿不會出現(xiàn)在其他成員的頁面樹、動態(tài)訂閱源或搜索結果中（一經發(fā)布，頁面便會出現(xiàn)在所有這些位置，除非它帶有加密的標識）。發(fā)布、關閉、更多組成了一個按鈕組，在「更多」內也可以對進行其他的發(fā)布操作，例如發(fā)布但不通知關注者、安排發(fā)布的時間等。

6. 頁面權限

每個頁面都可以設置單獨的頁面權限，例如允許任何人都可以查看和編輯、只有某些人可以查看或編輯等。整體權限配置的交互操作也是比較符合由大到小的權限配置原則，先配置總的三大權限類型，再在小的權限類型中可以細化，例如邀請不同的人，給予不同的查看或編輯權限。

三、體驗亮點

1. 頂部工具欄

Confluence 的頂部工具欄和右側的發(fā)布、查找、協(xié)同功能是放在同一行功能區(qū)域里，同時也可以看到并沒有把太多的工具都平鋪出來，而是把一些相對常用的工具平鋪出來，不常用的工具則隱藏到「更多」里。相對騰訊文檔、語雀、石墨這類型的產品，頂部能夠節(jié)省一行空間，在保留工具欄常顯的基礎上，整體顯得更加簡潔。

2. 圖片縮放柵格

圖片的縮放不像常見的文檔工具那樣隨意縮放，容易縮放出各種大小不一的圖片，Confluence 的圖片縮放會基于特定的柵格參考線，鼠標在參考線的附近釋放會自動吸附，并縮放至相應的大小，這樣就能夠在一定程度上限制整篇文檔的圖片大小的種類，使圖片的排版也更加精美。

3. 頁面層級省略

左上角的面包屑層級不易默認顯示全部出來，而是會默認將中間省略，優(yōu)先顯示第一個和最后一個層級節(jié)點。這個細節(jié)可以體現(xiàn)在產品設計的策略，并不會一股腦的把所有信息都展示給用戶，而是優(yōu)先展示相對重要的信息，隱藏會省略此藥的信息，當用戶想要關注的時候，也能夠很方便的進行觸發(fā)。

4. 添加表情符號

鼠標懸停至 Confluence 的標題出，會顯示可以添加表情符號。通過適時隱藏的方式，當鼠標經過時才出現(xiàn)，避免常駐顯示給用戶帶來的干擾。內置了很多表情，團隊內部可以確認表情使用的規(guī)則，便可以幫助用戶更快速地對文檔的類型做出識別和判斷。

5. 頁面狀態(tài)

Confluence 支持給頁面添加自定義的狀態(tài)，例如計劃中、草稿、正在進行、隨時可以查看等，同時狀態(tài)的設置除了基本的文本外，還支持用戶自定義狀態(tài)的顏色，讓其他成員在閱讀文檔的時候，可以很直觀地了解到當前這篇文檔的狀態(tài)，便于團隊協(xié)同和管理。

6. 表格標題行自動固定

???

Confluence 的表格支持設置標題行，當頁面滾動至表頭不在正常可視范圍時，會自動將表頭進行固定懸浮，讓用戶能夠看清楚下面的內容和標題的對應關系，體驗非常自然順暢。除了設置標題行，也支持設置編號列，同理也是可以在橫向滾動表格的時候，能夠便捷的瀏覽對應的編號。

7. 表格單元格的設置

在表格中框選單元格后，會在右上角出現(xiàn)對于單元格的更多操作設置，例如設置單元格背景色、合并/拆分單元格等。將這些對于單元格的設置直接外露出來，其他的一些文檔工具有的是需要右鍵才觸發(fā)，略顯隱蔽，有的雖然也是浮動工具欄的形式，但是框選文本和框選單元格的觸發(fā)區(qū)分不明確，操作體驗上欠佳。Confluence 中這種表格交互的方式很好的解決了一些表格中的交互問題，使用體驗上也非常流暢。

8. 靈活的分欄設置

Confluence 中的分欄設置也是內置了幾種固定的欄數(shù)和布局百分比，基本上能夠兼容絕大部分場景，同時做出限制也能夠讓整體頁面的分欄效果不會因為參差不齊而顯得凌亂。調節(jié)的方式也非常便捷，所有關于區(qū)塊的調整方式都是位于區(qū)塊的下方調整。

9. 自動保存提示

目前市面上主流的在線文檔工具絕大部份都是實時保存的，不過難免會有一些用戶會有數(shù)據(jù)丟失的焦慮。為解決這種用戶焦慮，Confluence 會在頁面的頂部出現(xiàn)保存的狀態(tài)提示，告知用戶剛剛編輯的數(shù)據(jù)正在保存、已保存等，避免用戶擔心編輯的內容沒有保存而引發(fā)的焦慮情況。

10. 無障礙設計

關于無障礙設計的一個小亮點，對于因視覺障礙而使用屏幕朗讀起的用戶，如果遇到圖片，便無法被朗讀器識別，這個時候就可以使用替代文本的功能，當朗讀器朗讀到某張圖片時，可以將圖片轉化為編輯者所設置好的替代文本，這樣就能夠通過替代文本的方式幫助有視覺障礙的用戶理解內容。

四、體驗槽點

1. 歸檔彈窗按鈕錯位

在點擊頁面歸檔時彈出來的彈窗，發(fā)現(xiàn)右上角的「關閉」錯位到彈窗外部了，一個非常明顯的線上 BUG 。

2. 區(qū)塊拖動沒有交互反饋

一部分區(qū)塊在拖拽的時候，只會講區(qū)塊的名稱帶上，缺少即將移動到的目標位置的交互反饋。

3. 一些視覺樣式不統(tǒng)一

創(chuàng)建空間的時候，可以發(fā)現(xiàn)創(chuàng)建空間的彈窗與外面的其他頁面的視覺樣式差異很多，明顯看起來就不是一套設計樣式。推測是因為有比較久遠的歷史設計債務問題，導致目前整體產品內存在一些頁面的視覺樣式格格不入。

4. 頁面目錄

在體驗 Confluence 的過程中，不知道是不是因為筆者沒有找到功能的原因，發(fā)現(xiàn) Confluence 沒有國內一些文檔工具都有的目錄錨點功能（如果大家有發(fā)現(xiàn)的話，可以告訴我 ），雖然可以通過插入目錄索引來實現(xiàn)，但是這個目錄只是實現(xiàn)一個跳轉，并不能將目錄固定在頁面的左側或右側顯示。并且這個目錄只能在頁面的查看態(tài)才能看到，在編輯態(tài)的時候無法預覽目錄，導致在整理這篇文章的時候，經常要上下滾動翻看，略顯麻煩。

五、總結

總體來講，Confluence 是非常強大的團隊知識管理工具，它覆蓋了非常全面的團隊協(xié)同場景，國內很多文檔產品的設計都會借鑒 Confluence 中的一些設計策略和設計理念。本文只是依據(jù)日常使用場景測試出的一些小模塊，功能體驗也還有非常多的可取之處。

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

參考鏈接：

http://www.codemsi.com/pd/4836001.html

https://z?huanlan.zhihu.com/p/105877523