響應式網頁設計於桌上型電腦與智慧型手機之評價研究

Research on Evaluating Performance between Desktop and Mobile Interfaces of Responsive Web Design

許子凡(Tzu-Fan Hsu)；王曉今(Hsiao-Chin Wang)

響應式網頁設計 ； 設計評價 ； Responsive Web Design ； Design Evaluation

商業設計學報

23期（2019 / 12 / 01）

33 - 45

繁體中文

隨著行動上網的普及，行動優先的概念逐漸主導了網頁設計，追求跨設備的響應式網頁已成為目前網頁設計的主流，故基於此一跨設備的瀏覽趨勢，本研究針對響應式網頁在桌上型電腦與智慧型手機，就其視覺設計與使用介面之評價予以比較探討。本研究設計分為兩階段，階段一係以獨立樣本t檢定方式為主，以網頁刺激物在不同載體裝置的「響應式介面」作為自變數，再配合文獻所歸納之「網頁設計評量」指標作為應變數進行評估，階段二則把整體評價與各個子項目的關聯施以迴歸分析，以探討其間的關聯狀態，最後共歸納出三點結論，玆提供響應式網站在設計優化之參考：（1）桌上型電腦於響應式網站的瀏覽，在視覺設計面向所感受到的美感性與一致性，會較智慧型手機的表現為佳，但舒適性上則未有明顯不同。（2）響應式網站在桌機端與手機端的介面操作上，人們對於順暢性、回饋性、易用性等表現雖給予正面評價，不過兩者間的差異並未達顯著。（3）視覺設計與介面操作兩個面向在響應式網站的整體評價上，前者以美感性因子具較高之權重，後者則是以易用性與回饋性擁有較大的影響。

Because of the increasing popularity of mobile Internet access, web pages that provide priority for mobile first are gradually leading the field of web design. Therefore, Responsive Web Design (RWD), which is designed to respond to different devices, has become the mainstream of current web design. Based on this trend, this study will compare responsive web pages on computers and smart phones and evaluate their visual design and user interface. This study is divided into two phases. First, this study used an independent sample t-test. The independent variable is the ＂responsive interface＂ of web stimuli on different devices. The dependent variable is the ＂web design assessment＂ indicator that is synthesized from the literature. In the second phase, this study used regression analysis to explore the state of association between the overall evaluation and each subproject. This study summarizes three conclusions that can be used as a reference for optimizing Responsive Web Design (RWD) design. First of all, as far as visual design is concerned, when users use a desktop computer to browse a responsive website, the beauty and consistency they feel will be better than using a smart phone. But in terms of comfort, there is no significant difference. The second is that although the users have positive comments on the smoothness, feedback and ease of use of the responsive website on the desktop and mobile phones, the difference between the two devices has not been significant. Finally, in terms of the overall evaluation of the responsive website, users pay more attention to the aesthetic factors in visual design, and the ease of use and feedback of interface operations.

1. 張琬翔,尹玫君(2013)。從學習觀點探討教育網站評鑑之內涵。教育學誌，29，79-104。
   連結：
2. 蘇子淵,何宏文(2015)。跨平台網頁介面 RWD 對於網頁瀏覽之視覺傳達的影響。商業設計學報，19，19-38。
   連結：
3. 37DESIGN（2018），〈你的網站落伍了嗎？ 從網頁設計的發展，檢視你的網站是否過時〉，網址：https://www.37design.com.tw/blog/the-history-of-website-development（上網日期：August 10, 2019）
4. EZTRUST（2016），〈RWD 響應式網頁設計優/缺點限制〉，網址：https://www.eztrust.com.tw/html/rwd/04.aspx（上網日期：August 15, 2019）
5. Frain, B.(2012).Responsive Web Design with HTML5 and CSS3.Birmingham:Packt Publishing Ltd..
6. Hussain, A.,Mkpojiogu, E.(2015).The Effect of Responsive Web Design on the user Experience with Laptop and Smartphone Devices.Journals Technology,77(4),41-47.
7. Marcotte, E.(2011).Responsive Web Design.New York:A Book Apart.
8. MEDIUM（2017），〈2017 網頁設計流行趨勢 Web Design Trend〉，網址： https://ppt.cc/futsmx （上網日期：August 13, 2019）
9. Target（2018），〈關注 2019 年 7 種尖端網頁設計趨勢〉，網址：https://ppt.cc/f2GjOx（上網日期：August 20, 2019）
10. U.S. Web Design Standards (2017) , “A design system for the federal government. ” , website : https://playbook.cio.gov/designstandards/(Accessed: August 10, 2019)
11. Wroblewski, L.,Gunji-Ballsrud , J.(2002).Site-Seeing: A Visual Approach to Web Usability.New York:John Wiley & Sons, Inc..
12. Luke Wroblewski (2012), “Mobile Fist” , website:https://www.lukew.com/presos/preso.asp?26 (Accessed: August 23, 2019)
13. Zi 字媒體（2017），〈網頁設計中文字排版的 10 點技巧〉，網址：https://zi.media/@yidianzixun/post/KLjajx（上網日期：August 1, 2019）
14. 王曉今,許子凡(2018)。從政府機關、設計競賽、學術分析面向探討網站設計評量之共同性。2018 虛實 X 跨界研討會，桃園:
15. 吳敏瑄,林頌堅(2006)。網頁的美感概念及設計原則之初步研究研究問題與方法。RALIS 2006 Autumn Workshop of Recent Advances in Library and Information Science
16. 呂國泰(2019).讓響應式（RWD）網頁設計變簡單：Bootstrap 開發速成（第二版）.台北:碁峰出版社.
17. 宋長岳(2011)。國立雲林科技大學視覺傳達設計系碩士班。
18. 林哲宏(2005)。中華大學資訊管理學系。
19. 胡薏菡(2005)。長庚大學工業設計研究所。
20. 財團法人資訊工程策進會（2018），〈台灣人更黏手機了！近 8 成民眾每天使用手機逾 2 小時〉，網址：https://www.iii.org.tw/Press/NewsDtl.aspx?nsp_sqno=2081&fm_sqno=14（上網日期：August 2, 2019）
21. 國家發展委員會（2017），〈政府網站服務管理規範〉，網址：https://www.webguide.nat.gov.tw/cp.aspx?n=554（上網日期：August 1, 2019）
22. 許銘文(2006)。國立雲林科技大學視覺傳達設計系碩士班。
23. 陳珮瑩(2005)。銘傳大學設計管理研究所。
24. 陳惠真(2017).一步到位！RWD 網頁程式設計：用 HTML5、CSS3、Bootstrap 打造響應式網頁.台北:旗標出版社.
25. 傅小貞(2014).行動設計之鑰: 打造出讓使用者一見鍾情的手機 APP UI UX 設計.台北:松崗數位文創股份有限公司.
26. 路蓮婷(2002)。國立暨南國際大學公共行政與政策學系。
27. 劉光夏,周士邦,王玲玲(2011)。網站視覺設計之評量。設計與環境學報，12，49-69。
28. 歐陽誾,林姿妙(2002)。兒童學習網站評鑑工具之發展─預試階段。臺南師院學報，35，155-179。
29. 蔡博元(2012)。網頁設計之評鑑指標─以大學網頁評鑑為實證。2012 財經學術研討會，新北:
30. 鄧文淵,文淵閣工作室(2017).學好跨平台網頁設計：HTML5、CSS3、JavaScript、jQuery 與Bootstrap 超完美特訓班.台北:碁峰出版社.
31. 謝建成,劉至逢(2009)。大學圖書館網站使用性評估之探討。教育資料與圖書館學，47(2)，163-198。