簡易檢索 / 詳目顯示

研究生: 林君玲
論文名稱: 網站之使用者介面設計探討與創作-以音樂平台為例
A Study and Creation of User Interface Design - Musical Webside for Example
指導教授: 鄧成連
學位類別: 碩士
Master
系所名稱: 設計學系
Department of Design
論文出版年: 2014
畢業學年度: 102
語文別: 中文
論文頁數: 122
中文關鍵詞: 網頁設計使用者介面人機互動視覺語言
英文關鍵詞: website design, user interface, human-computer interaction, visual language
論文種類: 學術論文
相關次數: 點閱:181下載:51
分享至:
查詢本校圖書館目錄 查詢臺灣博碩士論文知識加值系統 勘誤回報
  • 透過網路平台獲得訊息已是現代社會中相當重要的傳播方式,網站設計除要吸引使用者的第一印象外,也要提升使用者再次瀏覽的意願。而網站音樂平台的使用者,或已長期使用線上聽音樂,對於目前音樂平台所提供之介面設計滿意度似未提高,且對現今音樂平台之介面設計及使用性提出質疑。惟何種網站之介面設計才算是成功的設計?網站介面設計如何才能讓使用者在第一時間找到資訊目標,並留下好的觀感及願意再次瀏覽?令使用者對頁面呈現的設計及內容產生好感,是本研究主要探討之重點。

    本研究透過文獻探討,歸納出「網站設計」及「使用者介面」之準則,另經實際案例分析,統整出目前音樂網站介面設計的類型及優缺點,最後將文獻探討與案例分析結果實際運用於創作上。

    案例分析發現所有的音樂平台強調大量音樂資訊的分類整理,以及滿足使用者「就是來聽音樂」的需求,也重視使用者介面功能的正確簡潔。音樂平台案例均符合使用者網站規畫準則中的「內容資訊需清楚明瞭」、「有組織的導覽架構」、「良好的功能性」,以及使用者介面準則中「使用隱喻性」、「介面設計一致性」、「系統可視性」、「讓使用者有掌控權」、「減少使用者記憶需求」、「美感呈現」。
    本創作研究發現呈現以「人」為主的網站介面設計,需具備:(1) 吸引人的視覺設計;(2)有組織、條裡、邏輯的規劃網站;(3)簡單、舒適、易閱讀且具人性化的介面設計;(4)良好的功能性;(5)在使用者與創作者間反覆審視彼此觀點。期許此以人為本理念的網站介面設計,能給使用者留下好印象、提升使用性滿意度外,也提供後續網站創作者評量之依據。

    Accessing information via online platforms has become an important mode of information transmission in modern society. Not only do website designs need to attract users with a good first impression, they also need to increase users’ desire to return for further browsing. The satisfaction levels of users of online music platforms or long-term users who listening to music online do not seem to have increased with current interface designs provided by music platforms. These users are also questioning the interface design and usability of current music platforms. But what kind of website interface design can be considered successful? How can website interface designs enable users to find their required information quickly, and leave a good impression so that they would want to return for repeated browsing? This study focuses on how the design and content presented by websites can leave users with good impressions.

    By conducting a literature review, this study arrived at a conclusion with two criteria -- ‘website design’ and ‘user interface’, integrating the types and pros and cons of current music website interface designs through further analysis of actual cases. The analysis results of the literature review and the actual cases are then applied to this work.

    It was found through case analysis that all music platforms focus on the classification of large volumes of music information, and in satisfying users’ basic need for listening to music, also focusing on the accuracy and simplicity of user interface functions. All music platform cases met the following users’ website planning criteria: clear and defined information and content, structured browsing framework, good functionality, and the following user interface criteria: use of metaphors, consistent interface design, system visibility, complete user control, lessening the need for users to memorize, and aesthetic appearance.

    The results of this study are presented with a human-centric website interface design that must include: (1) an attractive visual design; (2) an organized, structured, and logical planning website; (3) a simple, comfortable, easy-to-read and humanistic interface design; (4) excellent functionality; (5) repeated mutual feedback between users and creators. It is hoped that the human-centric concept of this website interface design can leave users with a good impression, improve user satisfaction, and provide a guide for subsequent evaluation by website creators.

    中文摘要................................................... I Abstract..................................................II 目錄 .................................................... IV表目錄 .................................................. VII 圖目錄.................................................... IX 第壹章、緒論 ............................................... 1 第貳章、文獻探討............................................. 6 第一節、網站設計............................................. 6 一、何謂網站 ............................................... 6 二、網站規畫之準則 .......................................... 7 第二節、使用者介面設計 ...................................... 11 一、何謂使用者介面 ......................................... 11 二、網站使用者介面設計之期望與效果訴求 ......................... 12 三、網站使用者介面設計準則 .................................. 13 第三節、音樂平台介紹 ....................................... 21 第四節、總結............................................... 22 第參章、研究與創作流程....................................... 24 第一節、研究方法與流程 ...................................... 24 第二節、創作方法與流程....................................... 25 第三節、總結............................................... 28 第肆章、案例分析............................................ 29 第一節、案例分析方法說明..................................... 29 第二節、案例1:KKBOX數位音樂平台............................. 32 一、案例背景............................................... 32 二、網站視覺設計分析 ....................................... 33 三、網站介面設計架構分析..................................... 37 四、網站資訊內容分析 ....................................... 39 五、網站互動性視覺呈現分析................................... 45 六、使用者介面功能性分析..................................... 48 七、小結.................................................. 52 第三節、案例2:myMusic數位音樂平台 .......................... 55 一、案例背景............................................... 55 二、網站視覺設計分析........................................ 56 三、網站介面設計架構分析..................................... 59 四、網站資訊內容分析........................................ 61 五、網站互動性視覺呈現分析................................... 64 六、使用者介面功能性分析..................................... 67 七、小結.................................................. 69 第四節、案例3:Omusic數位音樂平台 ........................... 71 一、案例背景............................................... 71 二、網站視覺設計分析........................................ 72 三、網站介面設計架構分析..................................... 75 四、網站資訊內容分析........................................ 76 五、網站互動性視覺呈現分析................................... 80 六、使用者介面功能性分析..................................... 82 七、小結.................................................. 86 第五節、綜合分析總結........................................ 88 第伍章、創作成果與分析....................................... 91 第一節、設計理念規範........................................ 91 第二節、設計成果............................................ 92 第三節、創作結論........................................... 109 第陸章、創作討論與建議...................................... 114 第一節、結論.............................................. 114 第二節、未來設計建議....................................... 117參考文獻................................................. 119

    山岡俊樹,李傳房譯(1998)。螢幕畫面介面設計。中日設計研討會論文集。1998年4月,國立雲林科技大學,pp.72-80

    方裕民(2003)。人與物的對話-互動式介面的理論與實務。台北:田園城市出版社。

    吳鼎武.瓦歷斯(1999)。電腦空間與人文論文集。台北:田園城市出版社。

    宋明琪(2010)。網站設計中片頭首頁之有無、時間長短與生動性設計對消費者態度之影響。國立政治大學廣告研究所碩士論文。

    李佳穎(2009)。網路書局使用者介面之資訊呈現與商品圖片型式對使用者體驗感受之影響。國立台灣科技大學設計研究所碩士論文。

    李青蓉、魏丕信、施郁芬與邱昭彰(1997)。人機介面設計。台北:國立空中大學出版。

    李冠霈(2009)。網路相簿使用者介面之排版型式與廣告類型對使用者滿意度之影響。國立台灣科技大學設計研究所碩士論文。

    李星宏(2002)。台灣企業網站素質之前因後果 – 探索式研究。國立中正大學企業管理研究所碩士論文。

    李啟宏(2003)。網頁視覺設計:設藝雙全。台北:金禾資訊。

    林佩儀(2000)。網站設計與使用者滿意度之關聯。國立政治大學資訊研究所碩士論文。

    林俊良(2004)。視覺傳達設計概說。台北:藝風堂出版社。

    林珮雯(2005)。電子商務網站介面設計研究-美感與使用性。國立交通大學傳播研究所碩士論文。

    林嫊貞(2004)。智慧型個人化網頁推薦機制之設計。大同大學資訊工程系碩士論文。

    邱柏清(2004)。網頁介面愉悅行之研究。國立台灣科技大學設計研究所碩士論文。

    浩騰媒體(2008)。浩騰媒體月報。台北:浩騰媒體。

    張莉青(2002)。網站成線與網站信任感知關係研究。國立政治大學資訊管理研究所碩士論文。

    張惠如(2004)。活動網頁設計。台北:藝風堂出版社。

    張瑞鉉(2006)。網站特性、內容與設計品質對網站效果影響之結構化模式分析-台灣寬頻使用者之驗證。南華大學管理科學研究所碩士論文。

    梁景紅(2006)。Web Designer:網頁設計關鍵Idea。PCuSER電腦人文化:台北。

    郭彥均(2004)。兒童網頁介面設計準則—使用性、愉悅性與互動性。國立臺北科技大學創新設計研究所碩士論文,未出版,臺北市。

    郭學武譯(2009),Benyon, D., Turner, P., & Turner, S.。人機介面互動式系統設計。台北:碁峯資訊。

    陳坤淼(2000)。電腦多媒體使用者介面設計探討。高速計算世界VOL.8. NO.2, pp36-45

    陳建豪譯(1998),Jenny Preece。人機介面與互動入門:電腦之人因工程。和碩科技文化有限公司:台北。

    陳家怡(2010)。網站視覺設計之量化分析。亞洲大學資訊傳播學系碩士論文。

    陳浩然(2010)。學童知覺偏好於網站介面設計之探究-以「故宮e學園」為例。國立台中教育大學數位內容科技學系碩士論文。

    陳麗如、何榮桂(1998)。 〈Web-Title 之使用者介面設計〉,《資訊與教育》64,pp. 21-28。

    游珈瑋(2010)。以體驗行銷觀點探討品牌網站設計之研究-以T-shirt服飾自創品牌為例。崑山科技大學視覺傳達設計研究所碩士論文。

    黃培華(2009)。使用者導向之互動設計研究:以Wii控制器為例。國立台北教育大學數位科技設計學系(含玩具與遊戲設計碩士班)碩士論文。

    資策會FIND(2011)。臺灣產業資訊應用現況與需求調查報告。台北:資策會。

    廖鵬文、盧康渝(2004)。別讓我的滑鼠迷了路。台北:數位人資訊。

    蔡秀麗(2004)。好看的網站VS.好用的網站。廣告雜誌,154,P108-110。

    蔡卓軒(2000)。超in共享軟體。台北:學貫行銷。

    龍斯雲(2000)。全球資訊網之人機介面設計-以勞保局網站系統為例。私立淡江大學資訊工程研究所碩士論文。

    魏璉(2001)。擬人化使用者介面對網頁使用者回憶表現及滿意度影響研究。國立交通大學傳播所碩士論文。

    藝風堂編(2004)。企業形象網頁設計。台北:藝風堂。

    Daniel, J. (2000). Developing usable web sites: A review and model. Internet Research: Electronic Networking Applications and Policy, 10(4), 295-307

    Hoffman, D. L., Novak, T. P., & Chatterjee, P. (1995). Commercial scenariosfor the Web: Opportunities and challenges. Journal of Computer-MediatedCommunication [On-line]
    http://www.nngroup.com/articles/concise-scannable-and-objective-how-to-write-for-the-web/

    Jarvenpaa, S. L. and P. A. Todd. (1997). Consumer Reactions to Electronic Shopping on the World Wide Web. Journal of Electronic Commerce, Vol. 1, No. 2: 59-88

    Landay, A. J., Van Duynend, D. K. J., Hong, I. (2002). The design of sites: ptterns, principles, and processes for crafting a customer-centered web experience. Addison-Wesley.

    Lindgaard, G., Fernandes, G., Dudek, C., Judith M. Brown. (2006). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & IT 25(2): 115-126

    Mandel, T. (1997).The elements of user interface design. New York: Wiley Computer Publishing.
    Manfred Thüring , Haake, J. M. , Hannemann, J. (1995). What's Eliza doing in the ... a WWW application, Communications of the ACM, v.38 n.8, 47-48

    Mitra, A., & Cohen, E. (1999). Analyzing the web: Directions and challenges. In S.Jones, (Ed.), Doing internet research, Thousand Oaks , CA : Sage.

    Morkes, J.,& Nielsen, J. (1998). Applying Writing Guidelines to Web Pages, SIGCHI ACM Special Interest Group on Computer-Human Interaction, NY: ACM New York.

    Newman, M. & Landay, J. (2000). Sitemaps, Storyboards, and Specifications: A Sketch of Web Site Design Practice. Group for User Interface Research, Computer Science Division. University of California, Berkeley.

    Nielsen, J. (1997). Concise, SCANNABLE, and Objective: How to Write for the Web

    Powell, T. (1998). The Complete Reference-Web Design.California:Osborne/McGraw-Hill.

    Rayport, J. F., Jaworski, B. J.(2001). e- Commerce. NY: McGraw-Hill.

    Shneiderman, B., & Plaisant, C. (2005). Designing the User Interface. Chapter 14.5: Information Visualization (pp. 580–603). Boston: Pearson

    Thuring, M., Hannemann, J., and Haake. J. M. (1995). Hypermedia and cognition:designing for comprehension, Communications of the ACM, Vol.38, No.8.

    線上資料
    http://zh.wikipedia.org/zh-tw/KKBOX#cite_note-0

    http://zh.wikipedia.org/zh-tw/MyMusic

    KKBOX網站 http://www.kkbox.com/tw/tc/index.html

    myMusic網站 http:// http://www.myMusic.net.tw

    Omusic網站 http://www.Omusic.com.tw/

    威比獎Webby Award官方網站 http://www.webbyawards.com/entries/criteria.php

    下載圖示
    QR CODE