甘 翔，高文華，張瑞秋

?

基于因子分析法的圖標(biāo)設(shè)計(jì)評(píng)價(jià)方法

甘 翔，高文華，張瑞秋

(華南理工大學(xué)設(shè)計(jì)學(xué)院，廣東 廣州 510006)

現(xiàn)有的圖標(biāo)設(shè)計(jì)評(píng)價(jià)方法大多基于審美評(píng)價(jià)或可用性而展開(kāi)，缺少對(duì)圖標(biāo)間的關(guān)系及設(shè)計(jì)因素的研究。為此，提出了一種基于因子分析法的界面圖標(biāo)設(shè)計(jì)評(píng)價(jià)方法，通過(guò)選取圖標(biāo)設(shè)計(jì)中的6個(gè)設(shè)計(jì)元變量，對(duì)其展開(kāi)意象評(píng)價(jià)統(tǒng)計(jì)并建立均值矩陣，使用因子分析法對(duì)其進(jìn)行計(jì)算分析及評(píng)價(jià)。最終將圖標(biāo)設(shè)計(jì)的影響因子提取為圖標(biāo)外形和圖標(biāo)內(nèi)部?jī)蓚€(gè)主要因子，從而方便研究人員評(píng)價(jià)系列圖標(biāo)設(shè)計(jì)中各圖標(biāo)之間的關(guān)系和各構(gòu)成要素的相互作用。該方法具有可靠性，評(píng)價(jià)結(jié)果與現(xiàn)有系列圖標(biāo)設(shè)計(jì)的視覺(jué)表現(xiàn)及其市場(chǎng)表現(xiàn)相符，并得出圖標(biāo)外形因子對(duì)于圖標(biāo)設(shè)計(jì)效果的影響作用大于圖標(biāo)內(nèi)部因子這一主要觀(guān)點(diǎn)。

圖標(biāo)設(shè)計(jì)；設(shè)計(jì)變量；量化分析；因子分析法

圖標(biāo)，是人機(jī)交互界面的重要組成部分之一，是用戶(hù)與包括計(jì)算機(jī)在內(nèi)的各種機(jī)器、系統(tǒng)進(jìn)行交互的重要方式[1]。成功的圖標(biāo)設(shè)計(jì)會(huì)使用戶(hù)的操作過(guò)程輕松順利，反之將阻礙用戶(hù)交互的進(jìn)行，甚至產(chǎn)生錯(cuò)誤的操作行為[2]。目前關(guān)于界面圖標(biāo)設(shè)計(jì)評(píng)價(jià)方法有：對(duì)圖標(biāo)設(shè)計(jì)的可用性測(cè)試[3]；對(duì)圖標(biāo)設(shè)計(jì)的設(shè)計(jì)學(xué)研究[4]；對(duì)圖標(biāo)設(shè)計(jì)的符號(hào)學(xué)研究。這些方法主要集中在圖標(biāo)的可用性和視覺(jué)層面上，往往是以訪(fǎng)談或眼動(dòng)儀的形式來(lái)測(cè)試用戶(hù)在使用單個(gè)圖標(biāo)過(guò)程中的效率和滿(mǎn)意度[5]，缺少了對(duì)圖標(biāo)各設(shè)計(jì)因素及其造成的影響效果或綜合效果的研究；此外，圖標(biāo)設(shè)計(jì)往往是一組或者一系列的，對(duì)單個(gè)圖標(biāo)的可用性測(cè)試或美學(xué)評(píng)價(jià)難以指導(dǎo)設(shè)計(jì)師進(jìn)行系列的圖標(biāo)設(shè)計(jì)[6]。

因子分析法是統(tǒng)計(jì)學(xué)中的一種常用方法，主要運(yùn)用在經(jīng)濟(jì)、金融和生物學(xué)領(lǐng)域。其原理是用少數(shù)幾個(gè)因子去描述許多指標(biāo)或因素之間的聯(lián)系，將相關(guān)比較密切的幾個(gè)變量歸于一類(lèi)，每一類(lèi)變量即為一個(gè)因子，以此考察原變量間的聯(lián)系與區(qū)別。本文在對(duì)圖標(biāo)設(shè)計(jì)的設(shè)計(jì)學(xué)研究的基礎(chǔ)上加以改進(jìn)，引入因子分析法對(duì)系列圖標(biāo)設(shè)計(jì)進(jìn)行評(píng)價(jià)。

1 設(shè)計(jì)元變量的選取及模型建立

1.1 圖標(biāo)設(shè)計(jì)六元變量的選取

本文選取了6個(gè)對(duì)系列圖標(biāo)設(shè)計(jì)造成主要影響的視覺(jué)因素作為應(yīng)用于因子分析法中的元變量。這6個(gè)元變量分別為：色熵(圖標(biāo)顏色數(shù)量的豐富程度；數(shù)值越大，顏色數(shù)量越豐富)；明度(圖標(biāo)顏色的整體亮度；數(shù)值越大，色彩亮度越大)；形狀(圖標(biāo)外輪廓的規(guī)則程度；數(shù)值越大，形狀越統(tǒng)一)；紋理(圖標(biāo)內(nèi)部紋理的復(fù)雜程度；數(shù)值越大，內(nèi)部細(xì)節(jié)越復(fù)雜)；層次(圖標(biāo)塊面的堆疊程度；數(shù)值越大，空間層次越多)；扁平度(圖標(biāo)繪畫(huà)風(fēng)格的扁平程度；數(shù)值越大，繪畫(huà)風(fēng)格越扁平)[7]。

1.2 六元變量的量化描述

為了獲取六元變量對(duì)應(yīng)的均值矩陣數(shù)據(jù)，使用了6組相對(duì)的形容詞來(lái)描述系列界面圖標(biāo)，{1,2,3,4,5,6}={色彩單一的-色彩豐富的，昏暗的-明亮的，形狀不規(guī)則的-形狀規(guī)則的，紋理復(fù)雜的-紋理簡(jiǎn)單的，層次平面的-層次立體的，扁平的-擬物的}，分別對(duì)應(yīng)了色熵、明度、形狀、紋理、層次和扁平度這6個(gè)元變量。

在級(jí)段制定時(shí)，將集合映射成規(guī)范的(1~7)范圍內(nèi)的7級(jí)尺度。圖1為對(duì)變量意象“擬物的-扁平的”的7級(jí)尺度劃分示意圖。

圖1 變量意象的7級(jí)尺度

1.3 數(shù)據(jù)模型的建立

現(xiàn)在市場(chǎng)流行的手機(jī)界面圖標(biāo)大致有10款，其涵蓋了多種設(shè)計(jì)風(fēng)格(圖2)，且用戶(hù)數(shù)量覆蓋了超過(guò)市場(chǎng)90%的總用戶(hù)人群。利用提出的6個(gè)變量意象為調(diào)查選項(xiàng)，對(duì)10款圖標(biāo)進(jìn)行六元變量意象評(píng)價(jià)，然后進(jìn)行數(shù)據(jù)統(tǒng)計(jì)分析。統(tǒng)計(jì)成如下矩陣所示

其中，為第k位被調(diào)查者對(duì)第i個(gè)評(píng)價(jià)樣本第j個(gè)變量意象的偏好程度。本次調(diào)查共設(shè)置了10個(gè)評(píng)價(jià)樣本和6個(gè)變量意象，i最大值為I=10，j最大值為J=6。

為了剔除某些偏差較大的變量意象得分，對(duì)第個(gè)變量語(yǔ)匯偏好程度的均值和標(biāo)準(zhǔn)差分別為

2 基于因子分析法展開(kāi)分析

2.1 求出均值矩陣的相關(guān)系數(shù)矩陣R

假設(shè)相關(guān)矩陣

其中，

2.2 求相關(guān)矩陣R的特征值λ和貢獻(xiàn)率C

KMO值越大，表示變量間共同因子越多，越適合進(jìn)行因子分析。Bartlett統(tǒng)計(jì)指標(biāo)檢驗(yàn)是用來(lái)檢驗(yàn)相關(guān)矩陣是不是單位矩陣，若不是單位矩陣，可以考慮進(jìn)行因子分析[8]。

通過(guò)因子分析可減少變量個(gè)數(shù)，因此在計(jì)算因子載荷矩陣時(shí)，一般不選取所有特征值，而只選取前個(gè)特征值和對(duì)應(yīng)的特征向量，得到下面的有個(gè)公共變量的因子載荷矩陣

得到特征值后，即可計(jì)算累計(jì)方差貢獻(xiàn)率，即

2.3 采用方差極大旋轉(zhuǎn)法對(duì)因子載荷矩陣進(jìn)行簡(jiǎn)化

2.4 計(jì)算綜合得分F

以各因子的方差貢獻(xiàn)率占兩個(gè)因子總方差貢獻(xiàn)率的比重作為權(quán)重進(jìn)行加權(quán)匯總，得出各界面樣本的綜合得分，即

3 計(jì)算結(jié)果

原始矩陣的相關(guān)性矩陣見(jiàn)表1。

表1 相關(guān)性矩陣

由表1可見(jiàn)，大部分?jǐn)?shù)據(jù)的絕對(duì)值在0.3以上，說(shuō)明變量間有較強(qiáng)的相關(guān)性。

表2的KMO值為0.616，大于0.500。巴特利特球形度檢驗(yàn)的顯著性為0.001，說(shuō)明變量之間存在強(qiáng)相關(guān)性，相關(guān)矩陣不是一個(gè)單位矩陣，適合進(jìn)行因子分析。

表2 KMO和巴特利特檢驗(yàn)

表4中色熵、明度、形狀和扁平度主要由第一主成分解釋?zhuān)y理和層次主要由第二主成分解釋。與第一因子Fac1關(guān)系密切的變量主要是圖標(biāo)的顏色和外形，可以命名為圖標(biāo)外形因子；與第二因子Fac2關(guān)系密切的是代表內(nèi)部細(xì)節(jié)的紋理和層次，可以命名為圖標(biāo)內(nèi)部因子。

表3 總方差解釋

表4 旋轉(zhuǎn)后的成分矩陣

圖3 依據(jù)均值矩陣?yán)L制的六元變量意象雷達(dá)圖

4 評(píng)價(jià)結(jié)論

4.1 評(píng)價(jià)分析

由表5得知，樣本1的Fac1得分最高，而樣本4的Fac2得分最高，說(shuō)明了樣本1的設(shè)計(jì)重點(diǎn)是色熵、明度、形狀和扁平程度。而樣本4則著重于紋理和層次感，這與其實(shí)際視覺(jué)表現(xiàn)是相符的。

與表6綜合得分的排名情況相似，現(xiàn)階段界面圖標(biāo)設(shè)計(jì)的主流是樣本1和6的多彩扁平化風(fēng)格；國(guó)內(nèi)兩個(gè)具有獨(dú)特設(shè)計(jì)風(fēng)格的圖標(biāo)，如擬物化的樣本4和清新具象化的樣本9的綜合評(píng)價(jià)分均排在了中游水平，其雷達(dá)圖表現(xiàn)均衡但是得分中等，研究評(píng)價(jià)結(jié)果與其在市場(chǎng)中的小眾定位相符合。

表5 因子得分

表6 綜合得分

4.2 圖標(biāo)外形因子對(duì)圖標(biāo)設(shè)計(jì)產(chǎn)生了主要影響

當(dāng)色熵、明度和形狀這3個(gè)元變量在六元變量雷達(dá)圖下表現(xiàn)相似時(shí)，圖標(biāo)設(shè)計(jì)方案的評(píng)分較高，說(shuō)明一個(gè)圖標(biāo)的外形決定了圖標(biāo)設(shè)計(jì)的效果。如樣本1和6，都屬于高色熵、高明度、形狀規(guī)則統(tǒng)一的圖標(biāo)設(shè)計(jì)方案；而綜合評(píng)分較低的樣本的色熵評(píng)價(jià)與明度評(píng)價(jià)差異較大，如樣本5和7，該圖標(biāo)設(shè)計(jì)雖然色熵評(píng)價(jià)處于中上水平，但是明度評(píng)價(jià)不高，只能得到較低的綜合評(píng)價(jià)分?jǐn)?shù)。

因此本文建議設(shè)計(jì)師在今后對(duì)圖標(biāo)設(shè)計(jì)的工作中，重點(diǎn)應(yīng)放在圖標(biāo)的外形效果，如提升色彩的豐富度，增加色彩的明亮度以及約束圖標(biāo)的形狀；而對(duì)于圖標(biāo)內(nèi)部設(shè)計(jì)因子的處理，可以適當(dāng)減少紋理的繪制，縮減細(xì)節(jié)和層級(jí)。這樣做不僅提高了圖標(biāo)的視覺(jué)和使用效果，還縮減了繪制圖標(biāo)的時(shí)間。

4.3 手機(jī)界面圖標(biāo)設(shè)計(jì)是一個(gè)系統(tǒng)化且需要差異性的整體

圖標(biāo)的存在是為了讓用戶(hù)更容易、更快速去使用界面，因此圖標(biāo)設(shè)計(jì)必須考慮到用戶(hù)的學(xué)習(xí)成本和效率[9-10]。樣本10是一個(gè)典型的反面例子，其為了突出品牌有科技感、穩(wěn)定成熟的形象，將界面圖標(biāo)的背景色均設(shè)置為天藍(lán)色，色熵評(píng)價(jià)得分較低，導(dǎo)致用戶(hù)必須通過(guò)識(shí)別圖標(biāo)內(nèi)部細(xì)節(jié)才可以區(qū)分不同圖標(biāo)的功能，大大降低了使用效率。

5 結(jié)束語(yǔ)

本次研究的主要目的是建立定量化的界面圖標(biāo)設(shè)計(jì)評(píng)價(jià)方法——基于因子分析法的界面圖標(biāo)設(shè)計(jì)評(píng)價(jià)方法。該方法可以降低個(gè)人主觀(guān)因素對(duì)界面圖標(biāo)設(shè)計(jì)過(guò)程的影響，讓用戶(hù)的審美需求和使用需求能夠更全面、更直接和更精準(zhǔn)地反饋給設(shè)計(jì)師，做出更友好的界面圖標(biāo)。

在2017年淘寶“雙十一”活動(dòng)中，阿里巴巴公司使用了人工智能設(shè)計(jì)平臺(tái)“魯班”完成了4億張海報(bào)的設(shè)計(jì)工作[11]，在滿(mǎn)足用戶(hù)基本購(gòu)物需求的同時(shí)極大地降低了人工成本，也預(yù)示著未來(lái)設(shè)計(jì)的走向——人工智能將逐漸取代部分同質(zhì)化且低精度的設(shè)計(jì)工作。在今后的研究中，如能將本文方法與人工智能或機(jī)器學(xué)習(xí)技術(shù)相結(jié)合，對(duì)圖標(biāo)數(shù)據(jù)集使用因子分析法來(lái)歸類(lèi)和學(xué)習(xí)，將對(duì)智能化圖標(biāo)設(shè)計(jì)工具的研究和應(yīng)用起到重要的推動(dòng)作用。

[1] 張濤. 圖標(biāo)認(rèn)知因素分析及其應(yīng)用研究[D]. 鄭州: 解放軍信息工程大學(xué), 2007.

[2] 蔣文明, 楊志新, 蔣敏, 等. 智能手機(jī)應(yīng)用程序圖標(biāo)設(shè)計(jì)的可用性研究[J]. 人類(lèi)工效學(xué), 2015, 21(3): 21-24.

[3] 盧純福, 胡明艷, 唐智川, 等. 跑步機(jī)人機(jī)界面可用性評(píng)估及再設(shè)計(jì)研究[J]. 包裝工程, 2017, 38(22): 1-5.

[4] 郭霞. 軟件用戶(hù)界面圖標(biāo)的易用性設(shè)計(jì)研究[D]. 南京: 南京航空航天大學(xué), 2012.

[5] 滕兆烜, 金頌文, 甄永亮. 論手機(jī)圖形用戶(hù)界面中圖標(biāo)設(shè)計(jì)可視性[J]. 包裝工程, 2013, 34(4): 66-70.

[6] 周煜嘯, 羅仕鑒, 陳根才. 基于設(shè)計(jì)符號(hào)學(xué)的圖標(biāo)設(shè)計(jì)[J]. 計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào), 2012, 24(10): 1319-1328.

[7] 牟幫歡. 移動(dòng)設(shè)備交互界面圖標(biāo)設(shè)計(jì)風(fēng)格的工效學(xué)研究[D]. 杭州: 浙江理工大學(xué), 2017.

[8] 陳治. 使用SPSS軟件進(jìn)行因子分析和聚類(lèi)分析的方法[J]. 市場(chǎng)研究, 2006(6): 45-48.

[9] 喻婷, 殷俊. 智能手機(jī)用戶(hù)界面的圖標(biāo)人性化交互設(shè)計(jì)研究[J]. 包裝工程, 2011, 32(24): 73-75.

[10] 雷尚仲, 張瑞秋. 基于云服務(wù)的家庭智能空氣凈化系統(tǒng)設(shè)計(jì)[J]. 包裝工程, 2016, 37(4): 75-78.

[11] 美工終結(jié)者“魯班智能設(shè)計(jì)平臺(tái)”是如何工作的？[EB/OL]. [2017-05-11]. http://www.uisdc.com/alibaba- ai-how-it-works.

An Icon Design Evaluation Method Based on Factor Analysis Method

GAN Xiang, GAO Wenhua, ZHANG Ruiqiu

(School of Design, South China University of Technology, Guangzhou Guangdong 510006, China)

Most of the previous interface icon design evaluation methods are based on aesthetic evaluation or usability, lacking of researches on icons and elements in series icon designs. In this paper, an interface icon design evaluation method based on factor analysis method to study the relationship between icons and the elements of icon design is proposed. The method in this article chooses six design variables of icon design, developing imagery evaluation statistics and setting up its mean value matrix. Then use the factor analysis method to calculate, analysis and evaluate its outcome. Finally, the influence factors of icon design are extracted into two main factors: the shape of the icon and the interior of the icon, which helps the researchers to evaluate the visual effect of the icon design and the influence of each component. This icon design evaluation method is reliable, and is consistent with the visual performance and occupancy performance of in the existing markets. The most important outcome is that the influence of the external factors on the icon design is greater than the internal factors.

icon design; design variables; quantitative analysis; factor analysis method

TP 391

10.11996/JG.j.2095-302X.2018040706

A

2095-302X(2018)04-0706-05

2018-04-11；

2018-06-10

甘 翔(1994-)，男，廣東廣州人，碩士研究生。主要研究方向?yàn)榻换ピO(shè)計(jì)。E-mail：472967288@qq.com

張瑞秋(1972-)，男，河南魯山人，教授，博士。主要研究方向?yàn)橛?jì)算機(jī)輔助設(shè)計(jì)、交互設(shè)計(jì)。E-mail：rqzhang@scut.edu.cn