服飾類行動購物APP之圖文編排與色彩組合影響產品感知品質之研究

全文

(1)國立臺灣師範大學圖文傳播學系碩士論文. 服飾類行動購物 APP 之圖文編排與色彩組合影響產品感知品質之研究 A Study of Layout Design and Color Combination on Apparel Mobile Shopping APP Affecting Product Perceived Quality. 研究生：張秀湘指導教授：楊美雪. 教授. 中華民國 105 年 7 月.

(2) 中文摘要行動裝置普及帶動行動購物 APP 商機。消費者於網上購物，無法以試用或觸摸等方式評估產品，此時消費者對產品的品質優劣感知非常重要，也是消費決策依據。雖已有探討網頁設計元素影響消費者心理的研究，但因行動裝置受限螢幕尺寸與網路速度等差異因素，無法預設行動裝置的消費者與過往網購消費者的動機、期望和行為相同。加上鮮少研究探討消費者使用 APP 接觸產品的心理感知反應。因此，本研究以服飾類行動購物 APP 的圖文編排比例及色彩組合視覺設計元素探討消費者對產品的感知品質（perceived quality）之影響。本研究採實驗法，為 2（圖文編排比例：圖 75%文 25%、圖 25%文 75%）× 2 （色彩組合：藍色背景/黃色文字、黃色背景/藍色文字）2 因子組間設計，共 4 種實驗組合，依變數為感知品質。研究結果顯示，圖文比例顯著影響感知品質，且圖 75%文 25%的圖文比例影響高於圖 25%文 75%，尤其影響感知品質中的做工精細感知。不同背景/文字色彩組合對感知品質影響無顯著差異；圖文比例與色彩組合，無交互作用影響感知品質。本研究另發現 APP 介面的視覺經驗有別於大螢幕的電腦網頁情境，僅圖文比例之過往實證研究結果，可延伸影響至服飾類行動購物 APP 介面上；色彩元素則需再續探究之。研究結果期提供各方視覺設計者及相關領域研究者參考。. 關鍵詞：圖文編排、色彩、行動購物、APP、感知品質 ii.

(3) Abstract The popularity of mobile devices drives mobile shopping APP opportunities. Consumers often acquire adequate product information by physical examination, but the internet shopping does not accommodate physical evaluations like the real stores do. The product quality perception of the first impression is very important to consumers, and also led to their decision making. Because there are many differences between mobile devices and PCs such as the screen size and network speed, it cannot be assumed that mobile devices consumers have the same motivations, expectations and behavior as the internet consumers in spite of many past studies on web design factors affecting consumer psychology. There are few studies to discuss consumers' initial reaction of product of psychological perception via using mobile APP. Therefore, this study discusses the influence factors of how the layout design and color combination on apparel mobile shopping APP affect product perceived quality. The study adopts two factors between-subjects design: 2（image/text ratio of layout design, the layout is consisted of two areas）: 75% image area / 25% text area, 25% image area / 75% text area）× 2（color combination, text color is followed by background color: yellow on blue, blue on yellow）, a total of four kinds of experimental combinations. The perceived quality serve as a dependent variable. The results show that the significant effect is the perceived quality in the image / text ratio of layout design. 75% image area / 25% text area layout is more significant to perceived quality than the other, especially fine workmanship perception. There is no significant effect on perceived quality in the color combination. Besides, image / text ratio of layout design and color combination don't have significant interaction effect on perceived quality. Furthermore, the study finds that visual experience of APP interface is different from web page. The past results indicate that only image / text ratio of layout design could extend to action on apparel mobile shopping APP interface. Color factor needs further studies. Keywords: layout design, color combination, mobile shopping, APP, perceived quality iii.

(4) 目. 次. 中文摘要………………………………………………………………………………ii Abstract………………………………………………………………………………iii 目次…………………………………………………………………………………...iv 表次…………………………………………………………………………………vi 圖次……………………………………………………………………….…………viii 第一章. 緒論............................................................................................................ 1. 第一節研究背景與動機 ........................................................................................ 2 第二節研究目的與問題 ........................................................................................ 6 第三節名詞解釋 .................................................................................................... 7 第四節研究範圍與限制 ........................................................................................ 8 第五節研究流程 .................................................................................................... 9 第二章. 文獻探討.................................................................................................. 10. 第一節圖文編排意涵及視覺特徵效用 .............................................................. 10 第二節色彩意涵及視覺特徵效用 ...................................................................... 21 第三節行動購物 APP 概況 ................................................................................. 32 第四節感知品質意涵及構面 .............................................................................. 36 第五節圖文編排、色彩與感知品質的關聯性 .................................................. 45 第六節文獻探討小結 .......................................................................................... 47 第三章. 研究設計.................................................................................................. 48. 第一節研究架構與研究假設 .............................................................................. 48 第二節研究方法 .................................................................................................. 51 第三節研究對象 .................................................................................................. 53 第四節研究工具 .................................................................................................. 54 第五節研究實施 .................................................................................................. 66 第六節資料處理與分析 ...................................................................................... 74 第四章. 研究結果與討論...................................................................................... 75. 第一節信度分析及敘述性統計 .......................................................................... 75 iv.

(5) 第二節圖文比例對感知品質的影響 .................................................................. 77 第三節色彩組合對感知品質的影響 .................................................................. 81 第四節圖文比例/色彩組合對感知品質的交互影響 ......................................... 84 第五章. 研究結論與建議...................................................................................... 89. 第一節研究結論 .................................................................................................. 89 第二節研究建議 .................................................................................................. 95 參考文獻.................................................................................................................. 98 附錄............................................................................................................................ 118 附錄 A：預試問卷 ................................................................................................ 118 附錄 B：預試-第 1 組實驗情境........................................................................... 120 附錄 B：預試-第 2 組實驗情境........................................................................... 121 附錄 B：預試-第 3 組實驗情境........................................................................... 122 附錄 B：預試-第 4 組實驗情境........................................................................... 123 附錄 B：預試-第 5 組實驗情境........................................................................... 124 附錄 B：預試-第 6 組實驗情境........................................................................... 125 附錄 C：正試實驗問卷 ........................................................................................ 126 附錄 D：正試實驗-第 1 組實驗情境 .................................................................. 128 附錄 D：正試實驗-第 2 組實驗情境 .................................................................. 129 附錄 D：正試實驗-第 3 組實驗情境 .................................................................. 130 附錄 D：正試實驗-第 4 組實驗情境 .................................................................. 131. v.

(6) 表次表 2-1 圖文編排定義彙整 .......................................................................................... 10 表 2-2 各式數位媒介的圖文編排構成要素彙整 ...................................................... 14 表 2-3 感知品質的定義 .............................................................................................. 37 表 2-4 實體環境的內、外在線索彙整 ...................................................................... 39 表 2-5 網路商店的外在線索彙整 .............................................................................. 40 表 2-6 感知品質的衡量構面 ...................................................................................... 41 表 2-7 感知品質的衡量方法彙整 .............................................................................. 43 表 3-1 預試實驗組合 .................................................................................................. 51 表 3-2 正式實驗組合 .................................................................................................. 52 表 3-3 感知品質的衡量構面與問項操作 .................................................................. 56 表 3-4 預試產品基本屬性 .......................................................................................... 58 表 3-5 預試各實驗組別之自變數水準及實驗情境 .................................................. 59 表 3-6 正式實驗產品基本屬性 .................................................................................. 63 表 3-7 各實驗組別之自變數水準及實驗情境 .......................................................... 64 表 3-8 感知品質問卷構面信度分析 .......................................................................... 67 表 3-9 預試-圖文比例操作檢定結果 ......................................................................... 68 表 3-10 預試-背景色彩操作檢定結果 ....................................................................... 69 表 3-11 預試-標題色彩操作檢定結果 ....................................................................... 71 表 3-12 預試建議彙整表 ............................................................................................ 72 表 4-1 本研究樣本結構表 .......................................................................................... 75 表 4-2 感知品質評估結果 .......................................................................................... 76 表 4-3 不同的圖文比例對感知品質影響之差異檢定 .............................................. 77 表 4-4 不同的圖文比例對感知品質影響之差異分析摘要 ...................................... 78 表 4-5 不同的圖文比例對感知品質 4 項構面影響之差異分析摘要 ...................... 78 表 4-6 不同的圖文比例對做工精細構面影響之差異分析摘要 .............................. 79 表 4-7 不同的色彩組合對感知品質影響之差異檢定 .............................................. 81 表 4-8 不同的色彩組合對感知品質影響之差異分析摘要 ...................................... 81 vi.

(7) 表 4-9 不同的色彩組合對感知品質 4 項構面影響之整體檢定 .............................. 82 表 4-10 圖文比例與色彩組合組合之變異數同質性檢定結果 ................................ 84 表 4-11 圖文比例與色彩組合組合平均數差異分析 ................................................ 84 表 4-12 圖文比例/色彩組合對感知品質交互影響之分析摘要 ............................... 86 表 4-13 研究假設檢定結果 ........................................................................................ 88. vii.

(8) 圖次圖 1-1 本研究之研究流程 ............................................................................................ 9 圖 3-1 研究架構圖 ...................................................................................................... 50 圖 3-2 預試操作之圖文比例水準 .............................................................................. 54 圖 3-3 本研究操作之色彩組合水準 .......................................................................... 55 圖 3-4 本研究實驗產品 .............................................................................................. 57 圖 3-5 本研究實驗輔助工具 ...................................................................................... 60 圖 3-6 色覺辨認篩選題 .............................................................................................. 61 圖 3-7 正式實驗操作之圖文比例水準 ...................................................................... 62 圖 4-1 感知品質之圖文比例平均數圖 ...................................................................... 85 圖 4-2 感知品質之色彩組合平均數圖 ...................................................................... 85. viii.

(9) 第一章. 緒論. 隨著資訊科技發展，各種社交和商業行為逐漸從現實生活轉移到虛擬的網路世界，且電子商務的興起，讓購物行為已不再侷限於時間和空間（劉仲矩、黃敬婷，2014）。商家藉由網際網路的多樣性管道成功拓展市場並直接與消費者溝通（Magrath & McCormick, 2013b）。產品的品質優劣對消費者的第一印象非常重要，也是消費決策之依據（Jacoby, Olson, & Haddock, 1971）。消費者於網上購物，因無法以試用或觸摸等方式來評估產品，只能通過網路商家所提供的產品資訊來了解產品（Kim & Lennon, 2008），此時網頁的設計特徵扮演著提供產品訊息與滿足消費者需求、購買決定的關鍵作用（Fiore, Jin, & Kim, 2005）。因此，除了產品本身的品質，透過網頁設計可以為產品增加風采，能使商家在激烈的市場競爭中脫穎而出（劉仲矩、黃敬婷，2014）。過去有許多探討有關網頁設計因素影響消費者心理的研究，包括對知覺刺激（Hasan, 2015）、消費動機與情緒等（Kim & Lennon, 2008; Kim, Kim, & Lennon, 2011），也有學者將其用於探討使用者信任度（Karvonen, 2000）、滿意度（Kim & Stoel, 2004）及忠誠度（Cyr, 2008; 劉仲矩、黃敬婷， 2014）之影響。由於行動裝置和電腦在螢幕尺寸、網路速度、甚至編排位置與使用方式等差異，因此無法預設行動裝置的消費者與使用網路購物的消費者的動機、期望和行為相同（Magrath & McCormick, 2013b; Ström, Vendel, & Bredican, 2014）。目前雖然已有部分研究探討行動網頁設計因素於對消費者心理的影響，如 Cyr、Head 與 Ivanov（2006）探討行動網頁設計美學對於消費者忠誠度的影響；Li 與 Yeh （2010）則是用於探討行動商務的使用者信任度。然而鮮少有研究探討消費者在使用行動應用程式（application，簡稱 APP）接觸產品時的心理感知反應。因此，本研究從行動 APP 的視覺特徵設計元素角度切入，用以探究消費者對產品的感知品質之影響。本章將從研究背景與動機、研究目的與問題、研究範圍與限制、名詞解釋、及研究流程共五節，說明本研究所要探討的主題並進行論述。. 1.

(10) 第一節. 研究背景與動機. 依據研究題目，本研究提出 4 項研究背景與動機，依序為行動購物 APP 商機崛起、服飾類行動購物 APP 發展潛力高、圖文編排與色彩對服飾類行動購物 APP 極為重要，以及行動購物 APP 的感知品質能提升市場競爭優勢。分述如下：. 壹、行動購物 APP 商機崛起根據財團法人資訊工業策進會創新應用服務研究所【資策會 FIND】（2015）調查數據，臺灣 12 歲（含）以上持有智慧型手機或平板電腦的民眾，已超過 1,604 萬人，滲透率近 70%。資策會產業情報研究所【資策會 MIC】（2015）的行動購物需求調查報告指出，62.5%臺灣網友已有行動購物的經驗，且會使用行動裝置來查詢及瀏覽商品資訊。Yahoo（2015c）奇摩電子商務紫皮書報告也提出使用行動裝置逛購物網站或 APP 的民眾從 2014 年的 44.6%增加至 77%，其中每天使用行動裝置逛購物網站或 APP 的網友有 27%；每個月都會透過行動裝置直接購物的網友從 2014 年的 24.8%增加至 45%。可見消費平台的改變，消費者對於行動購物網站或 APP 的黏著度已漸攀升，行動購物將變成常態（Yahoo，2015c）。隨著行動裝置快速增長，APP 成為使用者生活中不可或缺的一部分，帶來巨大的商機（Shen, 2015）。Flurry（2015）也指出行動 APP 產業成長的主因大多來自消費領域，最重要的三大類 APP 分別為「消費與生活」、「新聞與閱讀」與「工具與生產」。 APP 成為企業在行銷策略組合上的重要發展項目之一（Zhao & Balague, 2015 ），可以透過 APP 拓展販售通路和增加營收（ Wang, Malthouse, & Krishnamurthi, 2015; Yahoo，2015a）。相較行動網頁，APP 具有跨時間與虛實通路的功能（Wang et al. , 2015；資策會 MIC，2015），且具主動性與即時性，在消費者下載使用前後提供經濟誘因，如獎勵、優惠等。這些誘因將提高消費者持續使用的意願（資策會 MIC，2015），所以愈來愈多如 Yahoo、PChome、露天、屈臣式等知名企業開發 APP 來爭取消費者搶攻商機（Yahoo，2015a; Ström et al., 2014）。. 2.

(11) 貳、服飾類行動購物 APP 發展潛力高尼爾森（2014）指出，Z 世代學生、粉領族及熟女有領階級使用網路購物第一名均為服飾類商品。Pollster 波仕特線上市調網（2015）針對網路購物最常購買品項進行調查，也顯示服飾與內衣（22.9%）為民眾網購最常購買的品項。創市際（2014）調查也顯示，網友近一年曾網購的商品類型排名第一為「女性精品與服飾」（29.1%）。Yahoo（2015c）奇摩電子商務紫皮書調查未來 5 年高成長潛力的網購商品，30 歲以下族群以服飾為首要選項。另外，Yahoo（2015b）使用大數據分析 Yahoo 超級商城的消費者最愛用行動裝置購買的商品第一名也為服飾精品（35%）。上述調查結果顯見服飾類商品無論網路購物或行動購物市場皆商機龐大。目前網友使用行動購物 APP 比例為 41.1%（資策會 MIC，2015），隨著如 ZARA、東京著衣、OB 嚴選等知名服飾類商家投入行動購物 APP 市場，也代表各服飾類商家競爭地將漸漸轉移至行動購物 APP 上。. 參、圖文編排與色彩對服飾類行動購物 APP 極為重要根據資策會 MIC（2015）調查消費者主動下載 APP 的因素，APP 的介面設計精美、操作流暢（51%），為消費者下載主因的第 2 名；過去研究也指出視覺元素有助於建立 APP 的使用經驗（Silvennoinen, Vogel, & Kujala, 2014）。對於服飾銷售業來說，視覺銷售（visual merchandising）是行銷的重要策略工具（Lea-Greenwood, 1998）。消費者於網上購買服飾，只能通過網路商家所提供的資訊來了解產品，因而網頁設計扮演關鍵作用（Fiore et al., 2005; Kim & Lennon, 2008）。網路商店的設計與編排與商品銷售量密切相關（Lohse & Spiller, 1999），且視覺元素透過設計與編排也將直接影響消費者對於網路商家的信任感（Lowry, Wilson, & Haig, 2014）及電子滿意度（Szymanski & Hise, 2000）。然而 APP 介面設計因受限於手機螢幕尺寸的限制，在圖文編排上有時不同於一般網站（Magrath & McCormick, 2013a）。莊魏豪（2013）發現行動購物 APP 介面在編排設計上，若能引發消費者的愉悅情感，將可誘發消費者衝動性購買意圖，建議行動購物 APP 的設計編排在其使用性與設計性上，應採用能影響使用者偏好的設計要點，能提升 APP 效益。. 3.

(12) APP 介面除了圖片與文字編排設計外，色彩也是一項強大的工具，可幫助吸引目光、建立和傳達層次結構（Schlatter & Levinson, 2013）。色彩可代表產品的品質，進而傳達產品的功效涵意（Kauppinen-Räisänen & Luomala, 2010），甚至與消費者對價格感知（Van Kerckhove & De Bock, 2014）、信任度有關（Cyr, Head, & Larios, 2010; Kim & Moon, 1998）。由上述可知，服飾類行動購物 APP 能否提供消費者滿意的服務、進而持續使消費者黏著及引發再購的忠誠度，APP 介面的圖文編排與色彩舉足輕重。. 肆、行動購物 APP 的感知品質能提升市場競爭優勢根據尼爾森（2014）網路購物行為研究及資策會 MIC（2015）行動購物需求調查報告均指出，消費者在網購前會先使用行動裝置來搜尋網購商品資訊或比價。消費者最終會選擇他們所感知最大價值的產品或品牌（Zeithaml, 1988）。感知品質（perceived quality）為了解消費者行為的指標（Stone-Romero, Stone, & Grewal, 1997），更已被確認是消費者整體滿意度的前提（Tsiotsou, 2006），也是忠誠度的決定關鍵（Erdog˘mus & Büdeyri-Turan, 2012）。感知品質能提升企業競爭優勢（Garvin, 1984），能對企業獲利產生顯著影響（Ophuis & Van Trijp, 1995）。感知品質可從產品的內外線索萃取形成（Olson & Jacoby, 1972; Szybillo & Jacoby, 1974）。內在線索指的是實際產品屬性，且不能被改變或實驗操作；外在線索指的是非實際產品屬性，如價格、品牌名稱及包裝等（Olson & Jacoby, 1972）。由於電子商務僅能提供消費者商品視覺展示，因而消費者在網路購物環境，無法以商品的內在線索來產生商品品質的客觀判斷（Chen & Dubinsky, 2003）。就網路購物環境的外部線索而言，已有研究發現網頁的文字訊息可顯著影響消費者的情感和認知，進而引發其購買意願（Kim & Lennon, 2008）；也有學者利用網頁背景色彩（Biers & Richards, 2005）、網站圖文編排（Oh, Fiorito, Cho & Hofackerd, 2008）等網站設計相關的外部線索來探討對商品的感知品質。回顧過往有關消費者對產品的感知品質之實證研究，大多是以實體購物為背景，用以探討消費者購買前之感知品質因素（Szybill & Jacoby, 1974; Teas &. 4.

(13) Agarwal, 2000; Richardson, Dick, & Jain, 1994）；近來也有學者用以探討網路購物環境之影響（Chen & Dubinsky, 2003; Chu, Choi, & Song, 2005；Oh et al., 2008）。但目前鮮少有研究探討消費者使用行動裝置 APP 接觸產品時的心理感知反應，故本研究有進行探討之必要性。因此，本研究以行動購物 APP 介面為基礎，以服飾類行動購物 APP 為前提，針對 APP 介面的「圖文編排」及「色彩」視覺特徵設計元素探討消費者對產品的感知品質之影響，最後彙整結論，期歸納出行動購物 APP 的產品感知品質之影響因素，供予各方參考。. 5.

(14) 第二節. 研究目的與問題. 承第一節研究背景與動機，本研究旨在了解影響消費者對產品的感知品質之因素，並期望藉由研究來瞭解服飾類行動購物 APP 中的「圖文編排」及「色彩」之視覺特徵設計元素對消費者的產品感知品質之影響。據此，本研究擬訂研究目的與問題並分述如下：. 壹、研究目的一、比較服飾類行動購物 APP 中，不同的圖文編排比例對消費者產品感知品質的影響。二、比較服飾類行動購物 APP 中，不同背景與文字的色彩組合對消費者產品感知品質的影響。三、探討圖文編排比例與色彩組合對消費者產品感知品質是否有交互影響。. 貳、研究問題依據上述研究目的，分列研究問題如下：一、服飾類行動購物 APP 中，不同圖文編排比例對消費者產品感知品質影響為何? 二、服飾類行動購物 APP 中，不同背景與文字的色彩組合對消費者產品感知品質影響為何? 三、服飾類行動購物 APP 中，圖文編排比例、不同背景與文字的色彩組合是否會交互作用影響消費者產品感知品質形成?. 6.

(15) 第三節. 名詞解釋. 本研究旨在探討行動購物 APP 介面的「圖文編排」及「色彩」視覺特徵設計元素對消費者的產品感知品質之影響。茲將本研究所提及的重要名詞，作以下定義界定：. 壹、圖文編排（layout）編排是一種具邏輯性且前後一致性的設計工作（王藍亭、盧伊君，2010，頁 580），把文字、圖形、照片等影像，透過不同的圖文比例及擺放位置，做適當的圖文排版編輯（韓豐年等人，2010，頁 99）。參考上述，本研究將圖文編排定義為「一種具邏輯性的設計工作，透過不同的圖文比例及擺放位置，將標題、內文、插圖等設計元素定位在一個空間裡，以形成可感知及有效的關係，將資訊傳達給接收者」。. 貳、行動購物 APP（mobile shopping APP） APP 是 application（應用程式）的縮寫，也就是電腦軟體，現在通常將 APP 指為智慧型產品內的應用程式（劉仲矩、阮薏樺，2013）。行動購物 APP 提供使用者透過智慧型手機和平板電腦進行瀏覽和購買（Grøtnes, 2009），是專用於特定商家的虛擬商店（Taylor & Levin, 2014）。參考上述，本研究將行動購物 APP 定義為「專用於特定商家的虛擬商店，讓消費者可使用智慧行動裝置（手機或平板）在網路上瀏覽型錄、購買商品或服務的行動應用程式」。. 叁、感知品質（perceived quality）感知品質是指消費者對產品或服務之整體卓越性（overall excellence）或優勢（superiority）的主觀判斷（Zeithaml, 1988; Petrick, 2002），是消費者主觀認知或情感判斷的高層次抽象屬性，類似對消費者態度的全面性評估（Zeithaml, 1988）。參考上述，本研究將感知品質定義為「消費者對產品優勢之主觀判斷，為對產品產生的抽象性感覺之全面性評估」。. 7.

(16) 第四節. 研究範圍與限制. 為聚焦本研究欲探討之議題，以下分別說明本研究之研究範圍與研究限制：. 壹、研究範圍本研究旨在了解服飾類行動購物 APP 中的「圖文編排」及「色彩」之視覺特徵設計元素對消費者的產品感知品質之影響，未涉及實質上的物品買賣過程，只有視覺與訊息交換或服務的過程，因此本研究聚焦在研究消費者在「購買前」的感知狀態。有關影響感知品質的因素眾多，如價格、產品成分、包裝、品牌、製造商（企業）和店面形象、廣告、口碑報告，以及過去購買經驗等因素均屬之（Jacoby et al., 1971）。後來有學者開始操作商店環境色彩（Bellizzi, Crowley, & Hasty, 1983）、網頁背景色彩（Biers & Richards, 2005）、網站圖文編排（Oh et al., 2008）等相關設計線索來探討與產品品質的關聯性，但大多是以實體環境或網路購物為背景，鮮少有研究探討消費者對行動購物 APP 上的產品感知反應。綜上，本研究研究範圍聚焦在研究消費者在「購買前」的感知狀態，探討服飾類行動購物 APP 介面的「圖文編排」及「色彩」視覺特徵設計元素對消費者的產品感知品質之影響，並從研究中萃取、確認影響產品感知品質的因素。. 貳、研究限制一、本研究聚焦於服飾類行動購物 APP，因此研究結果不一定能推論至其他類行動購物 APP。二、本研究受測對象為上班族，且持有行動裝置（手機或平板）及行動購物經驗（不限使用工具是否為 APP）。但研究結果是否能推論至研究對象以外的群眾，持保留態度。. 8.

(17) 第五節. 研究流程. 本研究流程如圖 1-1 所示：確立研究方向與主題. 確定研究目的與問題. 文獻蒐集與探討. 建立研究架構與研究假設. 建立研究方法. 實驗設計. 實驗預試. 操弄檢定/問卷信效度檢定. 實驗正式實施. 統計處理與分析. 研究結論與建議. 圖 1-1 本研究之研究流程. 9.

(18) 第二章. 文獻探討. 本章共分六節，分別就圖文編排意涵及視覺特徵效用、色彩意涵及視覺特徵效用、行動購物 APP 概況、感知品質意涵及構面，以及圖文編排、色彩與感知品質的關聯性，進行文獻探討。. 第一節. 圖文編排意涵及視覺特徵效用. 基於研究目的，本節將先從過往文獻探討圖文編排的意涵，包括圖文編排的定義、圖文編排的作用、及圖文編排與視覺素材，進而討論到數位媒介圖文編排的構成要素，再從中歸納出可操作的視覺特徵項目，進一步探討其視覺效用，以做為本研究之參照。. 壹、圖文編排的意涵一、圖文編排的定義所謂的圖文編排（layout），是指把文字、圖形、照片等影像，透過不同的圖文比例及擺放位置，做適當的圖文排版編輯（韓豐年等人，2010，頁 99），是一種具邏輯性且前後一致的設計工作（王藍亭、盧伊君，2010，頁 580）。圖文編排的目的在於將傳播者預定的資訊有效率地傳達給接收者（Kuzu & Ceylan, 2010）。編輯者將資訊進行關聯性分類、整理，再利用適當的字形、色彩等視覺語言，依照內容或所規劃的順序及比重進行視覺呈現（林昆範，2007）。因此，編輯者須了解讀者的視覺心理與需求（林昆範，2011），以決定具體結構、組織語言和視覺素材（Middlestadt & Barnhurst, 1999）。本研究茲將相關文獻對圖文編排的定義，以年代先後綜合如表 2-1。表 2-1 圖文編排定義彙整研究者／年代. 定義. 林昆範（2007）. 把字形、色彩、圖像等視覺語言作適當的配置，以營造良好的閱讀空間. 10.

(19) 王藍亭與盧伊君（2010）. 版面編排是一種具邏輯性且前後一致性的設計工作，讓設計者能夠根據字級長度、內容等版面編排相關要素，選擇一種適當的設計風格. 韓豐年等人（2010）. 把文字、圖形、照片等影像，透過不同的圖文比例及擺放位置，做適當的圖文排版編輯. Golombisky與 Hagen（2010）. 編排設計是指在一個空間裡進行視覺效果及字體的排列設計. Schlatter與將設計元素定位，以形成可感知及有效的關係 Levinson（2013）. 經由表 2-1 可知，多數學者對圖文編排的定義解釋，皆提到是由多種設計元素與內容做適當的整合與空間配置的一種設計過程。因此，本研究綜合表 2-1 之定義，將圖文編排定義為「一種具邏輯性的設計工作，透過不同的圖文比例及擺放位置，將標題、內文、插圖等設計元素定位在一個空間裡，以形成可感知及有效的關係，將資訊傳達給接收者」。二、圖文編排的作用在平面廣告領域裡，將編排設計做為得到讀者的注意力的一種手段（Reid, Rotfeld, & Barnes, 1984），因為它可驅使讀者接收到該項訊息（Wright, 1999）。設計師職責就是運用引人注目的編排設計引導觀眾到下一個重要項目（Golombisky & Hagen, 2010）。平面廣告在執行手法上需考量維繫造形與內容整體要素的版面編排（王韋堯、黃詩珮，2012），因為視覺元素與版面編排可影響讀者於對內容的感知（ Middlestadt & Barnhurst, 1999 ）或品牌的評估（Janiszewski, 1990）。好的編排設計在視覺傳播上應達成吸引目光、控制閱讀量、傳達訊息，並喚起讀者的情感等目標（Golombisky & Hagen, 2010），不好的編排設計則將發送混亂的訊息予讀者，造成讀者無所適從（Schlatter & Levinson, 2013）。適當的編排設計有助於減少讀者閱讀所消耗的時間，並減輕其在訊息接收、理解和使用上的負擔（Kuzu & Ceylan, 2010），更可以引起讀者愉悅、美好等感. 11.

(20) 知作用（Middlestadt & Barnhurst, 1999）。綜上文獻可知，圖文編排的目的首要引導觀眾或讀者閱讀動線，以達成訊息成功傳達之作用。而圖文編排的優劣將影響觀眾或讀者在注意力、閱讀力或理解力等訊息接收廣度，進而影響其感知之良否。三、圖文編排與視覺素材綜合上述有關圖文編排的定義及作用，本研究進一步探討圖文編排的基本視覺素材即圖像、文字與色彩 3 項，分述如下：（一）圖像與圖文編排圖像是編排設計中重要的視覺要素（林昆範，2007）、是眼睛的磁鐵，引導讀者目光位置（Golombisky & Hagen, 2010）。圖像的呈現形式，包含攝影、繪畫、圖案與插畫（楊憲郎等人，2006）。在編排設計方面，圖像有較快引人注意、容易理解的特性（Edell & Staelin, 1983），比文字在視覺閱讀上更舒適且流暢（Hirschman, 1986）。可正向引起讀者的情感、美感感知（Rossiter & Percy, 1978; Hirschman, 1986）。（二）文字與圖文編排文字為編排設計中的主要元素，其意義在於將語言轉化為符號，以傳達資訊；而資訊的易讀性（legibility）優劣，則取決於版面文字編排設計（李天任、吳培聖，2011）。文字涉及字級、字體、版面大小、排列方式等要素（王藍亭、盧伊君，2010）。在編排設計方面，文字可代表人們心裡所想表達與傳達的一種符號，可以透過不同的設計形式來強化所想傳達主要事物（Huang, 2007）。文字透過造形的字架、行間編排與組合造形設計後，原本是「讀」的文字即轉變為「看」的文字，可具有傳達商品形象之功能（王梅玲、康敏嵐，2013）。（三）色彩與圖文編排色彩在視覺設計上是引起人們注意、傳送訊息和表達的強大工具（Schlatter & Levinson, 2013; Park, Lee, & Park, 2014）。. 12.

(21) 在編排設計方面，色彩視覺特徵扮演著傳送預定訊息的要角，不但可用來強調內容，也提高可讀性及所要傳送訊息的注目性（Kuzu & Ceylan, 2010）。色彩在編排設計上具備強勢的整合機能，編輯者可利用色相、明度、彩度與色調的組合方式，來左右版面的傳達意象（林昆範，2007），也可以幫助建立和傳達層次結構，引導人們視線，並影響人們的感覺（Schlatter & Levinson, 2013）。綜整上述文獻可知，色彩與圖像在圖文編排上都可扮演吸引視覺注意、傳達訊息的要角；而文字則是需要經過閱讀其語言意義或是利用造形再賦予其意義後，才進一步影響人們的思考與想像（王梅玲、康敏嵐，2013）。四、數位媒介圖文編排的構成要素有關圖文編排在數位媒介的構成要素上，本研究以目前的數位媒介出版品，包括電子書、網頁、APP 來分別探討其圖文編排的構成要素。分述如下：在電子書的編排構成方面，許正妹與李傳房（2005）定義電子書由文字、聲音、圖片、動畫、影片等多（超）媒體、超連結文字所組成。在網頁編排構成方面，Becker 與 Mottay（2001）提出網頁編排的構成要素是由背景色彩、留白量、水平和垂直捲動、字體大小與色彩、其他可視化設計元素所組成，Becker 與 Mottay 指出在編排上需留意網頁的易用性和快速識別 2 大要件。管倖生與林彥呈（2002）提出網頁構成形態要素分別為圖文比例、留白量、版面編排、框架、超連結型式、顏色量及背景色彩等 7 個項目。管倖生與林彥呈的研究結果指出「圖文比例」要素對網頁設計最重要、其次為「版面編排」，另「背景色彩」對感性語彙認知的影響最小。鄭月秀與藍穎筑（2012）研究發現在使用者對於網頁整體構圖編排的感知中，喜愛程度較高的排列組合為「主視覺中間/圖大於文/留白 40 以上」（75%）和「主視覺週邊/圖大於文/留白 40 以上」（25%）；鄭月秀與藍穎筑指出「圖大於文」的構圖比例，能有效提升使用者閱讀畫面的「容易感」。不過鄭月秀與藍穎筑也發現當圖文比例呈現 1:1 時的閱讀容易感比「文大於圖」低；另外當圖文比例為大於 3:1、3:1~1:1 時，可能會讓使用者在閱讀頁面時感覺較為流行，當圖片大於文字的比例差距大於 3:1 時，可能會使部份使用者感覺到較不流行。. 13.

(22) Lin、Yeh 與 Wel（2013）研究圖文比例與網頁使用者感知關係，研究結果顯示對使用者「容易/困難」感覺最具影響力的是超連結形式、圖文比例與顏色數量 3 項要素；影響「清晰/困惑」感覺的是圖文比例、編排類型、框架形式；影響「切實/裝飾」感覺是超連結形式、顏色數量、背景色彩。Lin 等人的研究找出了網頁要表現的風格型式要素，若是設計者想要設計最簡單、最清晰的網頁，就應控制圖文比例與超連結形式的要素，且 Lin 等人認為在設計整體網站時，設計者必須使用相同的圖文比例，以維持對網頁的整體設計風格（審美一致性）。 Lin 等人進一步分析發現圖文比例為 3:1 和 1:1 時，帶給使用者在易用性及明確操作的最佳感知，超過 3:1 的比例將是最有裝飾感的網頁外觀。在 APP 構成方面，Schlatter 與 Levinson（2013）提出 APP 是由版面編排、文字編排、色彩、影像（包括標誌、照片/影片、插圖、圖像 icon、圖案）、控制與預設用途（包括導覽控制、數據操作、訊息顯示）所組成的。Schlatter 與 Levinson 指出 APP 介面設計不是獨立的、靜態的頁面，而是涉及各個模組的協同運作，須周全的考慮各要素間的關係和框架，才能滿足跨平台不同螢幕尺寸的應用；另外還需選擇使用者所期望的元素去結合視覺訊號讓人們期待和理解資訊。有關各式數位媒介的圖文編排構成要素之綜整，本研究依媒介類型、年代先後綜合如表 2-2。表 2-2 各式數位媒介 2 的圖文編排構成要素彙整媒介類型研究者／年代. 構成要素. 電子書. 文字、聲音、圖片、動畫、影片等多（超）媒體、超連結文字. 許正妹與李傳房（2005）. 曾靜玫、黃美珍、劉文字、圖像（包含動畫）、色彩、版面編排（包怡佳與戴孟宗含聲音介面等）（2009）網頁. Huizingh（2000）. 版面編排、色彩、字體樣式和大小、圖文訊息組合、排序、形狀、大小、超連結位置. 14.

(23) APP. Becker 與 Mottay （2001）. 背景色彩、留白量、水平和垂直捲動、字體大小與色彩、其他可視化設計元素. 管倖生與林彥呈（2002）. 圖文比例、留白量、版面編排、框架、超連結型式、顏色量及背景色彩. Oh 等人（2008）. 版面編排、訊息顯示、色彩、圖片或圖像、橫幅廣告、字元和標誌的尺寸. 王翠蘭與王焜潔（2010）. 版面寬度、文字顏色數量、產品圖像尺寸、內文字級、版面留白、欄位編排. 鄭月秀與藍穎筑（2012）. 主視覺位置、圖文比例、留白量、整體構圖編排. Lin 等人（2013）. 圖文比例、留白量、編排類型、框架形式、超連結形式、顏色數量、背景色彩. Meyer（2015）. 導覽列選單、超連結、圖片、圖形元素、分隔線、標題文案、材質紋理（包括光影、漸變等效果）、色彩、字體、圖像 icon. Schlatter 與 Levinson（2013）. 版面編排、文字編排、色彩、影像（包括標誌、照片/影片、插圖、圖像 icon、圖案）、控制與預設用途（包括導覽控制、數據操作、訊息顯示）. 經由表 2-2 可知，圖文編排在各式數位媒介上的視覺構成要素繁多，其中以圖文比例、版面編排、留白量、色彩、字體大小等要素為較多討論項目。本研究經由過往文獻發現，「圖文比例」要素最為重要（管倖生、林彥呈，2002），且「圖大於文」能有效提升閱讀畫面的「容易感」（鄭月秀、藍穎筑，2012），當圖文比例 3:1 和 1:1 時，能在易用性及明確操作上獲得最佳感知（Lin et al., 2013）。. 15.

(24) 貳、圖文編排的視覺特徵與效用本小節檢視過往有關圖文編排的文獻及理論，歸納出圖文編排的構成要素裡可操作的視覺特徵項目，包括圖文比例與圖文配置，並進一步探討其視覺效用之相關文獻，以做為第三章研究方法之設計依據。一、圖文比例與視覺效用 Edell 與 Staelin（1983）認為讀者會差別對待圖像和文字。圖像較文字訊息能引起與讀者的互動效應（Holbrook & Moore, 1981）。 Twedt （1952）同時操作了 34 個與平面廣告有關的變數進行因素分析，最後萃取出 6 個交互關聯因素，分別為圖片面積大小、圖片色彩、印刷尺寸與種類、廣告內容資訊、字級或文案區塊及廣告日期。其中發現只有圖片面積大小與圖片色彩這 2 個因素影響了閱讀的主負荷量（合計 53％）。 Rossiter 與 Percy（1978）在啤酒產品廣告上採用 2 種視覺形式水準：重視覺形式的大圖小文（3:1），以及弱視覺形式的小圖大文（1:3），對應具體產品訴求與抽象文案訴求 2 種文案水準。圖片使用同一張產品圖，而文案有整體品質、口味和價格 3 項共同屬性。Rossiter 與 Percy 以上述 2x2 設計來進行測試產品品牌的情感態度，發現大圖片與具體文案的組合（大圖小文）正向誘導出消費者的產品品牌情感，而且是由大圖片所主導的。 Percy 與 Rossiter（1983）認為如果將產品照片在廣告中放大，可能導致消費者直接關注產品本身，而不是廣告整體。他們將同一個礦泉水產品，使用大、中、小 3 個尺寸對應彩色/黑白的圖片來測試產品情感態度，結果也是顯示大圖片產生更有利的產品態度。Percy 與 Rossiter 指出就算廣告裡無語言資訊，視覺圖像還是能夠影響品牌及廣告的態度；而彩色圖片顯著影響產品口味好壞評價。Percy 與 Rossiter（1983）的研究確認了圖片尺寸與色彩對於產品態度有顯著影響力。韓豐年等人（2010）將服飾類網頁內容區分成圖 75%文 25%（3:1）、圖 25% 文 75%（1:3）與圖文各 50%（1:1）共 3 種圖文比例進行圖文影像資訊對消費者滿意度問卷調查，結果顯示消費者最滿意的圖文比例為圖 75%文 25%（3:1）。韓豐年等人發現利用影像傳遞產品的訊息會比文字更讓消費者接受。. 16.

(25) 除了大圖小文（3:1）顯著影響消費者態度，在過往也有其他圖片尺寸或是文字訊息較有利的研究結果。例如 Diamond （1968）研究發現，獲得高閱讀率的廣告編排呈現方式為使用一個小插圖和一個小照片以及 50 個字以內的文案。 Diamond 指出人們會閱讀超過一半文案是取決於前半段是否令他感興趣，其研究結果顯示文案超過 50 字，閱讀率即下降。 Jain、Roy 與 Pant（2013）使用大、中、小 3 種產品圖片尺寸對應彩色和黑白的廣告及性別來測試消費者對於廣告、品牌和購買意願的態度。Jain 等人（2013）研究發現大圖片的確較能影響消費者的態度，但卻是中型圖片能顯著影響購買意願。Jain 等人還發現消費者若是已經熟悉廣告中的產品，其廣告的色彩吸引力將會失去效力，只有產品圖像的大小可影響消費者的態度。而 Kim 與 Lennon（2008）的研究推翻了以往支持圖像較文字佔優勢的文獻研究（Rossiter & Percy, 1978; Hirschman, 1986）。Kim 與 Lennon 使用 2 種照片尺寸（大圖:小圖=3:1）對應高、低 2 種文字訊息量來測試消費者在購物網頁對服裝產品的情感、認知態度及購買意願。Kim 與 Lennon（2008）發現視覺圖像和文字訊息量皆顯著影響消費者對服裝產品的情感和認知態度，然而，只有文字訊息量的多寡對購買意願有顯著的影響。Kim 與 Lennon（2008）發現雖然圖像和文字訊息交互影響購買意願，但只有當文字訊息量少的時候，受測者才會看大圖像；若是小圖像，則受測者會轉向看文字訊息。而且小圖像、搭配多的文字訊息量，才會顯著影響購買意願。除了文字訊息量多寡影響消費者的情感及認知態度外（Kim & Lennon, 2008），文字訊息的字體大小還可影響消費者對於廣告或產品的理解力、認知態度（McCarthy & Mothersbaugh, 2002; Coulter & Coulter, 2005），以及說服力（Meier, Robinson, & Caven, 2008）。 McCarthy 與 Mothersbaugh（2002）指出廣告內文的字體大小對廣告的情境表現更重要，排版顯著影響消費者處理廣告或品牌訊息的能力；McCarthy 與 Mothersbaugh 發現字體的字形、大小與高度呈交互作用，影響對廣告的閱讀性能；其中，易讀性與字體大小呈反比，消費者會因字體縮小，增加了可看的文字量，而提高閱讀能力與速度。Coulter 與 Coulter（2005）則是指出廣告文字的大. 17.

(26) 小是影響消費者評價的關鍵因素。Coulter 與 Coulter 發現低價促銷的價格若使用比原訂價格相對小的字體呈現，將使消費者對產品產生更有利的價值評估，以及更大的購買可能性。不同於 Coulter 與 Coulter（2005）提出小型字體對產品的價值評估更有利之結果。Meier 等人（2008）操作字體大小與正負詞語進行感知實驗，結果發現，大型字體（20.5pt）連結正面詞語感知，而小型字體（15.5pt）則是連結負面詞語。 Meier 等人再利用字體大小與中性詞語進行實驗，結果發現大型字體（20.5pt）可以使中性詞語傾向正面感知。Meier 等人的研究結果發現大型字體與正面詞語結合，可以加強說服力。Meier 等人更推論人們容易被大型事物所說服，如大型包裝或大型廣告可使人感知到產品較好。有關視覺處理圖與文的先後順序方面，Outing 與 Ruel（2004）使用眼球追蹤儀研究指出，在一般平面媒介上視線會先見到圖片，其次才是文字；但在電腦網頁上，視線會先落在文字上，才會看圖片，且人們花更多的時間專注於小型文字上（閱讀），大型標題類的文字則是掃描而過。Yen、Tsai、Chen、Lin 與 Chen （2011）利用眼球追蹤儀也發現，雖然大字體（32px）在閱讀上較清楚，也可減少初期識別文字的時間，但是小字體（24px）卻可因為在有限閱讀空間內排入較多的文字，因而加速對文字訊息理解之速度。Yen 等人也從眼球追蹤儀發現小字體文本注視時間較長，大字體較少停留及返回再看；這點與 Outing 與 Ruel（2004）的發現不謀而合。經由上述文獻可知，圖文比例確實能影響消費者對於品牌或是產品的態度、甚至是購買意圖。只是回顧過往文獻，出現了由大圖（Rossiter & Percy, 1978; Percy & Rossiter, 1983）或中圖（Jain et al., 2013）、小圖（Diamond, 1968）主導、或是圖面積大於文（Rossiter & Percy, 1978; 韓豐年等人，2010）還是文面積大於圖（Kim & Lennon, 2008）的爭議。甚至文案字體的大小（McCarthy & Mothersbaugh, 2002; Coulter & Coulter, 2005; Meier et al., 2008）也會影響消費者感知。只是過往研究結果未能證實是否可沿用於 APP 介面上，加上過往也指出不同的展示媒介也會影響使用者視覺處理過程（Outing & Ruel, 2004），因此，本研究實有必要進一步探究之。. 18.

(27) 二、圖文配置與視覺效用在圖文編排的配置形式上，Golombisky 與 Hagen（2010）指出版面配置可遵循 3 分法原則。所謂 3 分法，是將版面橫向、縱向皆分為 3 等分，而橫向、縱向的分隔線所交叉的 4 個點，即為視線的焦點，再利用這 4 個焦點進行圖與文的配置（Golombisky & Hagen, 2010）。 Reid 等人（1984）歸納廣告編排形式為方形、水平、垂直及圓形。其中 Middlestadt 與 Barnhurst（1999）證明水平與垂直形式的編排的確能影響受測者對內容的感知；Middlestadt 與 Barnhurst 將相同的內容以水平與垂直形式配置，結果受測者認為水平形式的編排，能使文章有更舒服、愉悅、美好的感知。王韋堯、黃詩珮（2012）探討廣告版面編排形式，將圖與文之間編排配置的關聯性整理成 7 種類型的版型，分別是圖上文下的「標準型」、圖片放在上下文中間的「標題型」、文與圖各自在畫面上下兩端形成對比的「兩端型」、「圖片左置型」、圖片與文字散置的「拼盤型」、圖片與文字在畫面交叉設置形成格子狀排列的「交插型」，最後是將文字置於畫面中央，畫面四角或周邊飾以圖片或花紋的「四點型」。王韋堯、黃詩珮（2012）進一步分析得獎廣告最常運用的整體設計構圖偏向「垂直構圖」、版面設計偏向「直式」；得獎廣告中的圖像面積偏向「100%」、配置位置偏向「中間」；內文面積偏向「10%」，配置位置偏向「底部」。圖像在編排上的位置可以改變消費者訊息處理過程和影響其感知（Janiszewski, 1990; Deng & Kahn, 2009; Chae & Hoegg, 2013）。在水平形式編排方面，過去研究顯示，一般人習慣閱讀從左至右，圖像置左及文字置右的編排模式（卓展正，2003），圖像置左吸引較多的視線凝視（唐大崙、莊賢智，2004）。 Janiszewski（1990）的研究也發現將廣告圖像置左、品牌名稱置右，會引起消費者更正向的評價。不過 Chae 與 Hoegg（2013）在實驗中加入了時間與期望屬性因素後，發現圖像置左或置右會受到受測者期望屬性所影響，例如同樣的桌燈廣告，當受測者被置入古典居家需求時，桌燈圖像置左會引起較有利的感知評價。若是現代風格. 19.

(28) 居家需求時，則是圖像置右才會有較有利的感知評價；Chae 與 Hoegg（2013）認為是因為閱讀及書寫方向影響人們對時間的認知概念，因此左邊被認知代表過去，右邊則是未來。在垂直形式編排方面，曾榮梅、林漢裕與傅星惠（2009）發現「圖上文下」其閱讀時間較「圖下文上」類型佳、而「圖上文下」或「圖下文上」對閱讀理解能力沒有太大差異。就整體編排形式而論，Deng 與 Kahn（2009）指出垂直版面的底部、水平版面的右邊和方形及圓形的右下角是視覺比重最重的位置，也是產品圖像的最佳位置，可提升對產品的感知評價。至於網頁的圖文配置部分，Outing 與 Ruel（2004）提出網頁的瀏覽視線不同於平面媒介，網頁的瀏覽視線是由左上角到右上角開始，接著由上往下。Outing 與 Ruel（2004）建議廣告置於網頁的左側和頂端，可以獲得很好的視覺注意。由前述文獻可知，可藉由操作圖文在編排上的位置來了解消費者訊息處理過程和感知評價。儘管研究顯示「圖左右文」及「圖上文下」為較佳編排位置，但如果加入消費者自身的需求條件（Chae & Hoegg, 2013），是可能改變消費者的感知評價。回顧本節文獻可知，人們會差別對待圖像和文字（Edell & Staelin, 1983），也會因為圖文面積比（Rossiter & Percy, 1978; Kim & Lennon, 2008; 韓豐年等人，2010）、字體大小（McCarthy & Mothersbaugh, 2002; Coulter & Coulter,2005; Meier et al, 2008），以及圖文編排的配置形式（Janiszewski, 1990; Deng & Kahn, 2009; Chae & Hoegg, 2013），而影響消費者對於產品的態度及訊息處理過程；另外，本研究也藉由文獻探討發現，當圖像與文字展示在不同的媒介時，也會影響使用者視覺處理過程（Outing & Ruel, 2004）。前述研究結果大多是平面廣告或是電腦網頁，目前尚未能證實這些結果是否可沿用於 APP 介面上，因而本研究將圖文比例做為研究自變數之水準之一。若能經由本研究結果來確認在服飾類行動購物 APP 介面上是由圖片或是文字主導消費者對產品的感知，其成果將可做為 APP 介面設計原則之參考。. 20.

(29) 第二節色彩意涵及視覺特徵效用除上節的圖文編排要素外，色彩也是強大的視覺工具，幫助吸引目光、建立和傳達層次結構（Schlatter & Levinson, 2013）。本節將先進行色彩意涵的探討，包括色彩感知定義與類型、色彩認知定義與影響因素、色彩調和與配色定義，以及色彩與使用者介面色彩組合原則，用以敘明色彩的基礎學理後，再分別探討背景色彩、文字色彩，及兩者組合後的視覺效用之文獻，做為本研究之參照。. 壹、色彩意涵人類的視覺對色彩的處理過程分為感知性及認知性 2 階段，要先通過感知性階段，才會進入認知性階段；有時僅於感知性階段即結束視覺處理（陳建雄，。本節將針對色彩在感知及認知意涵的相關文獻進行探討，分別說明如下： 1999）一、色彩感知定義與類型人類的感官在接收刺激到反應的歷程中，首先生理歷程接收到的是大腦對事物個別屬性的認識，稱為感覺（sensation）；其後經大腦綜合和解釋後，產生對事物整體的認識之心理歷程，稱為感知（perception）（黃照婷、林晏州，2007；李幸，2015）。感覺是感知的基礎，感知是整合個別感覺訊息後，由人們的經驗來解釋所感覺到的整體訊息（李幸，2015）。換言之，感知的角色在於解讀感覺（Gerrig & Zimbardo, 2004）。色彩感知（color perception）是一種主觀感官體驗（Shamey, Zubair, & Cheema, 2015），指視覺對於某物體或光線反射，或傳送之光線波長，所產生的心理歷程反應或判斷（黃照婷、林晏州，2007; Choudhury, 2014）。起初由視網膜上 4 種感光細胞透過視神經索，將外部光線的明暗及短、中、長波段反應傳給大腦（尚景賢，2009），感覺到色彩的色相（hue）、彩度（colorfulness）和亮度（brightness）之基本屬性後，再進入判讀分類（語義）的色彩感知階段（Derefeldt, Swartling, Berggrund, & Bodrogi, 2004）。簡言之，人們對色彩的感知作用，都是先從生理開始，進而轉為心理變化（沈妮薇，2011）。色彩感知類型包括色彩的輕重感、軟硬感、冷暖感、積極感/消極感，以及注目色彩/不注目色彩等（黃照婷、林晏州，2007）。本研究茲就與行銷關聯較. 21.

(30) 高的冷暖感、積極感及注目性之色彩感知類型，進行進一步探討：在冷暖感部分，暖色系以紅色、橙色為主；冷色系以紫色、藍色為主（Babin, Hardesty, & Suter, 2003）。研究發現暖色系紅色可產生較強的深度感知和更快的感知判斷（Guibal & Dresp, 2004; Bailey, Grimm, & Davoli, 2006）。在積極感部分，暖色系如紅、橙、黃色可喚起更多的積極情緒（Clarke & Costall, 2008），因而促使人們進行與冒險有關的行為（Choi & Singh, 2011）。相反的，冷色系如藍、紫色會讓人產生沉靜或消極感（謝欣怡，2011），讓人們壓抑心理並與負面事件產生連結（Choi & Singh, 2011）。在注目性部分，明亮或飽和的色彩容易吸引人們目光（陳建雄，1999）。紅色是注目性最高的色彩，能讓人注意力及警示性提升（Elliot & Maier, 2007; 阮綠茵、管倖生，2010）。而黃色則是亮度最高，在高明度下可以保持很強的純度（劉奕岑，2012）。二、色彩認知定義與影響因素色彩認知（color cognition）是外在經由視覺連結過去色彩視覺經驗後，所產生的各種感情、心理與想法（蔡佩伃、柯凱仁，2012）。在心理上，色彩是非言語訊息（Biers & Richards, 2005），只是一種物理現象，但因人們由生活累積了眾多視覺經驗，一旦這些視覺經驗與外來色彩刺激產生呼應，會在人們的心理上產生某種情緒（劉奕岑，2012）。人們對色彩認知過程，主要是受到色彩的偏好或色彩的含義（陳建雄， 1999），或是經由聯想（王藍亭，2004; Mehta & Zhu, 2009）所影響。本研究茲就色彩偏好及色彩聯想這 2 項影響因素進一步探討：色彩偏好是指個體對某一個或某一組顏色的喜好（李苑宜、鍾志從，2010，頁 56）。色彩的偏好可以透過不同特定人群或是色彩應用的物件（Grobelny & 、文化背景和性別、年齡之不同而有差異（Singh, 2006; Mikellides, Michalski, 2015） 2012）。在跨文化的色彩偏好研究中，藍色是最受喜愛的色彩（Singh, 2006）；在性別與色彩偏好研究中，男性較偏好藍、綠色與暗色調，而女性偏好紅、紅紫與淡色調（Hurlbert & Lin, 2007; 劉奕岑，2012）；在年齡與色彩偏好研究中，. 22.

(31) 年齡越輕，越喜好活潑、明亮的色調；越年長有傾向偏好低彩度與稍低明度（劉奕岑，2012）。另外 Dittmar（2001）的研究發現，雖然藍色為普遍喜愛的色彩，但隨著年齡增長，藍色偏愛度下降，而綠色和紅色的受歡迎程度卻是上昇的。 Dittmar 推論可能是因為年齡越大，眼睛水晶體泛黃及藍色錐細胞退化關係而造成此結果。色彩聯想是指當人們從眾多視覺情境中所隨著特殊的經驗或概念，將色彩與所視對象經由學習串起關聯性，如紅色/火災、橙色/太陽、以及藍色/深海和冰（Mehta & Zhu, 2009; Choi & Singh, 2011）。另一方面，人們也會因為根據自身的體驗或認知，就與色彩聯想在一起，將色名或是對色彩的稱呼對應到周遭的事物中，如天空藍、孔雀綠（黃俊嘉，2013）。色彩在聯想上同時具備了正負面的含義，例如紅色雖然正面意義為喜慶、快樂等（陳建雄，1999），但同時又負面代表危險和錯誤相關的認知，如教師使用紅墨水來指正學生的錯誤與過失（Elliot & Maier, 2007）、或用於警惕和規避風險（Mehta & Zhu, 2009）。藍色正面象徵希望、永恆、寧靜、沉穩、放鬆、平和、愉快（Bellizzi & Hite, 1992; 黃俊嘉， 2013），負面則象徵著消極、冷淡、壓抑（Choi & Singh, 2011; 黃俊嘉，2013）。三、色彩調和與配色定義 Burchett（1991）提出兩種以上的色彩同時出現，並使人產生滿足的情感反應時，可稱為色彩調和（color harmony）。其中，兩種最優美且實用的配色原則，分別為互補色配色與相同或類似配色（Heddell, 1988）。所謂的配色是指進行 2 個以上的色彩或 2 組以上的色彩搭配（黃照婷、林晏州，2007）；在網頁設計的配色是指網頁中的組成元素，如背景、圖像、文字、動畫以及超鏈結圖示與色彩的共同組合，是有目的性的色彩選擇與色彩視覺運用（劉奕岑，2012）。四、色彩與使用者介面色彩組合原則色彩在使用者介面上已變成視覺互動的語言，用來幫助人們與電腦互動、不但可提昇視覺搜尋績效、也可增強在介面設計上的美感與價值（陳建雄，1999）。若應用不適當色彩組合或搭配，將會混淆螢幕、造成視覺衝突感覺，以致瀏覽效. 23.

(32) 率降低、使用者無法理解螢幕上的資訊（陳建雄，1999；張裕幸，2006）。使用者介面設計由 2 種色彩組合驅動著感知，包括用於強調重點或是動態的「前景色」與代表主色相的「背景色」（Pelet & Papadopoulou, 2009），因而需做好良好的色彩規劃（湯永成、廖敏伶，2014）。在配色上通常會有主色、副色加上協調色或強調色，同一個頁面最好不要超過 3 個主色相，以避免使畫面凌亂，造成視覺衝突的感覺；同一頁面若運用對比色相，在視覺衝擊力上雖強，但容易造成視覺疲倦（張裕幸，2006），另外文字應做色彩與字級的強調，以避免降低文字識認性（湯永成、廖敏伶，2014）。李傳房（2005）研究指出在介面設計上，文字與其背景色彩組合的文字視認度與舒適度之主觀評價值具有一致性的趨勢；李傳房進一步發現，年輕/高齡族群受測者在紅色、綠色、藍色與其鄰近色彩之間的辨色能力皆較弱，其他色彩只要提高字級，年輕族群仍可便辨識相鄰色彩組合的文字，故不建議以同色調的紅色系、綠色系或藍色系分別做為文字與其背景的色彩組合。李傳房另指出 12pt 之 6 筆畫的中文細明體，應滿足小型彩色螢幕上（如 PDA）彩色文字的通用設計需求。 Schlatter 與 Levinson（2013）建議在 APP 介面的色彩使用上，須保持文字與背景色彩的清晰度與對比度。通常使用 2-3 個主色相以及黑色、深灰色或深藍色文字，並利用色調的深淺搭配。在色彩組合原則上應保持用色一致性、層次性及風格個性。經由文獻可知，介面設計的色彩不宜過多（張裕幸，2006），且需要建立主、副色相等色彩組合層次（Pelet & Papadopoulou, 2009; Schlatter & Levinson, 2013 ），由主色相做為背景色彩，副色或強調色用於前景色彩（ Pelet & Papadopoulou, 2009），並留意前景文字色彩與背景色彩的對比度，以保持文字的識認性，幫助觀眾或讀者瀏覽並理解資訊（Schlatter & Levinson, 2013 ; 湯永成、廖敏伶，2014）。. 24.

(33) 貳、色彩的視覺特徵與效用色彩發揮了影響我們感知的重要作用（Bagchi & Cheema, 2013），可以做為傳達產品相關意義（Biers & Richards, 2005）、影響消費者（Lichtlé, 2007）、品牌建立有效視覺形象的行銷手段（Labrecque & Milne, 2011）。在過去色彩與行銷的相關研究中，已有許多探討色彩影響消費者生理或心理等文獻，如廣告喜好度（Gorn, Chattopadhyay, Yi, & Dahl, 1997）、時間感知（Gorn, Chattopadhyay, Sengupta, & Tripathi, 2004）、品牌認知與購買意圖（Labrecque & Milne, 2011）、網路廣告點擊率等（Sokolik, Magee, & Ivory, 2014）。過去文獻指出，圖形、色彩、文字等 3 種基本組合，為影響網頁介面操作之因素，及決定設計風格之視覺關鍵（劉奕岑，2012），且經由上一小節文獻探討得知，在評估使用者介面的色彩組合原則上，多以背景色彩與文字色彩 2 項因素來探討之（李傳房，2005; Pelet & Papadopoulou, 2009; Schlatter & Levinson, 2013）。因此，本研究彙整過往與行銷相關的色彩研究文獻，分別以背景色彩、文字色彩，及兩者組合後所引起的視覺效用來進行探討。分述如下：一、背景色彩的視覺效用在背景色彩的視覺效用上，將依過去文獻分類為商店背景色彩、廣告背景色彩與網頁背景色彩 3 個類別，來分別探討對於產品的評價及購買意圖的影響。之後，進一步整理背景色彩對服飾意象之影響，用以說明與本研究目的之關聯性。分述如下：（一）商店背景色彩的視覺效用 Bellizzi 等人（1983）研究商店色彩對於銷售的影響，發現溫暖的黃色、紅色商店色彩可以吸引消費者到商店內，雖然溫暖環境是明亮多彩的，但對於受測者來說卻引起不愉快、消極、緊張的情緒，進而影響採購時的評估和購買決策；而藍色和其他冷色系則是引起積極、放鬆及有利於評價的感知，有助於消費者確認購買需求。 Bellizzi 與 Hite（1992）發現藍色環境比紅色環境更有利於產品評估和購買決策，冷色系藍色可以產生積極、舒適、愉快的知覺，而暖色系紅色會引起分心、. 25.

(34) 焦慮，導致影響消費者形成負面的看法，不利於產品評價。 Middlestadt（1990）在香水、金色及銀色的筆與礦泉水 3 種產品使用紅色和藍色光源環境來測試消費者態度。結果發現，紅色和藍色光源環境對於香水及礦泉水無顯著影響，但對於筆則是藍色光源環境較為優選，顯著的態度語義為愉快與享受，在藍色光源環境的筆被感知有良好的品質且價格更高，會引起購買意願。 Babin 等人（2003）利用燈光（柔/亮）、商店色彩（藍/橙）與價格（高/低）研究消費者的情感評價、興奮感、價格公正性、商店光臨意願和產品購買意圖，結果發現藍色商店較能影響情感評價與興奮感，且商店色彩與燈光交互作用顯著影響情感評價，藍色商店與明亮的燈光、橙色商店與柔和燈光可引起更有利的評價。Babin 等人的研究雖然支持過往文獻在藍色環境有助於購買意圖的結果，但也驗證色彩與光線是可以交互影響消費者的認知特徵和情感反應，較不討喜的橙色商店仍然可使用柔和的光線來增強消費者的情感評價、興奮感及購物意圖。（二）廣告背景色彩的視覺效用 Gorn 等人（1997）發現引起興奮的高彩度如紅色與誘發輕鬆感覺的高明度如藍色之色彩屬性，可增加消費者對於廣告的喜愛感知。Lichtlé（2007）研究色彩與情緒影響廣告態度發現，紅色可使人在觀看廣告時感到更多的樂趣與快感。 Mehta 與 Zhu（2009）發現紅色適用於加強溝通或是需要重視細節的任務，而藍色則是可刺激創造力的引發。將之應用在廣告背景中，發現紅色背景會讓使用者關注廣告的視覺效果及產品細節，而藍色背景則是能夠讓使用者產生有利的評價。 Choi 與 Singh（2011）經由研究發現溫馨感人的廣告傳單引起了愉悅和幸福的溫暖情緒感覺，而苦難絕望的廣告傳單引起、內疚、抑鬱和悲傷的冷情緒感覺。因此 Choi 與 Singh 進一步使用藍色、橙色背景對應這 2 類訊息類型來測試慈善募款傳單的訊息量、說服力和捐款意圖。其研究結果發現色彩與資訊類型交互作用影響著 3 項依變數，苦難絕望的訊息類型使用橙色背景能傳達更多的訊息、更強的說服力及捐款意圖；溫馨感人的訊息類型則應使用藍色背景，不過，溫馨感人訊息類型的「說服力」依變數在藍色背景結果是不顯著的。Choi 與 Singh 推論. 26.

(35) 這是基於人類的自然反應，當感覺到冷的時候會自然尋找溫暖的地方，感覺到熱時會想找涼爽的地方。 Choi 與 Singh（2011）的另一項研究是 2（背景色：藍色、橙色）×2（事件類型：彩票中獎、交通罰款）設計來測試風險承擔，結果也發現產生交互作用影響，經事後分析發現，橙色背景較藍色背景能誘導出使用者對風險的承擔，藍色背景則是不顯著。而當 Choi 與 Singh 將彩金及罰金提升後，發現色彩已不再影響風險承擔。因此，Choi 與 Singh（2011）推論屬於外在線索的背景色彩之影響效果，將隨著使用者的高參與情境而衰減。（三）網頁背景色彩的視覺效用 Gorn 等人（2004）研究發現藍色背景比起易引發焦慮感的黃色、紅色背景，藍色會誘發出使用者輕鬆的感覺狀態，導致使用者產生下載速度較快的感知，並影響其對網站的評價，且較願意將網站推薦給其他人。 Bagchi 與 Cheema（2013）研究紅色、藍色網頁背景色彩影響網路拍賣支付意願之關係，結果發現當交易性質是競標狀態時，紅色背景比起藍色更會誘導買家決定較高的出價；但當交易處於議價狀態時，會因為紅色背景所引起的侵略性感知喚起買家的警覺意識，就會降低買家的支付意願，因而使賣家的報價會比使用藍色背景時低。 Biers 與 Richards（2005）使用藍、綠、橙、紫、紅、黃和白色的網頁背景色彩對應羊毛背心、抽屜櫃和自行車袋 3 項產品，來測試是否影響消費者選擇產品屬性的態度和購買意圖。過程以隨機分配網頁方式給受測者進行產品評價，評價屬性包括獨特性、有用性、品質、耐用性、價格昂貴、做工精細和吸引力 7 項。結果顯示，羊毛背心在藍色背景得到有用性、品質、價格昂貴、做工精細和吸引力 5 個屬性最高分、在橙色背景是獨特性與耐用性最高分。而抽屜櫃在紅色背景得到全部 7 個屬性最高分、紫色背景得到有用性、品質、耐用性、巨大花費和吸引力 5 個屬性最低分；而只有自行車袋的產品屬性未能被顯著影響，只有發現橙色網頁背景得到了耐用性與做工精細 2 個屬性。 Biers 與 Richards（2005）另外發現女性對暖色系（橙、紅、黃）背景較能. 27.

(36) 引起對產品屬性的感知態度，而男性則是冷色系背景，且冷色系背景（藍、紫）較能引起消費者購買高價的產品；而且性別與背景色彩交互作用影響對於產品是否做工精細的感知。Biers 與 Richards 還發現產品「品質」、「耐用性」與購買意圖呈高度相關性，因此建議購物網頁內容說明可加強這 2 項屬性。經由文獻可知，不論是從商店、廣告到網頁背景色彩之研究結果皆顯示冷色系（如藍、紫色）對於產品的評價及購買決策更有利，亦能提高對於產品品質及價格的感知。然而，也有研究顯示暖色系較能引起視覺效果（Mehta & Zhu, 2009）及廣告喜好度（Gorn et al., 1997; Lichtlé, 2007），暖色系也與關注產品相關細節有關（Biers & Richards, 2005; Mehta & Zhu, 2009），並改變對價格的決策（Bagchi & Cheema, 2013）。另外冷暖背景對於產品的感知態度似乎也受到性別以及產品本身功能性或形態的影響（Biers & Richards, 2005）。總言之，過往文獻對於何種背景色彩較能影響消費者的感知品質，尚未有定論。（四）背景色彩與服飾意象的關聯性過去文獻指出，人們對於服飾意象深受到展示的背景色彩所影響（Kuo & Chang, 2002）。杜思磊與郭文貴（2004）以上班族服飾搭配淺、中、深 3 種黃色背景來探討對於服飾意象的影響，結果發現淺黃色背景的服裝感覺有活力，中黃背景色會讓服裝感覺是正式拘謹的，而深黃色背景則會讓服飾顯得無生氣。另外，梁群裕、郭文貴與林尚明（2004）則是發現藍色背景可影響人們對服飾產生正負面感覺，深藍色背景將產生正面感覺、而淺藍色背景則是負面感覺；深藍色背景讓服飾感覺最有價值、淺藍色背景次之，中藍色背景最後。經文獻可知，背景色彩可改變人們對於服飾的意象、正負面感覺以及價值感，因而背景色彩與本研究之目的具關聯性，故值得持續探討之。二、文字色彩的視覺效用 Moriarty（1987）將廣告的視覺效果區分為文字意義與圖像象徵兩類，文字視覺效果被用於傳達真實的訊息，其作用在於品牌或產品識別、描述產品屬性等詳細訊息，與其他品牌或產品比較，並展示產品使用方法（Moriarty, 1987）。當文字與色彩組合，此時字型的結構可被視為一個色彩與形狀的組合體（劉. 28.