動態網頁在動作風格組合上之審美性研究

Aesthetics Study of Dynamic Website in Action Style Combinations

陳瀚凱(Han-Kai Chen)

動態網頁 ； 動作風格組合 ； 審美性評價 ； Dynamic website ； Action style combinations ； Aesthetics evaluation

藝術學報

99期（2016 / 10 / 01）

63 - 87

繁體中文

動態網站有別於靜態網頁，除了視覺動態呈現手法外，同時也增加了使用者與介面互動的樂趣，諸如動態選單呈現、動態頁面轉場效果、圖片作品的動態輪播、動態商品展示方式、橫幅廣告動畫等。甚至許多動態網站會藉由前導頁動畫製作或網頁遊戲，藉以吸引觀者的目光進而產生瀏覽網頁的興趣，更重要的是它影響了使用者在瀏覽與操作方式上的習慣。本研究認為動態網站設計的重要步驟就是網頁的視覺風格呈現，因此動態網站在視覺風格呈現上的審美性探討，就變得格外重要。在數位時代下，動態網頁已經為網頁設計主流趨勢，尤其是審美性除了會影響觀者在視覺心理上的好惡程度外，甚至會影響喜好性、使用性等。然而具有美感性的動態網頁更能增加使用效益，並且提高瀏覽網頁的動機。因此瞭解動態網頁對觀者在視覺心理上的影響，使其符合數位設計傳達的需求，其實是個非常重要的課題。本研究為了探討動態網頁在動作風格組合上的審美性，針對國外瀏覽點閱率高且視覺評價也高的動態網頁作為實驗樣本，主要目的是欲了解觀者的視覺評價，是否會因為動作風格組合上差異而產生不同的美感評價。在研究方法上，嘗試以聯合分析(conjoint analysis)針對審美性評價來進行探討，通過因子(factor)與水準(level)列出每梯次的正交組合，藉以預測受測者對不同動作組合（針對動態網頁）上所喜好的審美性評價。研究目的：（1）探討動態網頁在動作風格呈現之審美性調查與資料分析方法。（2）探求動態網頁的動作風格組合與審美性評價，找到符合觀者心理最佳化的動作組合。（3）最後提出關於動態網頁在設計實務與設計教學上之相關設計建議。研究結果歸納如下：首先在「四種動作風格組合」中，「運鏡風格」決定了整體動態網頁在動作呈現上的流暢性，建議以移機運鏡(translation)來視覺呈現可獲得較佳的審美性評價。其次在「比例變化＋空間表現＋方位移動」之動作風格組合中，可特別強調「比例變化」的呈現手法，例如在視覺上以垂直軸或水平軸的變形來傳達圖文訊息，或藉由展開的形式來加強圖文訊息的傳達性。第三在「比例變化＋空間表現＋運鏡風格」之動作風格組合中，建議在視覺上主要是以變焦運鏡手法，或是透過轉軸運鏡方式，以及移機運鏡等鏡頭運用等來加以視覺呈現。第四在「比例變化＋方位移動＋運鏡風格」之動作風格組合中，除「運鏡風格」呈現外，還必須輔助「比例變化」（例如垂直擠壓、水平擠壓、變形與展開等手法），透過強化上述兩種風格，可獲得最佳的審美性評價。最後在「空間表現＋方位移動＋運鏡風格」之動作風格組合中，則必需強調「方位移動」所呈現的動態效果，即是在動態網頁上，建議可通過上下左右或對角線位移等方式來傳達圖文訊息或頁面的轉場效果，甚至是以自由位移的方式來搜尋圖文訊息等，皆可以提高較佳的審美性評價。

Dynamic presentation are widely used in the application of dynamic website. Therefore, understanding the visual effects of dynamic information on viewers is a very important issue. In the contemporary age characterized by universal usage of dynamic information, designers should attain synchronized knowledge and understanding of relevant media technology so as to present preferred design quality in the management of digital design such as dynamic website design, multimedia design, and so on. Therefore, this study adopted the viewpoint of ＂visual design＂ and conducted a aesthetics evaluation of action style combinations. The conjoint analysis method were adopted in the research methodology to simplify aesthetics evaluations and enhance their validity. The purpose of this study was: (1) To propose recommendations for dynamic website design and improving data analysis methods of aesthetics evaluation. (2) To examine the influence of psychological factors on viewer when they experience dynamic presentation. (3) To identify the best action style combinations that meet viewer's psychological characteristics and propose recommendations for dynamic website design.

1. 洪伯松、管倖生(2009)。廣告影像情感意象與色彩喜好因子關係之研究。設計學報，14(4)，49-67。
   連結：
2. 陳瀚凱(2014)。動態圖像在動作特徴與審美性因子關係上之研究。設計學報，19(4)，1-20。
   連結：
3. 陳瀚凱(2015)。動態網站在美感喚起與審美性因子關係上之研究。商業設計學報，18，94-112。
   連結：
4. 陳瀚凱、管倖生(2007)。以信息熵理論探討視覺特徵信息對審美性與注目性之影響─以海報設計為例。設計學報，12(2)，53-70。
   連結：
5. Bense, M.,Reichard, J.(1971).The projects of generative aesthetics. Cybernetics, art and ideas.London:Studio Vista.
6. Burchett, K. E.(1991).Color harmony attribute.Color research,16,270-278.
7. Chen, H. K.,Guan, S. S.(2014).A perceptual evaluation of grating frequencies & velocities in the analysis of dynamic images.Displays,35(1),38-48.
8. Chen, H.K(2014).The Study of the Relationship between Style Feature Combinations of Dynamic Icons and Aesthetic Factors.Japanese Society for the Science of Design,61(1),1-26.
9. Ekman, P.(Ed.),Davidson, R. J.(Ed.)(1994).The nature of emotion, fundenmental questions.Oxford University Press.
10. France, M.M.,Henaut, A.(1994).Art, therefore entropy.LEONARDO,27(3),219-221.
11. Goodwin, K.(2009).Designing for the Digital Age.New York:John Wiley & Sons Inc.
12. Isen, A. M.(1987).Positive affect facilitates creative problem solving.Journal of Personality and Social Psychology,52,1122-1131.
13. Kurita, T.,Saito, A.(2002).A characteristic of the temporal integrator in the eye-tracing integration model of the visual system on the perception of displayed moving images.IDW'02,Tokyo:
14. Locher, P.(1995).A measure of the information content of visual arts stimuli for studies in experimental aesthetics.Empirical studies of the arts,13(2),180-190.
15. Mehrabian, A.,Russell, J.A.(1974).An approach to environmental psychology.Cambridge, Massschusetts:The MIT Press.
16. Molich, R.,Nielsen, J.(1990).Improving a human-computer dialogue.Communications of the ACM,33(3),338-348.
17. Nielsen, J.(1993).Usability Engineering.New York:The Academic Press.
18. Nielsen, J.(1990).International user interface: An exercise.ACM SIGCHI Bulletin,21(4),50-60.
19. Norman, D. A.(2004).Emotional Design: Why we love everyday things.New York:Basic Books.
20. Petrov, V. M.(2002).Entropy and stability in painting: An information approach to the mechanisms of artistic creativity.LEONARDO,35(2),197-202.
21. Shackel, B.(1991).Human Factors for Informatics Usability.Cambridge, U.K.:Cambridge University Press.
22. Tsai, T. W.,Chang, T. C.,Chuang, M. C.,Wang, D. M.(2008).Exploration in emotion and visual information uncertainty of websites in culture relations.Interactional Journal of Design,2(2),55-66.
23. Yamamoto, T.,Tsumura, M.(2000).30.2: Guiding Principles for High Quality Motion Picture in AMLCDs Applicable to TV Monitors.SID Symposium Digest of Technical Papers,31(1),456-459.
24. 林敬欣(2000)。碩士論文(碩士論文)。台南市，國立成功大學工業設計研究所。
25. 陳鴻源(2004)。應用感性工學於圖標設計之研究。科技學刊，13(1)，33-44。
26. 陳瀚凱(2014)。動態圖像在認知性與審美性之研究。科技學刊，23(2)，111-121。
27. 陳瀚凱(2014)。科技部專題研究計畫成果報告科技部專題研究計畫成果報告,台北市:科技部。
28. 陳瀚凱(2015)。科技部專題研究計畫成果報告科技部專題研究計畫成果報告,台北市:科技部。
29. 陳瀚凱(2012)。科技部專題研究計畫成果報告科技部專題研究計畫成果報告,台北市:科技部。
30. 童鼎鈞、謝承勳(2008)。圖標設計之局部特徵屬性對整體感性之研究。科技學刊，17(2)，149-158。

1. 陳瀚凱(2017)。虛擬博物館在滿意度與使用性因子關係上之研究。商業設計學報，21，77-94。
2. 陳瀚凱(2018)。虛擬博物館在使用性因子與設計內容分析上之研究。商業設計學報，22，76-90。
3. 劉仲矩(2021)。人力網站美學資本與網路忠誠關聯：求職者滿意為調節變項。商略學報，13(2)，135-158。