評論與評分 UI 系統
目的
評論與評分 UI 系統提供設計使用者產生回饋之視覺與結構框架的方法論。它確保量化資料（星級評分）與質化資料（文字評論）能組織成易於掃讀、可信賴且無障礙的介面。此系統透過呈現最相關的回饋幫助使用者做出明智決策，同時與整體網站設計保持視覺一致性。
使用案例
- 電子商務產品頁面： 顯示產品滿意度與詳細的客戶體驗。
- 服務/SaaS 市集： 評分供應商、工具或應用程式。
- 內容平台： 讓使用者對文章、課程或媒體進行評分。
- 回饋收集表單： 設計評分系統的輸入端。
- 評論摘要： 建立「一覽式」評分分佈（例如 5 星長條圖）。
何時不應使用
- 內部品質稽核： 回饋僅限內部處理使用，無公開 UI。
- 二元回饋： 如果目標只是「有幫助/無幫助」或「讚/倒讚」，請使用來自
interactive-state-system的更簡單互動模式。 - 低評論量內容： 如果每項商品通常只有 0-2 則評論，複雜的分佈摘要可能會顯得很「空」或令人沮喪。
- 純量化資料： 對於效能指標或系統健康度（例如「99.9% 正常運作時間」），請使用簡單的
badge-and-tag-system或資料視覺化。
輸入
- 回饋 Schema： 要擷取/顯示的資料（評分 1-5、標題、內文、日期、使用者 ID、驗證狀態、照片）。
- 彙總中繼資料： 評論總數與平均分數。
- 分佈資料： 每個星級（5、4、3、2、1）的評論數量。
- 互動需求： 排序（最新、最高分）、篩選（僅顯示已驗證、有附照片）以及「有幫助」投票。
輸出
- 評分元件規格： 「星級列」的視覺設計（包含空心、半滿與全滿狀態）。
- 評論摘要結構： 彙總分數與分佈長條圖的版面配置。
- 個別評論藍圖： 單則評論項目的結構版面（使用者、評分、內容、操作）。
- 輸入互動規格： 評分選取與評論提交表單的設計。
工作流程
1. 設計彙總摘要（快速概覽）
在顯示個別評論之前，提供一個心智捷徑：
- 平均分數： 大而顯眼的數字（例如「4.8」）。
- 星級視覺化： 反映平均值的 5 星列。
- 總數： 「基於 1,240 則評論」。
- 分佈長條圖： 垂直或水平列表，顯示 5、4、3、2 和 1 星評論的百分比。這些理想上應具有互動性（點擊長條可篩選列表）。
2. 確立個別評論結構
將 visual-hierarchy-system 套用至評論卡片：
- 標頭： 使用者名稱（可選擇匿名）與「已驗證購買」徽章。
- 評分與日期： 星級評分與發布時間。
- 標題與內文： 粗體標題表達核心感受，接著是描述性文字。
- 媒體（選擇性）： 使用者上傳照片的縮圖。
- 頁尾/操作： 「這有幫助嗎？（是/否）」與「檢舉」按鈕。
3. 選取互動與探索模式
讓使用者能找出與他們最相關的回饋：
- 排序： 預設為「最相關」（結合近期性與幫助程度）。允許切換至「最新」或「最高/最低評分」。
- 篩選： 提供快速切換開關，例如「有附圖片」、「僅顯示已驗證」或特定星級數量。
4. 設計回饋輸入（表單）
確保收集過程順暢無阻：
- 初始觸發： 使用大型互動式星級，在懸停時改變狀態。使用
:has()選擇器（例如label:has(~ input:checked)）樣式化的星級輸入選項組，可在不須額外 JavaScript 的情況下提供懸停/選取的填滿狀態。 - 漸進揭露： 僅在使用者選取星級評分後才顯示文字輸入區域。
- 情境引導： 使用佔位文字如「您喜歡或不喜歡什麼？」來鼓勵有用的回饋。
5. 規劃內容差異性
- 空白狀態： 設計「尚無評論——成為第一個評論者」的狀態。
- 長篇評論： 對極長的質化回饋實作「閱讀更多」截斷功能。
- 響應式堆疊： 在手機上，將分佈摘要移至可折疊區塊，或將其堆疊在評論列表上方。
決策規則
- 星級的「瞇眼測試」： 即使在小尺寸下，星級也必須可分辨。對背景使用高對比顏色（例如琥珀色/金色）。
- 驗證優先順序： 「已驗證購買」徽章應在視覺上明顯有別（通常為綠色或帶有勾選圖示），以立即建立信任。
- 平均精確度： 將數值平均四捨五入至一位小數（例如 4.7），但確保星級列能正確呈現半星狀態。
- 幫助程度邏輯： 使用「有幫助」投票來凸顯最佳評論，但確保 UI 不會因過多的次要操作而顯得雜亂。
- 圖片長寬比： 對使用者上傳的評論圖片使用方形（1:1）縮圖，以保持評論列表整齊。
限制條件
- 無障礙性： 星級評分必須使用
aria-label（例如「5 顆星中的 4 顆星」）。互動式星級輸入必須可透過鍵盤操作，並使用role="radiogroup"或類似屬性，每個星級至少為 24x24px（WCAG 2.2, 2.5.8）——考量到小星級目標容易誤觸，建議使用 44x44px。 - 對比： 空心星級（背景）必須與頁面背景有 3:1 的對比；實心星級必須與背景或強邊框有 4.5:1 的對比。
- 響應式： 評論列表必須流暢。在手機上避免使用多欄評論卡片；將所有中繼資料垂直堆疊。
常見失敗模式
- 「二元星級」錯誤： 使用僅有「開啟」或「關閉」而無半星狀態的星級，這會錯誤呈現像 4.3 的平均值。
- 隱藏分佈： 顯示平均分數但不顯示細部分佈，使使用者無法看到負面與正面評論的數量。
- 缺乏驗證： 未能區分已驗證買家與一般使用者，降低整個系統的信任度。
- 「評論牆」： 不提供排序或篩選，強迫使用者滾動瀏覽數百條不相關的項目。
- 無法存取的輸入： 使用純圖示的星級評分輸入，無法被僅使用鍵盤的使用者觸及或選取。
驗證標準
- 平均評分與分佈摘要存在且易於掃讀。
- 個別評論具有清晰的層次（使用者 -> 評分 -> 內容）。
- 「已驗證購買」狀態有視覺提示。
- 針對高評論量場景，提供排序與篩選控制項。
- 無障礙性：星級評分具有描述性的 ARIA 標籤。
- 互動式評分輸入可透過鍵盤導航並具有焦點狀態。
- 版面為響應式，在較小螢幕上邏輯地堆疊元素。