Ti Ti Chang 婷師
Teacher | Designer | Director
《金甌多媒體設計展》資訊設計展
這是我在金甌辦理的第一個展覽,這次展覽是我充電後的第一站,對我的教職生涯意義非凡。這次我挑戰讓學生從「同理心」入手,透過網頁設計和資訊圖表的訓練,學習換位思考。過程中有學生問:「為什麼要在意他人感受?」這反映了許多青少年的心聲。
我回答:「因為自我中心不會帶來快樂。」最終,透過公開分享與評圖,學生不僅在設計上進步,更重要的是社群感的提升。同理不等同犧牲,同理心正確運用,不僅能紓緩關係,還讓設計更有溫度。
This is my first exhibition held at Jinou Girls High School,This exhibition marks my first step after recharging and holds significant meaning for my teaching career. In this exhibition, I challenged students to explore "Empathy" through web design and infographic training, learning the value of perspective-taking. During the process, some students asked, "Why should we care about others' feelings?" reflecting the voices of many teenagers.
"Because being self-centered doesn't bring happiness." Ultimately, through public sharing and feedback sessions, students not only improved in design but, more importantly, enhanced their sense of community. Empathy does not equate to sacrifice; when used correctly, it can not only ease relationships but also infuse warmth into design.
#同理心
#社群力
#資訊圖表設計
#網頁設計
#Empathy
#Community
#InfographicDesign
#WebDesign
![截圖 2024-08-25 下午2.49_edited.jpg](https://static.wixstatic.com/media/9572c2_b613a85547b44e1a8a00dfb5319ca756~mv2.jpg/v1/fill/w_672,h_913,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%E6%88%AA%E5%9C%96%202024-08-25%20%E4%B8%8B%E5%8D%882_49_edited.jpg)
課程介紹
Introduction
這次課程的主題是「同理心」。我設計了一系列的課程,從概念入手,先帶領學生理解同理心的核心——換位思考的價值,然後逐步引入技術層面的訓練,包括網頁設計和資訊圖表設計的技巧。 The theme of this course is "Empathy." I designed a series of lessons that start with the concept itself, guiding students to understand the core of empathy—the value of perspective-taking. I then gradually introduce technical training, including skills in web design and infographic creation.
Inner:Empathy
Outer:Enhancement of Social Interest
Aesthetic Expression: Information Design
在這些技術訓練中,我要求學生不僅要考慮視覺美感與排版,更要設身處地去思考觀者的需求與感受,讓設計變得有意義且富有溫度
In these technical training sessions, I urge students to not only consider visual aesthetics and typography but also to empathize with the viewer's needs and feelings, making their designs meaningful and infused with warmth.
Record
2024/01/12 Jinou Girls High School
![](https://static.wixstatic.com/media/9572c2_0e33875789d7488cb3d703e100f3fbe0~mv2.jpg/v1/fill/w_300,h_300,q_90/9572c2_0e33875789d7488cb3d703e100f3fbe0~mv2.jpg)
![](https://static.wixstatic.com/media/9572c2_2db06a463a7c4889a026403436644504~mv2.jpg/v1/fill/w_300,h_300,q_90/9572c2_2db06a463a7c4889a026403436644504~mv2.jpg)
![](https://static.wixstatic.com/media/9572c2_58327f5f3fbb418aa588d4a36530f265~mv2.jpg/v1/fill/w_300,h_300,q_90/9572c2_58327f5f3fbb418aa588d4a36530f265~mv2.jpg)
![](https://static.wixstatic.com/media/9572c2_9e0904835242494a910b55063c685fc3~mv2.jpg/v1/fill/w_300,h_300,q_90/9572c2_9e0904835242494a910b55063c685fc3~mv2.jpg)
![](https://static.wixstatic.com/media/9572c2_2b9f7688b24744fc99103b130101acc4~mv2.jpg/v1/fill/w_300,h_300,q_90/9572c2_2b9f7688b24744fc99103b130101acc4~mv2.jpg)
![](https://static.wixstatic.com/media/9572c2_e63c775cc7f840f3a571ae6e2b43b451~mv2.jpg/v1/fill/w_300,h_300,q_90/9572c2_e63c775cc7f840f3a571ae6e2b43b451~mv2.jpg)
Student works
學生從生活周遭感興趣的主題出發,深入研究相關資訊,並製作出易於閱讀且親自手繪插圖的資訊圖表。這樣的過程不僅提升他們的創造力和表達能力,還能讓他們在設計中融入同理心的理念,真正理解他人的需求。
Students start with topics of interest from their surroundings and delve into relevant research, creating easy-to-read infographics with hand-drawn illustrations. This process not only enhances their creativity and expression but also allows them to incorporate empathy into their designs, fostering a true understanding of others' needs.
![](https://static.wixstatic.com/media/9572c2_f7f93aa051ff4975bfe131475c213011~mv2.jpg/v1/fit/w_470,h_332,q_90/9572c2_f7f93aa051ff4975bfe131475c213011~mv2.jpg)
![](https://static.wixstatic.com/media/9572c2_08e1b3a2236143f28745e1da5bcd049b~mv2.jpg/v1/fit/w_470,h_332,q_90/9572c2_08e1b3a2236143f28745e1da5bcd049b~mv2.jpg)
![](https://static.wixstatic.com/media/9572c2_b475acba6b954ed0a251c9fccb28d1b1~mv2.jpg/v1/fit/w_470,h_332,q_90/9572c2_b475acba6b954ed0a251c9fccb28d1b1~mv2.jpg)
![](https://static.wixstatic.com/media/9572c2_aeea61f2dc8143e0af74f791752e2072~mv2.jpg/v1/fit/w_470,h_332,q_90/9572c2_aeea61f2dc8143e0af74f791752e2072~mv2.jpg)
![](https://static.wixstatic.com/media/9572c2_97f83ee3e249417ea5c8369d4d248caf~mv2.jpg/v1/fit/w_470,h_332,q_90/9572c2_97f83ee3e249417ea5c8369d4d248caf~mv2.jpg)
![](https://static.wixstatic.com/media/9572c2_bf39100898e44cb1afd899053f0021d2~mv2.jpg/v1/fit/w_470,h_332,q_90/9572c2_bf39100898e44cb1afd899053f0021d2~mv2.jpg)
![](https://static.wixstatic.com/media/9572c2_2f6ea620d2364a06a95b97de2fa814f3~mv2.jpg/v1/fit/w_470,h_332,q_90/9572c2_2f6ea620d2364a06a95b97de2fa814f3~mv2.jpg)
![](https://static.wixstatic.com/media/9572c2_61c014b1659140698164c22becef919d~mv2.jpg/v1/fit/w_470,h_332,q_90/9572c2_61c014b1659140698164c22becef919d~mv2.jpg)
![](https://static.wixstatic.com/media/9572c2_5452180e1131493590378d2ceb1d43fc~mv2.jpg/v1/fit/w_470,h_332,q_90/9572c2_5452180e1131493590378d2ceb1d43fc~mv2.jpg)
![](https://static.wixstatic.com/media/9572c2_aeaba9434cb64516be91216f0e2e7f57~mv2.jpg/v1/fit/w_470,h_332,q_90/9572c2_aeaba9434cb64516be91216f0e2e7f57~mv2.jpg)
![](https://static.wixstatic.com/media/9572c2_d7c7b67c6b95470090127a2e6312027b~mv2.jpg/v1/fit/w_470,h_332,q_90/9572c2_d7c7b67c6b95470090127a2e6312027b~mv2.jpg)
![](https://static.wixstatic.com/media/9572c2_96941de4545745008d5e10241da40daa~mv2.jpg/v1/fit/w_470,h_332,q_90/9572c2_96941de4545745008d5e10241da40daa~mv2.jpg)
![展覽-01.jpg](https://static.wixstatic.com/media/9572c2_f986425b121e477b950e5c00b99a76ee~mv2.jpg/v1/fill/w_488,h_345,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/9572c2_f986425b121e477b950e5c00b99a76ee~mv2.jpg)
在利用Figma製作心理測驗遊戲的過程中,我們不僅要專注於遊戲的功能性,還需要深入考慮使用者在使用過程中的體驗。這意味著設計應該具備直觀的介面,便於使用者操作,並能夠在視覺上吸引他們的注意力。在設計過程中,學生透過反覆的測試確保使用者的反饋能夠被充分納入,優化體驗。
In the process of creating a psychological test game using Figma, we focus not only on the game's functionality but also on the user experience. This means the design should feature an intuitive interface that is easy for users to navigate and visually appealing to capture their attention. Throughout the design process, students conduct repeated testing to ensure that user feedback is fully incorporated, optimizing the overall experience.
![展覽-13.jpg](https://static.wixstatic.com/media/9572c2_98bc0a34cfb941a7942e7c792824cb92~mv2.jpg/v1/fill/w_488,h_345,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/9572c2_98bc0a34cfb941a7942e7c792824cb92~mv2.jpg)
在此過程中,學生需要從網路上找到相關的心理測驗,並進行視覺優化,將傳統的文字和圖像內容轉化為更吸引人的視覺設計。提升了測驗的可讀性和趣味性,還使得測驗的結果更加直觀易懂。
During this process, students are required to find relevant psychological tests online and visually optimize them, transforming traditional text and imagery into more engaging visual designs. This enhances the readability and fun of the tests, making the results more intuitive and easy to understand.
![展覽-06.jpg](https://static.wixstatic.com/media/9572c2_c61bdcf71999478cbc32905aca9073c5~mv2.jpg/v1/fill/w_488,h_345,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/9572c2_c61bdcf71999478cbc32905aca9073c5~mv2.jpg)
透過這樣的設計實踐,學生學會從使用者的角度思考,理解他們的需求和期望。當學生設計心理測驗時,他們需要考慮不同使用者的背景、情感和體驗,這樣的過程不僅提高了他們的設計技能,也培養了他們對他人的理解與關懷。
Through the practice, students learn to think from the user's perspective, understanding their needs and expectations. When designing psychological tests, they must consider the backgrounds, emotions, and experiences of different users. This process not only enhances their design skills but also fosters their understanding and empathy towards others.
![展覽-17.jpg](https://static.wixstatic.com/media/9572c2_0bff58caf0f74f80a1febe17e753e7a3~mv2.jpg/v1/fill/w_488,h_345,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/9572c2_0bff58caf0f74f80a1febe17e753e7a3~mv2.jpg)
這種能力在未來的專業生涯中將有助於他們創造出更具包容性的產品。通過結合技術與情感,學生的設計不僅具功能性,還能打動人心。
This ability will help them create more inclusive products in their future professional careers. By combining technology with emotion, students' designs will not only be functional but also resonate with people on a deeper level.
![IMG_5811.jpg](https://static.wixstatic.com/media/9572c2_7afe37d6a30447c8839a9b005601c769~mv2.jpg/v1/fill/w_695,h_330,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_5811.jpg)