← 所有作品

已上線

批次複製廣告

一次送出多筆廣告時,使用者需要知道哪一關沒通過、該改哪裡,以及離開頁面後去哪裡查結果。

專案資料:我的貢獻、設計範圍與狀態
我的貢獻
定義批次複製的驗證流程、錯誤回饋與列表回查入口。
使用情境
透過 CSV 一次建立多筆廣告複製任務。
設計範圍
批次建立頁、驗證中、驗證結果與批次列表。
專案狀態
已上線。
批次複製流程重繪,從上傳 CSV、查看錯誤報告,到在列表追蹤結果
依設計稿重繪

專案摘要

批次複製從列表開始,使用者輸入批次名稱並上傳 CSV。我沿用先定義狀態、再決定操作的做法,拆開送出前能修正的欄位問題,以及送出後才知道的內容錯誤。流程也保留列表入口,讓使用者回頭找得到該筆批次的結果。

2個檢查關卡
2個錯誤回饋位置
1個回查批次結果的列表
01 — 背景

一次建立多筆廣告,出錯也要找得到是哪一筆

使用者從批次列表建立任務,填入名稱,再上傳 CSV。檔案傳上去後,系統還需要檢查裡面的資料。如果介面只顯示「失敗」,使用者得自己猜是表單沒填好、檔案沒傳上去,還是 CSV 裡的某一列有問題。

02 — 狀態規則

把表單檢查與內容驗證分成兩關

第一關在建立頁確認名稱和 CSV 是否齊全。第二關在送出後檢查批次內容。我把每個狀態的回饋位置與下一步列在一起,讓畫面和流程可以互相核對。

批次驗證狀態與對應操作
狀態觸發條件介面回饋使用者下一步
表單未通過批次名稱或 CSV 缺漏建立頁標記對應欄位補齊資料,再送出
系統檢查中表單齊全,已送出驗證顯示檢查中等待內容驗證結果
內容驗證失敗CSV 內有需要修正的資料報告列出錯誤列號及說明對照原檔修正,或從列表回查
驗證完成批次內容通過驗證彈窗確認檢查完成確認後返回批次列表
03 — 設計判斷

把回饋放在使用者能採取行動的地方

同樣是出錯,缺少欄位時需要回到表單,資料錯誤時則要回到 CSV。畫面上的訊息和操作入口跟著這個差異走。

介面圖

依設計稿以共用 Cr.ED 原型重繪,批次資料為示意。點擊圖片可放大。

01 把範本放在上傳的位置

使用者準備檔案時就需要知道欄位和格式,所以範本與上傳區放在同一個表單。

重點放大
同一頁填寫批次名稱、上傳 CSV 和下載範本。
同一頁填寫批次名稱、上傳 CSV 和下載範本。
完整畫面
把範本放在上傳的位置的 Cr.ED 後台完整畫面,依設計稿重繪

02 欄位錯誤直接標在表單

名稱或檔案缺漏時,使用者留在建立頁即可修正。提示跟著欄位,讓人不用從通用訊息猜是哪一格。

重點放大
批次名稱和 CSV 上傳區各自顯示缺漏提示。
批次名稱和 CSV 上傳區各自顯示缺漏提示。
完整畫面
欄位錯誤直接標在表單的 Cr.ED 後台完整畫面,依設計稿重繪

03 內容錯誤用列號定位

上傳完成只代表檔案已送到系統。內容檢查失敗時,把多筆問題集中成報告,列出對應的資料列與修正方向。

重點放大
錯誤報告列出問題所在的 CSV 列號與說明。
錯誤報告列出問題所在的 CSV 列號與說明。
完整畫面
內容錯誤用列號定位的 Cr.ED 後台完整畫面,依設計稿重繪

04 驗證通過後給出明確的去向

送出後先顯示檢查中,直到檢查結束才確認結果。通過時由使用者確認,再返回列表。

重點放大
系統檢查完成彈窗,確認後回到批次列表。
系統檢查完成彈窗,確認後回到批次列表。
完整畫面
驗證通過後給出明確的去向的 Cr.ED 後台完整畫面,依設計稿重繪

05 離開建立頁後,還能回查

錯誤報告有第二個入口。把「查看錯誤」放在該筆失敗的批次旁,使用者回到列表也能找回原本的檢查結果。

重點放大
失敗的批次在列表提供查看錯誤入口。
失敗的批次在列表提供查看錯誤入口。
完整畫面
離開建立頁後,還能回查的 Cr.ED 後台完整畫面,依設計稿重繪
04 — 流程總覽

從列表出發,成功與失敗都接得回去

把畫面、判斷條件和操作去向放在同一張圖上,從按下「建立」一路對照到返回列表與錯誤回查。

批次複製廣告流程。由批次列表或空列表進入建立頁,經表單檢查與 CSV 驗證。缺漏留在原頁修正,成功確認後回列表,失敗可立即看報告或從列表回查。
依原始設計稿的四欄兩列重繪。沿用案例二的視覺樣式,紫色實線標示前進與分支,淡紫虛線標示返回列表。框線標出觸發跳轉的按鈕,箭頭接到下一個畫面或對應欄位。 · 點擊放大
閱讀流程文字版
  1. 從批次列表點「建立批次」,空列表也提供建立第一筆的入口。
  2. 填寫批次名稱、上傳 CSV,再按「建立」。有缺漏時留在原頁,依欄位提示修正後重送。
  3. 表單檢查通過後,系統顯示「檢查中」並驗證 CSV 內容。
  4. 驗證通過時顯示完成彈窗,按「確認」回列表。驗證失敗時可在結果頁依列號核對錯誤。
  5. 回到列表後,從失敗批次點「查看錯誤」可開啟同一筆唯讀報告。
05 — 成果

功能已上線,批次結果有固定的回查入口

設計交代了兩道檢查各自的責任、驗證結果如何回饋,以及使用者離開當前畫面後如何查回同一筆批次。

本頁的批次名稱、CSV 檔名與報告內容皆為示意資料。

下一個案例
即時預覽的三種狀態重繪,分別為素材未就緒、可顯示預覽及模組不支援即時預覽

RD 製作中

即時預覽 2.0

把即時預覽依狀態拆成三條路徑。素材未就緒時指向設定,可預覽時留在原頁,不支援的模組則引導使用者另開分頁。