首頁 > 網路資源 > 大同大學數位論文系統

博碩士論文 etd-0915115-115212 詳細資訊


姓名 林育成 (Yu-cheng Lin) 電子郵件信箱 rapheoluslin@gmail.com
系所 工業設計學系(所) (Industrial Design)
學位 碩士 (Master) 學年 / 學期 103 學年第 2 學期
論文名稱(中) 產品歷史展示網頁之時間軸的互動性研究
論文名稱(英) The Research on the Interactivity of Webpages with Timeline for Product History Display
檔案 本電子全文僅授權使用者為學術研究之目的,進行個人非營利性質之檢索、閱讀、列印。
請遵守中華民國著作權法之相關規定,切勿任意重製、散佈、改作、轉貼、播送,以免觸法。
論文使用權限 校內外完全公開
論文種類 碩士論文
論文語文別 / 頁數 中文 / 108
統計 已被瀏覽 477 次,被下載 83 次
關鍵字(中)
  • 時間軸
  • 互動設計
  • 資訊設計
  • 歷史資訊圖表
  • 關鍵字(英)
  • timeline
  • infographics of history
  • information design
  • interaction design
  • 摘要(中) 本研究主要探討互動式歷史資訊圖表之現況,以及瞭解使用者在操作時的互動功能需求。在前期調查中,先以案例分析整理現有互動式歷史資訊圖表之互動功能,再從其中選擇二種差異較大的案例,讓受測者實際操作,並以問卷法以及訪談法調查使用者的相關經驗。前期調查得出互動式歷史資訊圖表大多是以橫向的版面呈現,其中橫向版面的網頁案例之移動功能較多,直向版面的案例則較少。移動時間軸與事件的功能主要分成三類,共十種。(一)換頁移動:「拖曳主時間軸」、「滑鼠滾輪捲動」、「點換頁按鈕」、「鍵盤方向鍵移動頁面」。(二)捲軸捲動:「拉動時間標示框」、「拖曳綜觀時間軸」、「點擊時間點位置」。(三)事件跳動:「鍵盤方向鍵切換事件」、「點擊前後事件按鈕」、「點擊頭尾事件按鈕」。
    實驗設計依據前期調查的結果作規劃,以問卷法、訪談法以及操作實驗樣本網頁介面進行。實驗結果得出,在設計互動式歷史資訊圖表之網頁時,移動功能的使用方式、使用的螢幕以及版型的瀏覽方式,盡可能統一為相同的方向。互動的移動功能也盡可能配合操作習慣作設計,讓使用者能夠很直覺地使用。按鈕類的相關功能較不符合使用習慣與使用性,應盡可能減少這類的功能。關於操作媒介,同時使用「滑鼠左鍵、滑鼠滾輪與鍵盤方向鍵」比較符合使用習慣,而使用「觸控螢幕」則是比較符合使用性。
    摘要(英) This study focused on the current applications of interactive history infographics and identified the requirements of interactive functions for user interfaces. In preliminary investigation, the author organized interactive functions of existing interactive history infographics through the method of content analysis. Besides, two cases with significant differences in features were chosen for testing, with questionnaire survey and interview to collect user experiences. The results of preliminary investigation indicated that many cases employed horizontal timelines instead of vertical timelines. There were ten ways to move across timeline (or events). They could be divided into three categories. First, for “page switching,” “dragging main timeline,” “scrolling with mouse wheel,” “clicking on buttons for page switch,” and “clicking on the arrow keys on keyboard,” were identified. Second, for “scrolling across timelines,” “scrolling sign bar of timeline,” “dragging the overview timeline,” and “clicking a position on the timeline” were identified. Third, for “events switching,” “clicking on the arrow keys on keyboard,” “clicking on buttons for next event or previous event,” and “clicking on buttons for beginning event or ending event” were identified.
    Based on the preliminary studies, an experiment was carried out to compare two directions of timelines with the keyboard-mouse setting versus touchscreen setting. The results indicated that the directions of controls to facilitate timeline movements should be consistent with the browsing habits of users to ensure intuitiveness. In additions, “on-screen button” for the page and event switching was not suitable for timelines, from the viewpoints of user habits and usability. Designers should minimize these functions. Furthermore, “left button of mouse,” “mouse wheel,” “arrow keys on the keyboard,” and “touchscreen” were more suitable for timeline operations.
    論文目次 誌謝 I
    摘要 II
    ABSTRACT III
    目錄 IV
    表目錄 VII
    圖目錄 IX
    第一章 緒論 1
    1.1研究背景 1
    1.2研究動機 2
    1.3研究目的與問題 2
    1.4研究範圍與限制 2
    1.5研究架構 3
    第二章 文獻探討 4
    2.1資訊互動設計 4
    2.1.1資訊設計 4
    2.1.2互動設計 5
    2.2 網頁介面設計 7
    2.2.1網頁設計的構成要素 7
    2.2.2網頁介面設計原則 9
    2.3資訊圖表 10
    2.3.1資訊圖表之定義 10
    2.3.2資訊圖表之種類與特性 12
    2.3.3歷史資訊圖表 14
    2.3.4互動式資訊圖表 16
    2.4文獻小結 16
    第三章 前期調查 17
    3.1現況調查與案例分析 17
    3.2使用者經驗調查與實驗 22
    3.2.1受測者與實驗設計 22
    3.2.2操作任務實驗說明 22
    3.2.3使用者經驗調查說明 24
    3.2.4操作任務實驗結果 24
    3.2.5使用者經驗調查結果 25
    3.3前期調查小結 27
    第四章 實驗設計 29
    4.1受測者 29
    4.2實驗環境 29
    4.3實驗介面 31
    4.3.1介面模型參考 31
    4.3.2橫向樣本網頁介面 35
    4.3.3直向樣本網頁介面 37
    4.3.4樣本網頁的移動功能 38
    4.4實驗任務 40
    4.5實驗流程 40
    第五章 實驗結果與討論 42
    5.1任務一-四種模式與操作移動功能比較分析 42
    5.2任務二-操作移動功能比較分析 47
    5.2.1任務2-1長距離移動分析 48
    5.2.2任務2-2短距離與連續型移動分析 49
    5.2.3任務2-3單一事件切換分析 50
    5.3互動式歷史資訊圖表相關設計分析 51
    5.4任務一與任務二之整體小結 52
    第六章 結論及建議 55
    6.1結論 55
    6.2未來研究建議 57
    參考文獻 58
    附錄一 初步調查問卷與結果整理 60
    附錄二 實驗設計問卷 62
    附錄三 各任務操作時間整理表 79
    附錄四 實驗設計主觀滿意度問卷整理表 80
    附錄五 任務二各功能使用次數整理表 86
    附錄六 任務二使用各移動功能項目原因整理 89
    參考文獻 英文參考文獻
    1. Banu İnanç Uyan Dur. (2014). Interactive Infographics on the Internet.
    2. Benyon.(2010).Designing Interactive Systems
    3. Cliff Atkinson.(2011) Beyond Bullet Points ,Pearson Education, Inc.
    4. Hoffman, D. L., & Novak, T. P. (1995). Marketing in hypermedia computer-mediated environment:Conceptualfoundations, Journal of Marketing, 60(6), 50-68.
    5. Jared Spool. (2005). Web site usability. San Francisco, Morgan Kaufmann.
    6. Jason Lankow. (2012). Infographics: The Power of Visual Storytelling
    7. Mark Smiciklas. (2012) .the Power of Infographics,Pearson Education, Inc.
    8. Newman. M., &Landay. J. (2000). Sitemaps, Storyboards, and Specifications: A Sketch of Web Site Design Practice. New York, NY: 263-274.
    9. Norman, D. A. (1988). The Psychology of Everyday Things. New York, NY: Basic Book.
    10. Paul Lester.(2003). Visual communication: images with messages. Australia Belmont, CA: Wadsworth Pub.
    11. Shedroff, N. (1999). Information interaction design: A unified field theory of design. In Jacobson, R. (Ed.),Information design. 267-292.
    12. Steve Krug(2006). Don’t Make Me Think!. California USA, New Riders.
    13. Terry Irwin. (2002). Information Design: What is it and Who does it?
    中文參考文獻
    1. 尹相崙(2010)。資訊圖像應用於台灣與日本飲食文化比較之研究創作(碩士論文)。
    2. 王孝筠(2003)。資訊圖像應用於蘋果日報編排設計之研究(碩士論文)。
    3. 王凱弘(2010)。網站視覺設計樣式庫系統之運用與探討。雲林科技大學設計運算研究所碩士班碩士論文。
    4. 王欽泉(2007)。框架型網頁編排設計與意象之研究。國立臺灣師範大學圖文傳播學系碩士論文。
    5. 李育全(2012)。資訊圖像應用於速食麵文化之創作與研究(碩士論文)。
    6. 林孟潔(2014)。時間性資訊圖像應用於互動式介面設計之創作研究-以近代平面設計史為例(碩士論文)。
    7. 林怡秀(2013)。網頁視覺設計對兒童吸引力之探討-以桃園瑞塘國小網頁為例(碩士論文)。
    8. 林承螢(2007)。產業群聚網站視覺設計之評量研究。(碩士論文)。
    9. 林冠瑜(2009)。林冠瑜(2009)。無名小站部落格圖文表現樣式對設計評價影響之研究。(碩士論文)。
    10. 林振成等(2012)。商品展示網頁之消費者認知研究。應用藝術與設計學報,6,1-16。
    11. 林耕民(2006)。文化創意產業整合網路行銷之網站視覺傳達設計評估模式。(碩士論文)。
    12. 林雅惠(2008)。中老年者對網頁使用性與意象之探討。
    13. 柳惠文(2004)。報紙新聞內容與圖像呈現對認知效果的影響(碩士論文)
    14. 洪郁修(2006)。兒童WWW 人際溝通網路介面之研究。國立成功大學工業設計學系碩士論文。
    15. 張?蒴(2011)。有效的網頁視覺信息解構。當代藝術,4,90-91。
    16. 張惠如(2003)。創意網頁設計。台北:藝風堂出版社。
    17. 陳姵汝(2012)。網頁設計原則運用於城市行銷網站之廣告效果研究。國立臺中教育大學數位內容科技學系碩士論文。
    18. 陳珮瑩(2005)。網站視覺設計評量模式之研究。(碩士論文)。
    19. 陳嫻若(譯)(2014)不懂設計,也能做出令人驚豔的資訊圖表。(原作者:櫻60田潤)。臺北市:聯經出版公司
    20. 楊宗訓(譯)(2012)設計的邏輯:INFOGRAPHICS 深入人心的視覺法則。(原作者:木村博之)。臺北市:旗標。
    21. 楊欣哲、王超弘(1999)。WWW 網頁設計之準則與應用。工業工程學刊,265-276。
    22. 廖鵬文、盧康渝(2004)。別讓我的滑鼠迷了路,台北:數位人資訊。
    23. 劉玟葶(2008)。國際旅館網頁意象與設計要素權重之研究(碩士論文)。
    24. 蔡孟侖(2010)。資訊圖像形式詮釋金門縣戰地文化之創作研究(碩士論文)。
    25. 謝坤哲(2008)。網頁圖文數量與位置配置對於成年人與青少年的偏好與眼球運動之影響—以購物網站為例(碩士論文)
    26. 謝宜娟(2006)。服裝自創品牌網路行銷之網站設計與管理研究(碩士論文)。
    27. 簡明哲(2008)。銀髮族網頁設計規範與評估之研究(碩士論文)。
    參考網站
    1. 9/11 Memorial,http://timeline.911memorial.org/#Timeline/3
    2. Arab Spring,http://www.theguardian.com/world/interactive/2011/mar/22/middle-east-protest-interactive-timeline
    3. British Timeline,http://www.bbc.co.uk/history/interactive/timelines/british/index.shtml
    4. Chen-Wen Liang 的個人履歷,https://www.behance.net/gallery/7990211/Infographic-Design
    5. Galapagos Live,http://www.dipity.com/kejames/Galapagos-Live/
    6. Lateral On,http://tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/
    7. Lifeline50 週年,https://www.lifeline.org.au/Lifeline-Journey/timeline
    8. Plurk,http://www.plurk.com/plurkbuddy
    9. Rodania,http://rodania.com/about
    10. Simple Timeline,http://www.jqueryscript.net/demo/Simple-jQuery-Timeline-Plugin-with-Knockout-Moment-js/
    11. The Coldplay,http://timeline.coldplay.com/
    12. Tiki Toki,http://www.tiki-toki.com/
    13. Tower of London,http://www.tiki-toki.com/
    14. TSA,http://tsagc.com/timeline/#
    15. Wayne Rooney,http://www.officialwaynerooney.com/social
    16. 大非洲地區熱鬧的程度,http://www.one.org/us/shareworthy/infographic-mapping-the-largest-african-populations/
    17. 水的生命循環週期,https://www.behance.net/gallery/12047479/Water-Cycle-Infographic
    18. 台北捷運地圖,http://www.metro.taipei/
    19. 好澱粉vs 壞澱粉,http://www.fitness2000gym.com/fit-tips/good-carbs-vs-bad-carbs
    20. 咖啡的真相,https://www.behance.net/gallery/2511777/The-Coffee-Facts-Infographics
    21. 網路演進發展史,http://www.evolutionoftheweb.com/
    22. 製作視覺資訊圖表(infographic)的三大要素及相關工具,http://www.inside.com.tw/2011/04/29/infographic-how-to
    指導教授/口試委員
  • 陳立杰 - 指導教授
  • 林家華 - 委員
  • 黃銘智 - 委員
  • 口試日期 2015-07-22 繳交日期 2015-09-15


    基本檢索 | 進階檢索 | 瀏覽檢索 | 檢索歷史