跳到主要內容

臺灣博碩士論文加值系統

(44.222.225.12) 您好!臺灣時間:2024/03/29 18:48
字體大小: 字級放大   字級縮小   預設字形  
回查詢結果 :::

詳目顯示

我願授權國圖
: 
twitterline
研究生:董君慧
研究生(外文):Tung, Chun-Hui
論文名稱:網路實況平台原型製作-以多視窗設計為例
論文名稱(外文):Prototype of Live Streaming Platform: A Case Study of Multiple Windows Design
指導教授:范丙林范丙林引用關係許一珍許一珍引用關係
指導教授(外文):Fan, Ping-LinHsu, Yi-Chen
口試委員:楊智傑陳圳卿
口試委員(外文):Yang, Chih-ChiehChen, Chun-Ching
口試日期:2015-07-11
學位類別:碩士
校院名稱:國立臺北教育大學
系所名稱:數位科技設計學系(含玩具與遊戲設計碩士班)
學門:電算機學門
學類:軟體發展學類
論文種類:學術論文
論文出版年:2015
畢業學年度:103
語文別:中文
論文頁數:108
中文關鍵詞:網路實況多視窗使用者介面易用性
外文關鍵詞:Live StreamMultiple WindowsUser InterfaceUsability
相關次數:
  • 被引用被引用:2
  • 點閱點閱:1396
  • 評分評分:
  • 下載下載:0
  • 收藏至我的研究室書目清單書目收藏:1
隨著網際網路的發達,線上媒體影音平台成為網路上不可或缺的娛樂項目之一。近幾年因為電競產業的興盛,線上實況平台也隨之熱門起來,強調與觀眾之間的即時互動,多人同樂的方式吸引到許多喜歡社交與電玩的族群。有別於一般網路影音媒體平台,網路實況有即時性與互動性之特色,其介面也與其他網站、一般影音平台有所不同。但鮮少有人進行多視窗網路實況平台配置之使用者介面相關研究。本研究製作一經過使用者中心設計符合易用性多視窗網路實況平台,依照使用者經驗元素層次圖對應網頁介面開發之設計流程,將構想以高擬真之原型網頁呈現。在最後階段進行使用者實際操作與專家訪談,以驗證平台介面設計是否符合使用者體驗與需求,並依照訪談後之建議做修改,完成改良版網頁。研究結果顯示,系統狀態的能見度、功能上的明顯辨識、以浮動視窗在同頁進行操作、給予使用者適當的操作自由可提升其在操作流程上的滿意度。本研究將結果整理並列出要點,提供未來相關研究做為參考依據。
With the advance of the Internet, online media platform has become an indispensable part of entertainment. Recent years, gaming industry and livestream platform become popular, both of them emphasize on instant interactions between audience and the host as the fun way to attract people from groups such as socializing and gaming. Unlike ordinary online media platform, live streaming platform has instantaneity and real-time interactive, its interface is different from other sites or general video platform. However, researches of livestream with multiple windows are limited. After making a user-centered design for the ease of using Multi-Window livestreaming platform, in accordance with the user experience element hierarchy diagram corresponding development of web interface design process to create the idea of the Hi-Fi design prototype which renders the page. Carried out the final stage after the actual operation, user interviews and expert interviews, as well as validate the platform interface design if it meets the user experience and needs. Also, make changes by the recommendations of interview, to complete the modified version website. It shows out the results that are able to satisfy the users such as the visibility, identification clearness of the system’s functional state, operate the floating window page, and make users more easily to use the website.. The results of this study provide the references for future research in relation to livestream interface design.
摘 要 i
表目錄 vi
圖目錄 vii
第一章 緒論 1
第一節 研究背景與動機 1
第二節 研究目的與問題 4
第三節 研究範圍與限制 5
一、開發工具 5
二、研究對象 5
三、研究限制 5
第四節 研究架構 6
第五節 名詞解釋 8
一、多視窗網路實況平台 8
二、使用者介面 8
三、痛點 8
四、人物誌 (Persona) 9
五、顧客旅程地圖 (Customer Journey Map) 9
第二章 文獻探討 11
第一節 網路影音實況平台 11
一、網路影音實況平台現況發展 11
二、線上實況觀眾使用行為與心理需求 14
三、小結 15
第二節 網頁使用者介面易用性探討 15
一、使用者經驗設計 (User Experience Design) 15
二、網站介面易用性 18
三、小結 25
第三章 研究方法 27
第一節 研究流程與設計 28
第二節 研究方法與步驟 29
一、使用者研究 29
二、網站架構設計法則 30
三、第一版原型X網頁修正與測試 32
四、改良版原型Y網頁成果與討論 33
第三節 研究工具 34
一、半結構式訪談大綱 34
二、顧客旅程地圖 (Customer Journey Map) 34
三、符合電玩主題實況觀眾之多視窗網站平台 34
第四節 資料分析 36
第五節 研究規劃與發展 37
一、既有網路實況平台案例探討 37
二、使用者研究分析 50
三、網頁內容規劃 57
四、介面規劃 58
第四章 研究結果與討論 61
第一節 第一版原型創作結果 61
第二節 專家訪談與使用者意見回饋 70
一、專家訪談結果 70
二、受測者實際操作訪談結果 74
第三節 改良版原型創作結果 77
第四節 網頁改良前後版本差異 86
第五章 結論與建議 91
第一節 結論 91
一、既有網路實況平台分析 91
二、實況觀看流程痛點與解決方案 92
三、符合易用性之多視窗實況平台介面設計 93
第二節 建議 94
一、研究方法及對象建議 94
二、適用於多視窗實況平台介面設計建議 95
三、未來展望 95
參考文獻 97
附錄一 使用者需求訪談大綱 105
附錄二 專家訪談大綱 106
附錄三 目標測試者實際操作訪談大綱 107
附錄四 專家背景資料 108

中文文獻
千鳥(2014)。網頁設計師的告白──隱藏在網頁間的設計心。台北市:加魁資訊。
古又羽(譯)(2011)。網頁介面設計模式(Designing Web Interfaces: Principles and Patterns for Rich Interactions)( B. Scott, T. Neil)。台北市:碁峯資訊。(原著出版年:2009)
朱志卿(2011)。影音分享網站使用性與介面設計之研究。國立雲林科技大學視覺傳達設計系碩士班碩士論文,未出版,雲林市。
吳國慶(譯)(2013)。人本X互動設計:有溫度的思考,讓設計滿足使用需求(原作者:A. Pratt, J. Nunes)。台北市:禾果文化。(原著出版年:2012)
李有仁、張書勳、林俊成 (2011)。影音分享網站使用者意圖之研究。資訊管理學報,第十八卷第一期(102年1月)53~76。
周陟(2010)。UI進化論 行動裝置使用者介面設計(User Interface Design for Mobile Devices)。台北市:上奇資訊。(原著出版年:2010)
周陟(2012)。網頁表裡:Web設計與構成解析(第二版)。台北市:上奇資訊。
林潔盈(譯)(2014)。玩設計 數位視覺再進化(原作者:J. Tselentis)。台北市:城邦文化。(原著出版年:2012)
林蕙如(譯)(2008)。Web+ 設計の黃金則 讓人留連忘返的網站設計關鍵(原作者:池谷義紀)。台北市:旗標。
唐碩(2014)。 服務設計工具包 Customer Journey Toolkit。未出版,上海市。
莊惠淳(譯)(2012)。操作介面設計模式 第二版(原作者:J. Tidwell)。台北市:碁峯資訊。(原著出版年:2010)
許郁文(譯)(2014)。多元裝置時代的網站UI/UX設計法則:打造出讓使用者完美體驗的好用介面(原作者:原田秀司)。新北市:博碩文化。(原著出版年:2013)
陳亦苓(譯)(2010)。ROCKET SURGERY MADE EASY:DIY一次搞定網站易用性問題(原作者:S. Krug)。台北市:上奇資訊。(原著出版年:2009)
陳芳智(譯)(2014)。如何設計好網站:Don’t Make Me Think(原作者:S. Krug)。台北市:上奇資訊。(原著出版年:2014)
陳威珞(2012)。JustinTV網路影音直播平台使用行為研究。國立中正大學電訊傳播研究所碩士學位論文,未出版,台中市。
黃朝秋(譯)(2014)。使用者導向設計(原作者:T. Lowdermilk)。台北市:碁峯資訊。(原著出版年:2013)
鄭尹惠(2014)。使用RWD的跨平台網頁介面設計之使用性研究-以中高齡者為對象。國立臺北教育大學理學院數位科技設計學系玩具與遊戲設計碩士班碩士論文,未出版,台北市。
謝育容(譯)(2008)。網站使用者中心策略:從觀念到食物最完整操作聖經+企業實例(原作者:武井由紀子、中島克彥、遠藤直紀)。台北市:城邦商業週刊。
魏澤群(2007)。優使性2.0(Usability 2.0)-網站經驗設計與使用者研究。台北市:網奕資訊。

英文文獻
Garrett, J.J. (2010). The Elements of User Experience: User-Centered Design for the Web and Beyond (2nd Edition). CA: New Riders
Liebert, R.M., & Liebert, L.L. (1997). Liebert & Spiegler’s personality: Strategies and issues. Pacific Grove, CA: Brooks/Cole
Nielson, J. (1993). Usability Engineering. Pacific Grove, CA: Morgan Kaufmann
網路文獻
(一)中文
36氪(2014年12月1日)。UX 設計師寫給 UI 新手的 7 個法則(上)。(檢索日期:2015年6月28日)取自http://www.inside.com.tw/2014/12/01/7-rules-for-creating-gorgeous-ui-part-1
36氪(2014年12月1日)。UX 設計師寫給 UI 新手的 7 個法則(下)。(檢索日期:2015年6月28日)取自http://www.inside.com.tw/2014/12/01/7-rules-for-creating-gorgeous-ui-part-2
Editor_Hank(2013年4月3日)。UI(使用者介面)到底是什麼?UX(使用者體驗)又是怎麼讓人混淆的?(檢索日期:2015年6月28日)取自http://www.inside.com.tw/2013/04/03/ryan-singer-on-what-ui-really-is
EGG (2014年4月17日) 。使用者中心設計是什麼?(檢索日期:2015年6月17日)取自http://designtongue.logdown.com/posts/194512-what-is-user-centered-design
FIND (2014年7月18日) 。資策會FIND: 2014年上半年消費者行為調查出爐(檢索日期:2015年6月27日)。取自http://www.find.org.tw/market_info.aspx?n_ID=7203
Lee, A.(2013年11月16日)。什麼是 Wireframe ?(檢索日期:2015年6月17日)取自http://blog.akanelee.me/posts/159788-what-is-wireframe
Lee, A.(2013年11月18日)。十大易用性原則。(檢索日期:2015年6月17日)取自http://blog.akanelee.me/posts/160115-top-ten-usability-principles
Lee, A.(2013年12月12日)。互動設計概論。(檢索日期:2015年6月17日)取自http://blog.akanelee.me/posts/166419-an-introduction-to-interaction-design
Lee, A.(2013年12月31日)。Guideline 的重要性。(檢索日期:2015年6月17日)取自http://blog.akanelee.me/posts/169176-the-importance-of-guideline
Lee, A.(2014年1月10日)。使用者經驗分層元素(檢索日期:2015年6月17日)取自http://akanelee.logdown.com/posts/175085-user-experience-stratification-elements
Lee, A.(2014年1月15日)。我是UID,不是UXD。(檢索日期:2015年6月17日)取自http://blog.akanelee.me/posts/175758-im-a-uid-is-not-uxd
LIVEhouse.in。LIVEhouse.in商標使用。(檢索日期:2015年6月28日)取自https://event.livehouse.in/zh-TW/about/mediakit.html
s34021501(2014年11月7日)。實況網站(歡迎推薦更多)。(檢索日期:2015年7月3日)取自http://guild.gamer.com.tw/wiki.php?sn=9701&n=%E5%AF%A6%E6%B3%81%E7%B6%B2%E7%AB%99%20(%E6%AD%A1%E8%BF%8E%E6%8E%A8%E8%96%A6%E6%9B%B4%E5%A4%9A)
Wasabii賽事中心(2014年1月17日) 。【直播任意門】「大中天」與「實況主」謎之關係?(檢索日期:2015年6月28日)取自http://www.wasabii.com.tw/contest/notice/Notice_content.aspx?K=24609&T=12&G=6
中央社 (2015年3月15日) 。世界冠軍然後呢?台灣電競產業缺重視。(檢索日期:2015年6月27日)取自http://www.cna.com.tw/news/firstnews/201503150061-1.aspx
有物報告 (2014年7月15日) 。線上直播(livestreaming)吃掉了電視最心疼的一塊肉。(檢索日期:2015年6月17日)取自http://www.bnext.com.tw/ext_rss/view/id/254050
阿里媽媽MUX(2014年8月12日) 。Material Design 引領的設計趨勢。(檢索日期:2015年6月28日)取自http://mux.alimama.com/posts/1300
翁書婷 (2015年3月31日) 。除了MeerKat ! 你應該要知道的台灣直播業5大關鍵。(檢索日期:2015年6月17日)取自http://www.bnext.com.tw/article/view/id/35815
翁書婷 (2015年4月13日) 。[專訪] Twitch來勢洶洶!台灣流量擠進全球Top 5,直播內容擴及音樂。(檢索日期:2015年6月17日)取自http://www.bnext.com.tw/article/view/id/35925
翁書婷 (2015年4月13日) 。網路直播超展開,大吸眼球。(檢索日期:2015年6月17日)取自http://www.bnext.com.tw/article/view/id/35911
悠識 (2015年2月5日) 。顧客旅程(Customer Journey) 工作坊。(檢索日期:2015年7月20日)取自http://edu.userxper.com/customer-journey-map-design-workshop/
現場直播(2015年3月14日)。維基百科-自由的百科全書。(檢索日期:2015年7月3日)取自https://zh.wikipedia.org/wiki/%E7%8F%BE%E5%A0%B4%E7%9B%B4%E6%92%AD
陳均輔 (2015年1月28日) 。2013年9月底止台灣上網人口(檢索日期:2015年6月27日)。取自http://www.find.org.tw/market_info.aspx?n_ID=8340
陳芷鈴 (2014年8月26日) 。[數位觀點] 為什麼Twitch選擇了Amazon而不是Google?(檢索日期:2015年6月17日)取自http://www.bnext.com.tw/article/view/id/33549
陳誌軒 (2014年7月29日) 。201407學習計畫_UI開發流程(檢索日期:2015年6月17日)取自http://116.118.128.105/blog/marshall/?p=105
愛范兒 (2014年7月2日) 。Google 拿出了能與蘋果一高下的設計準則:Material Desig。(檢索日期:2015年6月17日)取自http://technews.tw/2014/07/02/some-thing-about-google-material-design/
極客公園 (2014年9月2日) 。Twitch如何將遊戲直播做成10億美元的好生意?(檢索日期:2015年6月17日)取自http://www.bnext.com.tw/ext_rss/view/id/645495
蓋子™ (2014年8月6日)。[新聞] Twitch催生者Justin.tv宣告關站 將專注於發展遊戲直播服務。(檢索日期:2015年6月28日)取自http://www.gamebase.com.tw/forum/60053/topic/97381046/1
韓京呈 (2014年6月10日) 。2013年我國家庭寬頻現況與需求調查-個人篇(檢索日期:2015年6月17日)。取自http://www.find.org.tw/market_info.aspx?n_ID=7202
顏理謙 (2014年5月19日) 。傳YouTube欲以10億美元收購遊戲影音串流服務Twitch。(檢索日期:2015年6月28日)取自http://www.bnext.com.tw/article/view/id/32251
譯名(2012年12月14日) 。以使用者為中心的設計方法2-WIREFRAME, MOCKUP AND PROTOTYPE(檢索日期:2015年6月17日)。取自http://blog.phimedia.tv/2012/12/%E4%BB%A5%E4%BD%BF%E7%94%A8%E8%80%85%E7%82%BA%E4%B8%AD%E5%BF%83%E7%9A%84%E8%A8%AD%E8%A8%88%E6%96%B9%E6%B3%952%EF%BC%8Dwireframe-mockup-and-prototyp/
譯名(2014年11月25日) 。UI/UX學習筆記。(檢索日期:2015年6月17日)取自http://venetiachou.tumblr.com/post/103475371475/ui-ux

(二)英文
Bedford, A. (2014, February 16). Instructional Overlays and Coach Marks for Mobile Apps. Retrieved June 27, 2015, from http://www.nngroup.com/articles/mobile-instructional-overlay/
Flowers, E. (2011, April 16). Treatise on User Experience Design: Part 1. Retrieved June 27, 2015, from http://www.helloerik.com/treatise-on-user-experience-design-part-1
Google Inc. (2014) Material Design. Retrieved June 27, 2015, from http://www.google.com/design/spec/material-design/introduction.html
https://zh.wikipedia.Web2.0. (2015, May 21). In Wikipedia, the free encyclopedia. Retrieved July 6, 2015, from org/wiki/Web_2.0
Justin.tv. (2015, June 13). In Wikipedia, the free encyclopedia. Retrieved July 6, 2015, from https://zh.wikipedia.org/wiki/Justin.tv
Maiberg, E. (2015, January 31). Twitch Hits 100 Million Monthly Viewers. Retrieved June 28, 2015, from http://www.gamespot.com/articles/twitch-hits-100-million-monthly-viewers/1100-6425021/
Morris, B. (2014, January 15). Twitch 2013 Retrospective. Retrieved June 28, 2015, from https://zh.scribd.com/doc/199895598/Twitch-retrospective (電子書網址)
Nielsen Norman Group. (2013). User Experience Careers. Retrieved July 6, 2015, from http://media.nngroup.com/media/reports/free/User_Experience_Careers.pdf
Nielsen, J. (1995, January 1). 10 Usability Heuristics for User Interface Design. Retrieved June 27, 2015, from http://www.nngroup.com/articles/ten-usability-heuristics/
PewDiePie. (2015, June 25). In Wikipedia, the free encyclopedia. Retrieved July 6, 2015, from https://zh.wikipedia.org/wiki/PewDiePie
Saffer, D. (2009). THE DISCIPLINES OF USER EXPERIENCE. Retrieved June 28, 2015, from www.kickerstudio.com/2008/12/the-disciplines-of-user-experience/
Sinkula, M. (2015, Spring). WEB202 > The Elements of the User Experience. Retrieved June 27, 2015, from http://www.sccc.premiumdw.com/web202/the-user-experience/
Twitch. (2015, February 3). In Wikipedia, the free encyclopedia. Retrieved July 6, 2015, from https://zh.wikipedia.org/wiki/Twitch
Twitch.tv Inc. (2009). Twitch Brand Assets Guidelines. Retrieved June 28, 2015, from http://www.twitch.tv/p/brandassets
Ustream Inc. (2009). Ustream Brand Assets and Guidelines. Retrieved June 28, 2015, from http://www.ustream.tv/our-company/about/brand-guidelines

QRCODE
 
 
 
 
 
                                                                                                                                                                                                                                                                                                                                                                                                               
第一頁 上一頁 下一頁 最後一頁 top