行動è£ç½®åœ–標之設計風格分類與探討/Design Elements and Design Style of Mobile App Icons

何俊亨 Chun-Heng Ho, 侯愷均 Kai-Chun Hou

摘要


智慧型手機和平æ¿é›»è…¦æ‡‰ç”¨ç¨‹å¼ï¼ˆApp）儼然已æˆç‚ºæ—¥å¸¸ç”Ÿæ´»çš„必需å“，目å‰å…¨ä¸–界共有數以百è¬çš„應用程å¼å·²è¢«ç™¼ä½ˆï¼Œå…±åŒçš„特點是它們都é€éŽå”¯ä¸€çš„圖標作為標示。本研究將探討圖標視覺設計元素與設計風格彼此之間的關係，並é€éŽè³ªæ€§çš„KJ法進行設計元素解構與é‡åŒ–的數é‡åŒ–三類方法進行風格分群。研究分æžçµæžœå°‡åœ–標設計元素分為5類設計屬性分類與23個設計元素，並é€éŽã€Œå…·é«”-抽象ã€ã€ã€Œç´°ç¯€-æ•´é«”ã€èˆ‡ã€Œç‰©ä»¶è£é£¾-角色設計ã€ä¸‰å€‹è¨­è¨ˆç‰¹å¾µçš„定義，將圖標在視覺設計上åš5大風格的分群—åå‘擬物化設計的「具體特徵設計風格ã€èˆ‡ã€Œç‰©ä»¶è£é£¾ç‰¹å¾µè¨­è¨ˆé¢¨æ ¼ã€ã€åå‘æ‰å¹³å¼è¨­è¨ˆçš„「抽象特徵設計風格ã€ã€ã€Œå­—符風格ã€èˆ‡ã€Œè§’色設計風格ã€ã€‚

 

Application software (app) for smartphones and tablets has become a necessity in everyday life. Millions of apps have been developed worldwide, but one feature they all have in common is that they are all identified by a unique icon. The aim of this study was to investigate what relationship of visual features and design style conclude the attractive icon. To evaluate the design elements of app icons, the KJ method and QT- III were employed to conduct qualitative and quantitative analyses. It was suggested that visual elements of app icons derive from 5 design features and 23 design elements and that three characteristics, concrete-abstract, detailed-general and object decorated-role designed, decide skeuomorphic (specific features design style & object decorated design style), flat design (abstract characteristic design style), character style and role design style.


關鍵詞


圖標;擬物化設計;扁平式設計;KJ法;數量化三類

全文：

PDF

參考文獻


內田治, & 陳耀茂編審. (2008). æ„見調查的å°æ‡‰åˆ†æžSPSS使用手冊. 鼎茂圖書.

æž—è±ã€è¬æ¯“ç› (2015)。圖標呈ç¾å°ä½¿ç”¨è€…喜好度的影響åˆæŽ¢ã€‚æ„Ÿæ€§å­¸å ±ï¼Œ3(1)，48–67。

AppleInsider. (2015). Apple ’ s App Store generated over $ 10 billion in revenue for developers in record 2014. Retrieved July 23, 2015, from http://appleinsider.com/articles/15/01/08/apples-app-store-generated-over-10-billion-in-revenue-for-developers-in-record-2014

Baraniuk, C. (2012). How We Started Calling Visual Metaphors “ Skeuomorphs †and Why the Debate over Apple ’ s Interface Design is a Mess. Retrieved October 4, 2014, from http://www.themachinestarts.com/read/2012-11-how-we-started-calling-visual-metaphors-skeuomorphs-why-apple-design-debate-mess

Basalla, G. (1988). The Evolution of Technology (Cambridge,). Cambridge University Press.

Bell, M., Chalmers, M., Fontaine, L., Higgs, M., Morrison, A., Rooksby, J., … Sherwood, S. (2013). Experiences in Logging Everyday App Use. Digital Economy, 13, 4–6.

Blankenberger, S., & Hahn, K. (1991). Effects of icon design on human-computer interaction. International Journal of Man-Machine Studies, 35(3), 363–377. http://doi.org/10.1016/S0020-7373(05)80133-6

Cheng, Y. M., & Leu, S. Sen. (2011). Integrating data mining with KJ method to classify bridge construction defects. Expert Systems with Applications, 38(6), 7143–7150. http://doi.org/10.1016/j.eswa.2010.12.047

Company, N. (2014). Tech-Or-Treat: Consumers Are Sweet on Mobile Apps. Retrieved from http://www.nielsen.com/us/en/insights/news/2014/tech-or-treat-consumers-are-sweet-on-mobile-apps.html

Cousins, C. (2013a). Flat Design Can You Benefit from the Trend. Retrieved from http://designmodo.com/flat-design/

Cousins, C. (2013b). Pros and Cons of Flat Design. Retrieved from http://designmodo.com/pros-cons-flat-design/

García, M., Badre, A. N., & Stasko, J. T. (1994). Development and validation of icons varying in their abstractness. Interacting with Computers, 6(2), 191–211. http://doi.org/10.1016/0953-5438(94)90024-8

Goonetilleke, R. S., Shih, H. M., On, H. K., & Fritsch, J. (2001). Effects of training and representational characteristics in icon design. International Journal of Human-Computer Studies, 55(5), 741–760. http://doi.org/10.1006/ijhc.2001.0501

Hbryant. (2012). The Importance of the App Icon. Retrieved from http://m2catalyst.com/the-importance-of-the-app-icon/

Ho, C., & Hou, K. (2015). Exploring the Attractive Factors of App Icons. KSII Transactions on Internet and Information Systems, 9(6), 2251–2270. http://doi.org/http://dx.doi.org/10.3837/tiis.2015.06.016

Horton, W. (1994). The Icon Book. New York: John Wiley & Sons.

Hou, K.-C., & Ho, C.-H. (2013). A Preliminary Study on Aesthetic of Apps Icon Design. In IASDR 2013 5th International Congress of International Association of Societies of Design Research (pp. 1–12). Tokyo.

Huang, S. M., Shieh, K. K., & Chi, C. F. (2002). Factors affecting the design of computer icons. International Journal of Industrial Ergonomics, 29(4), 211–218. http://doi.org/10.1016/S0169-8141(01)00064-6

Idler, S. (2013). Flat Web Design: Trend or Revolution. Retrieved from http://blog.usabilla.com/flat-web-design-trend-or-revolution/

Kim, H. J., Kim, I., & Lee, H. G. (2010). The Success Factors for App Store-Like Platform Businesses from the Perspective of Third-Party Developers: An Empirical Study Based on A Dual Model Framework. In PACIS 2010 (pp. 272–283).

Li, C. F., Shi, H. T., Huang, J. J., & Chen, L. Y. (2014). Two Typical Symbols in Human-Machine Interactive Interface. Applied Mechanics and Materials, 635–637, 1659–1665. http://doi.org/10.4028/www.scientific.net/AMM.635-637.1659

Lin, R. (1994). A study of visual features for icon design. Design Studies, 15(2), 185–197. http://doi.org/10.1016/0142-694X(94)90024-8

Marcus, A. (1998). Baby Faces : User-Interface Design for Small Displays. Computer, (April), 18–23.

McDougall, S. J. P., & Reppa, I. (2008). Why do I like It? the Relationships between Icon Characteristics, user Performance and Aesthetic Appeal. Proceedings of the Human Factors and Ergonomics Society Annual Meeting, 52(18), 1257–1261. http://doi.org/10.1177/154193120805201822

Mcdougall, S., Reppa, I., Smith, G., Playfoot, D., & Barrow, F. (2009). Beyond Emoticons : Combining Affect and Cognition in Icon Design. In 8th International Conference, EPCE 2009, Held as Part of HCI International 2009 (pp. 71–80). San Diego: Springer Berlin Heidelberg. http://doi.org/10.1007/978-3-642-02728-4_8

MIURA, M., SUGIHARA, T., & KUNIFUJI, S. (2011). GKJ: Group KJ Method Support System Utilizing Digital Pens. IEICE Transactions on Information and Systems, E94–D(3), 456–464. http://doi.org/10.1587/transinf.E94.D.456

Mullaly, J. (1998). IBM RealThings. CHI 98 Conference Summary on Human Factors in Computing Systems - CHI ’98, 13–14. http://doi.org/10.1145/286498.286505

Nagino, G., Shozakai, M., & Shikano, K. (2008). Statistical Acoustic Model Visualization by Utilizing Multidimensional Scaling Method. The IEICE Transactions on Information and Systems (Japanese Edetion), J91–D(11), 2636–2646.

Ning, L., Peng, Z., Aijun, H., Xueqin, L., Weijia, C., Zhiqiang, M., & Peijun, S. (2009). Risk Perception Quantification with the Application to Analysis of Risk Classification. Advances in Earth Science, 24(1), 2–6. Retrieved from http://www.adearth.ac.cn/CN/abstract/abstract3861.shtml

Page, T. (2014). Skeuomorphism or flat design: future directions in mobile device User Interface (UI) design education. International Journal of Mobile Learning and Organisation, 8(2), 130. http://doi.org/10.1504/IJMLO.2014.062350

Rivera, J., & Meulen, R. van der. (2013). Gartner Says Mobile App Stores Will See Annual Downloads Reach 102 Billion in 2013. Retrieved February 23, 2015, from http://www.gartner.com/newsroom/id/2592315

Robbins, W. (2014). Design Practices In Mobile User Interface Design. California Polytechnic State University. Retrieved from http://digitalcommons.calpoly.edu/grcsp/130

Rose, P. (2013). Skeuomorphism as an Affordance: A Principle for Interaction and User Interface Design. University of Plymouth.

Torigoe, K., Sasaki, S., Hoshina, J., Torigoe, T., Hojo, M., Emura, S., … Numata, O. (2011). Predicting factors of plural hospitalization with pneumonia in low-birthweight infants. Pediatrics International : Official Journal of the Japan Pediatric Society, 53(4), 446–53. http://doi.org/10.1111/j.1442-200X.2010.03291.x

Viriyayudhakorn, K., & Kunifuji, S. (2013). Automatic topic identification for idea summarization in idea visualization programs. IEICE Transactions on Information and Systems, E96–D(1), 64–72. http://doi.org/10.1587/transinf.E96.D.64

Wong, V. (2013). Skeuomorphism Versus Flat Design : A Closer Look. Toronto, Canada. Retrieved from http://www.intelliware.com/skeuomorphism-versus-flat-design-a-closer-look/

Wooldridge, D., & Schneider, M. (2011). Ch4 Your iOS App Is Your Most Powerful Marketing Tool. In The Business of iPhone and iPad App Development (pp. 61–96). Berkeley, CA: Apress. http://doi.org/10.1007/978-1-4302-3301-5

Yan, R. (2011). Icon Design Study in Computer Interface. Procedia Engineering, 15, 3134–3138. http://doi.org/10.1016/j.proeng.2011.08.588

Zafarmand, S. J., Terauchi, F., & Aoki, H. (2012). Product Subjective Sustainability: Analysis of the Japanese Users’ Kansei Evolutions over their Short/Long-lived Products’ Lifetimes. In M. Matsumoto, Y. Umeda, K. Masui, & S. Fukushige (Eds.), Design for Innovative Value Towards a Sustainable Society (pp. 356–361). Springer Netherlands. http://doi.org/10.1007/978-94-007-3010-6_69