扁平化設計在手機介面圖像之辨識率研究

A Study of Recognition Rate for Mobile Phone Interface Icon in Flat Design Style

林昱彣(Lin, Yu-Wen)；王藍亭(Wang,Lan-Ting)

扁平化 ； 手機 ； 介面 ； 圖像 ； 辨識率

書畫藝術學刊

28期（2020 / 06 / 01）

351 - 366

繁體中文

本研究以iOS 7、Android Lollipop以及Windows Metro style版本介面圖示為蒐集範圍，第一步驟蒐集國內外學者對人機介面的研究文獻，探討並歸納圖像簡化之設計方式，第二步驟將三套介面相似功能的圖像做比對，篩選出較常使用到的功能圖像，依照步驟一所得要點，繪製「簡化圖樣」，並去除彩度，得到30個黑白樣本。第三步驟以問卷方式，調查使用者對圖樣的辨識度高低，以分析符號辨識度影響依序為何。綜合分析結果得知：在手機介面設計簡化手法上，使用強調功能特徵的明喻方式，且以單一元素辨識率為最佳，最差為多項元素組成的樣本；面對辨識率較低的樣本，受測者傾向逃避辨識，建議在設計介面圖示時先以舊有的相關功能模板著手，應以強調功能特徵或是用文字來取代模擬功能的使用畫面，再以功能特殊元素做區隔，模擬功能使用情境對辨識率沒有顯著幫助。

1. 林廷宜,賴采秀(2015)。行動裝置介面圖樣識認回饋與造形表現研究。設計學報，20(3)，45-64。
   連結：
2. 許峻誠,王韋堯(2010)。圖像外形特徵數量與簡化程度之認知研究。設計學報，15(3)，87-105。
   連結：
3. 許峻誠,王韋堯(2009)。學習背景差異對簡化圖像之偏好研究。藝術教育研究，17，109-130。
   連結：
4. Principles of Flat Design (2013). Retrieved May 5, 2017, from the World Wide Web: https://designmodo.com/flat-design-principles/
5. Number of apps available in leading app stores as of March 2017 (2017) Retrieved May 30, 2017, from the World Wide Web: https://www.statista.com/statistics/276623/number-of-apps-available-in-leading-app-stores/.html
6. Apple Inc(2005).Human Interface Guidelines.USA:Apple Inc.
7. Cairney, P.,Sless, D.(1982).Communication effectiveness of symbolic safety signs with different user groups.Applied Ergonomic,13(2),91-97.
8. Gibson, J. J.(1986).The EcologicaApproach To Visua Perception:Classic Edition.New York:Psychology Press.
9. Horton, W.K.(1994).The ICON Book: Visua Symbols for Computer Systems and Documentation New.New York:John Wiley & Sons,Inc.
10. Norman, D A(1988).The psychology of everyday things.New York:Basic Books.
11. Salvendy, G.(Ed.),Sauter, S. L.(Ed.),Hurrel, J. J. Jr.(Ed.)(1987).Social,ergonomic,and stress aspects of work with computers.London,England:Elsevier.
12. 李建緯(2006)。台南市，國立臺南藝術大學藝術創作理論研究所。
13. 李思潔(2007)。此時此刻─陳慧嶠作品中非理性元素的運用。議藝份子，9，139-150。
14. 林昱彣(2018)。台南市，台南應用科技大學應用設計研究所。
15. 姜義臺(2009)。台中市，國立中興大學圖書資訊學研究所。
16. 姚美玲(2004)。新竹市，國立交通大學應用藝術研究所。
17. 財團法人台灣網路資訊中心(2017) 。「台灣寬頻網路使用調查」。台北市：財團法人台灣網路資訊中心。取自：https://www.twnic.net.tw/NEWS4/144.pdf張春興(1989)。張氏心理學辭典。台北：東華書局。
18. 張春興(1989).張氏心理學辭典.台北:東華書局.
19. 張繼文(1995)。從認知心理觀點探討記號設計。屏東師院學報，8，472-500。
20. 張耀羿,熊碧梧(2006)。視覺傳達設計圖像應用之研究─以美軍心戰傳單為例。第九屆國軍軍事社會科學學術研討會
21. 郭大維,何肇喜,王銘顯(2014)。台灣、中國、馬來西亞華裔大專青年圖像表現形式之比較研究。科技學刊，23(1)，53-63。
22. 陳盈蓉(2011)。台北市，國立臺灣藝術大學視覺傳達設計學系碩士班。
23. 陳娜文,王藍亭(2011)。行動電話之功能圖像傳達與使用者意涵認知研究。視覺藝術論壇，6，48-79。
24. 陳登吉(2002)。新竹市，國立交通大學資訊工程系研究所。
25. 黃室苗(1993)。Human Computer Interaction(HCI)概論。工業設計，22(4)，207-212。
26. 楊裕富(1998)。視覺傳達設計的後現代狀況之二：後現代的淵源、類別與本土反應。設計學報，3(2)，31-43。
27. 鄭文俊(1999)。資訊產品螢幕圖像操作介面設計思索與實務。大葉學報，8(1)，111-120。