紫外線燈APP

紫外線燈APP

Ultraviolet Light APP

Ultraviolet Light APP

App

UI

本專案是一款整合 「空間消毒」「環境監測」 的 iOS 應用程式。使用者能透過 App 連動紫外線消菌燈,針對客廳、臥室等不同生活空間量身打造專屬的消毒行程與時間記錄;同時連結當地氣象站數據,讓使用者即時掌握所在區域的空氣品質(AQI)。

時間

2020 - 6週

角色

APP 設計 / 產品設計師

負責

  • 整體User Flow規劃

  • APP UI/UX設計

  • 與客戶溝通與協調

  • 與開發人員合作,執行並改善設計方案

挑戰

  • 安全與信任: 紫外線對人體有潛在危害,如何透過介面引導使用者在安全的前提下操作裝置,並精確告知消毒狀態,是設計的首要挑戰。

  • 多樣化情境: 消毒裝置會隨使用者移動至不同房間(客廳、臥室、浴室),如何讓使用者在 APP 中快速切換空間設定,並直覺地調整相對應的消毒行程。

  • 資訊整合: APP 除了控制裝置,還需整合外部氣象站的空氣品質數據,如何將「室內消毒」與「室外空污監測」這兩種不同維度的資訊,在單一介面中和諧呈現。


使用者發現與洞察

  • 空間導向的操作習慣: 使用者在進行消毒時,大腦的第一直覺是「空間」(我在哪裡消毒?),而非單純的「開關」。所以建立以空間為單位的 UI 階層更符合心理模型。

  • 對「環境」的需求: 對於看不見的細菌與空氣品質,使用者容易產生焦慮感。透過連結當地氣象站的實時數據,能有效增加使用者對環境健康的掌握感與對 APP 的信任。

  • 視覺化的裝置開關: 消毒過程通常需要避開空間,使用者需要清楚知道「是否已完成」,避免在消毒期間誤入。


設計

  • Figma 設計體系: 我從 User Flow 的邏輯梳理到 Wireframe 的介面配置,與業主充分討論後,確保了操作路徑的最簡化。最後我們採用深色模式,搭配螢光藍綠色的強調色,營造出高端的醫療裝置科技感。

  • 雙重安全驗證與視覺警示: 針對安全,在確認開啟裝置的流程中設計了專門的「警告頁面」,強制提醒使用者撤離現場以確保安全;同時在首頁的空間卡片中,針對開啟中的裝置設置「高對比度的開關圖示」,透過視覺反差即時告知運作狀態,防止誤觸或誤入。

  • 空間專屬符號與行程架構: 針對多空間的條件,我設計了一套具備辨識度的空間 Icon(如臥室、廚房、書房),讓使用者根據現在不同的空間去設定專屬的消毒功能以及時間,並能完整記錄行程。

  • 數據可視化: 針對空氣品質數據,我採用儀表板設計,連結當地氣象站數據以監測所在地區的空氣品質,利用色彩語義將複雜數據直覺化,讓室內外健康資訊一目了然。


預期

  • 視覺直覺化: 利用風格統一的空間專屬Icon,直接傳達消毒目標,讓使用者無需閱讀繁雜文字即可秒懂目前操作的空間環境。

  • 操作體驗穩定且具包容性: 透過深色調的介面與高對比的文字資訊,確保使用者在不同環境光線下都能清晰監控消毒狀態與空氣品質數值。

  • 科技防護品牌定位: 專業的 UI 介面與數據圖表化呈現,將產品的「紫外線消毒」科技連結為可見的健康指標,強化品牌專業度。

  • 建立可擴展的系統架構: 模組化的空間管理架構,能靈活支援未來更多智慧健康設備的接入或聯動。

Back

UI/UX

Create a free website with Framer, the website builder loved by startups, designers and agencies.