簡易檢索 / 詳目顯示

研究生: 陳意淇
Yi-Chi Chen
論文名稱: 網頁與APP設計模式之品質評估研究
The Research of Quality Evaluation of Web and APP Design Patterns
指導教授: 黃世禎
Sun-Jen Huang
口試委員: 魏小蘭
Hsiao-Lan Wei
劉俞志
Yu-Chih Liu
學位類別: 碩士
Master
系所名稱: 管理學院 - 資訊管理系
Department of Information Management
論文出版年: 2019
畢業學年度: 107
語文別: 中文
論文頁數: 157
中文關鍵詞: 響應式網頁設計RWD自適應式網站設計AWD獨立網址行動版網頁設計M.dot行動應用軟體APP品質評估指標
外文關鍵詞: Adaptive Website Design, Dynamic serving, Quality Assessment Indicators
相關次數: 點閱:296下載:4
分享至:
查詢本校圖書館目錄 查詢臺灣博碩士論文知識加值系統 勘誤回報

  近年來,平台開發者為了因應平台使用者在行動裝置上的需求,數種網頁及行動應用軟體設計模式的類型被相繼提出,包含響應式網頁設計(RWD)、自適應式網站設計(AWD)、獨立網址行動版網頁設計(M.dot)和行動應用軟體(APP),但平台業主及開發設計者較難決定採用何種設計模式,故本研究透過網站與網頁應用軟體品質評估指標之文獻探討,與參考國發會政府網站的品質檢核項目,提出三大品質構面及共14項網頁與APP設計模式評估指標及評分方式,並採用工具檢測、使用者測試和研究者之評估方式,針對社群媒體、新聞媒體、電商平台共六個範例平台,評估其網頁和行動應用軟體設計模式的品質。經過評估檢測後,本研究首先分析個別範例平台之不同設計模式的品質評估結果,接著以各設計模式和其整體比較進行討論,再探討各平台類別較適合何種不同設計模式的組合作為開發的選擇。
  根據結果進行分析後,以單一設計模式而言,品質需求在於功能應用、載入反應速度和使用者體驗,建議選擇APP;品質需求在於資訊連結性和介面設計與版面配置,建議選擇AWD;品質需求在於平台能見度和資訊連結性,建議選擇RWD;若已有傳統網頁設計的平台系統,較難大幅地調整,則建議可增加開發M.dot。以設計模式組合而言,顧慮整體品質的社群媒體和品質需求在於多媒體應用、導覽架構設計之電商平台,較適合『傳統網頁設計+M.dot+APP』組合開發;以相容性和資訊搜尋易用性為考量的社群媒體和以整體品質考量的電商平台,較適合選擇『AWD+APP』組合開發;以功能和載入速度較為重要考量之新聞媒體,較適合選擇『RWD+M.dot+APP』組合開發;品質需求在於SEO、多媒體應用、系統使用和設計品質的新聞媒體,較適合選擇『RWD+APP』組合開發。


In order to respond to the needs of platform users on mobile devices recent these years, several types of web and mobile application software design patterns including responsive web design (RWD), adaptive website design (AWD), Separate URLs (M.dot) and mobile application software (APP) have been proposed. However, it is difficult for platform owners and developers to decide which design pattern is suitable for them. Therefore, this study explored the literature on the quality assessment indicators of websites and web applications, and proposed three quality structures based on the quality inspection project of the website of the NDC. There were three quality facets and totally 14 quality metrics. The scoring methods including tool testing, user testing and researcher evaluation were used to evaluate six sample platforms of three types of social media, news media and e-commerce. After evaluation and testing, this study analyzed the evaluation results of different design patterns for each of sample platforms, and then discussed each design pattern and its overall comparison. This study also further discussed the combination of different design patterns and their suitable planforms as a choice reference for platform owners and developers.
According to the analysis results of an individual design pattern, APP design patterns is recommended for the platforms whose quality requirements are functional applications, loading response speed and user experience. AWD design patterns is recommended for the platforms whose quality requirements are information connectivity and interface design and layout. RWD design patterns is recommended for the platforms whose quality requirements are platform visibility and information connectivity. If an existing platform has already developed traditional web design and it’s difficult to adjust greatly, the alterative of increasing the development of M.dot.is recommended. In terms of design pattern combination, if the social media platform concerns the overall quality, and e-commerce platform concerns the multimedia applications and navigation architecture design, the combination of the "traditional web design + M.dot+APP" is suitable for them. If the social media platform concerns the compatibility and Information Search Usability, and the e-commerce platform concerns the overall quality, the combination of the "AWD+APP" is suitable for them. If the functions and loading speed of news media platform are more important, the combination of the "RWD+M.dot+APP" is suitable for them. If the news media platforms whose quality requirements are SEO, multimedia applications, system use and design quality, the combination of the "RWD + APP" is suitable for them

摘要 I Abstract II 致謝 III 目錄 IV 圖目錄 VI 表目錄 VIII 第一章 緒論 1 1.1 研究背景 1 1.2 研究動機 3 1.3 研究目的 4 1.4 研究流程 5 第二章 文獻探討 7 2.1 響應式網頁設計(RWD) 7 2.2 自適應式網頁設計(AWD) 15 2.3 獨立網址行動版網頁設計(M.dot) 18 2.4 行動應用軟體(APP) 19 2.5 網頁及行動應用軟體設計模式類型比較 21 2.6 平台開發評估因素 23 第三章 研究方法 35 3.1 研究架構 35 3.2 研究方法 36 3.3 資料蒐集 37 3.2.1 網頁設計模式檢測方法與流程 38 3.2.2 範例平台於網頁設計模式篩選過程 40 3.4 網頁及行動應用軟體設計模式之品質評估指標 46 3.4.1. 品質評估指標分類說明 46 3.4.2. 品質評估指標操作型定義 47 3.4.3. 品質評估指標彙整說明 66 3.4.4. 使用者測試情境流程與問卷設計 71 第四章 研究結果分析 73 4.1 範例平台評估檢測之資料結果分析 73 4.1.1. Facebook於不同設計模式之評估結果分析 74 4.1.2. Dcard於不同設計模式之評估結果分析 82 4.1.3. 聯合新聞網於不同設計模式之評估結果分析 90 4.1.4. 風傳媒於不同設計模式之評估結果分析 98 4.1.5. Momo購物網於不同設計模式之評估結果分析 105 4.1.6. 蝦皮購物於不同設計模式之評估結果分析 113 4.2 使用者測試相關調查結果 120 4.3 研究結果分析討論 126 4.3.1 不同設計模式之成效分析 126 4.3.2 平台系統類別於設計模式組合之比較分析 135 第五章 結論與建議 137 5.1 學術上的貢獻 138 5.2 實務上的貢獻 138 5.3 研究限制 138 5.4 未來研究方向 139 參考文獻 140 附錄 146 附錄一、 使用者測試情境流程 146 附錄二、 使用者測試問卷內容 153

中文文獻
˙洪志元(2016).響應式網站異質性平台技術應用評估.國立臺北科技大學互動設計系碩士班.碩士學位論文
˙維基百科(2019).回應式網頁設計.轉自於:https://zh.wikipedia.org/wiki/%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1
˙久大行銷顧問(2019).響應式網站 Responsive Web Design.轉自於:https://www.gtmc.com.tw/msg/responsive-web-design.html
˙愛貝斯網路(2019).什麼是響應式網頁設計(Responsive Web Design).轉自於:https://www.ibest.tw/page01.php
˙一化網頁設計(2016).還在猶豫是否需要RWD? Google表明優先收錄響應式網站!.轉自於:https://www.webdesigns.com.tw/ework-mobile-first-indexing.asp
˙新視野多媒體(2005-2019).什麼是RWD網頁設計?.轉自於:https://www.newscan.com.tw/rwd/responsive-web-design.php
˙台中市政府資訊中心(2014).第三十五期電子報.第二頁
˙鄭尹惠(2014).使用RWD的跨平台網頁介面設計之使用性研究-以中高齡者為對象.國立臺北教育大學數位科技設計學系(含玩具與遊戲設計碩士班).碩士學位論文
˙王任輝(2015).電子商務網站RWD介面設計法則之使用者經驗及眼動行為研究.國立中山大學資訊管理學系研究所.碩士學位論文
˙賴家駿(2016).使用HTML5實作跨平台口碑系統-以RWD整合為基礎設計.義守大學資訊管理學系碩士班.碩士學位論文
˙蘇子淵(2016).跨平台網頁介面RWD對於網頁瀏覽之視覺傳達的影響.國立臺中科技大學商業設計系碩士班.碩士學位論文
˙胡瑋(2017).影響採用RWD設計網頁意圖之因素.國立中正大學資訊管理系研究所.碩士學位論文
˙魏駿(2018).基於RWD之網站設計研究.國立高雄海洋科技大學電訊工程研究所.碩士學位論文
˙江麗惠(2018).響應式網頁的可用性研究.國立臺灣藝術大學圖文傳播藝術學系.碩士學位論文
˙Kelvin(2013).Responsive Web Design (RWD) 和 Adaptive Web Design (AWD),WEB DESIGN,轉自於:https://www.xenyo.com/blog/responsive-web-design-rwd-he-adaptive-web-design-awd
˙Nadine Li(2018).行動網站傻傻搞不清?RWD響應式網站 vs AWD自適應式網站.A Medium Corporation.轉自於:https://medium.com/nadine-mase/the-different-about-responsive-website-design-adaptive-web-design-92712d2ba7ab
˙黃世瑋,林彥呈,廖慶華(2016).應用層級程序法 (AHP) 與灰關聯分析法 (GRA) 探討大學生智慧型手機之選購因素.技術學刊,第31卷第3期
˙國家發展委員會(2015).政府網站版型與內容管理規範。
˙熊建刚(2018).淺談響應式Web設計與實現思路.程式前沿.前端開發.轉自於:https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/2155/#outline__1
˙Lucy(2018).不會寫CSS也能懂!如何選擇RWD或是AWD?.Medium.轉自於:https://medium.com/@282714/%E4%B8%8D%E6%9C%83%E5%AF%ABcss%E4%B9%9F%E8%83%BD%E6%87%82-%E5%A6%82%E4%BD%95%E9%81%B8%E6%93%87rwd%E9%82%84%E6%98%AFawd-2b4057e92d4
˙E. link(2019).行動網站、響應式網站是什麼?有什麼優點?.轉自於:https://appseoweb.com/Web_Design/%E8%A1%8C%E5%8B%95%E7%B6%B2%E7%AB%99%E8%88%87RWD%E9%9F%BF%E6%87%89%E5%BC%8F%E7%B6%B2%E7%AB%99%E6%AF%94%E8%BC%83/50
˙張元(2012).McCall的軟件質量模型.轉自於:http://blog.sina.com.cn/s/blog_7908f2d7010186xv.html
˙DeanYeh(2013).ISO 25010簡介.轉自於:https://dotblogs.com.tw/dean/2013/01/10/87115
˙Google開發指南(2019).獨立網址.轉自於:https://developers.google.com/search/mobile-sites/mobile-seo/separate-urls?hl=zh-tw#top_of_page
˙愛貝斯網路.RWD網站和手機APP的差別.轉自於:https://www.ibest.com.tw/service/responsive_app.php
˙賴明亨(2017).Alexa網站流量排名,看出網站真正價值!.轉自於:http://www.pcdiy.com.tw/detail/2480
˙Pseric.Sizzy 線上測試自適應設計 RWD 在各種 iOS、Android 行動裝置顯示效果.免費資源網路社群.轉自於:https://free.com.tw/sizzy/
˙葉智銘(2014).響應式網頁設計(Responsive Web Design, RWD)簡介.台中市政府資訊中心專題報導.第三十期電子報.103年12月18日發行
˙陳登豪(1996).拍賣網站品質評估模式之研究.國立雲林科技大學視覺傳達設計系碩士班.碩士學位論文
˙何祖鳳、陳俊榮、陳銘欽(1998).網路教學系統評估準則之研究.遠距教育.卷期:7.頁20-29.期刊論文
˙翁慧娟(1998).我國大學圖書館網站品質評估之研究.國立臺灣大學圖書資訊學研究所.碩士學位論文
˙林文琦(2002).教學網站專家評估系統之設計與建置.國立交通大學傳播所.碩士學位論文
˙何冠霆(2006).國內購物網站功能設計之自動化評估系統的建立.中國文化大學資訊管理所.碩士學位論文
˙歐陽崇榮、薛志峰、關中、童瓊慧(2006).公共圖書館網站之評估.臺北市立圖書館館訊.23卷3期 (2006 / 03 / 01).P55 - 79
˙蔡承穎(2008).公共圖書館中文版兒童網站評鑑之研究.國立政治大學圖書資訊研究所.碩士學位論文
˙張俊輝(2013).以層級分析法評估教學網站品質之研究.國立屏東科技大學資訊管理系所.碩士學位論文
˙國發會(2009、2013、2019).政府網站營運績效檢核計畫.政府網站營運交流平台
˙林萬青(2009).遷台後中華民國紅十字會總會領導之研究.台灣師範大學政治學研究所碩士論文
˙阮明淑(2012).圖書館學與資訊科學大辭典.國家教育研究院
˙王文科(1986).教育研究法.頁350-354.五南圖書出版有限公司
˙Victor(2018).【SEO最新情報】Google Page Speed測速工具大改版.轉自於:https://www.seoseo.com.tw/article_detail_649.html
英文文獻
˙Marcotte E.(2010).Responsive Web Design, A List Apart: No. 306.retrieved from:https://alistapart.com/article/responsive-web-design
˙W3Schools(1999-2019).CSS Responsive.retrieved from:https://www.w3schools.com/css/css_rwd_intro.asp
˙Sandijs Ruluks(2014).9 basic principles of responsive web design.FROONT Open Design Blog.retrieved from:http://blog.froont.com/9-basic-principles-of-responsive-web-design/
˙Annarita Tranfici(2013).Understanding Responsive Web Design: Clear Concepts and Practical Applications.retrieved from:https://www.sitepoint.com/responsive-web-design-tips-and-notes/
˙Annie Dai(2017).What is AWD? 5 Great Adaptive Web Design Examples for Inspiration.retrieved from:https://medium.muz.li/what-is-awd-5-great-adaptive-web-design-examples-for-inspiration-3218e9f624ea
˙Qingtang Liu, Jian Hu, Linjing Wu & Jingxiu Huang(2015).A Web Page Design Method for Multi-terminal Devices.2015 International Symposium on Educational Technology (ISET).27-29 July 2015.Wuhan, China.DOI:10.1109 / ISET.2015.10
˙Monica Ciolacu & Rick Beer(2016).Adaptive user interface for higher education based on web technology.2016 IEEE 22nd International Symposium for Design and Technology in Electronic Packaging (SIITME).20-23 Oct. 2016.Oradea, Romania.DOI:10.1109/SIITME.2016.7777299
˙Payal Das & G P Sajeev(2017).Time- Driven Adaptive Web Personalization System for Dynamic Users.2017 IEEE International Conference on Computational Intelligence and Computing Research (ICCIC).14-16 Dec. 2017.Coimbatore, India.DOI:10.1109/ICCIC.2017.8524198
˙Andreas Sommer & Stephan Krusche(2013).Evaluation of cross-platform frameworks for mobile applications.retrieved from:https://ase.in.tum.de/lehrstuhl_1/research/paper/sommer2013crossplatform.pdf
˙Peter Eeles (2005).Capturing Architectural Requirements.IBM Developer.retrieved from:https://www.ibm.com/developerworks/rational/library/4706.html#N100A7
˙Jim A. McCall, Paul K. Richards & Gene F. Walters(1977).Factors in Software Quality. Volume I. Concepts and Definitions of Software Quality
˙ISO(2011).ISO / IEC 25010:2011(en).Online Browsing Platform (OBP).retrieved from:https://www.iso.org/obp/ui/#iso:std:iso-iec:25010:ed-1:v1:en
˙Jakob Nielsen(1994).10 Usability Heuristics for User Interface Design.retrieved from:https://www.nngroup.com/articles/ten-usability-heuristics/
˙Jakob Nielsen(1993).Usability Engineering.ISBN:0125184069, 9780125184069
˙Gehrke & Turban(1999).Determinants of successful website design: Relative importance and recommendations for effectiveness.the 32nd Hawaii International Conference on System Sciences
˙Eleanor T. Loiacono(2000).WebQual^TM: A Web site quality instrument.Doctoral Dissertation.ISBN:0-599-90483-6
˙Liu and Arnett(2000).Exploring the factors associated with Web site success in the context of electronic commerce.Information & Management 38 (2000) 23-33
˙Chao H.(2002).Assessing the quality of academic libraries on the Web: The development and testing of criteria.Library & Information Science Research.v24.n2.p169-194
˙Kim and Lee(2002).Critical design factors for successful e-commerce systems.Behaviour & Information Technology.Volume 21.2002 - Issue 3
˙Zhang, P. and Von Dran, G. M.(2002).User expectations and ranking of quality factors in different web site domains.International Journal of Electronic Commerce/Winter 2001–2002.Vol. 6.No. 2.pp. 9–33
˙Tarafdar and Zhang(2006).Analysis of Critical Website Characteristics: A. Cross Category Study of Successful Websites.Journal of Computer Information Systems.Volume 46.2005 - Issue 2
˙Tsai, W.H., Chou, W.-C., and Lai, C.-W.(2010).An effective evaluation model and improvement analysis for national park websites: A case study of Taiwan.Tourism Management.Volume 31.Issue 6.December 2010.Pages 936-952
˙Google Page Speed Insights(2019).About PageSpeed Insights.retrieved from:https://developers.google.com/speed/docs/insights/v5/about?hl=zh-TW
˙Akamai Technologies(2017).State of Online Retail Performance Report.2017 Holiday Retrospective.Pages 7

QR CODE