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

在網路龐大繁瑣的資訊量下，介面設計的良窳與否，會影響使用者對於訊息的理解程度，近年來人機介面(Human-machine interface)設計開始出現以功能取向為主的扁平化設計(flat design)風格，本研究以iOS 7、Android Lollipop的智慧型手機介面圖示，以及Windows Metro style版本介面圖示為蒐集範圍，第一步驟蒐集國內外學者對人機介面的研究文獻，探討並歸納圖像簡化之設計方式，第二步驟將三套介面相似功能的圖形做比對，篩選出較常使用到的功能圖像，並依照步驟一所得要點，繪製「簡化圖樣」，並去除彩度，得到30個黑白樣本。第三步驟以問卷方式，調查使用者對圖樣的辨識度高低，以分析符號辨識度影響依序為何。經由單因子樣本檢定、相依樣本T檢定、Tukey HSD事後檢定等綜合分析結果得知：在手機介面設計簡化手法上，使用「強調功能特徵」的明喻方式，且以「單一元素」辨識率為最佳，最差為多項元素組成的「使用情境模擬」；面對辨識率較低的樣本，受測者傾向逃避辨識，建議在設計介面圖示時先以舊有的相關功能模板著手，應以強調功能特徵或是用文字來取代模擬功能的使用畫面，再以功能特殊元素做區隔，模擬功能使用情境對辨識率沒有顯著幫助。在無法判斷樣本功能時，具設計背景的受測者比無設計背景受測者更傾向放棄辨識，在認同度方面，無法判斷樣本功能時，具設計背景的受測者也比無設計背景者來的低，但在辨識度方面，受測者是否具有設計背景並無顯著差異。

關鍵字

扁平化設計；智慧型手機；使用者經驗；人機介面；圖像

並列摘要

Given the large amount of information online, the interface design may affect the user's understanding of information. In recent years, the human-machine interface has started to adopt function-oriented flat design. In this study, interface icons of iOS 7, Android Lollipop smart phones and Windows Metro style. First, domestic and foreign research literature on human-machine interface are collected to discuss and summarize the design methods for graph simplification. Secondly, 3 sets of graphs of the interfaces with similar functions are compared to select more commonly used functional graphs, and then "simplified graphs" are drawn on the biases of the key points in the first step, and saturation is removed to obtain 30 black and white samples. Third, the user's recognition rate of the graphs is investigated through questionnaires to prioritize the factors affecting the recognition rate of symbols. According to the results of the single factor sample test, independent sample T test, Tukey HSD post-test and other comprehensive analysis, in the simplification design of mobile phone interface, “highlight of functional characteristics" and use of "single element" have the best recognition rate, and use of the situational simulation" has the lowest recognition rate; for the samples with lower recognition rate, the respondents tended to evade recognition, and it is recommended design of the interface icons can be started with previous function templates. Highlight of functional characteristics or use of texts should replace use of the graphs which simulate function, and then special function elements are used as demarcation; the situational simulation function cannot significantly improve the recognition rate. When the function of the samples cannot be judged, the respondents with the design background are more inclined to give up recognition than those without the design background. When the function of the samples cannot be judged, the respondents with the design background have lower acceptance than those without the design background. However, in terms of recognition rate, there is no significant difference between the respondents with design background and those without design background.