心樂園輔助平台
此網站供給情緒障礙兒童及家長們使用，使用者角色分為兩大面向，主要為兒童版與家長版。在兒童版當中，除了有輔助孩子們學習的閱聽室及小遊戲，家長們還可利用家長版，知道院方提供的相關課程資訊，並匯整出孩子們使用的紀錄資料，供治療時給醫師參考。不但能使孩童及家長清楚明白能使用的資源， 也可透過系統即時記錄兒童行為的功能，讓治療師了解孩童們在家的狀況。
設計動機
心理醫師指出許多情緒障礙孩童們在生活上有情緒宣洩之困擾，家長們除了無從協助孩子宣洩情緒，也時常忘記記錄孩童們日常行為，故希望開發以兒童族群為主，家長可陪同在側輔助，實現紀錄與藝術治療合而為一的互動式網站。
負責任務
UI/UX
HTML
CSS
RWD
HTML
CSS
RWD
專案時間
2021.04 - 2021.11
目標與挑戰
提供兒童易於操作的介面
作為心理師治療輔助工具
提供兒童易於操作的介面
隨智慧型裝置的普及，因應不同裝置設計介面，提供給使用者更好的體驗是此專案的目標，除外兒童版因考量孩童們文字識讀能力，團隊在設計時特別加入注音字體作為輔助，希望孩童在網頁使用上能更加便利，這在UI設計上是一大挑戰。
因資源有限，僅有少數家長及心理諮商師接受訪談。
訪談的問題包含：兒童情緒障礙問題、情障兒童治療流程、在做藝術治療時遇到的困擾、遊戲治療項目等...
使用者訪談
因負責諮商的心理師、家長無法時刻陪伴在孩子身旁，可能無法實際掌握孩子們在日常生活中，對於圖畫、遊戲、影音等情緒抒發的紀錄，故可利用網站紀錄功能，再複診時查看孩子們在期間內所觀看的內容與圖畫，作為治療參考。
此專案為學校專題，在資源及技術方面有眾多限制，再加上大部分家長為保護孩童們隱私，皆不希望露面參與訪談，組員僅透過管道接觸少部分情障兒童及心理師，在有限的技術內完成團隊所設想的功能，希望日後加以改良。
將訪談資料整後做出Persona
Persona
Sara
37歲/上班族媽媽
“工作忙碌之餘，要照顧有ADHD的兒子”
Biography
阿偉今年9歲，最近被診斷出有注意力缺損過動症，目前是聽從醫師採用心理諮商和行為治療，醫生要我陪伴孩子玩一些能讓他專注的遊戲並記錄下來，之後回診再透過紀錄做分析，但是我還有一個大女兒子要顧、做家務，只能抽空陪伴他玩益智遊戲，要紀錄下來有點困難，也很零散。
Pain Points
• 工作繁忙，無法時刻陪伴孩子玩遊戲及紀錄
• 無紀錄孩子日常行為，醫生問診時也會忘記、答出來
• 無紀錄孩子日常行為，醫生問診時也會忘記、答出來
Judith
49歲 / 心理諮商師
“鼓勵遊戲治療來協助情障兒童排解情緒”
Biography
平時看診對象為情障兒童，我們常常都跟ADHD孩子的家長說，要多給孩子繪畫、拼圖、積木等活動，都是很好的注意力靜態訓練，對ADHD孩子有相當大的幫助，不僅能穩定情緒還能幫助他們發揮長處，獲得成就感。若在家也能由家長陪同孩子們使用網站做遊戲治療，會有更好的效果，而目前課程資訊只公佈在醫院也是一大問題，希望讓家長更即時知道孩子們的課程資訊。
Pain Points
• 家長隨時隨地可以看到我們最新的上課資訊
• 家長帶來的紀錄過少，無法當成治療分析
• 家長帶來的紀錄過少，無法當成治療分析
網頁架構
這是我對UI/UX領域有興趣後，第一個正式接觸的專案。而在團隊中我負責的工作是UI/UX與切版，剛開始著手設計時，對於團隊分工、溝通、設計流程顯得較為生疏。希望在使用者導向中透過圖表、色調、訪談提出洞察觀點，設計適合兒童的UI介面。
前期網站發想與研究工作中，團隊花費心力與心理諮商師、家長來回溝通，想設計出真正能幫助情緒障礙兒童的網頁，在這過程也讓我深刻感受到不同社會角色對於使用者體驗不同面向的觀點與價值。
＃失敗不是成功之母，開始才是
為期一年合作中，經歷無數碰壁，才得到最後的成果。一開始設計時因沒有定義設計原則造成頁面混亂，經過修正定義出設計原則，讓版面整齊許多。除此之外我們還遇到導致資訊不同步，導致發生同工問題影響進度，多次討論後我們開始採用GIT進行版本控制，讓我們更有效率的進行開發。
#持續學習
設計時考慮到使用者方便性，團隊決定製作響應式網站，針對使用者不同的螢幕大小，做自動化網頁圖文內容調整，特別是因本次網頁是為兒童所設立，有排版較為複雜的注音字型問題，除了與團隊成員自學專業技能外，也搭配軟實力的訓練，閱讀設計心理相關書籍，學習同理心思考，使自己對於UI/UX有更多扎實的概念。
前期網站發想與研究工作中，團隊花費心力與心理諮商師、家長來回溝通，想設計出真正能幫助情緒障礙兒童的網頁，在這過程也讓我深刻感受到不同社會角色對於使用者體驗不同面向的觀點與價值。
＃失敗不是成功之母，開始才是
為期一年合作中，經歷無數碰壁，才得到最後的成果。一開始設計時因沒有定義設計原則造成頁面混亂，經過修正定義出設計原則，讓版面整齊許多。除此之外我們還遇到導致資訊不同步，導致發生同工問題影響進度，多次討論後我們開始採用GIT進行版本控制，讓我們更有效率的進行開發。
#持續學習
設計時考慮到使用者方便性，團隊決定製作響應式網站，針對使用者不同的螢幕大小，做自動化網頁圖文內容調整，特別是因本次網頁是為兒童所設立，有排版較為複雜的注音字型問題，除了與團隊成員自學專業技能外，也搭配軟實力的訓練，閱讀設計心理相關書籍，學習同理心思考，使自己對於UI/UX有更多扎實的概念。
設計原則
學習與反思
Secondary linear
Primary linear
Secondary
Primary Tint
color
兒童版首頁設計
Component（摘錄）
家長版
Input Fields
兒童
家長
Button
兒童版
Primary
Primary
Secondary
Secondary
Primary Tint
Secondary Tint
Secondary linear
Primary linear
Typography
首頁採用輪播效果，讓使用者隨意的左右切換，並且在左右按鈕上方增加tooltip，同時考慮到使用者為兒童，兒童版皆使用注音字型。
家長匯出孩子紀錄功能
家長版最新消息
註冊設計
家長版地圖功能
兒童版遊戲設計
與心理師及藝術之療師訪談後及技術層面的考量，我們以三款遊戲為主：畫畫、拼圖、配對配。對於情障兒童來說，這幾款遊戲都是有效協助孩子提高正向情緒，以及訓練專注力等等。
使用者在輸入框輸入地區，下方會顯示心理精神相關診所，再點擊進去可以看到更多詳細資訊：地址、電話、google評分、官網等等。
畫畫、拼圖、配對配三款遊戲，考慮到使用者在手機裝置下體驗較差，因此在手機裝置會呈現 ”放大一點玩或用電腦玩比較好玩喔！” 的字樣。
由於家長不一定能完整紀錄孩子們遊戲狀況，心理師也提及許多家長忘記紀錄的情形。我們提供家長可匯出孩子完整遊戲紀錄的功能，作為看診時心理師的輔助性資料。
.png)
.png)
設計產出
手機下兒童遊戲設計
