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

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

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

《商業設計學報》 23期 (2019/12) Pp. 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.

並列關鍵字

Responsive Web Design ； Design Evaluation

參考文獻

王曉今、許子凡（2018），〈從政府機關、設計競賽、學術分析面向探討網站設計評量之共同性〉，2018 虛實 X 跨界研討會，桃園：銘傳大學主辦。

吳敏瑄、林頌堅（2006），〈網頁的美感概念及設計原則之初步研究研究問題與方法〉，RALIS 2006 Autumn Workshop of Recent Advances in Library and Information Science.

呂國泰（2019），《讓響應式(RWD)網頁設計變簡單：Bootstrap 開發速成（第二版）》，台北：碁峰出版社。

宋長岳（2011），〈應用 ANP 法於視覺傳達設計教育之作品評量研究〉，國立雲林科技大學視覺傳達設計系碩士班碩士論文。

林哲宏（2005），〈運用於網站瀏覽架構設計之評量平台〉，中華大學資訊管理學系碩士論文。