题名

資訊圖表明度對比配色對觀者閱讀體驗之影響程度

并列篇名

The influence of brightness contrast on viewers' infographic reading experience

DOI

10.30105/JDS.202307_26(1).0002

作者

詹鎮邦(Chen-Pang Tsan);黃文宗(Wen-Tsong Huang)

关键词

資訊圖表 ; 明度對比 ; 配色 ; 閱讀體驗 ; Infographic ; Brightness Contrast ; Color Matching ; Reading Experience

期刊名称

設計學研究

卷期/出版年月

26卷1期(2023 / 07 / 01)

页次

23 - 46

内容语文

繁體中文;英文

中文摘要

在資訊爆炸的年代,利用資訊圖表來快速傳遞各種資訊成為當代的顯學。而在這個扁平化設計、減法設計盛行的年代,簡化資訊圖表的內容複雜度也越加重要。色彩作為圖像傳遞時最先被大腦所接收的資訊,本文以對比配色中的明度對比切入,探討受眾在資訊圖表中,不同明度對比下閱讀體驗的影響程度。本研究分別以「明度對比低」、「原始配色」、「明度對比高」作為比較變項,對其中的閱讀體驗進行分析,經專家分類進行實驗樣品取樣後,再經由卡方檢定或是費雪精確檢定之統計驗證,進而整理出資訊圖表中明度對比在閱讀體驗的影響樣態,最後整理歸納出以下三點結論,可供相關設計之繪製應用參考:1.只要維持一定程度的色相對比,即使明度對比較低,但在資訊的理解程度上,與原始配色、明度對比高的相比,並未有明顯差異。但若是色相對比差異不大,則明度對比越高,越能獲得較佳的資訊理解程度。2.資訊圖表為統整性的視覺呈現,資訊的理解程度並不等於有相同的適閱性。色相對比足夠的情況下,明度對比低的配色能夠獲得較佳的閱讀舒適度。相對地,色相對比不足時,提高明度對比固然可以增強資訊理解程度,但在閱讀舒適度上並未有相同的效果。3.圖形結構相同複雜度情況下,色相對比增強,即使明度對比低,也能獲得較強的注目度。

英文摘要

In the information overload era, infographics are widely used to spread information in a more efficient way. In addition to that, flat design and minimal design have dominated the era, so it is more important now to make infographics easier to read and more approachable. As color is the first stimulus human brains perceive, we would like to explore in this thesis how different levels of brightness in contrasting color schemes influence how people read an infographic. The three variables of this research are "low brightness contrast", "original color scheme", and "high brightness contrast". To explore how they influence reading experiences, we worked with experts to categorize the samples used for the experiment, analyzed and put together how different levels of brightness contrast affect the reading experience of infographics by Chi-squared test or Fisher's exact test, and made these three conclusions for designers' reference: 1. If the hue contrast is maintained at a certain level, lower brightness contrast does not compromise readers' understanding of infographics. However, if the hue contrast is not high enough, the higher brightness contrast is, the better viewers can understand the given information. 2. Infographics are visual presentations of information. The level of comprehension of the information does not represent the same level of readability of an infographic. When the hue contrast is not high enough, enhancing brightness contrast will lead to better comprehension but does not result in better readability. 3. When the complexity of the structure of a form remains the same, the higher the hue contrast a form has, the more eye-catching it is - even though its brightness contrast is low.

主题分类 人文學 > 藝術
参考文献
  1. 郭思伶,林伯賢(2020)。色彩調和認知差異之探討-以約瑟夫‧亞伯斯《向方形致敬》系列作品為例。設計學報,25(2)
    連結:
  2. Behance (2022),http://www.behance.net。
  3. pinterest (2022),http://www.pinterest.com。
  4. visually (2022),http://www.visual.ly。
  5. Barthes, R.,洪顯勝(譯)(1988).符號學要義.台北市:南方.
  6. Birren, F.(2006).Color dimensions: Creating new principles of color harmony and a practical equation in color definition.Whitefish, MO:Kessinger Publishing.
  7. Chevreul, M. E.(1987).The principles of harmony and contrast of colors and their application to The arts.Atglen, PA:Schiffer.
  8. Davenport, T. H.,Beck, j. C.(2001).The Attention Economy: Understanfing the New Currency of Business.Brighton:Harvard Business Review Press.
  9. Lankow, J.,Ritchie, J.,Crooks, R.(2012).Infographics: The Power of Storytelling.Hoboken:John Wiley & Son, Inc..
  10. Munsell, A. H. (1921) , A grammar of color. New York, NY: Strathmore Paper Co.
  11. Ostwald, W.(1969).The color primer.New York, NY:Van Nostrand Reinhold.
  12. Ostwald, W. (1932) , Color science. London: Winsor & Newton.
  13. PASHLER, H.(ED)(1998).Attention.East Sussex:Psychology.
  14. Smiciklas, M.(2012).The Power Infographics: Using Pictures to Communicate and Connect with Your Audiences.Indianapolis:Que Publishing.
  15. Theeuwes, J.(1992).Perceptual selectivity for color and form.Perception & Psychophysics,51(6),599-606.
  16. Ware, C(2004).Information Visualization: Pereception for Design.San Francisco:Morgan Kaufmann.
  17. 三芳寬要(2016).Make It Visible_Informative & Cool Infogaphics;Maps, Charts, Pictograms & More.日本:PIE 出版.
  18. 三芳寬要(2020).Fun & Beautiful!_Design That Convey Information in Diagrams.日本:PIE出版.
  19. 木村博之(2012).設計的邏輯,深入人心的視覺法則 Infographic.台北:旗標出版.
  20. 李幼蒸(1996).人文符號學.台北市:唐山.
  21. 林品章(1986).商業設計:理論.基礎.實務.台北:藝術家出版.
  22. 詹鎮邦(2017)。台北,國立台灣師範大學。
  23. 廖偉民(1994)。新竹,國立交通大學。
  24. 鄭旭貿(2015)。台北,國立台灣師範大學。
  25. 櫻田潤(2014).不懂設計,也能作出令人驚豔的資訊圖表.台北:聯經出版.