行動裝置介面圖示識認回饋與造形表現研究

The Recognition of Form and Visual Representation of Application Icons on Smart Mobile Devices

林廷宜(Tingyi S. Lin)；賴采秀(Cai-Siou Lai)

行動作業系統 ； 應用程式圖示 ； 圖形化使用者介面 ； 視覺表現 ； 識認度 ； Mobile Operating System ； Application Icons ； Graphical User Interface ； Visual Representation ； Recognition

設計學報

20卷3期（2015 / 09 / 01）

45 - 64

繁體中文

行動裝置介面透過應用程式圖示的呈現與引導，提供使用者獲得所需的訊息和回饋。圖示訊息的傳遞是否清楚，相對決定使用者操作的正確性，若圖示傳達意義不正確，則容易造成使用者操作不便與錯誤判斷，圖示的造形設計和視覺呈現因此顯得十分重要。為了對行動裝置介面圖示造形要素的設計與使用者回饋建立有效的連結，本文透過不同文字意義與圖示之間的關係，以圖示分類法與視覺語言歸納圖示之造形特色進行造形識認性的探究，調查使用者對圖示與文字意義之間的聯想力，透過視覺語言之呈現，探討並歸納智慧型手機應用程式圖示所形成之造形設計要素與視覺表現方法，並經由使用者對於市面上智慧型手機應用程式圖示的識認度，分析並討論圖示之造形設計要素與圖示正確性。研究結果發現包括高識認與低識認圖示的造形表現特性、使用者過往經驗對圖示及文辭意義的聯想、日常生活的接觸累積對圖像約定成俗的形成、由圖示的識認度與混淆狀況了解圖示造形應有的區隔以及不同使用族群對圖形識認與聯想的差異性等情狀，藉此除了對相關行動裝置應用程式圖示有所了解，研究成果並可作為視覺設計及後續探討與應用發展的參考。

Application icons are the gateway for users to view, select, download and enter the application so users can reach all sorts of information. The widespread of smart mobile devices has changed most people's lifestyle with its multi-functionality and ease to carry. It is even more important to design the application icons to be the first step of a friendly interface so that users can easily operate the devices and access the contents. From analyzing the relationship between application icons' representation and users' corresponding recognition and comprehension, this paper aims to understand how users view and how much they understand the design elements within those representations. The results reveal features of the design elements within the application icons with high and low degrees of users' comprehension level, the association of meanings from users' past experience, the conventional consensus on form and image from daily life, the various recognition level from users, and the discrepancies of comprehension and imagination between different backgrounds and generations. These findings will become fundamental resources for further research on the visual languages of legible pictogram.

1. 林品章、羅凱、楊小青(2012)。商品包裝上警告圖像之改良設計。設計學報，17(2)，97-118。
   連結：
2. 康台生、呂靜修(2007)。視覺、標誌符號與表徵。設計研究學報，創刊號=initial issue，78-89。
   連結：
3. 黃柏文(2004)。桃園縣=Taiyuan, Taiwan.，中原大學=Chung Yuan Christian University。
   連結：
4. 江志浩（ 2013年7月17日） 。2012 年第4 季我國行動上網觀測。取自： http://www.find.org.tw/market_info.aspx?n_ID=7177Jiang, Z. H. (2013, July 17). Observations of Taiwan's mobile internet services in the first quarter of 2012.Retrieved from http://www.find.org.tw/market_info.aspx?n_ID=7177 [in Chinese, semantic translation]
5. LeBlanc, M. (2013, August 15). 6 tips from Apple on creating great app icons. Retrieved from http://blog.iconfinder.com/6-tips-from-apple-on-creating-great-app-icons/
6. Foster, J. J.(1990).Standardizing public information symbols: Proposals for a simple procedure.Information Design Journal,6(2),161-168.
7. Gittins, D.(1986).Icon-based human-computer interface.International Journal of Man-Machine Studies,24,519-543.
8. Horn, R. E.(1998).Visual language: Global communication for the 21st century.Bainbridge Island, WA:Macro VU Press.
9. Horton, W.(1994).The icon book: Visual symbols for computer systems and documentation.New York, NY:John Wiley & Sons..
10. Kaneko, S.,Hiroyuki,H.,Kusui, Y.(1991).Approach to designing easy- to- understand icons.IEEE System and Software Engineering Laboratory,Kawasaki:
11. Kepes, G.(1995).Language of vision.New York, NY:Dover Publication.
12. Lin, T. S.,Lai, C. S.(2013).The recognition & comprehension on application icons on mobile devices.The International Association of Societies of Design Research,5,4069-4078.
13. Moore, D. M.(ed.),Dwyer, F. M.(ed.)(1994).Visual literacy.Englewood Cliff, NJ:Educational Technology Publication.
14. Norman, D. A.(1988).The design of everyday things.New York, NY:Doubleday.
15. Park, Y. S.,Han, S. H.(2010).Touch key design for one-handed thumb interaction with a mobile phone: Effects of touch key size and touch key location.International Journal of Industrial Ergonomics,40(1),68-76.
16. Pitt, L. F.,Parent, M.,Junglas, I.,Chan, A.,Spyropoulou, S.(2010).Integrating the smartphone into a sound environmental information systems strategy: Principles, practices and a research agenda.Journal of Strategic Information Systems,20(1),27-37.
17. Preece, J. (Ed.).(1995).A guide to usability: Human factors in computing.Wokingham, England:Addison-Wesley..
18. Preiser, W.,Ostroff, E.(2001).Universal design handbook.New York, NY:McGraw-Hill..
19. Wolff, J. S.,Wogalter, M. S.(1998).Comprehension of pictorial symbols: Effects of context and test method.Human Factors,40(2),173-186.
20. Wood, W. T.,Wood, S. K.(1987).Icons in everyday life.Social, ergonomic, and stress aspects of work with computers,London, England:
21. Wurman, R. S.(2001).Information anxiety 2.Los Angeles, CA:Hayden/Que.
22. Zwaga, H. J. G.(ed.),Boersema, T.(ed.),Hoonhout, H. C. M.(ed.)(1999).Visual information for everyday use: Design and research perspectives.London, England:Taylor & Francis.
23. Zwage, H. J.,Boresema, T.(1983).Evaluation of a set of graphic symbols..Applied Ergonomics,14(1),43-54.
24. 方裕民(2003)。人與物的對話－互動介面設計理論與實務。臺北市=Taipei:田園城市=Garden City。
25. 丘永福(1988)。造型原理。台北市=Taipei:藝風堂出版社=Yi Fong Tang。
26. 行政院主計處(1996)。中華民國政府統計名詞定義。台北市=Taipei:行政院主計處=Executive Yuan, R.O.C.。
27. 李青蓉、魏丕信、施郁芬、邱昭彰(1998)。人機介面設計。新北市=New Taipei:國立空中大學=The National Open University。
28. 亞洲通用設計聯盟(2008)。通用設計。台北=Taipei:亞洲通用設計聯盟=Asian Universal Design Network。
29. 林廷宜、楊曜全(2009)。操作說明圖視覺語言分析探討─以避難緩降機為例。2009 世界華人工業 設計論壇／2009 中華民國設計學會第14 屆設計學術研究成果研討會，台北市=Taipei:
30. 林建宏、徐國堂(2013)。Android+iOS UIDesign 行動裝置介面設計。臺北市=Taipei:佳魁資訊=Top Team。
31. 林榮泰、莊明振(1991)。從圖像語意探討人機介面圖像的設計。工業設計，20，85-93。
32. 胡佑宗譯、Bürdek, B. E.(1996)。工業設計—產品造型的歷史、理論及實務。台北=Taipei:亞太=Asia Pacific。
33. 張悟非(1992)。從“認知心理”的觀點來探討“視覺資訊設計”的方向。明志工專學報，24，163-174。
34. 張紹勳(2007)。研究方法。台中=Taizhong:滄海=Tsang Hai.。
35. 莊惠淳譯、Tidwell, J.(2012)。操作介面設計模式。臺北市=Taipei:碁?資訊=Gotop。
36. 楊裕富(1998)。設計的文化基礎：設計、符號、溝通。臺北市=Taipei:亞太圖書=Asiapac Books。
37. 鄭麗玉(1993)。認知心理學－理論與應用。台北=Taipei:五南=Wunan。
38. 鄧少華、邱俊霖(2008)。行動裝置PDA 資料復原鑑識之研究。2008 第三屆數位教學暨資訊實務研討會論文集，台南=Tainan:

1. Chih-Hsiang Ko,Chia-Yin Yu(2021)。Visualization of Birds' Ecological Information in Different Design Forms。國際數位媒體設計學刊，13(2)，13-26。
2. 柯志祥,余佳穎(2022)。生態資訊介面圖像設計及使用性研究－以台灣特有鳥類為例。設計學報，27(4)，69-92。
3. 李穎杰、李偉綺(2017)。臺灣糕餅圖騰文化意涵探究暨認知分析之研究。高雄應用科技大學人文與社會科學學刊，3(2)，75-95。
4. 林昱彣,王藍亭(2020)。扁平化設計在手機介面圖像之辨識率研究。書畫藝術學刊，28，351-366。