國 立 交 通 大 學
傳播研究所
碩士論文
音樂網站情感設計之研究
A Study of the Emotional Design for Music Sites
研究生：卓賢洸
指導教授：李峻德博士
摘 要
長久以來，音樂一直是安撫和表達人們情緒、情感最重要的管道。隨著數位 科技在網路上迅速的傳播，音樂如今已在人們的休閒生活中起到娛樂及取悅人們 的關鍵作用。音樂愛好者不但可以在線上任意購買和聆聽各種自己喜歡的音樂， 也可以透過先進的網路科技進行搜尋及與人們進行相關資訊的分享。因此，如何 為音樂網站設計出一個合適的介面以符合使用者的情感需求，就成為互動設計者 不得不面對的重要課題。因此本研究希望透過情感設計( Norman, 2004)的本能、 行為及反思三大層次的概念作為研究的理論框架，以對不同的音樂網站介面進行 類型分類並探討其可能影響使用者情緒感受的的介面元素。 本研究共分三個階段進行。在第一階段，依據使用者的情感感受進行區分， 探討音樂網站的首頁可以區分為哪幾種情感風格類型，並探討各風格的視覺特 徵；透過階層次集群分析法，將95個音樂網站首頁分成六種不同的情感風格組 別：(1)荒蕪、乏味、枯燥(2)科技感、冷調、威嚴(3)雜亂、粗糙、沮喪(4)普通、 規矩、中庸(5)鮮豔、活潑、興奮(6)美觀、舒適、享受。再以MDS(多元尺度分析 法)法分析這95個網站在使用者情感認知平面上的分布圖，結果顯示其與Russell & Pratt(1980)的情緒結構模式存在相當的關聯性。第二階段以徵募受測者參加實 驗的方式來探討不同情感風格外觀對使用者實際使用性認知的影響。實驗結果顯 示不同網頁情感風格也確實會影響使用者的使用性表現(感知使用性)。在最後階 段則透過第一階段所蒐集來的訪談資料及參考過往研究發現(Daniel, 2000; Newman & Landay, 2000; Norman, 2004; Powell, 2000; Yeh, 2007)作為分析框架， 發展出一套問卷以探討在視覺設計、使用性及導覽設計、功能與資訊內容傳達設 計、形象設計等影響三層次情感設計的四大網站設計面向上，音樂網站使用者的 議題重要性評估。Abstract
Music has a gloriously long history being the most important media to comfort and express people mood as well as emotion. As digital technology quickly spreads through the internet, music nowaday has played an even critical role to entertain and please people in their leisural life. Music lovers not only can purchase or hear online of all types of perfered musics, but also can carry on music searching and related knowledge sharing among peoples all by the advanced internet technology. Thus, how to design an appropriate interface for music websites to meet users’ emotional needs has become a keen issue for interaction designerse. The present study aims to adopt the concepts of emotional design ( Norman, 2004) in terms of visceral, behavioral, and reflective levels as the study theoretical framework to categorize the layout types of music website interfaces and explore the possible interface elements that might affect users’ emotions..
There were three study stages. At the first stage, according to user's emotional perceptions, the emotional styles of music homepage layouts were first categorized and discussed the visual elements that consititute the belonging styles. From a total of 95 music websites and through the mean of hierarchical cluster analysis, six
emotional styles of music homepage layouts were identified - (1) Desolate, Boring, Dry (2) Technical Feeling, Cool, Majestic (3) Disorderly, Harsh, Frustrating (4) Ordinary, Regular, Unstimulating (5) Fresh, Festive, Exciting, and (6) Beautiful, Comfortable, Enjoyable. Further analysis was managed by using MDS
(Multi-Dimensional Scaling) to illustrate the distributed maps of users’ emotion
perceptions. The results showed the closed relationship with Russell and Pratt’s (1980) PAD model; the second study stage recruited subjects to participate an experiment to explore whether the different emotional layout styles might affect users’ actual usability performances. The experiment results revealed that the different emotional layout styles did significantly impact users’ usability performances (perceived usability); for the last stage, using the interview data collected from th first stage and pervious study results (Daniel, 2000; Newman & Landay, 2000; Norman, 2004; Powell, 2000; Yeh, 2007) as analysis framework, a questionnaire was developed to investigate the music website users’ ranks of the important degrees of visual design, usability / navigation design, functional / imformation content design, and image design that might impact three emotional design levels.
Keywords：music sites, web-site design, emotional design, emotion, style cogniton、 usability
誌謝
終於走到這一步，距離當初原本預定的時間，整整晚了半年。想當初由於老 師對論文品質的堅持，必須先放著未完成的學位帶著論文忐忑不安的入伍；也曾 經對遙遙無期的畢業之路感到不安與困惑，但這一切都隨著口試當天受到老師們 的肯定而煙消雲散。在此先感謝我的指導教授李峻德老師，因為老師在人機介面 領域的專業與熱情踏入了這塊領域，三年下來獲益良多；也因為老師對於論文品 質的堅持，使我不至於在當兵前為了畢業而草率收尾，進而獲得兩位辛苦的口委 老師：許峻誠老師及陳延昇老師的肯定與批評指教。也因為有這些老師們的專業 與耐心，我才能獲得這麼多寶貴的意見，完成我的論文，在此致上深誠的敬意。 不知不覺，在交大、在新竹也度過了七年的時光。從電物系到傳播所，從科 一、工六到人社二館，這一路上走來，雖然並非一帆風順，但有你們的支持與陪 伴，我並不孤單。謝謝電物系的瘋子們：yes、撒旦、以恆、仁仁、害蟲、小話、 野猪、安安、挖靠…你們真的是世界上最酷的一群人，讓新竹這個世界上最無聊 的城市變成我魂牽夢縈的第二故鄉；也謝謝傳播所的朋友們，特別是這屆96機邦 的成員：老大、小鹿、郁晴和小貓，我們一起完成了許多不可能的任務，走過了 好幾夜的焦頭爛額，當然也少不了無數的垃圾八卦與落井下石(?)，尤其是這最 後半年苦中作樂生論文的回憶，我想一輩子也忘不了。 特別感謝Bosi，雖然碩三才真正和你認識，但很高興在交大的最後一年能認 識到一個在各方面都這麼談得來的朋友(雖然大部分是在酒肉之間哈哈)，當我入 伍之後，也是因為有你的鼎力支持與幫忙，才能解決學校一切繁瑣流程的困擾而 讓我沒有後顧之憂，希望你的論文能夠順利不要像我一樣(笑)。謝謝昭鈺的陪 伴，因為有妳我看見世界的美好，也因為妳的精神支持與鼓勵，我才有勇氣跨越 每一個挫折與障礙。當然最感謝的是我的父母，謝謝你們給我一個良好的成長環 境，也謝謝你們支持我所做的每一個決定(特別是從理工科轉換領域到傳播時)， 希望將來我能用實際表現讓妳們為我感到驕傲。 三月的台南日頭已炎，下個星期就要下部隊在屏東，不知不覺入伍也已近 半年。當兵就像人生的一個中繼站，離開熟悉的學校生活，等待踏入現實的社會； 介於大人與學生之間，不斷的去磨練與成長。畢業只是一個遲來的儀式，人生還 有許多關卡等著我去突破，感謝師長以及朋友在這些日子給我的幫忙與支持，接 下來，我會好好的來證明我自己。 卓賢洸，2011年3月28日寫于台南永康砲校 p.s. 對了，順便再感謝受訓期間的同梯同學們，雖然你們一直嗆我是大學生，但 我還是畢業了，ㄎㄎ。目 錄
中文摘要
...I英文摘要
...II誌謝
... ...IV目錄
... ...V圖目錄.
...VIII表目錄.
...IX第一章 緒論
...1 第一節 研究背景...1 第二節 研究動機...2 第三節 研究目的...3 第四節 研究問題及預期貢獻...4 第五節 名詞解釋...5第二章 文獻探討
...6 第一節 音樂網站...6 一、 數位音樂的出現與商機...6 二、 音樂作為社群網站的重要元素...7 三、 音樂網站的類型及構成要素...8 第二節 網頁設計...12 一、 網頁設計研究...12 二、 從人機互動的使用性觀點看網站界面設計...14 三、 網頁的使用性準則與測量...14 四、 使用性之外...15 第三節 網頁設計風格...17 一、 設計風格的定義...17 二、 網頁的視覺設計風格...18 三、 網頁視覺風格要素...20 四、 從情感的角度探討網頁風格…...21一、 情感設計...24 二、 情感設計對網頁設計的啟發...26 三、 為什麼音樂網站需要情感設計...28 第五節 情緒相關研究...30 一、 情緒(Emtion)與情感設計...30 二、 情緒產生的機制...30 三、 情緒的類型...31 第六節 文獻小結...36 一、 網站設計議題與情感設計的關連...36 二、 視覺設計與情感意向...37 三、 本能層次對於行為層次的影響...37 四、 研究問題...37
第三章 研究方法與實驗設計
...38 第一節 相關情緒量測方法...40 一、 情緒的量測...40 二、 產品情感認知意向的量測...44 第二節 階段一：音樂網站首頁情感風格意向研究...45 一、 研究方法與流程...45 二、 首頁樣本的挑選...46 三、 實驗受測者...48 四、 實驗進行方式...48 五、 數據分析方式...40 第三節 階段二與三：本能層次對行為層次的影響及相關議題探討...52 一、 行為層次與反思層次概念的操作化...52 二、 研究方法與流程...53 三、 受測者挑選...53 四、 階段二實驗任務設計...55 五、 研究工具...57 六、 數據分析方式...62第四章 研究結果及分析
...63 第一節 音樂網站首頁情感風格與視覺要素構成分析...63 一、 向度的解釋能力………...63 二、 二維情感風格認知平面上的音樂網站…………...64 三、 首頁情感意向風格的分群………...65 四、 首頁情感意向風格的分群………...71 第二節 首頁視覺情感意向對網站使用性認知的影響分析...74一、 總體結果分析………...74 二、 事後多重比較結果分析………...76 三、 描述性統計分析………...80 四、 結果分析、探討與小結………...81 第三節 音樂網站設計議題重要性評估………...82 一、 問卷信度檢驗………...82 二、 音樂網站設計議題使用者期望描述性統計分析...83 三、 音樂網站情感風格的視覺元素分析...87
第五章 結論與建議
...89 第一節 研究結論...89 一、 音樂網站首頁在視覺外觀上的情感風格方面...89 二、 音樂網站首頁視覺情感意向對網站使用性認知的影響...95 三、 使用者對音樂網站在不同網站設計議題的重要性評估上...96 第二節 研究限制與建議...99 一、 音樂網站首頁樣本部分...99 二、 網站首頁情感風格分群及視覺要素分析的方法部分...99 三、 使用性測試實驗部分...100 四、 研究架構－情感設計三大層次的操作化部分...100附錄
...102 附件一：音樂網站首頁樣本及編號...102 附件二：網頁情感相似性之調查問卷...106 附件三：階段一實驗後簡易訪談大綱...108 附件四：情感組別判斷問卷...109 附件五：第二階段實驗各組實驗任務設計...110 附件六：階段二之改良版SUS 使用性評分量表範例...115 附件七：網站設計議題重要性評分量表...116 附件八：音樂網站情感風格意向MDS 認知座標值...122參考文獻
...123 中文部分...123 英文部分...126圖目錄
圖2-1 線上音樂傳播方式...7
圖2-2 網頁設計金字塔...12
圖2-3 網頁設計中三大面向間的關係...13
圖2-4 情緒結構模式圖...14
圖3-1 SAM 量表(The Self-Assessment Manikin) ...42
圖3-2 PrEmo 量表(Product Emotion Measurement Instrument) ...43
圖3-3 階段一實驗進行流程...45 圖3-4 分群實驗執行情形...49 圖3-5 分群實驗桌配置...49 圖3-6 實際 SUS 問卷量表範例...59 圖4-1 九十五個音樂網站首頁在認知空間中的分布圖...64 圖4-2 95 個網頁根據其情感意向相似度的集群樹狀圖(Dendrogram) ...65 圖4-3 95 個網站首頁在使用者情感認知平面上的分布圖...67 圖5-1 情緒結構模式與音樂網站情感風格認知平面的對應關係...90 圖5-2 音樂網站情感風格認知平面與其視覺特徵關係...92
表目錄
表2-1 音樂網站首頁設計因子及其態...10 表2-2 不同學者提出的網站設計面向整理...13 表2-3 常見的網頁設計風格與其視覺特徵...18 表2-4 網頁視覺要素與風格構成之探討歸納表...21 表2-5 使用愉悅性產品與不愉悅性產品的不同感受...26 表2-6 七項針對網頁介面愉悅性設計的具體建議...27 表2-7 通用性網站介面之愉悅準則...28 表2-8 情緒列表...32表2-9 Ortony & Turner (1990)所整理的基本情緒分類表...35
表2-10 Norman(2004)情感設計與網站設計議題面向間的對應關係...36 表3-1 三種情緒測量方法的特色與優缺點...40 表3-2 產品情緒的類型...43 表3-3 音樂網站樣本類型...47 表3-4 受測者資料...48 表3-5 Norman(2004)情感設計與網站設計要素間的對應關係...52 表3-6 階段二實驗受測者性別份不與任務風格類型分配...54 表3-7 階段二各組網頁情感風格之代表性網頁...55 表3-8 情感設計面向與需求問卷間的對應關連...61 表4-1 在不同向度下情感風格認知空間構面所承受的壓力係數...63 表4-2 空間維度-壓力係數關係圖表...63 表4-3 不同分群數對應各群中網頁數的分配表格...66 表4-4 不同情感意向風格及其所包含的音樂網站...68 表4-5 各任務使用者實際使用性認知表現同質性檢定...74 表4-6 各任務使用者實際使用性認知表現單因子變異數分析結果...75 表4-7 任務一使用者實際使用性認知表現事後多重檢定表格...76 表4-8 任務一使用者實際使用性認知表現同質子集報表...77 表4-9 任務二使用者實際使用性認知表現事後多重檢定表格...78 表4-10 使用者實際使用性認知任務總體平均表現表現事後多重檢定表格...79 表4-11 各任務使用者實際使用性認知表現描述性統計...80 表4-12 各議題類型問卷之信度檢定結果...82 表4-13 可信度高低與 Cronbach α 係數之對照表...82 表4-14 視覺設計議題對使用者情感影響的重要性描述性統計結果...83 表4-15 使用性及導覽設計議題重要性評估描述性統計結果...84 表4-16 功能與資訊內容傳達議題重要性評估描述性統計結果...85 表4-17 形象設計議題重要性評估描述性統計結果...86
第一章
緒論
第一節
研究背景
隨著個人電腦於1980年代開始普及，以及全球資訊網（World Wide Web）於
90年代的問世，「網頁瀏覽」成為現代人重要的資訊行為之一，網際網路也逐漸成 為日常生活中的主流活動場域。隨著網路頻寬的成長與硬體技術的不斷進步，「音 樂」也開始在網路場域中佔扮演越來越重要的角色。聽音樂不再只存在於線下實 體活動的場域，而是開始延伸到線上的虛擬空間中。線上影音分享技術的出現與 發展，帶動了許多讓使用者可以上傳與分享影音內容的影音平台網站，如Youtube 與國內的I’m Vlog；創市際市場研究公司在2006年上網者的行為資料顯示，「線 上影音」網域類別的訪客約有504萬人，超過國內網路使用人口的一半(陳怡芳， 2009)。 數位音樂服務的興起也改變了傳統音樂市場的銷售方式，MP3的出現雖然打 擊了傳統實體CD的銷售－消費者不再為了幾首歌而購買整張專輯，P2P分享與免 費MP3下載造成了整體唱片市場的萎縮(江明珊，2002)；但另一方面卻也促成了 合法音樂付費下載網站的興起，KK BOX與iTunes的成功顯示合法授權的線上付 費下載成為音樂產業全新的龐大商機。吳宇中(2009)將數位音樂網站經營型態歸 納為五大類型，分別為混合式P2P檔案交換、分散式P2P檔案交換、計費下載、 串流服務、與數位廣播。 另一方面，進入Web2.0的時代社群網站風靡全球，而音樂也漸漸地在社群 網站中扮演越來越重要的角色。Baym(2007)在其針對瑞典獨立音樂線上社群的研 究中指出，樂迷(music fans)在網路出現的70年代末期就已經與之有緊密的連結； 最初70年代末80年代初的網路樂迷社群只是簡單的郵件名單(mailing lists)和 Usenet上的討論群組(discussion groups)，發展到了90年代中期，樂迷已經開始建 立起自己的網站以支持社群的互動。進入千囍年，音樂迷群(music fandom)開始 在社交網站上扮演中心的腳色。雖然不是所有的網站都被Myspace上的樂團-歌迷 關係所影響，但大部分的介面是鼓勵人們列出他們喜歡的樂團名單或把它們加入 好友來建構他們在線上的身分(on-site identity)。自2005年以來，至少出現了大量 以音樂為基礎(music-based)的社群網站，包括Last.fm, MOG, iLike, and Goombah 等。這些音樂社群網站結合了社群網站的社會化網絡特徵加上影音網站的影音內 容分享特質。
第一個將｢音樂｣和｢社群網站｣這兩大概念進行結合的網站便是全球第二大、
擁有上億名會員的社群網站MySpace(www.myspace.com)。結合了社群網站的社
的藝人大量駐站，目前已號稱擁有上百萬樂隊與藝人的官方專屬網頁，徹底改變 社群網站的生態。Myspace的成功不僅讓許多純社群網站開始加入音樂分享的元 素，更促成許多老牌影音網站開始社群化。顯見進入Web2.0的世代，｢音樂｣作 為吸引群眾的社群元素(Stephens & Collins, 2007)，在網路世界中扮演越來越重要 的角色。
第二節
研究動機
顯而易見的，進入21世紀，音樂已經在網路世界中扮演越來越重要的角色； 對使用者來說，音樂不只是一種商品，而是一種生活型態，這樣的生活型態可能 表現在分享自己喜歡的音樂、隨時獲得最新的音樂資訊、攜帶音樂等等行為上(張 建成、楊厚嘉，2006)。我們上youtube、I’m Vlog觀看喜歡影音內容，在facebook、 Myspace等社群網站放上喜歡的音樂展現自我，在Last.fm紀錄自己的歌曲播放紀 錄，在KK BOX和iTunes線上購買音樂產品－音樂無所不在，尤其是在虛擬的網 路空間中。 那麼，如何設計出一個好的音樂網站首頁界面，才能符合使用者線上音樂活 動的需求?90年代以降網際網路的蓬勃發展刺激大量網站介面領域的相關研究。 怎樣的網頁設計才能留住使用者?怎樣的介面才能誘發使用者的購買意願?這都 是網站介面研究領域長期以來所探討的問題；究竟研究者該從何著手、好的網頁 設計應該由怎樣的準則來判定?這可以從長久以來電腦環境設計領域關於功能 (functionality)與型式(form)上的爭論:「易於使用」(Ease to use)和「樂於使用」(Joy to use)兩大層面來探討(Hassenzahl, Platz, Burmester & Lehner, 2000)。自從六零年代以來人機互動(Human-Computer Interaction, HCI)的領域逐漸 獲得重視，並不斷蓬勃發展。根據Preece(1994)的觀點，所謂人機互動指是一種 以電腦為基礎的互動模式，對設計者來說也是整個設計過程中最重要的基本原 則，其目的在於幫助並確保使用者者在使用資訊系統的過程中能夠獲得很好的效 率和安全性。因此當代的網站設計已不再僅限於關注程式設計等技術層面的問 題，在網站與網頁設計的技術要求越來越高的時空背景下，網頁設計人員對網頁 人機介面互動使用性(Usability)也越來越加重視。Newman & Landay(2000)便指出 使用者介面設計(User Interface)是網頁設計中相當重要的一環，Daniel(2000)更直 指使用性(Usability)是網站設計的三大核心要素之一。
近來關於情緒(emotion)和美感(aesthetics)設計的議題也越來越受重視
(Hasswnzahl, Beu & Burmetester , 2001)。Norman(2004)指出，產品的設計除了使用 性 (usability)與實用性(practicality)之外，情緒性(emotionality)和美感(aesthetics) 也應該納入考量。有鑑於良好的設計不但可以增加物品的美感，也可以讓使用者 在使用的當下感到愉悅；因此，現下的消費者期盼的商品已不再僅限於功能性的 需求，而是要能夠提供一種具有美的愉悅及意涵的風格性商品(Postrel, 2004)，設
計者也開始把注意力從專業使用者對工具上的要求轉移到一般使用者對使用環 境的情感反應上(Shneiderman, 2004)。
人們的情緒往往會影響其決策行為(Lerner,Small, & Loewenstein, 2004)，也因 此如何在網站設計上帶給使用者良好的情緒感受，成為相當重要的課題。在商業 應用上，使用者的情緒已被證明會影響其購買意願與行為(Belk,1975; Donovan & Rossiter, 1982)，顯見擁有良好情感設計的網站有其商業利基存在。而即使不計商 業考量，許多研究亦指出情緒對網站設計的重要性，如Kraut等人於1996年針對 網路使用目的對匹茲堡地區100個家庭所進行的調查研究便發現，使用者最常使 用網路的原因是為了愉悅自己，因此如何在介面設計上帶給使用者愉悅的感受， 便顯得十分重要(蔡佳穎，2004)。對情緒的重視也影響到了人機互動(HCI)的領 域，使的人機互動的領域開始由過往的使用性導向(usability-based approaches)轉 向愉悅性導向(pleasure-based approaches)，強調使用者生理與心理的全盤考量 (Sevener, 2003; Dillon, 2001; Jordan, 1996; 林珮雯，2004)。
第三節
研究目的
Norman(2004)在其著作“Emotional Design”一書中提倡「情感設計」的概念－ 他認為產品除了功能的使用之外，還存在有一個重要的因素－就是「情感」的傳 達。那麼，要如何才能達到情感設計的目標?Norman指出，情緒(emotion)在設計 中扮演著重要的角色：愉悅的心情可增強創造力，緊張的狀態促進注意力焦點集 中；資訊應該要以一種愉悅、舒適方式被展現，因為正面的情感能夠喚起好奇心， 激發創造力，及使大腦進入一個有效率的學習機能狀態。而能夠觸發使用者情緒 的產品，亦能夠喚起消費者潛在的感官愉悅以及滿足對夢想的渴望(Hirschman & Holbrook, 1982)。 以Norman的情感設計概念來說，良好的情感設計應該要包括在本能層次上 (外觀)、行為層次上(使用的樂趣和效用)及反思層次上(自我形象、個人滿足、記 憶)滿足使用者的需求。音樂在人類的情感生活中扮演重要的角色(Norman, 2004)；在音樂開始在網路的虛擬世界中扮演越來越重要角色的當下，對音樂網 站的使用者來說，哪種網站介面設計符合使用者的需求－無論這樣的需求是功能 上的或是情感上的－都將是決定該網站是否能留住使用者停留、甚至對相關音樂 商品進行購買行為的重要關鍵。因此找出使用者對音樂網站在三個情感設計層次 上的需求，便成為迫切的課題。第四節
研究問題及預期貢獻
網站設計與一般產品設計存在著差異。Powell(2000)提出的網站設計金字塔 便指出：依據設計者的目的(Purpose)，網站設計必須要包括「內容」(content)設 計、負責建構網站的功能的「技術」(Technology)設計，以及提供網站的形式的 「視覺」(Visuals)設計。對應到情感設計上，｢視覺」設計決定了網頁本能層次 上的外觀風格，「技術」與「內容」決定了行為層次上的使用經驗，網站設計者 的｢目的」則決定了反思層次上的個人滿足與自我實現。 邱柏清(2004)在其網頁愉悅性的研究中指出，一般產品的購買使用經驗是包 含整個產品的實體形體，與網頁介面的使用僅限於視覺、聽覺存在著相當差異； 此外由於絕大多數網頁不似一般產品需要付費購買，使用者並不會購買令他感到 不愉悅的產品來使用，卻有可能瀏覽到讓他感到不愉悅的網站介面。 網頁設計的研究並不在少數，但是在音樂網站－不論是廠牌歌手官網、影音 內容或是音樂社群網站－大行其道的當下，大多數的相關研究卻都朝向網路行銷 及文化層面的角度出發，而少見針對其網站設計的建議，更遑論情感設計的探 討。也因此，在這裡我們更要探討音樂網站設計風格對使用者情感的影響，以整 理出能夠符合使用者情感需求的網站風格，達到音樂社群網站情感設計的目標。 因此，從情感設計的三個層次出發，本研究嘗試分別從本能層次(視覺外 觀)、行為層次(功能使用)及反思層次(使用者的自我實現與滿足)，探討相關的研 究問題如下： 1. 若以首頁外觀在視覺上帶給使用者的情感意向作為依歸，當今音樂網站的首 頁設計可歸納為哪幾種情感風格類型?其設計特徵與影響使用者情感認知的 依據為何? 2. 音樂網站首頁在視覺外觀上帶給使用者的情感意向風格，是否會影響使用者 在後續網站操作使用上的認知？更確切的說，音樂網站首頁在本能層次上的 情感設計，是否會影響網站在操作行為層次設計上的表現，也就是網站的實 際使用性(Actual usability)?3. 以Powell(2000)、Newman & Landay(2000)、Daniel(2000)等人的網頁設計面向 與Norman(2004)情感設計三大層次間的對應關係為基礎，探討對音樂網站的 使用者來說，有哪些網站設計議題是重要的?
第五節
名詞解釋
1. 音樂網站 本研究中的音樂網站指的是以音樂作為主題的網站。吳宇中(2008)曾將音樂 網站經營型態歸納為：混合式P2P檔案交換、分散式P2P檔案交換、計費下載、 串流服務、與數位廣播等五大類型；然而這些網站過度強調數位音樂的分享 與銷售，忽略了數位音樂檔案以外的資訊分享在當代音樂網站中所扮演的重 要角色，故在重新整理後後，此處將音樂網站歸納為包括｢廠牌/藝人」官網， ｢購物/媒體」網站、｢視聽/電台」網站及｢社群/資訊」網站等類型。 2. 情感設計(Emotional Design) Norman(2004)於Emotional Design一書中所提出。情感設計強調情感與設計間 的關連性，Norman認為產品除了功能的使用之外，其「情感」的傳達也非常 重要。情感設計可以分為三個層次，分別為：本能層次(視覺外觀)、行為層 次(功能使用)及反思層次(使用者的自我實現與滿足)。 3. 使用性(Usability) 人機互動領域(HCI)的發展帶動了資訊系統設計者對於介面使用性的重視。根 據ISO 9241-11(1998)的定義，使用性指的是系統介面在操作上是否能讓使用 者有效(effectiveness)、有效率(efficiency)及滿意(satisfaction)地在特定環境中 達到特定的目標。Nielson(1993)更進一步地將使用性細分成五大指標屬性： 可學習性(Learnability)、效率性(Efficiency)、 可記憶性(memorability)、錯誤 率(Error)及滿意度(Satisfaction)。 4. 網頁風格 對網頁來說，網頁的風格定義了一個網站的外觀和它所帶給人的感受(McNeil, 2008)。在設計的領域中，「風格」並非真的有具體的元素與之連結，而是以 「視覺」作為依據；Chan(1994)指出風格是因為具有共同的特徵(common feature)而能夠被辨識，而這樣的共同特徵與同一位設計者在創作許多作品時 所共享的類似外顯特徵有關。 5. 情緒感知 情緒感知是人對外在反應出來的內心感受，而這種反應來自於人類的生理和 心理狀態。許多研究皆指出，第一眼視覺上的情緒感知是會影響使用者對系 統整體評量的重要因素。第二章
文獻探討
第一節
音樂網站
一、 數位音樂的出現與商機 音樂在人們的日常生活中扮演著重要的角色，隨著網際網路及電腦軟硬體技 術的發展，儲存格式的數位化及頻寬的增加導致音樂無論在複製、儲存甚至傳遞 都比過去更加便捷；對音樂產業來說，盜版、MP3、燒錄以及其他網路音樂的快 速傳播造成的版權侵犯危機，對國內外唱片工業的銷售都帶來巨大的打擊(吳耀 宗，2001)。但另一方面，數位音樂的出現卻也創造了巨大的商機。線上影音分 享技術的出現與發展，帶動了許多讓使用者可以上傳與分享影音內容的影音平台 網站，如Youtube、土豆網與國內的I’m Vlog；創市際市場研究公司在2006年上 網者的行為資料顯示，「線上影音」網域類別的訪客約有504萬人，超過國內網 路使用人口的一半(陳怡芳，2007)。 數位音樂服務的興起也改變了傳統音樂市場的銷售方式，MP3等數位壓縮格 式的出現雖然打擊了傳統實體CD的銷售－消費者不再為了幾首歌而購買整張專 輯，P2P分享與免費MP3下載造成了整體唱片市場的萎縮(江明珊，2002)；但另 一方面卻也促成了合法音樂付費下載網站的興起。根據IFPI(2010)的報告，數位 音樂市場有可能成為最成功的數位產業之ㄧ：2009年全唱片業幾乎有四分之一強 的收入來自於數位銷售的管道，達4.2億美元之譜，較前一年成長了12%；合法的 授權付費下載網站也從2003年的不到50個成長到了400家左右。全球性的數位音 樂網站品牌也開始出現，包括iTunes、Napster、Sony Connect、MSN Music、Yahoo Music、OD2 等，同時這些大品牌也開始進行全球性的擴張。這份報告並且整理 出來當前數位音樂合法流通的方式包括：下載商城(如itunes)、串流網站(如 youtubes)、包裹式訂購服務網站(如Nokia的Come With Music)、免費使用網站等， 而近來由於智慧型手機帶動行動上網的流行，行動下載也成為近年來數位音樂流 通的重要管道。此外，網路上尚存在各式各樣的無執照下載網站、新聞群組(News Groups)、特殊搜尋引擎(如filestube)、論壇、P2P等非主流的管道，而這些網站大 多存在有版權問題。Houghton & Vickery(2005)則在OECD report on digital music: Opportunities and challenges這份經濟合作與發展組織(Organisation for Economi Co-Operation and Development, OECD)年度報告中指出，線上音樂的傳播模式與過往傳統音樂 工業以單純的唱片銷售通路有很大的不同，最重大的改變就是創作者和消費者之 間的去中介化(Disintermediation)或重新中介化(re-intermediation)－實體零售商店 (如唱片行)已不再是與使用者之間的最後一個鏈結，取而代之的則是日益受商業
廣告影響的網路通路－包括藝人廠牌的線上音樂商城、第三方(如通路商)線上音 樂商店、網路服務供應商及內容平台、行動內容供應商及實體點購場所。
圖2-1 線上音樂傳播方式(Houghton & Vickery, 2005) 二、 音樂作為社群網站的重要元素
虛擬社群(virtual community)的蓬勃發展改變了當代網路生態，人們在電子佈告 欄（BBS）或社群服務(Social Network Service, SNS)網站上，透過張貼文章討論 進行互動，進而傳遞並分享資訊。在虛擬社群的蓬勃發展下，知識的傳遞更加弗 遠無界，也成為現代社會中最主要的知識與資訊分享平台(Armstrong & Hagel, 1996)。 進入Web2.0的時代社群網站風靡全球，而音樂也漸漸地在虛擬社群中扮演越 來越重要的腳色。Baym(2007)在其針對瑞典獨立音樂線上社群的研究中指出，樂 迷(music fans)在網路出現的70年代末期就已經與之有緊密的連結；最初70年代末 80年代初的網路樂迷社群只是簡單的郵件名單(mailing lists)和Usenet上的討論群 組(discussion groups)，發展到了90年代中期，樂迷已經開始建立起自己的網站以 支持社群的互動。進入千囍年，音樂迷群(music fandom)開始在社交網站上扮演 中心的腳色。雖然不是所有的網站都被Myspace上的樂團-歌迷關係所影響，但大 部分的介面是鼓勵人們列出他們喜歡的樂團名單或把它們加入好友來建構他們
(music-based)的社群網站，包括Last.fm, MOG, iLike, and Goombah等。這些音樂 社群網站結合了社群網站的社會化網絡特徵加上影音網站的影音內容分享特 質。而第一個將｢音樂｣和｢社群網站｣兩大要素進行結合的網站便是全球第二大社 群網站MySpace(www.myspace.com)。 結合了社群網站的社會化網絡特徵與影音網站的影音內容分享特質， MySpace成功地吸引了「分享自己在聽什麼音樂」的樂迷與｢開放自我作品｣的藝 人這兩大族群，除了破億的會員人數，更號稱擁有上百萬樂隊或藝人的個人網 頁。其成功讓許多原本純社群網站開始加入音樂分享的元素(如hi5、Shoutlife、 Piczo)，而原有的老牌影音網站也開始社群化(如Music.com、MP3.com)。MySpace 為低靡不振的網路業者提示出一個新的方向：｢音樂｣成為吸引群眾的社群元素 (Stephens&Collins, 2007)。這在在都顯示，社群網站與音樂概念的結合，已成為 當代網路世界的主流趨勢。 三、 音樂網站的類型及構成要素 由以上的文獻整理可以發現，數位音樂的出現帶動了檔案交換分享網站、串 流影音網站及數位音樂商城的發展；另一方面進入Web2.0的時代，音樂也開始成 為社群網站吸引群眾的重要因素(Stephens&Collins, 2007)。然而，過往研究中音 樂網站的概念大多皆集中在數位音樂的購買行為與視聽分享上，包括影音視聽網 站(如youtube、im Vlog)、各種交換分享網站(如Kazza等P2P平台)、付費音樂商城 (如itunes)等，卻也忽視了除了數位音樂之外，相關知識、資訊的搜尋與分享也是 樂迷等虛擬社群在網路上的重要活動之一(Baym, 2007; Armstrong & Hagel, 1996; Bainbridge, Cunningham, & Downie, 2003)。Lee & Downie(2004)亦發現，使用者 最常在網路上的音樂活動並非商品的購買、數位檔案下載及串流視聽，而是在網 路上閱讀音樂相關資訊；此外，造訪相關音樂論壇及社群、訂閱最新流行快報也 是使用者經常進行的活動之一，顯見資訊的搜尋與分享也是很重要的線上音樂相 關活動。 因此本研究針對相關文獻加以整理歸納，以目的區分，將音樂網站區分為以 下類型： 1. 廠牌/藝人官網 樂手及其所屬唱片公司的官方網站。Wiedemann(2006)指出，當網路普及化， 所有的網站就成為了瞭解、認識，甚至購買音樂的最大通路。根據IFPI(2010) 報告指出，就在數位管道銷售已佔唱片工業整體收益的四分之一強的同時， 越來越多由樂手及其所屬唱片公司也利用自身架設的官方網站，跳過通路平 台進行相關商品的直接販售、發布最新消息甚至是與歌迷進行互動，而這些 網站所吸引的網路廣告收益，也成為唱片公司的新獲利管道之一。
2. 購物/媒體網站
即Houghton & Vickery(2005)所指稱的第三方線上音樂商店(third party online music store)。這類型的網站多為線上通路商，但也包括許多媒體(如MTV音樂 台)及搜尋引擎入口(如MSN Music)網站。此類網站不僅提供數位音樂的購買 與流通，也提供許多音樂相關資訊與新聞給使用者。 3. 視聽/電台網站 即以數位串流影音為主的視聽網站。所謂「串流」(streaming)指的是一種將 影音資料於網路上連續傳送的傳輸方式，將聲音、影像或動畫由提供影音內 容的伺服器向用戶端的電腦連續、即時的串流傳送，使用者不必等到整體檔 案下載完畢便可以對下載完的部分進行收聽收視(Schulzrinne et al., 1997)。串 流服務的出現巧妙的規避了智財權侵犯的問題，造成影音服務及網路電台蓬 勃發展，滿足追求流行及音樂熱愛者在使用上的龐大需求(Molteni et al., 2003)。 4. 社群/資訊網站 以音樂做為主題的社群網站或資訊交流網站。許多學者皆指出，相關知識、 資訊的搜尋與分享也是樂迷等虛擬社群在網路上的重要活動之一(Baym, 2007; Armstrong & Hagel, 1996; Bainbridge et al., 2003)。Baym(2007)指出，樂 迷自九零年代建立起自己的網站以支持社群的互動，分享、交流相關資訊與 音樂知識，並開始在社交網站上扮演中心的腳色。因此，這些樂迷間進行社 群互動、資訊交流的場域也不應被排斥在音樂網站的範疇之外。 音樂網站在網站構成上與一般網站存在有許多的差異。例如葉建伸(2007)在 其影音網站的研究中整理出影音網站應用的概念有標籤分類(Tagging)、極簡整合 (RSS)、集體編輯(Wiki)、社會網絡(Social Network)、網路服務混合(Mash-Up)等。 張建成、楊厚嘉(2006)針對篩選出來的17個音樂網站首頁，配合自行分析及文獻 加以定義的形態屬性進行分析，結果發現音樂網站的首頁設計因子有包括頁面編 排(含影音播放視窗、網頁內容)、按鈕形狀、標題設計、清單列及色彩組合(見表 2-1)。吳宇中(2008)針對當下國內音樂網站所提供的經營型態與服務，從文獻中 整理出五個評估準則構面，分別為音樂搜尋與推薦服務、平台設計與服務、網站 平台服務、費率與付費型態、網站型態。
表2-1 音樂網站首頁設計因子及其型態(張建成、楊厚嘉，2006) 音樂網站首頁設計因子 設計因子型態 頁面編排 天地上下選單+左或右選單 天地上下選單+多分割選單 其他欄式選單 標題 純Logo Logo+連結按鈕 Logo+影像圖片/廣告+連結按鈕 按鈕形狀 圖形 無邊框 純文字 影音播放視窗 純影像/影像+文字 影像+播放鍵 無 清單 圖像表現方式 色塊按鈕表現方式 其他 網頁內容 單一內容 多個單元 多個單元+影像/影音播放視窗 色彩組合 中庸配色 熱情亮眼配色 強調科技配色 可以明顯的發現音樂網站與一般網站最大的不同是，標籤分類(Tag)的概 念、影音內容、搜尋與系統推薦的大量運用及社群化的特徵，本研究整理並陳述 如下： (一) 標籤分類(Tags) 標籤是被設計用來為文件內容作分類。不論是哪一種類型的音樂網站，為了 讓使用者能有明確的指引更快的找到自己喜歡的音樂，都會運用標籤分類 (Tags)的設計。當前音樂網站最常見的分類方式便是以音樂類型(genres)進行 區分(Aucouturier & Pachet, 2003)，這是因為音樂類型可以讓使用者預期某些 音樂特性，有助於使用者尋找有興趣的音樂(Vignoli, 2004)。
(二) 影音內容
串流技術的出現造成影音服務及網路電台蓬勃發展，滿足追求流行及音樂熱 愛者在使用上的龐大需求(Molteni et al., 2003)；也因此當代音樂網站大多會提
供串流影音內容提供使用者試聽音樂或觀賞MV，刺激消費者購買的慾望。 (三) 搜尋與系統推薦服務 透過搜尋與系統推薦服務，使用者可以最迅速的尋找到或聆聽到喜歡的音 樂。例如點播下載排行榜可以讓使用者了解最新的流行趨勢；詳盡的分類系 統可以更快的找到喜愛的音樂；而透過會員評比、歌曲推薦服務，可以讓使 用者更了解自己的偏好並找到相似的作品減少挑選的時間。新一代的音樂網 站如Last.fm、Pandora皆進一步把品味(taste)與推薦(recommend)的元素納入 (Uitdenbogerd & Schyndel, 2002)，並以強大豐富的資料庫支撐這兩大元素在 系統上成功的運作。
(四) 社群化
相關知識、資訊的搜尋與分享是樂迷等虛擬社群在網路上的重要活動之一 (Baym, 2007; Armstrong & Hagel, 1996; Bainbridge et al., 2003)。進入Web2.0 的時代，音樂網站社群化的趨勢越來越明顯，如Myspace的出現便昭示著音 樂網站社群化時代的來臨，強調樂迷間甚至是藝人與樂迷間的分享與互動成 為許多新一代音樂網站的重要特色。
第二節
網頁設計
一、 網頁設計研究
自從全球資訊網(World Wide Web)在90年代出現後，各種網站設計的相關研 究便應運而生。Powell(2000)提出了網站設計金字塔的概念，呈現出各個網站構 成要素之間的關聯。他說明網站設計中內容(Content)、目的-經濟 (Purpose-Economics)、形式-視覺(Form-Visuals)和功能-技術(Function-Technology) 之間的關係：「內容」(Content)要幫助設計者(Designers)提供資訊及說服使用者 (Users)；「技術」(Technology)負責建構網站的功能(Function)；「視覺」(Visuals) 提供了網站的形式(Form)；「經濟」(Economics)則是整個網站架設的目的 (Purpose)，但對某些網站來講這並非絕對－如個人部落格的目的可能只是單純的 社交功能、自我展演等。 圖2-2 網頁設計金字塔(Powell, 2000)
國內外關於網站設計的研究相當多，其中Newman & Landay(2000)在
「Sitemaps, Storyboard, and Specifications：A Sketch of Web Site Design Practice」 一文中訪談了十一個來自不同專業經驗、專業背景與從事職務的網站設計研究者 後，整理出當前網站設計研究的三大面向，分別是導覽設計(Navigation Design)、 資訊設計(Information Design)和視覺設計(Visual Design)。
導覽設計(Navigation Design)的目的是要規劃出一套完整且正確的組織架構 以協助使用者迅速找到所需要的資訊；資訊設計(Information Design)是要讓網站
的內容能夠被完整且清楚的傳達；視覺設計(Visual Design)則是要運用色彩、影 像、文字及編排等方式來讓畫面更有吸引力，並使網站設計更容易被理解。類似 的概念也有Daniel(2000)網站設計的內容(Content)、視覺呈現(Visual Appearance) 和可用性(Usability)三要素，與Newman & Landay的看法不謀而合。
圖2-3 網頁設計中三大面向間的關係(Newman & Landay, 2000)
圖2-3呈現了各領域之間的關係，可以發現這三大面向又整合出了使用者介 面設計(User Interface Design)和資訊結構(Information Architecture)兩個向度。表 2-2則是本研究針對不同學者所提出的網站設計面向所整理出來的對照表格。 表2-2 不同學者提出的網站設計面向整理
Powell(2000) Newman & Landay (2000)
Daniel(2000)
形式-視覺(Form-Visuals) 視覺設計(Visual Design) 視覺呈現(Visual Appearance) 功能-技術 (Function-Technology) 導覽設計(Navigation Design) 可用性(Usability) 內容(Content) 資訊設計(Information Design) 內容(Content) 目的-經濟 (Purpose-Economics) 可以發現除了網站依據其目的(多為業主所掌控而非設計者)所提供的資訊與
上。這也衍生出來網頁設計領域長久以來關於「易於使用」(Ease to use)和「樂 於使用」(Joy to use)兩大面向的討論(Hassenzahl, Platz, Burmester and Lehner, 2000)。
二、 從人機互動的使用性觀點看網站界面設計
從前述文獻可以發現，許多學者接指陳使用者介面設計(User Interface)及使 用性(Usability)對網站設計的重要性；這也代表對資訊系統設計領域來說，人機 互動(Human-Computer Interaction, HCI)的概念越來越受重視。根據Preece(1994) 的觀點，所謂人機互動指是一種以電腦為基礎的互動模式，對設計者來說亦是整 個設計過程中最重要的基本原則，其目的在於幫助並確保使用者在使用資訊系統 的過程中能夠獲得很好的效率和安全性。在網站與網頁設計的技術要求越來越高 的時空背景下，網頁設計人員對網頁人機介面互動使用性(Usability)也越來越加 重視；也因此自1990年代以來人機互動的開始大量被引用在網站設計領域，並發 展出獨特之論述，稱為網站使用性 (website usability)(Pearrow, 2000)。 當代的網路設計已不再僅限於關注程式設計等技術層面的問題，在網站與網 頁技術要求越來越高的時空背景下，網頁設計人員對網頁人機介面互動使用性 (Usability)也越來越加重視。英國foxford services網站(www.foxfordservices.co.uk) 便指出時下的使用者傾向在進行任何潛在的購買行為前好好體驗網頁本身的使 用性；擁有較佳使用性的網站可以降低公司對網站客戶進行額外支援的需求，吸 引更多的客戶，更可以獲得更多多餘的時間可以對公司其他方面進行提昇。 三、 網頁的使用性準則與測量 關於使用性的測量，ISO 9241-11(1998)曾建議應包含： 有效性effectiveness：使用者利用系統來完成任務的能力，以及任務成果的 品質。 效率efficiency：執行任務所耗費的資源層級(通常是時間) 滿意度satisfaction：使用者使用系統後的主觀反應。 Nielson(1993)則更進一步將系統評估與使用者介面使用性分成五大指標來 探討，分別是： 可學習性(Learnability)：系統應能讓初次使用者易於學習且能輕易上手完成 任務。 效率性(Efficiency) ：系統應能有效率的被使用，使用者一旦學會了如何使 用系統之後，便可快速獲得高效能的表現。 可記憶性(memorability)：系統對使用者來說應該易於記憶，不會因為一段時 間未接觸就對系統操作感到生疏。
錯誤率(Error)： 系統應擁有較低的錯誤率，讓使用者不會在使用系統時能 夠預防、避免錯誤的發生；即使發生操作錯誤，也能夠迅速的進行更正。 滿意度(Satisfaction)：系統應能讓使用者在主觀上滿意系統、感到愉快且願 意使用。 四、 使用性之外 然而使用性並非人機介面領域唯一考量的議題。如同前述，視覺設計等網站 型式的議題也相當重要－若界面的視覺設計太醜、讓使用者倒盡胃口，系統使用 性再好、操作再順暢有效率，恐怕也難以獲得使用者的認同。張惠如(2004)指出， 人機介面的網頁設計應要能同時注意到網站認知介面與操作介面的設計，其中認 知介面指的是網頁的視覺，而操作介面指的則是網站的功能連結與互動設計。也 因此在情感設計(Norman, 2005)的概念出現之後，設計者除了產品的使用性與實 用性之外，產品外觀上帶給使用者在情緒和美感上的感受也開始納入考量之中。 這樣的風潮也開始影響到網頁設計在內的資訊系統設計領域，對人機互動領 域來說，介面研究已從早期的使用性導向(usability-based)轉向愉悅性導向 (pleasure-based)；然而這並不代表視覺形式上的情緒感受取代了使用性，使用性 與美感等心理、情緒因子等考量並不衝突(林珮雯，2004)。由於情緒系統會影響 認知系統的操作(Norman, 2005)，所以好的情感設計也會影響到使用者對系統使 用性的認知。Isen(2000)研究指出，美感所帶來的正面情緒影響有助於使用者做 決定與激發他們的創意，因此經由介面美感對使用者所產生的正面情緒影響有助 於改善使用者的表現。Tractinsky、Katz 及 Ikar 等學者(2000)研究發現，對系統 介面好不好用的第一印象與實際使用後滿意程度有高度相關，顯示第一眼視覺上 的情緒感受是會影響使用者對系統整體評量的重要因素。(關於情感設計與情緒 的部分，還會再於第三第四節進行更進一步的探討) 由於使用性有其限制與不足，許多研究者便開始解構使用性的概念
(Tractinsky, 1997; Kurosu & Kashimura,1995 )。他們將使用性的概念區別成三種類 型：
(一) 固有使用性(Inherent usability)
是指設計者依據客觀的理論與原則所建構出來的系統介面或產品的使用 性；因此屬於發展初期設計者所賦予給介面或產品的使用性，較注重系統的 功能。
(二) 表面使用性(Apparent usability or perceived usability, 又稱感知使用性) 從使用者主觀觀點出發，依據使用者所能察覺或感知到介面或產品是否好 用，因此偏向較為表面化的使用者感知，較注重系統的形式。
(三) 實際使用性(Actual usability) 是在使用者經過實際操作後所產生的使用性結果，這包括來自於各種客觀數 據上展現的使用者表現(如操作時間及績效)，以及使用者主觀上的使用性滿 意度評量(例如使用者美感上的感受)。 值得注意的是表面使用性(Apparent usability)概念的出現。由上述整裡可以發 現表面使用性與使用者第一時間的主觀感知高度相關，也因此產品或系統在較表 面的視覺形式上對表面使用性的影響最大。許多研究皆顯示，產品的固有使用性 並不一定會影響使用者對產品表面使用性的認知。Kurosu & Kashimra(1995)便指 出，固有使用性對感知的表面使用性或吸引性的辨別並沒有太大的影響。這極大 的挑戰了原本人機互動領域對於使用性的概念：產品或系統的固有使用性會影響 使用者對實際使用性的感知。 相對的，許多研究皆顯示表面使用性的好壞對於實際使用性認知會產生可能 的影響。Norman(2004)便曾在其「情感設計」(Emotional Design)一書中指稱，物 品的外觀會影響使用者對產品好用與否的認知，例如外觀經過整理、清洗和打蠟 過的車子會讓人覺得比較好開－雖然他還是原本那輛車子，機械構造和操作上並 無不同(固有使用性相同)。Tractinsk等學者(2000)也發現，對系統或介面好用與 否的第一印象與實際使用後滿意度有高度相關，顯見表面使用性對實際使用性的 認知有著重要的影響。 那麼，哪些因素會影響使用者對產品或系統表面使用性的感知?顯然的，視 覺呈現上的形式對使用者的表面感知有著直接的影響。Kurosu & Kashimra(1995) 的研究指出，介面美感的判斷與表面使用性有高度相關；Tractinsky(1997)雖然質 疑美感的感知可能會受使用者文化背景所影響，但同樣進一步證實兩者之間的關 連性；這都顯示介面不同的視覺呈現風格對於使用者表面使用性認知的關連： Hassenzahl (2004)進一步指出，影響表面使用性的因素很多，不同使用者可能會 對同樣的視覺呈現有不同的感知。為了釐清各種視覺要素對於使用者表面使用性 感知的影響，使用者所感知到的呈現風格(Presentational-Style)的概念會是更合適 的選擇。關於風格的定義與相關研究，將於下一節進行更深入的探討。
第三節
網頁設計風格
一、 設計風格的定義 風格(Style)一字源自古希臘，原義為棍棒狀物如筆，後來衍伸為筆調或闡述 思想的方法(林子忻、劉盛雄，1999)。在藝術領域裡，風格指的則是為了方便探 討設計或藝術的形式，利用演藝、歸納的方式整理出某些設計的特性，所賦予創 作方式的名稱(何懷碩，1981)。 Chan(1994)透過四個實驗對風格進行操作上的定義，其研究結果發現： 1. 風格是因為具有共同的特徵(common feature)而能夠被辨識，而這樣的共同特 徵與同一位設計者在創作許多作品時所共享的類似外顯特徵有關。 2. 風格的量化程度與共同特徵呈現的數量成正比。 3. 要讓不同的產品間具有相同的風格，至少要有三個共同的特徵是風格認知上 的下限。 4. 某些特徵在40%以上的幾何變形後就無法在被辨識為原本的風格了。 不難看出Chan(1994)認為風格是一個實體，且認為風格的屬性是可以被量化 的測量及辨識的，莊明振、蕭坤安(1996)亦持同樣的看法。 在設計風格的形成原因上，過去設計使的論述經常將設計風格的產生歸因於 某些設計奇才或設計團隊(如包浩斯)的貢獻，然而馮永華、楊裕富(2006)認為這 樣的認知忽略了整體時空背景脈絡(時代背景、群體心理，甚至社、經狀況)的影 響，因此透過史學研究、心理史學、心態史學、文化分析等跨領域的文獻分析後， 提出設計風格成因的幾項假設，分別為： 1. 「底層醞釀」說：類似馬克思「下層結構」決定「上層結構」的說法，當醞 釀中的群體心理強化到某一個程度後，一個「群體共識」的風格就會出現， 並如星火燎原般地快速流行傳播。 2. 「設計週期」說：人性求新求變，不同時期的流行趨勢都大不相同。因此如 同週期一般，不同時期的時代背景脈絡都會造就不同的設計風格出現。 3. 「設計社會學」說：社會經濟及政治關係等社會文化脈絡對設計有著決定性 的影響。透過社會心理的運作，設計才能反映出當時當地的社會經濟和政治 關係。 4. 「山崩鐘應」說：政經上強勢國家，其整體文化與設計風格也容易成為其他 國家效法的對象，如中國文化對東亞國家的影響。體」。如現存的日本大正時代建築大多保留巴洛克風格的痕跡，顯見當代日 本設計者力求脫亞入歐的時代背景。 同樣類似的概念還有林子忻、劉盛雄(1999﹚認為設計風格的形成方式有： 1. 「時代的風格」(Period Style)：藝術品會因為時代的不同而各自形成其獨特 的風格。不同的時代因其在經濟、政治、社會、宗教等種種因素的影響，作 品的特徵自然會有所不同。 2. 「區域的風格」(Regional Style)：因為自然環境和文化上的差異，不同區域 的藝術品會各自產生出的不同風格。亦被稱為民族的風格。 3. 個人的風格(Individual Style)：也就是藝術家個人的獨特風格。就算是同樣的 時代和區域，同樣來自20世紀西班牙的畢卡索(Pablo Picasso)和達利(Salvador Dali)的作品風格就截然不同。 二、 網頁的設計風格
McNeil(2008)在“The Ultimate Guide to Themes, Trends and Styles in Website Design”一書中指出「風格」定義了一個網站的外觀和給人的感受。在設計的領 域中，「風格」並非真的有具體的元素與之連結，而是以「視覺」作為標記－這 可以定義為設計手法的整體理論，他並且以視覺呈現作為基礎定義了11種網頁設 計風格；(表2-3)其中有些風格並未給予任何特定的圖像、有些風格卻很具體且具 有明顯的模式和清晰的視覺效果。而在網頁視覺呈現的相關研究中，研究者以網 頁中經常出現的網頁元素作為分析的自變項來分析網頁在使用感受上與使用績 效上的影響 (Galitz, 1997; Park & Noh, 2003; Pearson & Schaik, 2003)。
表2-3 常見的網頁設計風格與其視覺特徵(McNeil, 2008) 網頁設計風格 視覺特徵說明 復古(Retro) 將設計與過去概念連結 恰當運用配色盤配色 相片或插畫都是用來製造氛圍 合適的復古字型 極簡主義(Minimalist) 使用適量的裝飾和點綴 呈現視覺最基本元素 減少雜訊以突顯內容 內容本身必須非常充實 潔簡風格(Super-Clean) 有充裕的呼吸空間 設計乾淨而優雅 避免元素間過度擁擠
妥善運用網頁層級 斑駁(Distressed) 無意義的底紋已不再流行 考慮使用目的、意義與質感 斑駁背景打破向量圖形 使用是否會增強網站訊息 3D立體(Three-Dimensional) 創造網站的獨特性和空間感 加強整體視覺趣味 陰影可以任何東西跳出來 將元素疊進網頁設計建立深度感 素描(Sketchy) 稜角分明的手工質感 徒手繪畫然後掃描進電腦 砸點、撕紙效果刮痕材質 加入粒子和紋理 拼貼(Collage) 大張圖片、影像地圖和CSS 將文字框疊在大張背景圖上 以Flash為實作媒體 組合動畫和圖層混合模式 插畫(Illustrated) 可創造任何需要的氣氛 用插畫慢慢形塑整個網站 契合網站設計和訊息的插畫 用插畫慢慢形塑整個網站 照片(Photographic) 有效地傳達了網站訊息 使網站免於呆版 網站搭配適合照片的色調 避免頁面過於混亂 巨型字體(Giant Type) 利用尺寸建立層級 強制性讓使用者易於消化大量內容 巨型字體是頁面的重心 粗體的宣言為網站下了註腳
讓作品發聲(Let the Art Speak) 讓所有人看見真正代表設計者的網站 勿將作品放在複雜的設計中 將作品簡潔地排列好 用超大圖片來展示作品 網站的風格的決定應根據各網站的主旨(通常是某產品或組織的目的與訴 求)，進而選擇適當的主題訴求或表現元素(張建成、楊厚嘉，2006)。重要的是一 個網站從首頁到最底層子頁面的內頁都應該維持一貫的風格，網頁間一致的色彩 表現、圖示與主題訴求可以強化網站獨特的整體形象，讓使用者對這個網站留下
深刻的印象。(Nielson, 2000) 網頁設計風格或視覺設計的相關研究相當多，例如Powell(1998)便將網頁分 成文字導向(text-based)和圖形介面或隱喻導向(GUI or metaphor-based)；Li(2002) 再進一步將知細分為圖表為主、文字為主和平衡呈現三種類型；Veen(1997)亦將 網頁類似地分成圖書館式(libraries)及美術館式(galleries)的設計。文字導向或圖書 館式的設計風格是屬於功能-技術導向(Function-Technology)，以提供資訊為主而 不重視資訊呈現的風格與美感；相較之下圖形介面導向或美術館式的設計是形式 -視覺導向(Form-Visuals)，注重色彩、創意及氣氛營造。 Hsu(2011)和許峻誠(2001)針對網頁風格與視覺要素對設計評價的影響力進 行探討，利用MDS(多向度評量法)與集群分析將企業網站首頁風格進行分析，在 兩個因素向度的認知平面上將企業網站首頁分成六種不同的風格類型集群，分別 為：多文字訊息型、框架色塊訊息型、理性圖文規矩型、感性圓弧編排型、影像 插畫型及卡通場景型，可以發現這六大網站風格類型受到網站圖文呈現比例成正 向關係，排越後面的網站風格其視覺元素的使用比率越高、文字使用比率越低。 三、 網頁視覺風格要素 Schmitt等(1995)指出，色彩、線條與型式是構成視覺風格的要素，他並且以 複雜度(complexity)與表現度(representation)來區別風格美學：複雜度的兩端分別 為簡潔(minimalism)與裝飾(ornamentalism)；表現度的向度兩端分別為寫實 (Realism)與抽象(Abstraction)。Chan(1994)則提出視覺上的「共同特徵」來作為辨 識風格的依據。Powell等人(2000)曾經指出網頁的視覺要素包括有標誌、超連結、 文字、色彩、動畫及背景等；Omanson等(1998)則將背景、排版、標誌、導覽、 標題、圖像、主題及文字風格作為辨識網站的共同特徵。 許峻誠(2001)歸納出影響企業網站首頁風格的要素為：訊息呈現方式、構成 元素的使用、編排手法、色彩、情感意象、使用感受、技術問題、網站類比等八 個因素，並指出「圖文比例」對於首頁風格的認知影響最為明顯。陳建雄、蔡佳 穎(2006)從文獻中整理出網頁的構成要素可以分成兩大類，分別為「網站整體性 之構成單位」與「網頁設計構成元素」。其中網站整體性之構成單位包括開頭動 畫、首頁、其餘內頁、內頁首頁之關係性、網頁配樂、按鈕部份、其他附加、其 他建議或感覺。而網頁設計構成元素則可以細分為圖片、多媒體、廣告、文字及 其字體、圖像、背景、視窗分割、捲軸、導覽、色彩、視覺焦點、導覽、聲音、 動畫、影片以及其他。 鍾國文(2004)則在上述研究的基礎上，針對博物館從形象定位、風格分類及 視覺構成三個項目進行探討，歸納整理出網頁視覺要素與風格構成之探討歸納表 如下：
表2-4 網頁視覺要素與風格構成之探討歸納表 (鍾國文，2004) 探討項目 探討內容相關語句 形象定位 屬性定位 最新的、歷史的、人文的、科技的、地方特色的、 唯一的 利益定位 動手做的、樂趣的、學習的、知識性的 使用者定位 兒童的、社區的、一般使用者 視覺要素 構成分析 訊息呈現方 式 以圖為主/以文為主/圖文並茂 訊息呈現內 容 文字和旁白、圖案和插畫、靜態的照片、選項(超連 結) 圖表和圖形、視迅和動畫、音樂和音效、標誌和標 準字 構成型式 色塊區隔頁面資訊、框架使用、圖像使用、 欄位和分格線區分畫面 編排原則 對比、平衡、比例、韻律、統一、反差、方向 色彩意向 色相 暖色、中性、冷色 系 華美、平凡、深遠、理智 明度 高、中、低明度 優美、男女性、保守、安 定 彩度 高、中、低彩度 活潑、文雅、樸素、復古 風格分類 以文為主 多文字訊息型、框架色塊訊息型 圖文並茂 理性圖文規矩型、感性圓弧編排型 以圖為主 影像插畫型、場景卡通型 四、 從情感的角度探討網頁風格 從上述文獻的整理中可以發現，為了能夠更方便的量化與操作化風格測量及 辨識，設計領域大多是以設計手法上的共同特徵(common feature)作為風格區辨 的依據基礎(Chan, 1994 )。而最常見的便是以外觀上所呈現的視覺特徵為基礎所 區分出來的不同風格，這是因為產品所帶給人的第一印象便是其外觀(林旻樺， 2001; Norman, 2004)。產品外觀上的視覺特徵與造型變化一直是設計者最為重視 的議題，這是由於產品外觀(product apperance)在傳達設計者概念與型塑使用者情 感反應上扮演了重要的角色，視覺上的造型變化會對使用者的情緒產生影響(蕭 坤安，2006)。 正由於產品造型與外觀在情感傳達上所扮演的重要角色，設計界與學術界近 來逐漸將焦點由設計者所主導的造型風格轉移到影響使用者情感感受的情感意
者將消費者對產品的情感意象判斷，轉換成為產品設計的元素(Nagamachi, 1995)，也就是從使用者的角度出發，針對使用者的不同的情感意象去區分不同 的產品形態特徵，以達到滿足使用者情感需求的目標。國內莊明振與陳俊智(2004) 更進一步補充到，單純依賴物件特徵的辨識並不能完整解釋人類的認知行為，物 件與物件間的構成關係(元件與元件間的相對關係)也扮演重要的角色。 人類的感官知覺並不只有視覺，外觀上的視覺特徵也並不足以完整代表整個 產品；因此，當代設計領域中的風格研究已不僅止於探討物品外觀上的視覺特 徵，而是包含一個產品實際所帶給使用者的整體感受，這就衍生出來產品意象的 概念：產品本身便是一種情緒及文化的載體，設計師在設計過程中將其設計意圖 及概念透過產品傳達出去，使用者則透過產品來感知產品意涵並產生相應的意 向，亦即一種編碼－解碼(encode-decode)的過程(何明泉、林其祥、劉怡君，1996； 蔡宗勳，2007)。產品不僅外觀上所呈現出來的視覺風格會對使用者包括美感在 內的主觀情感感受產生影響，各種感官刺激體驗與感受也影響了使用者對產品整 體意象的判斷。也就是說，使用者對產品的實際體驗將決定其所帶給使用者的感 受－也就是使用者對產品意象的判斷。 陳蕙菱（2002）指出，所謂的體驗就是個體受外在刺激後，經由情感、知覺 過程所產生之生、心理反應。Schmitt(1999)在其體驗行銷（Experiential Marketing） 的研究中提出了五種不同的體驗策略模組，其中的最重要的便是感官體驗：感官 體驗主要來自五官的感官刺激，經由知覺處理過後，所產生的反應結果，即刺激 (Stimuli)－過程(Processes)－反應(Consequences)模式。感官體驗以視覺、聽覺、 觸覺、味覺與嗅覺五個感官刺激為訴求，來達成提供顧客愉悅或興奮等感受之目 標。他也提到，為了創造使用者對於產品或服務的正面感觀體驗，需要特別注意 產品或服務的風格與主題並適當運用。也就是說，符合消費者體驗的設計可以稱 為體驗設計；而消費者對設計作品體驗後的情感性認知稱為體驗意象。 可以發現過去風格研究僅將範圍限縮於視覺外觀上的造型探討已有嚴重的 不足；使用者對產品實際的體驗與感受，決定了一個產品的風格與意向，這點日 益為研究者與設計者所重視。就情感設計的觀點來說，使用者在產品視覺外觀特 徵 上 的 第 一 印 象 、 與 之 後 各 種 感 官 刺 激 之 下 所 產 生 的 產 品 體 驗 意 向 ， 與 Norman(2004)情感設計的改念不謀而合：Norman 情感設計的概念，強調設計產 品三個層次上對於使用者情感的重要影響。也因此，我們應自使用者的情感反應 與需求去歸納風格，而不是單從客觀的視覺外觀與造型特徵來區別風格。 對網頁設計來說，McNeil(2008)曾指出「風格」定義了一個網站在外觀上所 帶給人的感受。在網頁視覺呈現的相關研究中，研究者以網頁中經常出現的網頁 元素作為分析的自變項來分析網頁在使用感受上與使用績效上的影響。對音樂網 站來說，究竟存在哪些類型的網站風格?與一般網站有何不同?又對使用者來說， 音樂網站存在有哪些情感風格意向，而影響他們情感認知的視覺設計的因子又為
何?過去關於風格的研究並不在少數，但卻少見探討究竟哪些視覺因子會影響使 用者情感感受－也就是所謂的網站情感風格體驗意向。因此本研究將在這些過往 研究的基礎之上，對音樂網站情感意向風格進行深入的探討。
第四節
情感設計
一、 情感設計 Norman(2005)在Emotional Design一書中對情感與設計間的關係提出了一些 看法。他認為產品除了功能的使用之外，還存在有一個重要的因素－就是 「情感」的傳達，Norman(2005)對於情感提出三個層次，如以下所示： 1. 本能層次(Visceral)：能自動操作，預先設定的層級，稱為本能層次。本能的 層次是快速的：它做快速判斷什麼是好或壞，安全與危險，而且傳達合宜的 訊號到肌肉(動力系統)並警告腦部其他部分。它是情感運作的開始，為生物 學運作原理所決定且可由上層而來的訊號所抑制或加強。 2. 行為層次(Behavioral)：腦部思索控制日常行為，稱為行為層次(淺意識的)。 行為的層次是決定人類絕大部分行為的位置。它的行動能被反思的層級所抑 制或加強，而且依次能加強或抑制感覺的層級。 3. 反思層次(Reflective)：大腦反省思考的層級，稱為反思層次(有意識的)。反思 的層次在演化發展的最高層級上，人類對自己的運作進行熟慮的思考。它並 不需要直接接近不論是知覺的輸入或行為的控制。換句話說是:全面觀察，深 思熟慮以及嘗試影響行為的層級。 針對以下三種層次各對應的產品特性如以下所示： 1. 本能層次的設計→外觀 使用者在本能層次的認知運作是最快速的，是情感運作的開始，由於本能 層次的運作是先於意識、先於思索，接觸產品一時間內的感受決定了本能 層次設計的好壞，因此這個層級的設計是關於一個產品最初的衝擊－也就 是產品在外觀上帶給使用者的影響。若不能在第一時間刺激使用者情感反 應讓他們有購買或使用的慾望，即使其他方面的設計再成功也是枉然。 2. 行為層次的設計→使用的樂趣和效用 行為層次思索控制日常行為，是腦部決定大部分行為的位置。因此行為層 次是關於於使用與對一個產品的實際體驗，因此與產品或系統的功能、性 能及使用性等實際操作使用的議題有關。行為層次設計的好壞直接影響到 使用者情緒的正負反應，也因此，使用性測試或操作後的情緒量測都是常 見檢視行為層次設計好壞的指標。 3. 反思層次的設計→自我形象、個人滿足、記憶 反思層次注重訊息、文化及產品或其效用的意義：這包括了使用者有意識的反思和經驗，同時受到各人知識、社會環境和文化背景上的影響。反思 層次的思考常常決定了一個人對一項產品的整體印象，因此設計者的目的 －產品所傳達給使用者的產品形象非常重要。Burdek(1997)與McDonagh等 (2002)便指出，產品的形象設計要能夠讓消費者表達自我、產生熟悉、呼應 性與認同感受。 一個層次與另一個層次之間會互相影響亦會相互抗衡，例如搭乘雲霄飛車時 害怕的本能層級就會與抗衡反思層級(完成挑戰的自豪感)。每層級在人心理上的 運作中各扮演不同的角色，每層級都需要不同的設計方式以滿足使用者的不同需 求。 其中值得注意的是本能層次對於行為層次的影響。Tractinsky、Katz 及 Ikar 等學者(2000)研究發現，對系統介面好不好用的第一印象－也就是第一時間在視 覺上帶給使用者在本能層次上的反應－與實際使用後滿意程度有高度相關，顯示 第一眼視覺上的情緒感受是會影響使用者對系統整體評量的重要因素；國內林珮 雯(2004)的研究亦發現，網站介面的美感呈現的確會影響個人對網站好壞的認 知。因此我們也可以說，本能層次也就是許多學者所聲稱的表面使用性認知 (Tractinsky, 1997; Kurosu and Kashimura,1995 )：偏向較為表面化的使用者感知， 較注重系統的形式，且本能層次的認知會影響使用者實際使用後滿意程度－也就 是行為層次的認知，足見本能層次設計的成敗－也就是在視覺設計上－會影響使 用者實際操作後的行為層次感受。
