跨平台網頁介面RWD對於網頁瀏覽之視覺傳達的影響

Visual Communication Impact of Cross-platform Web Interface RWD on Web Browsing

蘇子淵(Tzu-Yuan Su)；何宏文(Phoenix Ho)

方法目的鏈 ； 響應式網頁設計 ； 蘊含矩陣 ； 階層價值圖 ； Means-end chains ； Responsive Web Design ； implication matrix ； hierarchical value map

商業設計學報

19期（2015 / 12 / 01）

19 - 38

繁體中文

伴隨著移動平台的技術日趨成熟，網頁瀏覽的視覺效果也逐漸受到重視，響應式網頁設計（Responsive Web Design, RWD）在網頁設計的開發技術上屬於一項新的觀點。本研究是利用方法目的鏈的分析技術，作為實證應用的基礎，並藉由深度的階梯式訪談來瞭解RWD 的使用經驗，其研究結果顯示「螢幕裝置大小」、「內容簡單明瞭」、「操控性」、「介面親和力」、「瀏覽速度」、「使用情境」等六項屬性，是影響造訪者使用RWD 的關鍵屬性。經由內容分析法的詞幹分類及編碼後，透過「蘊含矩陣」並繪製成「階層價值圖」進行分析。經分析結果共歸納出RWD 七項特質(包括視覺面向的高張力圖形、敘事觀點、攝影圖像、「less is more」等廣泛運用，功能面向包括滑動、人機介面和形隨機能的版型運用)，並加以闡明其意涵。希望藉由研究結果能幫助平台開發者，更瞭解用戶需求，發揮本研究最終的價值意義。

As the mobile platform technology matures, the visual effect of web browsing gradually attracts attention. Responsive web design (RWD) is a new development in web design technology. This study uses the analytical skills of means-end chains as the basis for empirical applications and in-depth stepped interviews to understand users’ experience with RWD, and the research results show that ＂screen size＂, ＂simple and straightforward contents＂, ＂maneuverability＂, ＂interface friendliness＂, ＂browsing speed＂ and ＂scenarios＂ are the six key attributes affecting visitors’ use of RWD. After the application of stem classification and coding of the content analysis method, a ＂hierarchical value map＂ is drawn through an ＂implication matrix＂ for analysis. Seven RWD attributes are summed up from the analysis results (including the widely used high-tension graphs, narrative viewpoints, photographic images and ＂less is more＂ on the visual aspect, and the application of sliding, man-machine interface and function-oriented appearance on the functional aspect), and the implication of each is explained. We expect to help platform developers with the research results to better understand user needs and make full use of the study’s value.

1. 黃齡儀(2009)。數位時代之空間─時間敘事結構初探：以facade 網站為例。資訊社會研究，16
   連結：
2. OpenSignalMaps(2012,August), Android fragmentation visualized. Retrieved march15,2015, from http://opensignal.com/reports/fragmentation.php
3. 創市際(2014年6月)。台灣跨屏網路使用行為研究。線上檢索日期:2015年04月10日。 網址：http://www.insightxplorer.com/news/news_09_29_14.html 。
4. Aaron Gustafson(2011),Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. Retrieved January15,2015, http://easy-readers.net/
5. Viljami Salminen(2012,February), Adaptive vs. Responsive, what's the difference?, Retrieved August 9,2015, from http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php
6. Tolman, E. C. (1932). Purposive behavior in animals and men. New York: Century.
7. Progressive enhancement (2011,February),In Wikipedia, the free encyclopedia. Retrieved January15,2015, from https://en.wikipedia.org/wiki/Progressive_enhancement
8. 響應式網頁設計(2015)。維基百科。線上檢索日期:2015年03月10日。 網址：https://zh.wikipedia.org/wiki/響應式網頁設計
9. The Boston Globe(2015, August), Retrieved August 9,2015, from https://www.bostonglobe.com/
10. 國家發展委員會(2015年2月2日)。響應式設計(RWD)與網站前瞻性設計。線上檢索日期:2015年05月10日。網址：http://www.webguide.nat.gov.tw/index.php/ch/news/news_more/id/157.html。
11. Craig Buckler(2009,September),Progressive Enhancement and Graceful Degradation: an Overview. Retrieved August 9,2015, from http://www.sitepoint.com/progressive-enhancement-graceful-degradation-basics/
12. Tolman, E. C. (1942). Drives toward war. New York: Appleton-Century.
13. Ethan Marcotte(2010, May), A List Apart :Responsive Web Design. Retrieved January15,2015, from http://alistapart.com/article/responsive-web-design
14. Sparkbox(2015, August),Build right. Retrieved August 9,2015, from http://seesparkbox.com/
15. Craig Buckler(2009,September),Progressive Enhancement and Graceful Degradation: Making a Choice. Retrieved August 9,2015, from http://www.sitepoint.com/progressive-enhancement-graceful-degradation-choice/
16. kelvin(2013, August), Responsive Web Design (RWD) and Adaptive Web Design (AWD). Retrieved January15,2015, from http://www.xenyomedia.com/blog/134/responsive-web-design-rwd-和-adaptive-web-design-awd
17. Tolman, E. C. (1938). The determiners of behavior at a choice point. Psychological Review, 45, 1-41.
18. Abbott, L.(1995).Quality and competiton.New York:Columbia University Press.
19. Aurifeille, J. M.,Valette-Florence, P.(1995).Determination of the dominant means-end chains: A constrained clustering approach.International Journal ofResearch in Marketing,12(3),267-78.
20. Barther, Roland、許綺玲譯(1995)。明室。台北市:台灣攝影工作室。
21. Budd, R. W.,Thorp, R. K.,Donohew, L.(1967).Content analysis ofcommunications.New York:Macmillan.
22. Chiu, C.M.(2005).Applying means-end chain theory to eliciting system requirements and understanding users perceptual orientations.Information & Management,42(3),455-468.
23. Claeys, C.,Swinnen, A.,Abeele, P. V.(1995).Consumers' means-end chains for"think" and "feel" products.International Journal of Research in Marketing,12(3),193-208.
24. Denzin, N. K.,Lincoln, Y. S.(1998).Collecting and interpreting qualitative material.Thousand Oaks, CA:Sage.
25. Engel, J. F.,Blackwell, R. D.,Miniard, P. W.(1993).Consumer Behavior.New York, NY:Dryden Press.
26. Grunert, K. G.,Grunert, S. C.(1995).Measuring Subjective Meaning Structures by the Laddering Method: Theoretical Considerations and Methodological Problems.International journal of Research in Marketing,12(3),209-225.
27. Gutman, J.(1984).Analyzing Consumer Orientations toward Beverages though Means-End Chain Analysis.Psychology and Marketing,1,23-43.
28. Gutman, J.(1982).A means-end chain model based on consumer categorization processes.Journal of Marketing,46(1),60-72.
29. Kassarjian, Harold(1977).Content Analysis in Consumer Research.Journal of Consumer Research,4(1),8-18.
30. Koch, S.(Ed.)(1959).Psychology: A study of a science.
31. Percy, LL.(ed.),Woodside, A. G.(ed.)(1983).Advertising and Consumer Psychology.Lexington, Mass.:Lexington Books.
32. Reynolds, T. J.,Gutman, J.(1988).Laddering theory, method analysis, and interpretation.Journal of Advertising Research,28(1),11-31.
33. Reynolds, T.J.,Olson, J.C.(2001).Understanding Consumer Decision Making: The Means-End Approach to Marketing and Advertising Strategy.New Jersey:Mahwah.
34. Ter Hofstede, F.,Audenaert, A.,Steenkamp, J.E.M.,Wedel, M.(1998).An Investigation into the Association Pattern Technique as a Qualitative Approach to Measuring Means-End Chains.International Journal of Research in Marketing,15,37-50.
35. Weber, R.P.(1985).Basic content analysis.Beverly Hills, Calif.:Sage.
36. Wimmer, R. D.,Dominick, J. R.(2005).Mass media research: An introduction.Baker& Taylor Books.
37. Wolcott, H. F.(2005).The art of fieldwork.Walnut Creek, CA:Alta Mira.
38. Zeithaml, A. V.(1988).Consumer Perception of Price, Quality, and Value: A Means-End Model and Synthesis of Evidence.Journal of Marketing,52,2-22.
39. 王石番(1990)。傳播內容分析法─理論與實證。台北市:幼獅文化事業公司。
40. 李公偉(2005)。碩士論文(碩士論文)。東北師範大學美術系。
41. 林勤豐(2000)。探討『方法目的鏈』研究法之邏輯建構。勤益學報，17，241-255。
42. 林勤豐、葉明義、邱兆民(1999)。『方法目的鏈』研究法建構行銷研究變數與行銷策略之探討。中華管理評論，2(6)
43. 席汝楫(1997)。社會與行為科學研究方法。台北市:五南書局。

1. 許子凡,王曉今(2019)。響應式網頁設計於桌上型電腦與智慧型手機之評價研究。商業設計學報，23，33-45。
2. 黃絜如,洪志元,王聖銘(2018)。以層級式分析法探討響應式網頁設計之現況分析與實證研究。資訊管理學報，25(2)，149-184。
3. 廖洧杰、陶幼慧(2017)。響應式網站設計成熟期間之轉換障礙影響－事前實證與事後回顧。Electronic Commerce Studies，15(3)，395-426。
4. 謝宜芳(2021)。銀髮族使用餐飲類響應式網站之研究。臺北海洋科技大學學報，12(1)，135-166。
5. 楊美雪,張祐瑄(2020)。民衆對臺灣縣市政府響應式網頁區塊項目顯示看法之研究。圖書館學與資訊科學，46(1)，32-63。