臺灣博碩士論文加值系統

近幾年在台灣使用手機、平板瀏覽網站的需求量越來越大，由於瀏覽網站的裝置大小不同，因此對於傳統網頁在手機及平板上觀看時，會產生不易閱讀的問題。而網站首頁為使用者第一個接觸的頁面；因此如何把首頁呈現方式及風格給予使用者好的瀏覽體驗是值得思考的標竿。
本研究將網頁分成三個部分說明：(1)手機版網頁(2)自適式網頁(3)響應式網頁，並從中瞭解各個網頁特性及差異。研究方法採用內容分析法，針對已有建置響應式網頁之大專院校校園入口網站進行分析，以質轉量的方式分析各大專院校校園入口網站功能，藉此瞭解校園網站是如何設計，及如何將傳統校園網頁成功轉型為響應式網頁。
研究發現，目前大專院校不分公立、私立及體系，皆以招生為目的做網頁內容資訊設計；建置大專院校校園響應式入口網站比例也逐漸上升。版型偏好使用主體為流動、字型標題偏好使用襯線字體；內文偏好使用非襯線字體；網頁色彩計畫會因校徽為出發點做設計，偏好使用冷色調色彩。經大專院校校園網站調查結果與文獻之結果改善視傳系網站設計，統整其過程並建立學校校園入口網站之響應式設計準則，以協助後續設計師、決策參與者。校園入口網站建置參考原則如下：
1. 為使網站設置目的聚焦，決策者需明確決定網站目標。
2. 網頁色彩應避免純度過高的顏色，在色彩透明度上應適度，避免瀏覽網頁上視覺上的負擔，網站風格需具一致性。
3. 對於有無搜尋目標的使用者，設置動態輪播式橫幅在網站上方，能吸引使用者注意力，並遵守三次點擊規則。

In recent years, there has been an increasingly demand for mobile devices and tablets browsing websites in Taiwan. Due to the vary sizes, it is difficult to read when viewing desktop-based web on mobiles and tablets. Therefore, giving the user a good browsing experience by a suitable layout to present the homepage and style of the homepage is worth considering.
This study divides the webpage into three parts: (1) Mobile web (2) Adaptive web (3) Responsive web, and understand the characteristics and differences of each webpage. The research method is content analysis method to analyze the university campus portals that are already responsive web pages, and analyzes the functions of campus entrance websites of universities in a quality manner to understand how campus websites are designed. Additionally, successfully transforming a traditional campus web page into a responsive web page is also an essential strategy today.
The study found that the current university, regardless of public, private and system, is designed for the purpose of enrollment. The proportion of building responsive portals for universities is gradually increasing. The layout preferences are mostly fluid, the font title prefers is the serif; the text prefers to use the sans serif; the web color scheme will be designed based on the school badge, preferring to use cool color. The results of the university campus website survey and the results of the literature improve the visual communication website design, integrate the process and establish responsive design guidelines for the school campus entrance website to assist subsequent designers and decision-making participants. The reference principles for the construction of the campus entrance website are as follows:
1. In order to focus on the purpose of setting up a website, decision makers need to clearly determine the goals of the website.
2. The color of the webpage should avoid the color of too high purity. It should be moderate in color transparency, avoiding the visual burden on the webpage, and the website style should be consistent.
3. For users with or without search targets, set a dynamic carousel banner on the top of the site to attract user’s attention and follow the three-click rule.

目錄
明志科技大學碩（博）士學位論文指導教授推薦書 I
明志科技大學碩士學位論文口試委員審定書 II
致謝 II
中文摘要 IV
Abstract V
目錄 VII
圖目錄 IX
表目錄 XI
第一章 緒論 1
1-1 研究動機 1
1-2研究背景 2
1-3 研究目的 3
1-4研究問題 3
1-5研究架構 4
第二章 文獻探討 6
2-1校園入口網站及使用者經驗 6
2-2手機版網頁 10
2-3自適式網頁 12
2-4 響應式網頁 13
2-5小結 17
第三章 研究方法 19
3-1樣本說明 20
3-2界定單位與類別分析 20
3-3樣本分析 22
第四章 研究結果 23
4-1響應式網頁現況與分析 23
4-1-1網站版型分析 30
4-1-2 網站導覽列及選單分析 32
4-1-3校園入口網站內容與功能 35
4-2響應式網頁設計需求 42
4-3明志科大視傳系網頁改善前分析 44
4-4明志科大視傳系網頁設計改善過程 46
4-5明志科大視傳系網頁改善比較 51
4-6響應式網頁的原則建立 55
4-7小結 57
第五章 結論與建議 59
5-1 結論 59
5-2 建議 60
5-2-1 給設計師的建議 60
5-2-2給決策參與者的建議 61
5-3總結 62
參考文獻 64
英文部分 64
中文部分 67

圖目錄
圖1- 1電腦及手機上網率 2
圖1- 2 研究架構 4
圖2- 1 網頁及網站的關聯 7
圖2- 2 使用者經驗 8
圖2- 3 網站設計三大領域關係圖 9
圖2- 4 手機版網頁示意圖 10
圖2- 5使用者瀏覽手機網頁偏好示意圖 11
圖2- 6不同螢幕尺寸裝置 12
圖2- 7主體為流動版型 13
圖2- 8欄內容下排版型 14
圖2- 9 版面配置位移版型 14
圖2- 10微小調整版型 15
圖2- 11 畫布外空間利用版型 15
圖2- 12 響應式及自適式不同之處比對圖 17
圖4- 1 大專院校響應式網站設置比例 23
圖4- 2磚牆式分類公告 31
圖4- 3頁籤式分類公告 31
圖4- 4 全域導覽 32
圖4- 5 麵包屑導覽 33
圖4- 6 頁首浮動頂端、回至最上層按鈕 40
圖4- 7 行動優先漸進增強 42
圖4- 8 明志科技大學 44
圖4- 9 明志科大視傳系選單呈現方式 45
圖4- 10 視傳系欲修改網頁設計樣式 47
圖4- 11 視傳系欲修改成響應式網頁選單展開前 48
圖4- 12 視傳系欲修改成響應式網頁選單展開後 49
圖4- 13 網頁錨點功能示意圖 49
圖4- 14 視傳系響應式網頁成果 50
圖4- 15 網站建置流程 55
圖4- 16 系統架構 56
圖4- 17 網站設計流程 58

表目錄
表2- 1 響應式Media Queries常見查詢 16
表4- 1 各大專院校響應式網頁調查結果 24
表4- 2 各大專院校配色調查 26
表4- 3 教育部公告大專校院網頁建置參考原則 29
表4- 4 版型設置情形 30
表4- 5 各大專校院分眾導覽使用情況 34
表4- 6 依校園紀事與得獎＞最新消息與公告＞招生 36
表4- 7 校園紀事與得獎＞招生＞最新消息與公告 36
表4- 8 招生＞校園紀事與得獎＞最新消息與公告 37
表4- 9 招生＞最新消息與公告＞校園紀事與得獎 37
表4- 10 最新消息與公告＞校園紀事與得獎＞招生 37
表4- 11 各大專院校使用輪播式橫幅概況 39
表4- 12 各大專院校網站語言提供情形 41
表4- 13 首頁比較 51
表4- 14 主要內容比較 52
表4- 15 導覽列比較 53
表4- 16 首尾比較 54

英文部分
Aaron Gustafson (2011) . Adaptive Web Design. 2017年03月26日，取自：http://kammerkunst.de/data/Adaptive-Web-Design.pdf
Alessandra (2010) .Mobile Web Design. 2017年03月26日，取自：http://abduzeedo.com/mobile-web-design
Amelia Marschall-Miller (2013) Designing for Mobile Websites using Responsive Design. 2017年03月26日，取自：http://www.dnnsoftware.com/Portals/0/Whitepapers/Responsive_Design_White_Paper.pdf
Bruce Lawson (2012) .Why We Shouldn’t Make Separate Mobile Websites. 2017年03月28日，取自：https://www.smashingmagazine.com/2012/04/why-we-shouldnt-make-separate-mobile-websites/
Dwyer, S. (2009). Progressive Enhancement: What It Is, And How To Use It? Smashing Magazine.
EffectiveUI (2014). Mobile Website Design: Responsive, Adaptive Or both? 2017年03月29日，取自：http://www.slideshare.net/effectiveui/mobile-website-design-responsive-adaptive-or-both
Ethan Marcotte (2010) . A List Apart :Responsive Web Design.2017年05月03日，取自： https://alistapart.com/article/responsive-web-design０
Garrett Goodman (2013) . Responsive vs. Adaptive Design: Which Is Best for Publishers? 2017年05月03日，http://www.huffingtonpost.com/garrett-goodman/adaptive-design_b_2344569.html
Garrett,JJ (2002) . THE ELEMENTS OF USER EXPERIENCE.2018年06月10日，取自：http://wireframe.vn/books/The%20Elements%20of%20User%20Experience.%20User-Centered%20Design%20for%20the%20Web%20and%20Beyond%20-%202nd%20Ed%20[New%20Riders,%202011].pdf
Jakob Nielsen (2012) .Mobile Site VS. Full Site. 2017年1月12日，取自：https://www.nngroup.com/articles/mobile-site-vs-full-site/
Jeremy Girard (2016) . The Future of Web Design: Combining Responsive With Adaptive Design.2017年1月10日，取自：https://www.uxpin.com/studio/blog/the-future-of-web-design-combining-responsive-with-adaptive-design/
Jerry Cao (2015 ). Responsive VS. Adaptive Design: What's the best choice for Designers? 2017年1月10日，取自：https://www.uxpin.com/studio/blog/responsive-vs-adaptive-design-whats-best-choice-designers/
Miller, G. A. (1956). The magical number seven, plus or minus two: Some limits on our capacity for processing information. Psychological review, 63(2), 81.
Jon Raasch (2010) . How To Build A Mobile Website. 2017年1月10日，取自：https://www.smashingmagazine.com/2010/11/how-to-build-a-mobile-website/
Shari Thurow (2014). User Experience Myth Or Truth: The Three-Click (Or Tap) Rule.2018年5月16日，取自：From:https://marketingland.com/user-experience-myth-truth-three-click-tap-rule-104760
Kelvin (2013) .Responsive Web Design (RWD) and Adaptive Web Design (AWD). 2017年3月21日，取自：http://www.xenyomedia.com/blog/134/responsive-web-design-rwd-和-adaptive-web-design-awd
Luke Wroblewski (2012) . Multi-Device Layout Patterns.2017年3月21日，取自：https://www.lukew.com/ff/entry.asp?1514
Pete LePage (2017) . Google Developer. Responsive Web Design Basics.
2018年05月30日，取自：https://developers.google.com/web/fundamentals/design-and-ui/responsive/?hl=zh-tw
Ryan Boudreaux (2013) . What is the difference between responsive vs. adaptive web design? 2017年2月17日，取自：http://tek.io/2pFHZLv
Janie Kliever (2015 ). 10 ways to improve typography in your designs.2017年2月17日，取自: https://www.canva.com/learn/typography-design/
Newman, M. W., & Landay, J. A. Sitemaps, storyboards, and specifications:
A skech of web site design practice. NewYork, In Proc. Of the DIS2000, ACM,263-274, 2000.
Newman, M. W., & Landay, J. A. (2000). Sitemaps, storyboards, and specifications: a sketch of Web site design practice. In Proceedings of the 3rd conference on Designing interactive systems: processes, practices, methods, and techniques (pp. 263-274). ACM.
Nielsen,.J. & Loranger,H.（2006）。Prioritizing Web Usability.California,Berkeley:New Riders Press.

中文部分
王昭國（1985）。如何發揮廣告效果。台北：大展。
香西睦（2017）。這樣O那樣X！一看就懂的UI設計與資訊編排技巧。台北市：旗標。
柯霖廷（2015）。跨視窗尺寸網頁設計實錄。新北市：博碩。
原田秀司 (2014) 。多元裝置時代的網站UI/UX設計法則：打造出讓使用者完美體驗的好用介面（許郁文譯） 。新北市：博碩文化。
莊淇銘（2013）。十二年國教的危機與因應。臺北市：沙鷗國際多媒體。
陳惠貞（2017）。一步到位！RWD網頁程式設計－用HTML5、CSS3、Bootstrap打造響應式網頁。台北市：旗標。
黃金鴻 (2017) 。網頁就是這麼疊出來的。台北市：松崗。
黃政傑（2014）。少子化教育問題的解決宜有整體規劃。黃秀霜（主編），少子化的教育因應策略（P.3-P.11）。臺北市：五南。
詹志煌（譯） (2016). 快速精通Bootstrap（原作者：Snig Bhaumik）。新北市：博碩文化。
賴瓊琦（1996）。設計的色彩心理：色彩的意象與色彩文化。台北：視傳文化事業有限公司。
施威銘 (2006)。Dreamweaver 8魔法書。台北：旗標。
蘇中信、吳訂宜、洪宗德 (2012) 。內容分析法之回顧與分析：以台灣商管期刊為對象。弘光學報,68期。
陳亭羽、黎高維（2005）。網路廣告形式對吸引消費者注意之實驗分析，管理與系統，12（2）：1-31。
孫傳峯 (2016) 。適應性網頁設計-Responsive web design(RWD)。電腦科技電子報,228期。
艾爾森數位有限公司（2015）。淺談網站流行趨勢“一頁式網站”的獨特魅力。2018年05月21日，取自https://goo.gl/VvlI6X
若維設計 (2015)。響應式設計與網站前瞻性設計。2017年1月18日，取自：https://www.slideshare.net/nowill/rwd-49070813
國家發展委員會（2016）。105年持有手機民眾數位機會調查報告。2017年3月20日，取自：https://goo.gl/MrWivi
國家教育研究院 (1995) 。內容分析法。2017年3月20日，取自：http://terms.naer.edu.tw/detail/1683205/
國家發展委員會（2015）。政府網站服務管理規範。政府網站營運交流平台。2018年5月21日，取自：https://www.webguide.nat.gov.tw/cl.aspx?n=4
遠見研究調查(2108)。2018最佳大學排行榜。2018年07月05日，取自https://gvsrc.cwgv.com.tw/?p=1967
財團法人台灣網路資訊中心 (2016) 。2016年台灣無線網路使用調查報告。2017年4月20日，取自：http://www.twnic.net.tw/download/200307/20170109c.pdf
教育部 (2009)。大專校院網頁建置參考原則。2018年05月27日，取自：https://www2.nuk.edu.tw/lib/e-news/20090327/news-page-02.htm
王任輝（2015）。電子商務網站RWD介面設計法則之使用者經驗及眼動行為研究。國立中山大學資訊管理學系研究所碩士論文。
邱伯清（2004）。網頁介面愉悅性之研究。國立台灣科技大學設計研究所碩士論文。
李俊宏（1995）。網頁設計原則的研究：以大專院校首頁設計為例。國立雲林技術學院工業設計研究所碩士論文。
蕭國淳（2005）。網頁廣告呈現方式與瀏覽動機對於使用者視覺注意與項目記憶的影響。國立台北科技大學工業工程與管理系碩士班學位論文。
陳丁榮 (2010)。校園入口網站規劃與實作。國立交通大學理學院科技與數位學習學程碩士班學位論文。
李星宏（2001）。台灣企業網站素質之前因後果─探索式研究。國立中正大學企業管理研究所碩士論文。
周俊宇 (2010) 。手機網頁介面之使用性研究。明道大學設計學院碩士班學位論文。
廖祐誠 (2015) 。校園網站設計原則與條件之研究-以明志科技大學為例。明志科技大學視覺傳達設計系碩士班學位論文。
蘇子淵(2016)。跨平台網頁介面 RWD 對於網頁瀏覽之視覺傳達的影響。臺中科技大學商業設計系碩士班學位論文。
許誌謙(2017)。響應式網頁設計元素對使用者經驗影響之研究。國立臺中教育大學數位內容科技學系碩士班學位論文。
蕭國淳（2004）。網頁廣告呈現方式與瀏覽動機對於使用者視覺注意與項目記憶的影響。國立臺北科技大學工業工程與管理系所碩士論文。