這是 AAPD 第三屆 UI 設計實戰營的畢業製作，從競品研究到完整 UI 設計，搭配 AI 工具使用，產出一款遊戲化助眠 App。最終本專案選入「AAPD × 六角學院｜設計前端產品研發營」，由前端工程師將部分頁面實際開發為靜態畫面，進一步驗證了 UI 設計的可行性與合理性。
2025/07 - 2025/08
- 產品設計師 ×5
競品分析、User Flow、首頁 UI、Prototype、設計交付
背景與問題
現況分析
- 根據台灣睡眠醫學學會 2021 年的調查，台灣人的平均睡眠時間遠低於美國睡眠醫學學會（American Academy of Sleep Medicine）建議時數 7～9 小時，有將近半數的人睡眠品質不佳；而妨礙睡眠最常見的原因是「睡前使用手機」。這不禁讓我們思考：該如何幫助使用者不再熬夜滑手機、培養健康規律的作息？
平均睡眠時數
0.00 hr
睡眠品質不佳
0%
睡前使用手機
0.0%
競品分析
透過 ChatGPT、Gemini、Perplexity 等 AI 工具分析競品，我們得知市面上已有《SleepTown》、《Pokémon Sleep》等多款助眠 App，透過「睡覺蒐集獎勵、跳離頁面滑手機則失敗」的機制，幫助人們放下手機、上床睡覺。雖然「收集圖鑑」的玩法大受好評，但時間一久，其他問題卻逐漸蠶食使用體驗：
睡前過多互動與刺激
產品本意是幫助入睡，卻透過複雜操作、養成遊戲機制等，誘導使用者在睡前持續盯著螢幕，使大腦處於興奮狀態，反而延誤入睡。
《Pokémon Sleep》：食材收集、角色養成任務與過場動畫等遊戲化設計。
《BetterSleep》：大量的音頻與自訂調音，容易導致決策障礙。
硬性懲罰與缺乏彈性設定
一旦未達標就懲罰，在面對現代人多變的作息（如輪班、加班）顯得過於僵化，容易讓使用者累積挫折感而放棄使用。
《Sleep Town》：若未能在指定的起床時間內打卡，或睡眠中途離開 App，建築便會倒塌，缺乏面對突發狀況的彈性。
《Pokémon Sleep》：固定的結算週期，對於作息不規律或輪班的使用者而言，容易因錯過重置時間而中斷進度。
缺乏行動指引
產品僅止於助眠工具與睡眠紀錄，未轉化為具體的改善方案。
《Sleep Cycle》：聚焦於量化生理數據，卻缺少行動指南。
《BetterSleep》：著重在聽覺放鬆，但缺乏睡眠行為引導。
產品定位
總結以上研究，我們定義出了四個主要的設計假設，以及對應的功能發想方向，作為我們產品架構的方針。
| 設計假設 | 功能發想 | |
|---|---|---|
| 1 | 如果戒手機變得有趣，透過低刺激的遊戲化設計，而非繁複的養成任務，便能給予成就感並降低打開社群的慣性。 | 適度地遊戲化：透過睡眠探索與圖鑑收集的獎勵與回饋，提升使用動機與黏著度。 |
| 2 | 若能彈性調整睡眠目標，貼合實際作息，能有效降低挫敗感。 | 彈性睡眠時間設定：提供個人化作息調整，以「階段性獎勵」取代「懲罰」，對應輪班與加班族的需求。 |
| 3 | 若能將抽象的數據，轉化為好上手、具體可執行的行動引導，使用者便能清晰知道如何調整作息，不再對改善睡眠感到無所適從。 | 圖表與行動引導：提供可視化的睡眠記錄圖表，搭配具備指導意義的分析說明，使用者不僅能更對症下藥，也避免對分數感到焦慮。 |
| 4 | 使用者在戒斷時會感到不習慣，需要替代放鬆選項，填補過去由手機陪伴的時光。 | 用音樂幫助培養習慣：提供不同的助眠音樂，轉移培養新作息的不適感。 |
產品原則
目標族群
專為加班、輪班與作息不固定的上班族，深入了解其「報復性熬夜」的心理動機與行為需求。
情感連結
以夢境冒險故事取代枯燥記錄，讓睡覺變成一件令人期待的事情。
簡易流程
精簡直觀的入睡流程，營造沉浸感的同時也不失功能性。
品牌視覺
溫暖可愛的視覺語言和角色設計，建立極具辨識度的品牌形象。
設計決策
主要功能與流程
- Onboarding
- 品牌意象 Loading → 遊戲說明 → 體驗 / 註冊 / 登入 → 教學說明 → 首頁
- 睡眠功能
- 設定睡覺 / 起床時間 → 選擇場景 → 確認助眠音樂 → 開始睡眠 → 中止 / 結束睡眠 → 獲得里程 → 獲得寶物 → 首頁
- 開啟通知 / 提醒
- 設定 → 設定睡覺時間提醒
- 查看睡眠紀錄
- 日誌 → 查看睡眠數據
- 查看圖鑑
- 圖鑑 → 選擇收集場景 → 查看收藏寶物
核心功能
1旅行（睡眠）功能
- 選擇夢境場景 / 路徑：將「睡眠」轉化成「夢境之旅」，總共有四個場景，每個場景皆有三條路徑，每位旅人將從「淺夢村」啟程，可從三個不同的路徑中擇一進入夢境。隨著每晚的穩定入眠，旅人會累積「夢境里程」，逐步解鎖其他場景，如「深眠幽谷」、「記憶森林」、「浮島邊境」等神秘新世界。
- 設定旅行時間：指啟程（睡眠）時間與抵達（起床）時間的設定，可於 Onboarding 教學時初步設定，然而每次啟程時，都會再與旅人確認時間，給予彈性的時間設定。
2收集夢中寶物
當結束睡眠紀錄後，你將收到旅途中遺落的寶物。這些夢境碎片藏著前一夜的記憶與情緒，而寶物的稀有程度，則會隨著你的作息穩定度而浮動——好好睡眠的旅人，越能發現珍貴的夢之寶物。
3追蹤睡眠日誌
透過每日睡眠日誌，你可以回顧每一次旅程的品質與狀態。系統會彙整週、月、年等時間軸的睡眠數據，幫助你從長期趨勢中了解自己，逐步養成專屬的健康睡眠節奏。
設計系統與視覺語言
《夢の旅人》以「睡眠是一場夢的旅程」為核心概念，打造出溫柔奇幻的夢境世界。主角「夢旅人」擁有雲朵般的白髮、發光的法杖，與小狐狸夥伴一同穿梭夢境，展開每夜的冒險。 整體視覺以 Recraft 生成，採用低飽和色彩，向量插畫的風格，有如童話故事般的純真奇幻，傳遞放鬆療癒的感受。透過角色與場景的陪伴，引導使用者一步步走入夢中，在探索中慢慢感受到內心的平靜與睡眠的意義。
設計迭代
1Onboarding
初期採用常見的「功能導向」設計，逐頁介紹產品特色，幫助使用者快速上手。然而，這種方式對於偏好休閒娛樂的目標族群而言，缺乏吸引力與角色帶入，更何況我們是要設計遊戲化的 App。 因此我們改以角色對白的方式來建立《夢の旅人》的世界觀，有效提升使用者的沉浸感與探索動機。
2首頁
初期首頁以當前解鎖地點為背景，搭配解鎖進度條來鼓勵使用者維持穩定睡眠。然而對於處於疲勞狀態的睡前使用者而言，資訊量依然偏高，且「地點選擇」層級過深、不夠直覺。 因此，我們重新梳理首頁架構：精簡畫面以呈現旅行時間，並且可直接滑動切換場景，搭配更明確的 CTA 按鈕，強化介面易用性與視覺美術。
成果與反思
成果驗證
- 工程可行性
- 入選「AAPD × 六角學院｜設計前端產品研發營」，部分頁面完成靜態開發。若專案持續，可針對目標使用者做易用性測試，進一步迭代。開發結果
- 學會在不熟悉中尋找共識
- 這是我首次與 4～5 位設計師合作的經驗，也是我參與此次營隊的核心目標。在過程中我深刻體悟到，「建立溝通框架與有效溝通」與「任務追蹤機制」是團隊運作的基石。透過頻繁的討論與確認，並在多方觀點中尋求共識，確保團隊對設計目標始終保持同步。
- 大膽嘗試，打破既有框架
- 在初期設計時，容易受限於既有思維，看到 Wireframe 就照著畫，未深入思考與探索什麼才是真正適合的表現方式。透過「多聽、多看、多做」與團隊的迭代嘗試和風格收斂，我們不僅深刻體會到淺色模式與深色模式在設計邏輯上的差異，也成功為《夢の旅人》形塑出獨樹一幟的視覺風格。
夥伴回饋
YPINPIN
前端工程師
感謝設計組提供漂亮的設計稿，每周定期開會討論問題，很有效率！
Heather Chiu
UIUX 設計師
感謝大家為了專案不眠不休（？）的奮鬥，透過不斷討論與對應彼此想法的過程，讓我們達成了共同目標：前進六角前端營合作！
