2-1. 設計亮點

本專案在 UI/UX 設計過程中,強調實用性與操作效率,並針對高雄地區用戶習慣設計出符合日常行為的界面邏輯與互動動線。我們整合 LINE 生態系操作流程,搭配視覺狀態標示與模組化元件系統,確保平台在可用性、可預測性與操作一致性上的表現。

以下為 「垃不垃多」 在設計上的五項關鍵亮點:

2-1-1 系統化平台整合Line Bot

本系統設計強調平台操作流程的模組化與系統化,將行動版 Web 平台與 LINE Bot 整合,形成一條完整服務動線。用戶可透過 LINE Bot 快速觸發註冊、登入、方案選擇與進度查詢等操作,系統則自動導向對應的行動網頁執行細部流程。

此設計有助於降低下載 App 的門檻,同時保留完整操作彈性,符合高雄地區 LINE 使用普及度高的特性。整體介面針對手機尺寸優化,資訊層級清晰,強化行動端的可用性與流暢性。

2-1-2 QR Code辨識

本平台設計以 QR 貼紙為使用者識別方式,用戶無需購買專用垃圾袋,即可被自動識別並啟用訂閱。代收員透過掃碼與藍牙秤重裝置即時記錄重量,畫面同時顯示訂閱資訊與公斤數,有效避免誤收與超重爭議。

2-1-3 多通道進度提示設計

透過整合「動態及靜態Progress Bar」與「LINE 即時訊息推播」,構成一套多通道的收運狀態提示機制。用戶可於平台首頁透過動畫(狗狗駕車收運)得知當前任務進度,並在詳細任務頁面查閱靜態進度標示與資訊。

此外,系統亦於收運流程中主動推送 LINE 通知,提升用戶對流程的可預期性,減少因等待或未掌握狀態所產生的焦慮與客訴情境。

2-1-4 後台派單介面

為提升每日垃圾收運任務的派遣效率與彈性調度能力,我們建立一套以「任務先行 × 前一日發派」為核心的派單機制。系統設計上將訂單預先拆解為可分配的任務單位,並於前一日由管理端依據可執勤人力進行視覺化分派。

管理者可透過任務列表快速篩選區域、狀態與數量,搭配右側代收員指派介面,清楚掌握每日任務量與人力負載。介面同時提供「平均分配」與手動調整功能,兼具彈性與效率,適用於實際營運中的變動場景。

2-1-5 設計系統與元件一致性管理

UI 設計導入 Design System 規範,並透過 Figma Variables 建立色彩、字級、間距等設計 token,搭配元件化管理方式建置頁面。此機制除提升設計與前端同步效率外,也便於日後風格維護與主題擴展。元件包含按鈕、卡片模組等,皆具互動狀態與適應性。

Last updated