評論與討論系統

評論與討論系統 是做什麼的？

目的

評論與討論系統提供一套設計互動式對話層級的方法論。它確保複雜的多使用者對話保持可讀性、可導覽性與組織性。透過定義回覆串接、巢狀限制、動作優先級與貢獻者信號的規則，此系統能防止「資訊混亂」，並幫助使用者在大量內容的環境中找出最有價值的貢獻。

使用場景

• 社群論壇： 為特定社群設計具有串接結構的討論。
• 文章/部落格評論： 讓讀者對長篇內容提供回饋。
• SaaS協作： 在專案任務、文件或合併請求中組織內部討論。
• 客服問答： 組織客戶問題與工作人員回覆。
• 社交動態牆： 管理共享貼文或媒體上的互動。

何時不該使用

• 即時通訊（聊天）： 針對即時的一對一或少數人對話，請使用最佳化為「氣泡訊息」與即時傳遞的版面。
• 僅公告的動態： 當使用者無法回覆或互動時，簡單的通知列表即可滿足。
• 低互動頁面： 如果一個頁面預期總評論數少於3則，使用無串接的平面列表會更有效率。
• 交易記錄： 針對自動化的系統稽核日誌，請使用 timeline-activity-system。

輸入

1. 層級模型： 回覆串可以深入幾層？（平面、巢狀、或混合）
2. 使用者身份資料： 大頭貼、顯示名稱、角色（例如：版主、作者、工作人員）。
3. 參與度指標： 投票數（讚/倒讚）、回覆數、時間戳。
4. 情境中繼資料： 「已驗證購買」、「頂尖貢獻者」或「作者」徽章。

輸出

1. 評論元件規格： 單一評論「節點」的視覺定義（大頭貼、中繼資料、內容、動作）。
2. 串接藍圖： 巢狀的空間規則，包括縮排增量與垂直「串接線」。
3. 動作層級對應圖： 「回覆」、「投票」、「編輯」與「檢舉」的優先級排序。
4. 回應式適配策略： 在行動裝置上摺疊串接或扁平化版面的規則。

工作流程

1. 定義評論元件

建立一致的「節點」結構：

• 標頭區域： 使用者大頭貼（依巢狀層級調整大小）、顯示名稱、角色徽章、相對時間戳（例如「2 小時前」）。
• 內容區域： 文字內容，可支援 Markdown 或富文字。
• 動作列： 主要動作（回覆、投票）與次要動作（分享、檢舉、編輯）。

2. 建立串接與巢狀規則

管理回覆之間的空間關係：

• 縮排： 使用一致的增量（例如 24px 或 1.5rem）用於巢狀回覆。
• 串接線： 使用細微的垂直線（1px 寬度）在視覺上連結回覆與其父層。
• 巢狀限制： 設定最大深度（通常 3–5 層），超過後需將串接扁平化，或提供「繼續此串接」連結導向新檢視。

3. 排序動作優先級

並非所有動作都同等重要；使用視覺權重引導使用者：

• 主要動作： 「回覆」與「投票」應立即可見。
• 次要動作： 「分享」或「連結」可僅以文字或圖示呈現。
• 溢位動作： 將「編輯」、「刪除」與「檢舉」放入「更多」（省略號）選單中，以減少雜亂。

4. 實作信號與信任

使用視覺線索提供情境：

• 作者/工作人員標示： 為原始作者或官方工作人員使用明顯的背景顏色或醒目的徽章。
• 新評論/標記評論： 使用微弱的背景漸層或左邊框強調色來標示未讀或剛發布的評論。
• 投票視覺化： 僅在動作活躍時使用顏色（例如，讚為橘色，倒讚為藍色）。

5. 規劃回應式適配

串接會快速消耗橫向空間；為窄視口適配：

• 行動裝置扁平化： 在行動裝置上減少縮排增量（例如從 24px 降至 8px），或將巢狀層級上限設為 2 層後轉為平面。
• 「全螢幕」切換： 針對深層串接，允許點擊回覆以在新開的、全寬的「聚焦模式」中檢視該回覆及其子回覆。

決策規則

• 縮排 vs. 平面： 在「探索」情境（父層情境至關重要）中使用縮排。在「任務」環境（最新資訊優先）中使用平面列表搭配「@提及」參考。
• 投票顯示： 僅在社群需要「自我監督」時才顯示倒讚。對於多數正向成長的環境，僅顯示讚。
• 預設排序： 社群環境預設為「最受歡迎」（加權分數），但時間敏感協作工具則預設為「最新」。
• 截斷規則： 對極長的評論（超過 500 字）使用「閱讀更多」按鈕進行截斷，以保持串接的垂直節奏。

限制條件

• 無障礙存取： 評論必須能透過鍵盤導覽（Tab 鍵切換動作）。使用語意化 HTML（<article> 代表評論，<ul>/<li> 代表巢狀）。每個動作必須有清晰標籤。「串接線」應純屬裝飾性（對 ARIA 隱藏）或使用 aria-hidden="true"。
• 回應式設計： 縮排不得將內容推出螢幕邊緣。在容器上使用 padding-left 或 margin-left，切勿對巢狀區塊使用固定寬度。
• 效能： 針對高流量串接（超過 100 則評論），使用「懶加載」或「載入更多」分頁機制，避免初始渲染時間過長。

常見失敗模式

• 縮排死亡： 允許無限巢狀，直到文字在螢幕右側只剩 1 個字元寬。
• 動作超載： 在每則評論下方顯示超過 10 個按鈕，形成「圖示海」。
• 層級不明： 未能區分「作者」與一般評論者，難以找到官方解答。
• 迷失的父層： 深層串接缺乏串接線，難以追蹤哪則回覆屬於哪個父層。
• 狀態缺失： 使用者送出評論時，未顯示「待處理」或「傳送中」狀態。

驗證標準

• 巢狀深度已設定上限，並可切換至平面或「聚焦」檢視。
• 視覺層級能區分作者、工作人員與一般使用者。
• 串接線清楚連結回覆與其父層評論。
• 主要動作（回覆/投票）在視覺上比次要動作更突出。
• 縮排在行動裝置視口上適配，以防水平溢位。
• 評論以巢狀列表或文章形式進行語意標記。
• 動作按鈕的最小觸控目標為 44x44px。