簡易檢索 / 詳目顯示

研究生: 陳禹任
Chen, Yu-Ren
論文名稱: 基於人工智慧的幼兒學習介面配色應用研究
Research on the application of color matching in early childhood learning interface based on artificial intelligence
指導教授: 蕭世文
Hsiao, Shih-Wen
謝孟達
Shieh, Meng-Dar
學位類別: 碩士
Master
系所名稱: 規劃與設計學院 - 工業設計學系
Department of Industrial Design
論文出版年: 2025
畢業學年度: 113
語文別: 英文
論文頁數: 134
中文關鍵詞: 生成式AIUI介面設計色彩配色幼兒介面認知心理學
外文關鍵詞: Generative AI, UI Interface Design, Color Matching, Children's Interface, Cognitive Psychology
相關次數: 點閱:22下載:1
分享至:
查詢本校圖書館目錄 查詢臺灣博碩士論文知識加值系統 勘誤回報
  • 色彩在我們的生活中無論是物質或是精神層面都站有一席之地,加上科技的日新月異,視覺所帶來的觀感就顯得相當重要。 在色彩計畫的研究上,設計者透過色彩間的搭配組合 創造整體的「產品意象」,藉由良好的色彩規劃,讓設計者與使用者能在心理與感受上產生連結,傳達出符合消費者需求的感性印象。
    隨著科技發展迅速,人手一機的時代早已來臨,科技的進步雖然方便我們的生活,卻也衍伸的些許問題:兒童族群的使用者會導致注意力普遍不足,幼兒過動症的比例也將逐年遞增。過往的學者對於色彩配色與色彩調和的研究應用於兒童已有概略性的評價。因此本研究將以探討介面色彩配置對於兒童意象語彙之關係進行分析,透過灰關聯、模糊理論發展出一套或多套配色比例,透過數據收集,讓往後在幼兒介面互動的設計上能透過AI生成模板進行參考。
    本研究將透過三階段進行實驗,首先,透過生成式AI進行訓練,以幼兒為主要使用對象,先將APP store上已上架的幼兒分類中的應用程式,進行比較分群,隨後進行篩選,接著將圖案進行線稿化處理,並編號需上色之區域,如果原圖過於複雜,在此過程中即需要進行簡化,隨後帶入AI進行顏色配色,產出範本。
    接著,帶入AI進入實驗,由AI創造生成50組正-反形容詞語彙,讓受測者透過問卷進行形容詞語彙的篩選,篩選出15組形容詞,本次實驗擷取原圖中色彩,並交由ChatGPT提供符合形容語彙的四色配色,將推薦色彩填入線稿中,指成15組色圖搭配形容詞語彙。
    後續透過實際讓幼兒操作,與問卷分數分級來確認幼兒喜好,透過模糊理論進行語彙與色彩配色模型之關係建立,設計師可以透過輸入四色或四色以上之色彩計畫,根據問卷調查的結果,可以將色彩轉換為合適的明度-彩度組合。未來經過學習與資料的蒐集,便能增加形容詞語彙與配合的彩度-明度組合。最後將成果應用到UI設計中,提供設計師一套範例,在未來設計幼兒介面時能有一套參考,也能將此方式套用到各年齡層中(例如: 銀髮族介面設計…等),作為未來發展延伸。

    Color plays a vital role in both the material and psychological aspects of our lives. With the rapid advancement of technology, the visual perception brought by color becomes increasingly significant. In color planning research, designers utilize combinations of colors to create an overall "product image." Through well-structured color schemes, designers aim to establish psychological and emotional connections with users, delivering an impression that aligns with consumers' emotional needs.
    As technology continues to progress, the era of personal mobile devices has fully arrived. While such advances have greatly enhanced our lives, they have also introduced certain issues—particularly among children, such as diminished attention spans and a rising prevalence of attention deficit hyperactivity disorder (ADHD). Previous studies have provided only a general evaluation of the application of color harmony and color matching in children's contexts. Therefore, this research aims to explore the relationship between interface color configurations and children's perception through adjective vocabularies. By applying Grey Relational Analysis and Fuzzy Logic Theory, this study will develop one or more proportional color schemes. Data collection will support the future development of AI-generated templates for reference in interactive interface design for young children.
    This study is structured into three experimental phases:
    1. AI-Driven Interface Sampling and Preparation
    Initially, generative AI will be trained with a focus on preschool-aged users. Children’s apps from the APP Store will be collected, analyzed, and clustered into categories. Selected images will be simplified and converted into line art, with designated coloring areas labeled. If the original image is too complex, simplification will be necessary. These images will then be used by AI to generate color palettes, producing a range of color pattern templates.
    2. Adjective Vocabulary Filtering and Color Matching
    The next phase involves AI generation of 50 pairs of opposite adjective vocabularies. A user questionnaire will be used to select 15 representative adjective pairs. Based on the extracted color schemes from original app images, ChatGPT will generate corresponding four-color combinations that match the selected adjectives. These combinations will be applied to the line drawings, creating 15 image-adjective pairings for evaluation.
    3. User Testing and Fuzzy Model Development
    In the final stage, actual user testing with children will be conducted. Children will interact with the colored interfaces, and feedback will be gathered using a graded questionnaire. Based on the results, Fuzzy Theory will be employed to establish a model linking adjectives to color combinations. Designers can input four or more colors into this model, which will suggest suitable value-chroma (brightness-chroma) combinations derived from user preferences. Over time, as more data is collected, the model will become increasingly robust, supporting a broader range of adjective terms and color mappings.
    The final results will be applied to UI design, providing designers with a reference framework when creating interfaces for young children. Furthermore, this approach may be extended to other age groups, such as UI design for the elderly, offering potential for future development and cross-demographic applications.

    摘要 ii SUMMARY iii ACKNOWLEDGEMENTS v TABLE OF CONTENTS vi LIST OF TABLES ix LIST OF FIGURES xi CHAPTER 1 INTRODUCTION 1 1.1 Research Background and Motivation 1 1.2 Research Objectives 2 1.3 Research Structure 3 1.4 Research Scope and Limitations 4 CHAPTER 2 Literature Review 6 2.1 User Experience (UX) 6 2.1.1 The components of UX and the multi-layered architecture 6 2.1.2 Areas of application for UX 7 2.1.3 Design trends and future developments of UX 8 2.2 User Interface (UI) 8 2.2.1 The main goals and principles of UI design 9 2.2.2 The practice of UI in multiple application fields 10 2.2.3 UI design process and tool development 11 2.2.4 The relationship between UI and UX and the development of UI 12 2.3 Color system research 13 2.3.1 HVC color method 13 2.3.2 Muncell Enichromatic 15 2.3.3 P.C.C.S color method 16 2.3.4 CIE L*a*b* color model 17 2.4 Theory of color harmony 18 2.5 Cognitive Developmental Psychology of children 23 2.5.1 The main theoretical basis 23 2.5.2 Theoretical application 23 2.5.3 Modern development 24 2.6 Generative Artificial Intelligence (AIGC) 25 2.7 Extract colors from images 27 2.7.1 Image color information value 28 2.7.2 Emotional engineering and user preferences 28 2.8 ChatGPT 29 2.9 Imagery AI Generator 31 CHAPTER 3 Research theory and architecture 33 3.1 Difference in language 33 3.1.1 Scale design and implementation 33 3.1.2 Apply 34 3.2 Color image extraction method 34 3.3 Fuzzy C-means clustering 38 3.4 Grey System Theory 41 3.5 Roll analysis 44 3.5.1 Credibility analysis 44 3.5.2 Pierson correlation analysis 44 3.6 Research architecture 45 CHAPTER 4 Research Procedures and Methods 47 4.1 Summary of the study 47 4.2 Experimental Method 53 4.2.1 Children’s Color Extraction” Experiment 53 4.2.2 Interface Color Vocabulary Selection" and "Interface Color Vocabulary – Single Color" Generation 55 4.2.3 "Children's Interface Color Matching" Experimental Operation 70 4.2.4 "Color Interface Color Matching" and "Fuzzy Clustering Prediction Model" Establishment 70 CHAPTER 5 Instance application and validation 72 5.1 Color plan template settings 72 5.2 Color combination calculations 74 5.3 Vocabulary and color analysis 86 5.4 Fuzzy Logic Calculation Results 87 CHAPTER 6 Conclusions and Recommendations 91 reference 93 Appendix A Parental Consent Form 96 Appendix B Children’s Interface Color Perception Questionnaire 98 Appendix C Calculate the color matching beauty with all color combination codes 107 Appendix D Color extraction code 112 Appendix E Color conversion code 117

    1. Alisik, E. (2022). "All Compressed and Rendered with a Pathetic Delicacy That Astounds the Eye": Midjourney Renders Ambergris as Constantinople. CyberOrient, 16(2), 76-88.
    2. Borji, A. (2022). Generated faces in the wild: Quantitative comparison of stable diffusion, midjourney and dall-e 2. arXiv preprint ar Xiv: 2210.00586.
    3. Cahan, P., & Treutlein, B. (2023). A conversation with ChatGPT on the role of computational systems biology in stem cell research. Stem Cell Reports, 18(1), 1-2.
    4. Castelvecchi, D. (2022). Are ChatGPT and AlphaCode going to replace programmers?,Nature.
    5. Dwivedi, Y. K., Kshetri, N., Hughes, L., Slade, E. I., Jeyaraj, A., Kar, A. K., & Wright, R.(2023). "So what if ChatGPT wrote it?" Multidisciplinary perspectives on opportunities, challenges and implications of generative conversational Al for research, practice and policy. International Journal of Information Management, 71, 102642.
    6. Editorials, N. (2023). Tools such as ChatGPT threaten transparent science; here are our ground rules for their use. Nature, 613(612), 10-1038.
    7. Gong, S. M., Lee, & W. Y. (2019). Color harmony of two-color combinations using a color configuration. Coloration Technology, 135(4), 292-304.
    8. Hsiao, S. W., Chiu, F. Y., & Hsu, H. Y. (2008). A computer-assisted color selection system based on aesthetic measure for color harmony and fuzzy logic theory. Color Research & Application, 33(5), 411-423.
    9.Hsiao, S. W., Chiu, F. Y., & Chen, C. S. 2008). Applying aesthetics measurement to product design. International Journal of Industrial Ergonomics, 38(11-12), 910-920.
    10. Huang, M., Cui, G., Melgosa, M., García, P. A., Liu, H., Liu, Y., & Luo, M. R. (2017), Color harmony in two-piece garments. Color Research & Application, 42(4), 498-511.11. Jo, A. 2023). The promise and peril of generative AT. Nature, 614(1), 214-216.
    12. Kim, 1. 2012). The institutionalization of YouTube: From user-generated content to professionally generated content. Media, culture & society, 34(1), 53-67.
    13. Liebrenz, M., Schleifer, R., Buadze, A., Bhugra, D., && Smith, A. (2023). Generating scholarly content with ChatGPT: ethical challenges for medical publishing. The Lancet Digital Health, 5(3), e105-e 106.
    14. Liu, V., & Chilton, L. B. (2022). Design guidelines for prompt engineering text-to-image generative models. in: Proceedings of the 2022 CHI Conference on Human Factors in Computing Systems (pp. 1-23).
    15. Lu, P., & Hsiao, S. W. (2022). A product design method for form and color matching based on aesthetic theory. Advanced Engineering Informatics, 53, 101702.
    16. Moon, P., & Spencer, D. E. (1944). Aesthetic measure applied to color harmony. Journal of the Optical of America, 34(4), 234-242.
    17. Reynolds, L., & McDonell, K. (2021). Prompt programming for large language models:Beyond the few-shot paradigm, in: Extended Abstracts of the 2021 CHI Conference on Human Factors in Computing Systems (pp. 1-7).
    18.Rodriguez-Diaz, C. A., Jimenez, S., Bejarano, D., Bernal-Chávez, J. A., & Gelbukh, A.(2023). Measuring semantic gap between user-generated content and product descriptions through compression comparison in e-commerce. Information Sciences,638, 118953.
    19. Stöckl, A. (2023). Evaluating a synthetic image dataset generated with stable diffusion. ar Xiv preprint ar Xiv: 2211.01777.
    20. Tao, W., Gao, S., & Yuan, Y. (2023). Boundary crossing: an experimental study of individual perceptions toward AIGC. Frontiers in Psychology; 14, 1185880.
    21. Wei, S. T., Ou, L. C., Ronnier Luo, M., & Hutchings, J. (2015). Psychophysical models of consumer expectations and colour harmony in the context of juice packaging. Color Research & Application, 40(2), 157-168.
    22.Fan Wu. Research on Industrial Design Process Model Based on Artificial Intelligence – Generated Content (AIGC), 2024
    23. Tseng, Ching-Hsuan (2020) Alternate title: User Interface Design of Learning App for Children: A Case Study of Global Kids Junior Monthly
    24. Liu, Rong (2018) The Interactive Teaching Design for Assisting Preschool Children in Learning Colors
    25 . Ko-Chiu Wu, Tzu-Heng Chiu, Chia-Jung Lin (2014)The Exploration of Knowledge Classification Structure for a Visualized Children Information Retrieval Interface

    下載圖示 校內:立即公開
    校外:立即公開
    QR CODE