簡易檢索 / 詳目顯示

研究生: 賴采秀
Cai-siou Lai
論文名稱: 智慧型行動裝置應用程式圖示之識認度與聯想力研究
A Study on Recognition and Association of Application Icons on Smart Mobile Devices
指導教授: 林廷宜
Tingyi S. Lin
口試委員: 陳建雄
Chien-Hsiung Chen
林品章
Pin-Chang Lin
學位類別: 碩士
Master
系所名稱: 設計學院 - 設計系
Department of Design
論文出版年: 2014
畢業學年度: 102
語文別: 中文
論文頁數: 195
中文關鍵詞: 行動作業系統應用程式圖示圖形化使用者介面視覺表現識認度
外文關鍵詞: Mobile Operating System, App Icons, Graphic User Interface, Visual Representation, Recognition
相關次數: 點閱:299下載:24
分享至:
查詢本校圖書館目錄 查詢臺灣博碩士論文知識加值系統 勘誤回報
  • 近年來隨著行動通訊日漸普及,智慧型行動裝置與通訊產品成為主流,智慧型手機也在資訊發展迅速之處,成為消費者之必備品。而各種應用程式,更相對帶起圖形化使用者介面之設計風潮。介面透過應用程式圖示之呈現與引導,令使用者獲得所需的回饋與達到目的。圖示訊息之傳遞是否清楚,相對決定使用者操作之正確性,若圖示傳達意義不正確,則容易造成使用者操作不便與錯誤判斷,圖示之視覺呈現便顯得十分重要。
    本研究目的主要可歸納為以下三點:(1)調查使用者對於市面上智慧型手機應用程式圖示之識認度,分析並討論圖示之造形設計要素與圖示正確性;(2)透過視覺語言之呈現,探討並歸納智慧型手機應用程式圖示所形成之造形設計要素與視覺表現方法;(3)調查圖示與文字意義之間的聯想力。透過不同文字意義與圖示之間的關係,以圖示分類法與視覺語言歸納圖示之造形特色。
    本研究的實驗方式與過程分為兩階段,第一階段為識認度測試,為了提高使用者閱讀介面時的效率與正確性,採用立意抽樣(Purposive Sampling)首先針對市占率前兩大的iOS 6行動作業系統與Android 4.0行動作業系統所使用的應用程式圖示進行廣泛蒐集與篩選,共選出80個受測圖示做為測試。使用ISO 9186-1圖示理解測試(Comprehension Test)進行實驗,並以混淆矩陣分析法(Confusion Matrix)進行問卷結果分析,問卷統計完成後,針對部分圖示進行半結構式訪談(Semi-structured Interviews),並根據訪談內容進行統計與分析。第二階段為圖示造形分析,透過第一階段識認度測試所得之結果,首先使用歸納法(Inductive Reasoning)將應用程式圖示樣本所代表的文字意義進行歸納與篩選,共選出31個文字意義樣本進行開放式問卷測試(Open-ended Questionnaires)。制定題目後,針對問卷結果進行分類與整理,並統計且歸納出造形重覆性最高與造形聯想力最快之圖示。最後綜合第一階段及第二階段實驗之結果,以此架構針對應用程式圖示與文字意義聯想力進行綜合分析與討論,並透過圖示分類法分析與歸納應用程式圖示其造形設計要素與視覺表現。
    根據各研究階段結果可發現:(1)智慧型行動裝置應用程式圖示之識認度與混淆狀況;(2)圖示造形分析結果及設計師與學生之造形比較;(3)文字意義與圖示造形聯想力之互通性;(4)圖示分類法:應用程式圖示與文字意義之間的聯想力。透過此一研究可對相關智慧型手機應用程式圖示更了解,並可作為後續研究與應用發展的視覺設計之參考。


    The popularization of mobile communications over the recent years has gradually turned smart mobile devices and communication products into the mainstream electronic devices. In places where information technology is rapidly developing, smart phones have also become a necessity for consumers. Various kinds of applications are bringing about a trend to iconize user interface designs. Through presentation and guidance via application icons, the interfaces can help users obtain the response needed and fulfill their goals. Clarity of the icon messages transmitted would reflect whether the users operated correctly. If the meaning conveyed by the icons were inaccurate and incorrect, inconvenience to user operation and erroneous judgments would result, making visual presentation of the icons extra important.
    The purpose of this study can be summarized into three points that follow: (1) Survey on identification and recognition of the application icons on smart phones that are commonly found in the market. Analyze and discuss elements of icon design, as well as accuracy of the icons. (2) By presenting in visualized languages, discuss and summarize the elements of icon design for the smart phone applications, as well as the method of visual presentation. (3) Survey on associability between the meanings of the icons and text. Through relations between various meanings of the icons and text, arrive at a conclusion on characteristics of the icon design by means of categorization on these icons and by means of visual languages.
    There are two phases for the experiment method and procedures involved in this study: the first phase is the test on identification and recognition, which aimed at enhancing efficiency and accuracy for users when reading the interfaces. Purposive sampling was first employed to conduct broad collection and selection of application icons used by iOS 6 and Android 4.0 mobile operation systems. A total of 80 icons were picked for the test. ISO 9186-1 Comprehension Test was employed to test the icons and the survey results were analyzed with a confusion matrix. After finishing the statistics work on the surveys, semi-structured interviews were conducted on some of the icons and the content of these interviews were used for gathering statistics and conducting analysis. The second phase is the analysis on the icon design. Through the results of the test on identification and recognition conducted in phase one, inductive reasoning was first employed to generalize and decipher the meanings of the text represented by the sample application icons. 31 samples of text meanings were selected for open-ended questionnaires. After the topics were set, the results of the survey was categorized and organized, which would then calculate and sum up all the icons that had the highest instance of repetitions and duplications, as well as all the icons that had the fastest association based on their designed looks. Finally, the test results from the phase one and two were generalized into a framework for a comprehensive analysis and discussion on the associability of the application icons and the meanings of the text. The categorization of the icons was then used to analyze and summarize the elements of icon design for the applications, as well as their visual presentations.
    Results from each phase of the study would find out about: (1) Identification and recognition, as well as confusion, of application icons on the smart mobile device. (2) Result of analysis on the icon design and comparison on the design from designers and students. (3) The associability and commutability between the meaning s of the text and icon design. (4) Categorization of the icons: the associability between application icons and the meanings of the text. This study helps enhance understanding of the application icons on the smart phones and can serve as a reference for follow-on studies and applied visual designs.

    摘 要 i Abstract iii 謝 誌 v 表 目 錄 ix 圖 目 錄 xii 第一章 緒論 1 1.1 研究背景 1 1.2 研究動機 2 1.3 研究問題 3 1.4 研究目的 4 1.5 名詞釋義 5 1.6 研究架構 7 1.7 研究範圍與限制 9 第二章 文獻探討 11 2.1 人機介面(Human-Machine Interface) 11 2.1.1 圖形化使用者介面(Graphical User Interface) 11 2.1.2 行動作業系統(Mobile Operating System) 12 2.2 視覺表現 14 2.2.1 視覺語言 14 2.2.2 符號設計 15 2.2.3 符號設計的準則 17 2.3 介面圖示設計 18 2.3.1 應用程式圖示設計 18 2.3.2 圖示設計的程序 20 2.3.3 圖示分類法 21 2.4 使用者經驗(User Experience) 26 2.4.1 使用者經驗定義與設計 26 2.4.2 認知心理學(Congnitive Psychology) 28 2.4.3 使用者中心設計 30 2.5 小結 32 第三章 研究方法 33 3.1 研究流程與建構 33 3.2 第一階段:識認度測試 35 3.2.1 立意抽樣樣本 35 3.2.2 ISO 9186-1 圖示理解測試 35 3.2.3 半結構式訪談 38 3.3 第二階段:圖示造形分析 39 3.3.1 歸納法 39 3.3.2 開放式問卷調查 40 3.4 受測者設定 42 第四章 研究結果與分析 43 4.1 第一階段:識認度測試結果與分析 43 4.1.1 圖示樣本蒐集與篩選結果 43 4.1.2 受測者基本資料分析 44 4.1.3 識認度分析 45 4.1.4 理解度分析 51 4.1.5 小結 52 4.2 第二階段:歸納法(樣本篩選、制定題目、圖示造形與分析) 53 4.2.1 樣本篩選 53 4.2.2 受測者基本資料分析 58 4.2.3 制定題目 58 4.2.4 圖示造形分析 59 4.2.5 小結 84 4.3 第三階段:圖示分類法之圖示造形與視覺語言綜合分析 87 4.3.1 高識認度圖示之圖示造形綜合分析 87 4.3.2 圖示造形與視覺語言綜合分析 93 第五章 結論與建議 99 5.1 研究結論 99 5.2 後續研究建議 102 參考文獻 104 附錄一、第一階段圖示理解測試問卷 109 附錄二、第二階段圖示造形聯想力問卷 114 附錄三、應用程式圖示樣本蒐集 121 附錄四、應用程式圖示識認度之混淆矩陣分析表 125 附錄五、半結構式訪談內容整理 130 附錄六、圖示聯想力問卷統計與分類 138 附錄七、圖示造形重覆性最高與造形聯想力最快總表 175

    1.Berelson, B. (1952). Content Analysis in Communication Research. New York : The Free Press.
    2.Bowers, J. W. (1970). Methods of Research in Communication. Boston: Houghton Mifflin Press.
    3.Brugger, C. (1999). Public information symbols: A comparison of ISO testing procedures. In H. J. G. Zwaga, T. Boersema, & H. C. M. Hoonhout (Eds.), Visual information for everyday use: Design and research perspectives(pp. 305–313). London, UK: Taylor & Francis.
    4.Carey, J. M. & Kacmar, C. J. (1991). Assessing the usability of icons in user interfaces. Behaviour and Information Technology, 443-457.
    5.comScore, Task Force on comScore World Metrix (2012). State of the Internet 1st Quarter 2012. Retrieved from http://www.charleswarner.us/ComScoreStateofInternet2012.pdf
    6.comScore (2013, October 4). comScore Reports August 2013 U.S. Smartphone Subscriber Market Share [Insights]. Retrieved from http://www.comscore.com/Insights/Press_Releases/2013/10/comScore_Reports_August_2013_US_Smartphone_Subscriber_Market_Share
    7.Desmet, P. M. A. & Hekkert, P. (2007). Framework of product experience. International Journal Journal of Design, 1(1), 57-66.
    8.Foster, J. J. (1990). Standardizing Public Information Symbols: Proposals for a Simple Procedure. Information Design Journal, 6(2), 161-168.
    9.Gaver, W. (1986). Auditory Icons: Using Sound in Computer Interfaces. Human–Computer Interaction, 2(2), 167-177.
    10.Gittins, D. (1986). Icon-Based Human-Computer Interface. International Journal of Man-Machine Studies, 24, 519-543.
    11.Guo, F. (2012). More Than Usability: The Four Elements of User Experience. Retrieved from http://www.uxmatters.com/mt/archives/2012/04/more-than-usability-the-four-elements-of-user-experience-part-i.php
    12.Horn, R. E. (1998). Visual Language: Global Communication for the 21st Century. Bainbridge Island, WA: Macro VU Press.
    13.Horton, W. (1994). The icon book. NY: John Wiley & Sons, Inc.
    14.Kaneko S., Hiroyuki, H. & Kusui Y. (1991). Approach to designing easy- to- understand icons. IEEE System and Software Engineering Laboratory, Toshiba Corporation, 246-253.
    15.Kepes, G. (1995). Language of Vision. NY: Dover.
    16.LeBlanc, M. (2013). 6 tips from Apple on creating great app icons. Retrieved from http://blog.iconfinder.com/6-tips-from-apple-on-creating-great-app-icons/
    17.Lester, P. M. (2003). Visual Communication: Images with Messages. CA: Wadsworth Publishing Company.
    18.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.
    19.Lodding, K, N. (1983). Iconic interfacing. IEEE Computer Graphics and Applications, 3(2), 11-20.
    20.Martin, B. & Hannington, B. (2012). Universal Methods of Design: 100 Ways to Research Complex Problems, Develop Innovative Ideas, and Design Effective Solutions. Beverly, MA: Rockport Publishers.
    21.Minichiello V., Aroni R., Timewell E. & Alexander L. (1995). In-depth Interviewing, Second Edition. South Melbourne: Longman.
    22.Nielsen, J. (1993). Usability engineering. Boston, MA: AP Professional.
    23.Norman, D. A. (1988). The Design of Everyday Things. New York: Doubleday.
    24.Preece, J. (Ed.). (1995). A Guide to Usability: Human Factors in Computing. Wokingham, England: Addison-Wesley.
    25.Preiser, W. and Ostroff, E. (2001). Universal Design Handbook. NY: McGraw-Hill.
    26.Rogers, Y. (1989). Icons at the interface: their usefulness. Interacting with Computers, 1(1), 105-117.
    27.Saunders, A. C. (1994). Graphics and how they communicate. In D. M. Moore & F.M. Dwyer (Eds.), Visual literacy. Englewood Cliff, NJ: Educational Technology Publication, 183-208.
    28.Smith A. (2012). Cell Internet Use 2012 [Description of content]. Retrieved from http://www.pewinternet.org/Reports/2012/Cell-Internet-Use-2012.aspx
    29.Tversky, B., & Hemenway, K. (1984). Objects, parts, and categories. Journal of Experimental Psychology: General, 113, 169-193
    30.Wolff, J. S. & Wogalter, M. S. (1998). Comprehension of pictorial symbols: Effects of context and test method. Human Factors, 40(2), 173-186.
    31.Wang, H. F. (2005). Designing Appropriate Icons for Taiwanese Computer Users. Phd These. Reading University, UK.
    32.Wood, W. T. & Wood, S. K. (1987). Icons in everyday life. In G. Salvendy, S. L. Sauter & J.J. Hurrell Jr. (Eds.). Social, ergonomic, and stress aspects of work with computers, 97–104.
    33.Zwage, H. J. & Boresema, T. (1983). Evaluation of a set of graphic symbols. Applied Ergonomics, 14(1), 43-54.
    34.Apple(2012)。發表耳目一新的使用者介面與絕佳全新功能的 iOS 7【新聞群組】。上網日期:2013年10月2日。取自 http://www.apple.com/tw/hotnews/
    35.Parkes, S.(2012). 國際電聯發布全球技術發展最新數據【原始數據】。上網日期:2013年11月12日。取自 http://www.itu.int/net/pressoffice/press_releases/2013/pdf/05-zh.pdf
    36.方裕民(2003)。人與物的對話-互動介面設計理論與實務。臺北市:田園城市。
    37.中華民國教育部(1994)。重編國語辭典修訂本。上網日期:2013年11月20日。取自 http://dict.revised.moe.edu.tw/index.html
    38.白乃遠、呂國泰、許智惟、詹介珉(2012)。iOS/Android遊戲APP開發精粹-Adobe Flash CS6應用功略。新北市:博碩文化。
    39.江志浩(2012)。2013年第4季我國行動上網觀測【原始數據】。上網日期:2013年11月12日。取自 http://www.find.org.tw/find/home.aspx?page=many&id=355
    40.行政院主計處(1996)。中華民國政府統計名詞定義。台北市:編者。
    41.李青蓉、魏丕信、施郁芬、邱昭彰(1998)。人機介面設計。臺北縣:空大,5。
    42.莊鈺鑫、李傳房(2007)。高齡者無障礙交通與環境因素之探討。設計研究,8,43-52。
    43.林廷宜、楊曜全(2009)。操作說明圖視覺語言分析探討-以避難緩降機為例。2009世界華人工業設計論壇/2009中華民國設計學會第14屆設計學術研究成果研討會。
    44.林品章、張照聆(2009)。圖像傳達系統化之理論基礎。設計學研究,12(2),46-49。
    45.林品章、羅凱、楊小青(2012)。商品包裝上警告圖像之改良設計。設計學報,17(2), 97-118。
    46.林建宏、徐國堂(2013)。Android+iOS UIDesign行動裝置介面設計。臺北市:佳魁資訊。
    47.林楷庭(2013)。以使用者經驗發展聽障者生活協助APP之研究與設計。國立台灣科技大學,臺北市。
    48.林榮泰、莊明振(1991)。從圖像語意探討人機介面圖像的設計。工業設計,20,85-93。
    49.吳紹群(2002)。內容分析法與圖書館學研究。圖書與資訊學刊,(40), 47-61。
    50.胡佑宗(譯)(1996年)。工業設計—產品造型的歷史、理論及實務(Design: Geschichte, theorie und praxis der produktgestaltung)(原作者:Burdek, B. E.)。台北:亞太。(原作出版年:1991)
    51.亞洲通用設計聯盟(2008)。通用設計─實踐美好的未來生活。台北:亞洲通用設計聯盟。
    52.翁鵲嵐、鄭玉屏、張志傑(譯)(2005年)。情感設計:我們為何喜歡(或討厭)日常用品(Emotional design:Why we love(or hate)everyday things)(原作者:Norman, D. A)。台北市:田園城市文化。(原作出版年:2004)
    53.康台生(2007)。視覺、標誌符號與表徵。設計研究學報,創刊號,83。
    54.康台生、呂靜修(2007)。視覺、標誌符號與表徵。設計研究學報,創刊號,78-89。
    55.陳俊宏、楊東民(2004)。視覺傳達設計概論。台北:全華。
    56.陳建和(2002)。觀光研究方法。台北:五南。
    57.陳建雄(2006)。互動設計:跨越人-電腦互動。台北:全華。
    58.陳建勳(譯)(2007年)。資訊架構學:網站應用(Information Architecture for the World Wide Web,3/e)(原作者:Morville, P. &Rosenfeld, L.)。臺北市:歐萊禮。(原著出版年:2006)
    59.陳振甫(2000)。「通用設計」之迷思與其設計方法之探討。2000年Universal Design 的展望學術研討會論文集,37-41。
    60.黃柏文(2004)。行動電話人機介面圖像意象及偏好之研究。中原大學商業設計研究所,桃園。
    61.張美惠(譯)(1994年)。資訊焦慮(Information anxiety)(原作者:Wurman, R. S.)。臺北市:時報文化。(原作出版年:1989)
    62.張悟非(1992)。從"認知心理"的觀點來探討"視覺資訊設計"的方向。明志工專學報,24,163-174。
    63.張紹勳(2007)。研究方法,台中:滄海。
    64.馮淑萍(2000)。全球資訊網業視覺傳達之使用者介面設計要素研究-以台灣企業形象網頁為例,碩士論文。雲林科技大學視覺傳達設計研究所。
    65.楊裕富(1998)。設計的文化基礎:設計、符號、溝通。臺北市:亞太圖書。
    66.遠見(2013)。遠見民調:台灣民眾網路行為調查【原始數據】。上網日期:2013年10月30日。取自http://www.gvm.com.tw/webonly_content_1172_1.html
    67.鄧少華、邱俊霖(2008)。行動裝置 PDA 資料復原鑑識之研究。2008第三屆數位教學暨資訊實務研討會論文集,台南:南台科技大學。
    68.鄭麗玉(1993)。認知心理學-理論與應用。台北:五南。
    69.賴采秀、林廷宜(2013)。蘋果作業系統應用程式圖示視覺表現之比較。2013造形˙文創˙跨界設計國際學術研討會。台北:國立臺灣藝術大學。
    70.蕭淑芳(2004)。電腦繪圖軟體圖像設計形式對圖像意義傳達影響之研究。國立成功大學工業設計研究所,台南。
    71.蘇文清、嚴貞、李傳房(2007)。符號學與認知心理學基礎理論於視覺設計之運用研究-以“標誌設計”為例。人文暨社會科學期刊,3(1),95-104。

    QR CODE