檔案上傳與管理系統

檔案上傳與管理系統 是做什麼的？

目的

檔案上傳與管理系統提供了一種方法論，用於設計將檔案從使用者裝置傳輸到伺服器的完整體驗。它確保流程透明、可回復且無障礙。此系統定義了上傳觸發器（拖放區域）的互動狀態、上傳佇列的空間節奏，以及在高延遲操作中維持使用者信心所需的回饋迴圈（進度、成功、錯誤）。

使用案例

• 內容管理系統 (CMS)： 設計媒體庫和素材上傳器。
• SaaS 應用程式： 實作文件管理、CSV 匯入或使用者個人資料附件。
• 專案管理工具： 在任務或評論中建構檔案附件。
• 創意工具： 設計照片、影片或設計檔案的高容量上傳器。
• 雲端儲存介面： 管理複雜的資料夾和檔案上傳操作。

何時不應使用

• 小型文字附件： 如果「檔案」只是一個簡短的文字片段，請使用標準文字區塊或 copy-to-clipboard-implementation。
• 系統自動傳輸： 使用者不觸發或監控上傳（例如，背景遙測）。
• 單一輸入的大頭貼照片： 雖然此系統也適用，但對於低複雜度的單張圖片更新，使用簡單的「頭像」觸發器（來自 user-avatar-system）可能更合適。
• 靜態資源： 對於屬於網站程式碼一部分的資源（例如圖示、主題圖片），這些資源應透過開發者工作流程管理。

輸入

1. 檔案類型和大小限制： 允許上傳哪些類型（PDF、JPG、PNG）以及最大大小是多少？
2. 容量預期： 使用者是一次上傳一個檔案，還是批次上傳 50+ 個檔案？
3. 上傳情境： 是獨立任務（例如「匯入資料」）還是支援性操作（例如「附加到訊息」）？
4. 元資料需求： 檔案在上傳過程中是否需要標題、描述或標籤？
5. 系統令牌： 來自父設計系統的間距、顏色和字型比例。

輸出

1. 拖放區域結構規格： 上傳觸發器（閒置、懸停、啟動、停用狀態）的視覺定義。
2. 佇列管理藍圖： 「待處理」、「上傳中」和「已完成」列表項目的空間組織。
3. 進度與回饋矩陣： 進度條、百分比指示器和成功/錯誤狀態的視覺處理。
4. 操作層級： 檔案列表中「取消」、「重試」、「刪除」和「編輯」操作的規則。

工作流程

1. 設計上傳觸發器（拖放區域）

建立清晰的互動邀請：

• 閒置狀態： 使用虛線或實線邊框，搭配圖示（通常是雲端上傳或迴紋針）和清晰的指示（例如「拖曳檔案至此處或點擊上傳」）。
• 拖曳覆蓋狀態： 改變背景顏色或邊框樣式，以提供區域已準備好接收檔案的即時回饋。
• 行動裝置備援： 確保拖放區域仍是一個大型的可點擊按鈕（根據 WCAG 2.2 SC 2.5.8，最小 24x24px，建議 44x44px），以開啟原生系統檔案選擇器。

2. 建立上傳佇列

管理多個檔案而不使介面雜亂：

• 即時回饋： 一旦選取檔案，立即將其新增到觸發器下方或內部的列表中。
• 檔案結構： 每個列表項目應包含：
  • 縮圖/圖示： 幫助使用者識別檔案類型或內容。
  • 檔案名稱和大小： 確認選取了正確的檔案。
  • 進度指示器： 顯示上傳狀態的橫條或圓圈。
  • 操作： 提供取消進行中上傳或移除已完成上傳的方式。

3. 提供細緻的狀態回饋

使用 step-progress-system 和 interactive-state-system 來處理檔案狀態：

• 上傳中： 顯示進度條，並針對長時間上傳顯示百分比或「已上傳 X / Y MB」。
• 成功： 使用語義上的「成功」顏色（綠色）和勾號圖示。提供「檢視」或「連結」操作。
• 錯誤： 使用語義上的「錯誤」顏色（紅色）。提供明確的原因（例如「檔案過大」）和「重試」按鈕。

4. 設計檔案管理（上傳後）

定義使用者如何與已上傳的資源互動：

• 編輯元資料： 如果需要標題或描述，提供內嵌編輯或「設定」模態視窗。
• 刪除： 使用「垃圾桶」圖示，並針對破壞性操作提供確認步驟。
• 網格與列表檢視： 對於以媒體為主的內容，提供縮圖網格檢視；對於以文件為主的內容，使用列表檢視以獲得更高的元資料密度。

5. 規劃響應式堆疊

• 緊湊佇列： 在行動裝置上，摺疊元資料（例如檔案大小），並優先顯示檔案名稱和進度條。
• 全螢幕專注： 對於複雜的上傳器（例如帶有對應功能的 CSV 匯入器），使用全螢幕覆蓋層以消除干擾。

決策規則

• 「即時條目」規則： 檔案在被拖曳/選取後必須立即出現在 UI 中，即使實際的伺服器請求尚未開始。
• 進度可見性： 任何上傳時間超過 1 秒的檔案都應使用進度條。對於非常快速的上傳，直接轉換到「成功」狀態。
• 批次操作： 如果使用者可以上傳 5 個以上的檔案，提供「全部清除」或「全部上傳」操作以統一管理佇列。
• 衝突管理： 定義如果存在同名檔案時會發生什麼情況（例如「保留兩者」、「取代」、「跳過」）。
• 空狀態： 如果媒體庫為空，使用 empty-state-system 提供「上傳」按鈕作為主要行動呼籲。

限制

• 無障礙性：
  • 拖放區域必須可聚焦，並可透過 Space 或 Enter 鍵操作。
  • 使用 aria-live="polite" 向螢幕閱讀器宣佈上傳進度和完成（避免因每個百分比更新而氾濫）。
  • 檔案輸入必須有一個隱藏但可存取的 <label>。
  • 確保焦點永遠不會被拖放區域或進度列表遮蔽（WCAG 2.4.11 焦點未被遮蔽） — 黏性頁首或提示不得覆蓋焦點元素。
  • 「取消」/「重試」/「刪除」操作的觸控目標必須至少達到 24x24px（WCAG 2.2 SC 2.5.8）；主要操作建議為 44x44px。
• 響應式： 拖放區域應為流體佈局，且絕不能導致水平溢出。
• 對比度： 進度條和錯誤訊息必須符合 WCAG AA（4.5:1）對比度比率。

常見失敗模式

• 「無聲失敗」： 上傳失敗，但 UI 未提供任何回饋，導致使用者無限期等待。
• 進度消失： 進度條在上傳完成前就消失，引發「後期焦慮」。
• 拖放區域過小： 建立的目標太小，難以用滑鼠或拇指點擊。
• 缺少「取消」功能： 不允許使用者停止一個大型的意外上傳。
• 模糊的錯誤訊息： 顯示「錯誤 500」而不是「伺服器目前忙碌，請稍後再試」。

驗證標準

• 拖放區域具有明確的「閒置」、「懸停」和「拖曳覆蓋」狀態。
• 佇列中的每個檔案都顯示名稱、大小和進度。
• 「成功」和「錯誤」狀態同時透過顏色和圖示指示。
• 使用者可以取消或從佇列中移除檔案。
• 使用 ARIA 即時區域進行狀態更新。
• 佈局具有響應式，並能優雅地處理長檔名。
• 所有互動元素符合 WCAG 2.2 的 24x24px 觸控目標最小值（建議 44x44px）。