實作課程 · Design an Admin Interface

替貓老闆做管理後台

延續貓掌櫃案例,用五章設計商品、訂單與文章管理的操作方式:先安排後台選單,再做列表、編輯、批次操作與待辦總覽。每章都有可操作的模擬後台,完成後可接著讀內容管理課程,把介面連到資料與權限。

5 章·一個案例帶到底·每章都有驗收清單·進度存在你的瀏覽器

練習專案

貓掌櫃官網

設計商品、訂單與文章管理,讓日常操作找得到也不容易改錯
  • 建議先完成官網,並會用 Git 留存版本。本課先用虛構資料做介面原型,不需要先申請外部服務。
  • 商品管理練習名稱與顯示狀態;訂單區顯示待處理訂單;文章區區分草稿與已發布。交易價格、付款及出貨另有流程。
  • 每章的站內後台都能操作,資料只留在當前頁面的記憶體,重新整理即重設;不會連到真實帳號、訂單或資料庫。
  • 唯讀角色和儲存失敗都是教學模擬。正式系統仍須在後端檢查權限、驗證輸入並儲存資料;完成後可接著讀《讓網站內容自己更新》。
先分清楚管理者要做什麼從每天會做的任務安排後台區域,讓管理者知道自己在哪裡,以及接下來能做什麼。未開始做出好找資料的列表讓搜尋、篩選、排序與分頁一起工作,也交代結果數、選取範圍和沒有結果時怎麼辦。未開始新增與編輯不容易出錯把標籤、驗證、儲存狀態與未儲存提醒補齊,避免資料沒存到卻讓人以為已完成。未開始批次操作與危險動作先確認選了哪些資料、動作會影響什麼,再做變更;可以停用與還原時,不必一開始就永久刪除。未開始儀表板與完整驗收首頁先回答今天有哪些工作待處理,再把載入、空資料、失敗、唯讀與手機操作一起驗收。未開始