
清潔公司打卡系統|UI設計
清潔公司打卡系統|UI設計
ATTENDANCE SYSTEM
本專案為清潔公司打造的行動端打卡系統。在既有的功能架構下,設計客戶指定的「任天堂大亂鬥」熱血遊戲風格。透過道具化圖標與高張力視覺,讓人員在抵達現場時,有儀式感且直觀的打卡體驗。
時間
2026 - 2週
角色
UI 設計師
負責
UI設計
與開發人員合作,執行並改善設計方案
✴️ 介面優化
本專案由工程師先行規劃核心功能版面,再由我接手視覺。考慮到清潔服務人員的年齡跨度較大,我將資訊層級重新梳理,刻意放大數字時鐘與關鍵操作按鈕,並採用高對比度、粗黑外框的顯眼字體。讓一線人員不需費力,也能一眼捕捉關鍵資訊。

✴️ LINE Bot 圖文選單設計
這套打卡系統是內嵌於 LINE Bot(官方帳號)內運作的,讓員工免去額外下載應用程式。我也連帶為該帳號設計了專屬的「圖文選單」。從用戶點開 LINE 聊天室的那一刻起,就能透過視覺風格統一、區塊導航明確的圖文選單直接觸發功能。

✴️ 風格元件
在風格定位上,我設計了客戶指定的「任天堂大亂鬥」熱血遊戲美學。我將原本單調的功能按鈕「道具化」,並融入微縮的清潔工具圖騰作為背景紋理。所有功能導航皆設計為色彩鮮明的遊戲 Icon,將日常打卡轉化為如同遊戲過關般的趣味儀式,大幅提升了內部工具的視覺張力。

✴️ 模組化卡片操作
其餘如出勤紀錄、薪資單、以及補出勤卡等次級頁面,皆延續了相同的風格,並採用「卡片式結構」進行操作。在視覺上維持了任天堂遊戲選單般的俐落感,更便於使用者在手機螢幕上滑動與點選,確保了跨頁面體驗的視覺一致性。

✴️ 介面優化
本專案由工程師先行規劃核心功能版面,再由我接手視覺。考慮到清潔服務人員的年齡跨度較大,我將資訊層級重新梳理,刻意放大數字時鐘與關鍵操作按鈕,並採用高對比度、粗黑外框的顯眼字體。讓一線人員不需費力,也能一眼捕捉關鍵資訊。

✴️ LINE Bot 圖文選單設計
這套打卡系統是內嵌於 LINE Bot(官方帳號)內運作的,讓員工免去額外下載應用程式。我也連帶為該帳號設計了專屬的「圖文選單」。從用戶點開 LINE 聊天室的那一刻起,就能透過視覺風格統一、區塊導航明確的圖文選單直接觸發功能。

✴️ 風格元件
在風格定位上,我設計了客戶指定的「任天堂大亂鬥」熱血遊戲美學。我將原本單調的功能按鈕「道具化」,並融入微縮的清潔工具圖騰作為背景紋理。所有功能導航皆設計為色彩鮮明的遊戲 Icon,將日常打卡轉化為如同遊戲過關般的趣味儀式,大幅提升了內部工具的視覺張力。

✴️ 模組化卡片操作
其餘如出勤紀錄、薪資單、以及補出勤卡等次級頁面,皆延續了相同的風格,並採用「卡片式結構」進行操作。在視覺上維持了任天堂遊戲選單般的俐落感,更便於使用者在手機螢幕上滑動與點選,確保了跨頁面體驗的視覺一致性。

Back