Discuss Kit v2.0 正式發布:使用者介面全面升級

歷經 Discuss Kit 1.0 一年多的迭代,我們希望 Discuss Kit 能幫助大家更有效率地溝通、協作,並管理各式各樣的內容。因此,我們陸續開發出討論、部落格、文件、聊天、書籤等多項核心模組。截至目前,ArcBlock 開發團隊的 Team DAO、ArcBlock 社群,以及 ArcBlock 官網(包含部落格與開發文件)等服務,都獲得了 Discuss Kit 的大力支援。
從 2023 年底到 2024 年第一季,我們展開了 Discuss Kit 2.0 的籌備工作,規劃要全面優化使用者介面。經過一整季超過 100 個小版本的持續迭代,終於正式推出 2.0 版本。2.0 版本的主要目標是提升使用者介面,同時也加入了幾項新功能,並修復了大量的錯誤。以下段落將詳細介紹 2.0 版本中的部分新功能與改進項目。
討論
討論模組旨在提供一個互動平台,讓使用者能針對特定主題進行討論與意見交流。使用者可以發起新的討論主題,也可以回覆現有的討論。這對需要團隊協作、社群交流,或任何集體決策討論的群體都相當適用。
貼文列表頁
貼文列表頁的版面配置基本上維持不變。左側是看板列表,右側是貼文列表,頁面頂部新增了一個橫幅區塊,標題與副標題都可以在後台自訂。

貼文列表頁也包含許多細節上的改進,例如:
- 字型、字重、圖示、文字行距的優化
- 看板啟用狀態的樣式優化,以及邊框、背景、尺寸等表單元件樣式的優化
- 標籤選擇器等常用元件在樣式與互動上也都有大幅改善,將原本的清單形式改為更精簡的標籤顯示方式。標籤的前景色、背景色與邊框色都盡量搭配得舒適協調。此外,Discuss Kit 還會追蹤使用者常用的標籤,並將其顯示在最上方。

貼文詳情頁

上圖是貼文詳情頁。標題上方有幾個常用的操作按鈕,包括返回、收藏、分享與選單。標題右側則是「置頂」與「精選」的徽章。標題下方會顯示貼文所屬的看板、瀏覽次數,以及相關標籤。這次改版中,我們重新設計了圖示按鈕與選單清單的樣式,讓按鈕等 UI 元件的尺寸、邊框顏色與圖示大小更加協調,甚至統一了圖示的線條粗細。
標題下方是貼文內容本身。在 2.0 版本中,我們以 Material Design 主題為基礎,全面優化了內容的排版,包括字型、字級、字重、文字顏色、行高、行距與段落間距等。此外,我們也優化了連結、引用、清單、待辦清單等元素的樣式,提升可讀性與閱讀體驗。
留言列表位於主要內容下方,我們改善了留言列表中貼圖/回覆圖示按鈕、表情反應元件與排序元件的樣式,並在留言之間加上分隔線,讓內容更清晰易讀。
貼文編輯體驗改善

貼文編輯頁面(如上圖)在編輯體驗與版面配置上都有許多改進。編輯貼文時,系統會導向專屬的編輯頁面,取代先前的彈出視窗編輯方式,讓使用者擁有更充裕的編輯空間。看板選擇、標籤選擇、貼文置頂與精選等功能都已整合進設定面板,點擊右上角的設定按鈕即可開啟此面板。

編輯過程中如果頁面意外關閉或跳轉,Discuss Kit 會偵測是否有未儲存的內容,協助使用者避免非預期的資料遺失。

如果某位使用者正在編輯貼文,而另一位具有編輯權限的使用者同時修改並儲存了該貼文,前者會看到提示訊息。使用者可以選擇備份內容並重新整理頁面,以避免內容衝突。(Discuss Kit 未來將支援多人協作編輯)

在 2.0 版本中,我們大幅改進了編輯器的樣式,移除了較少使用的工具按鈕,重新整理工具列按鈕,並優化工具列按鈕圖示的顯示,讓圖示看起來更一致、更美觀。

部落格
部落格模組讓使用者能發布文章、分享知識,並具備強大的多語言與翻譯支援功能,適合任何想要建立個人或企業部落格的使用者。
Discuss Kit 支援「標準版」與「企業版」兩種部落格範本樣式。系統預設使用「標準版」範本,使用者可在後台自行設定要使用的範本。在這次 2.0 的改版中,我們針對標準版/企業版兩種範本的部落格列表頁與詳情頁都做了優化。

標準版範本
下圖是標準版範本的部落格列表,左側是部落格分類與主題標籤,右側是部落格列表,可以瀏覽每篇部落格的封面圖片、標題、摘要與標籤等資訊。

行動版:

以下是標準版範本的部落格詳情頁,頁面上半部包含封面圖片、分享按鈕、部落格分類、標題與標籤。標題下方可以看到發布時間、作者、瀏覽次數等資訊,接著是部落格的本文內容,本文下方會顯示推薦文章,頁面最下方則是留言區。

企業版範本
企業版範本的部落格列表(下圖)在版面配置上與標準版範本相似,差別在於企業版採用卡片式呈現部落格列表。

行動版:

企業版範本的部落格詳情頁(如下圖)與標準版類似,同樣顯示封面圖片、標題、作者、發布時間等關鍵資訊。不同之處在於企業版採用雙欄式版面配置,左側為主要內容,右側則是目錄與推薦文章清單。

書籤
書籤模組能協助使用者儲存並整理網路上的資源。使用者可以將任何網頁儲存為書籤,並進行分類與標籤管理,方便日後檢索與參考。
v2.0 針對書籤功能做了許多改進,特別是在使用者介面與互動體驗方面。列表頁(如下圖)採用雙欄式版面配置,左側顯示書籤分類,右側則以卡片形式呈現書籤列表。使用者可以透過關鍵字或標籤搜尋書籤。

透過書籤詳情頁,可以檢視快照,或點擊「View Source」按鈕前往原始連結。


文件
文件是一個用途廣泛的模組,不僅可以用來維護技術文件,也能協助團隊建立系統化的知識庫,同樣適合用於個人筆記。特別是在處理多語言內容時,文件模組格外好用,它整合了先進的 AI 翻譯技術,能在保留內容格式的同時,快速且準確地完成跨語言內容轉換,大幅提升文件處理的效率與準確度。
在 2.0 版本的改進中,我們也新增了多種文件入口的支援。我們可以依專案來組織文件,如下圖所示,

使用者造訪文件首頁時,會看到各專案的文件,文件卡片的樣式也經過用心設計。

此外,Discuss Kit 也支援更進階的文件組織方式,我們可以透過設定系統標籤(例如 Get Started、Guide 等)將文件歸類為不同的合集。

不同文件中的不同章節會被歸納到指定的「合集」中顯示(見下圖)。

聊天
聊天模組提供即時通訊功能,讓使用者能進行私訊或群組交流。此模組同時整合了通知系統,當有人在你的貼文留言或回覆你的留言時,你就會收到通知訊息。
對話列表與訊息列表
在 2.0 版本中,我們改進了對話列表與訊息列表的版面配置與樣式,讓整個應用程式的視覺呈現更具吸引力。現在,使用者可以在對話列表中輕鬆看到每個對話的最新一則訊息,而最近有活動的對話會自動置頂顯示,讓使用者能快速找到自己感興趣的內容,更輕鬆地參與討論。


我們也優化了通知訊息列表的樣式,而 Discuss Kit 所支援的通知訊息類型也在持續增加中。

除了使用者介面的優化之外,對話的載入效率與即時通訊的穩定性也都有大幅提升。
支援使用者搜尋
聊天模組新增了使用者搜尋功能,讓使用者能輕鬆快速地找到其他人並展開對話。

行動版介面改善


看板與標籤管理
看板與標籤的管理在使用者介面上有顯著的改進,看板列表與標籤列表現在看起來更整齊、更美觀。


在 v2.0 之前,看板只能套用於貼文。這次改版中,我們將看板的適用範圍擴展到部落格、文件與書籤。此外,看板也可以與通行證綁定(見下圖),藉此達到保護看板(以及看板內容)的目的。

在 2.0 版本中,我們會明確地將標籤區分為系統標籤(如下圖)與一般標籤。當我們需要為貼文或文章加上標籤時,通常只有管理員才能使用系統標籤。當然,任何標籤都可以綁定通行證,藉此限制或開放該標籤的使用範圍。

圖中的標籤已與通行證綁定,可以看到「Restricted Access: Owner, Admin, Guest」的提示文字。


攜手成長,社群共同驅動的更新
我們相信,產品的核心在於使用者充滿活力的社群。各位的意見與建議對我們來說彌足珍貴,我們也致力於採納大家的回饋,讓 Discuss Kit 變得更好。在這個段落中,我們要介紹這次版本中由使用者回饋所帶動的最新更新與錯誤修復。從細微的調整到重大的變更,每一次更新都是為了提升各位的使用體驗、滿足大家的需求所踏出的一步。感謝大家一路以來的支持與參與,一起來看看這次發布中,你們的回饋幫助我們改進了哪些地方!
- 移动端社区的标签下划线问题 z1fXXRA3YQTAAkKr4kVTJ6nWZnQm6AFAuNF
- 社区消息通知栏目问题 z1fXXRA3YQTAAkKr4kVTJ6nWZnQm6AFAuNF
- Editing discussion: Board change not permitted z1dTAX6BubAxmhXGP8zMVAZAFwizvbv8gnB
- Error when Favourite a discussion post z1chE2k3Md4kzdBc7tNPQfYQYLddJXrxQY3
- Box hangs in chat section of community site. z1jSmADVV9s6T6kux53KH8tHvm19KLF6h95
- Text box drops away/Start discussion button change z1jSmADVV9s6T6kux53KH8tHvm19KLF6h95
- Screen jumps when using @ symbol z1jSmADVV9s6T6kux53KH8tHvm19KLF6h95
- Floating pop up box on mobile when making community post z1jSmADVV9s6T6kux53KH8tHvm19KLF6h95
- Dismiss button hangs and jumps around screen z1jSmADVV9s6T6kux53KH8tHvm19KLF6h95
- Date and time pop up hangs/glitches z1jSmADVV9s6T6kux53KH8tHvm19KLF6h95
- Missing info from screen. z1jSmADVV9s6T6kux53KH8tHvm19KLF6h95
- Can’t select label for post on mobile z1jSmADVV9s6T6kux53KH8tHvm19KLF6h95
- 沉浸式翻译无法对内容进行翻译 z1grEgvCpgTMD2Gkqf18NFZGzPsHie43E3J
- 【建议】Discuss Kit的聊天窗口怎么快速定位到新消息 z1fXXRA3YQTAAkKr4kVTJ6nWZnQm6AFAuNF
- 用户订阅的弹窗信息反了 z1fXXRA3YQTAAkKr4kVTJ6nWZnQm6AFAuNF
- community个人中心页面报错 z1fXXRA3YQTAAkKr4kVTJ6nWZnQm6AFAuNF
結語
相較於 v1.0,Discuss Kit v2.0 有了長足的進步,而我們也會持續改善使用者介面與互動體驗。接下來,Discuss Kit 將專注於以下幾個方向:
- 優化聊天模組的使用者體驗,並與 DID Wallet 無縫整合
- 搜尋引擎優化(SEO)
- 優化編輯體驗,包括草稿與發布流程
- 強化 AI 能力
如果您在使用過程中有任何需求、建議或問題,歡迎前往 ArcBlock 社群 提供回饋,我們會竭盡全力提供協助。此外,若您的回饋獲選加入我們的臭蟲懸賞計畫(Bug Bounty Program),還能獲得 ABT 獎勵。
本頁涉及
產品
-
DiscussKit
active
在 ARC 上重新構建的可重用討論元件,支援貼文、評論、分類、回應和搜尋,現已承載 ArcBlock Community。
-
Web3 Kit
superseded
在 Blocklet 一側處理鏈上資料和帳戶的那些部件。這部分工作已併入 ARC;獨立的 Blocklet 不再維護。