基于因子分析法的图标设计评价方法

甘 翔，高文华，张瑞秋



基于因子分析法的图标设计评价方法

甘 翔，高文华，张瑞秋

(华南理工大学设计学院，广东 广州 510006)

现有的图标设计评价方法大多基于审美评价或可用性而展开，缺少对图标间的关系及设计因素的研究。为此，提出了一种基于因子分析法的界面图标设计评价方法，通过选取图标设计中的6个设计元变量，对其展开意象评价统计并建立均值矩阵，使用因子分析法对其进行计算分析及评价。最终将图标设计的影响因子提取为图标外形和图标内部两个主要因子，从而方便研究人员评价系列图标设计中各图标之间的关系和各构成要素的相互作用。该方法具有可靠性，评价结果与现有系列图标设计的视觉表现及其市场表现相符，并得出图标外形因子对于图标设计效果的影响作用大于图标内部因子这一主要观点。

图标设计；设计变量；量化分析；因子分析法

图标，是人机交互界面的重要组成部分之一，是用户与包括计算机在内的各种机器、系统进行交互的重要方式[1]。成功的图标设计会使用户的操作过程轻松顺利，反之将阻碍用户交互的进行，甚至产生错误的操作行为[2]。目前关于界面图标设计评价方法有：对图标设计的可用性测试[3]；对图标设计的设计学研究[4]；对图标设计的符号学研究。这些方法主要集中在图标的可用性和视觉层面上，往往是以访谈或眼动仪的形式来测试用户在使用单个图标过程中的效率和满意度[5]，缺少了对图标各设计因素及其造成的影响效果或综合效果的研究；此外，图标设计往往是一组或者一系列的，对单个图标的可用性测试或美学评价难以指导设计师进行系列的图标设计[6]。

因子分析法是统计学中的一种常用方法，主要运用在经济、金融和生物学领域。其原理是用少数几个因子去描述许多指标或因素之间的联系，将相关比较密切的几个变量归于一类，每一类变量即为一个因子，以此考察原变量间的联系与区别。本文在对图标设计的设计学研究的基础上加以改进，引入因子分析法对系列图标设计进行评价。

1 设计元变量的选取及模型建立

1.1 图标设计六元变量的选取

本文选取了6个对系列图标设计造成主要影响的视觉因素作为应用于因子分析法中的元变量。这6个元变量分别为：色熵(图标颜色数量的丰富程度；数值越大，颜色数量越丰富)；明度(图标颜色的整体亮度；数值越大，色彩亮度越大)；形状(图标外轮廓的规则程度；数值越大，形状越统一)；纹理(图标内部纹理的复杂程度；数值越大，内部细节越复杂)；层次(图标块面的堆叠程度；数值越大，空间层次越多)；扁平度(图标绘画风格的扁平程度；数值越大，绘画风格越扁平)[7]。

1.2 六元变量的量化描述

为了获取六元变量对应的均值矩阵数据，使用了6组相对的形容词来描述系列界面图标，{1,2,3,4,5,6}={色彩单一的-色彩丰富的，昏暗的-明亮的，形状不规则的-形状规则的，纹理复杂的-纹理简单的，层次平面的-层次立体的，扁平的-拟物的}，分别对应了色熵、明度、形状、纹理、层次和扁平度这6个元变量。

在级段制定时，将集合映射成规范的(1~7)范围内的7级尺度。图1为对变量意象“拟物的-扁平的”的7级尺度划分示意图。

图1 变量意象的7级尺度

1.3 数据模型的建立

现在市场流行的手机界面图标大致有10款，其涵盖了多种设计风格(图2)，且用户数量覆盖了超过市场90%的总用户人群。利用提出的6个变量意象为调查选项，对10款图标进行六元变量意象评价，然后进行数据统计分析。统计成如下矩阵所示

其中，为第k位被调查者对第i个评价样本第j个变量意象的偏好程度。本次调查共设置了10个评价样本和6个变量意象，i最大值为I=10，j最大值为J=6。

为了剔除某些偏差较大的变量意象得分，对第个变量语汇偏好程度的均值和标准差分别为

2 基于因子分析法展开分析

2.1 求出均值矩阵的相关系数矩阵R

假设相关矩阵

其中，

2.2 求相关矩阵R的特征值λ和贡献率C

KMO值越大，表示变量间共同因子越多，越适合进行因子分析。Bartlett统计指标检验是用来检验相关矩阵是不是单位矩阵，若不是单位矩阵，可以考虑进行因子分析[8]。

通过因子分析可减少变量个数，因此在计算因子载荷矩阵时，一般不选取所有特征值，而只选取前个特征值和对应的特征向量，得到下面的有个公共变量的因子载荷矩阵

得到特征值后，即可计算累计方差贡献率，即

2.3 采用方差极大旋转法对因子载荷矩阵进行简化

2.4 计算综合得分F

以各因子的方差贡献率占两个因子总方差贡献率的比重作为权重进行加权汇总，得出各界面样本的综合得分，即

3 计算结果

原始矩阵的相关性矩阵见表1。

表1 相关性矩阵

由表1可见，大部分数据的绝对值在0.3以上，说明变量间有较强的相关性。

表2的KMO值为0.616，大于0.500。巴特利特球形度检验的显著性为0.001，说明变量之间存在强相关性，相关矩阵不是一个单位矩阵，适合进行因子分析。

表2 KMO和巴特利特检验

表4中色熵、明度、形状和扁平度主要由第一主成分解释，纹理和层次主要由第二主成分解释。与第一因子Fac1关系密切的变量主要是图标的颜色和外形，可以命名为图标外形因子；与第二因子Fac2关系密切的是代表内部细节的纹理和层次，可以命名为图标内部因子。

表3 总方差解释

表4 旋转后的成分矩阵

图3 依据均值矩阵绘制的六元变量意象雷达图

4 评价结论

4.1 评价分析

由表5得知，样本1的Fac1得分最高，而样本4的Fac2得分最高，说明了样本1的设计重点是色熵、明度、形状和扁平程度。而样本4则着重于纹理和层次感，这与其实际视觉表现是相符的。

与表6综合得分的排名情况相似，现阶段界面图标设计的主流是样本1和6的多彩扁平化风格；国内两个具有独特设计风格的图标，如拟物化的样本4和清新具象化的样本9的综合评价分均排在了中游水平，其雷达图表现均衡但是得分中等，研究评价结果与其在市场中的小众定位相符合。

表5 因子得分

表6 综合得分

4.2 图标外形因子对图标设计产生了主要影响

当色熵、明度和形状这3个元变量在六元变量雷达图下表现相似时，图标设计方案的评分较高，说明一个图标的外形决定了图标设计的效果。如样本1和6，都属于高色熵、高明度、形状规则统一的图标设计方案；而综合评分较低的样本的色熵评价与明度评价差异较大，如样本5和7，该图标设计虽然色熵评价处于中上水平，但是明度评价不高，只能得到较低的综合评价分数。

因此本文建议设计师在今后对图标设计的工作中，重点应放在图标的外形效果，如提升色彩的丰富度，增加色彩的明亮度以及约束图标的形状；而对于图标内部设计因子的处理，可以适当减少纹理的绘制，缩减细节和层级。这样做不仅提高了图标的视觉和使用效果，还缩减了绘制图标的时间。

4.3 手机界面图标设计是一个系统化且需要差异性的整体

图标的存在是为了让用户更容易、更快速去使用界面，因此图标设计必须考虑到用户的学习成本和效率[9-10]。样本10是一个典型的反面例子，其为了突出品牌有科技感、稳定成熟的形象，将界面图标的背景色均设置为天蓝色，色熵评价得分较低，导致用户必须通过识别图标内部细节才可以区分不同图标的功能，大大降低了使用效率。

5 结束语

本次研究的主要目的是建立定量化的界面图标设计评价方法——基于因子分析法的界面图标设计评价方法。该方法可以降低个人主观因素对界面图标设计过程的影响，让用户的审美需求和使用需求能够更全面、更直接和更精准地反馈给设计师，做出更友好的界面图标。

在2017年淘宝“双十一”活动中，阿里巴巴公司使用了人工智能设计平台“鲁班”完成了4亿张海报的设计工作[11]，在满足用户基本购物需求的同时极大地降低了人工成本，也预示着未来设计的走向——人工智能将逐渐取代部分同质化且低精度的设计工作。在今后的研究中，如能将本文方法与人工智能或机器学习技术相结合，对图标数据集使用因子分析法来归类和学习，将对智能化图标设计工具的研究和应用起到重要的推动作用。

[1] 张涛. 图标认知因素分析及其应用研究[D]. 郑州: 解放军信息工程大学, 2007.

[2] 蒋文明, 杨志新, 蒋敏, 等. 智能手机应用程序图标设计的可用性研究[J]. 人类工效学, 2015, 21(3): 21-24.

[3] 卢纯福, 胡明艳, 唐智川, 等. 跑步机人机界面可用性评估及再设计研究[J]. 包装工程, 2017, 38(22): 1-5.

[4] 郭霞. 软件用户界面图标的易用性设计研究[D]. 南京: 南京航空航天大学, 2012.

[5] 滕兆烜, 金颂文, 甄永亮. 论手机图形用户界面中图标设计可视性[J]. 包装工程, 2013, 34(4): 66-70.

[6] 周煜啸, 罗仕鉴, 陈根才. 基于设计符号学的图标设计[J]. 计算机辅助设计与图形学学报, 2012, 24(10): 1319-1328.

[7] 牟帮欢. 移动设备交互界面图标设计风格的工效学研究[D]. 杭州: 浙江理工大学, 2017.

[8] 陈治. 使用SPSS软件进行因子分析和聚类分析的方法[J]. 市场研究, 2006(6): 45-48.

[9] 喻婷, 殷俊. 智能手机用户界面的图标人性化交互设计研究[J]. 包装工程, 2011, 32(24): 73-75.

[10] 雷尚仲, 张瑞秋. 基于云服务的家庭智能空气净化系统设计[J]. 包装工程, 2016, 37(4): 75-78.

[11] 美工终结者“鲁班智能设计平台”是如何工作的？[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-)，男，广东广州人，硕士研究生。主要研究方向为交互设计。E-mail：472967288@qq.com

张瑞秋(1972-)，男，河南鲁山人，教授，博士。主要研究方向为计算机辅助设计、交互设计。E-mail：rqzhang@scut.edu.cn