基于模糊加权平均法主观评估网页的总体美感值研究

摘要：通过分析当前界面美感研究和美感计算的不足，改进了网页视觉美感框架，并基于模糊理论的模糊加权平均法，提出了一种主观评价网页美感的方法。首先分析了影响网页视觉美感的因素，并在此基础上进行改进，提出了新的感性框架；然后使用层次分析法得到每个因素的权重值，由于用户在评估网页时本质上存在模糊和不确定性，因此评分使用语义变量值更符合实际；最后，通过权重和评分的模糊加权平均得到网页的总体主观美感值。实验结果表明，新的美感框架和权重有效且模糊加权方法可行。

关键词：网页美感；模糊集理论；模糊加权平均；感性美感结构

DOIDOI：10.11907/rjdk.143612

中图分类号：TP302.1

文献标识码：A 文章编号文章编号：16727800（2015）001002403

作者简介作者简介：张虹（1990-），女，江苏江阴人，四川大学计算机学院硕士研究生，研究方向为人机交互、界面美感。

0 引言

互联网的兴起，使得人们获取资讯、交流和传播的形式发生了巨大的变化，访问网页成为用户与网络最普遍的交流方式[1]。网站主页是网站的入口，用户由此获得网站的第一印象，这在很大程度上影响用户是否愿意深入探索该网站，因此，吸引用户的主页至关重要，评估一个网页的视觉美感意义重大。

本文从网页的简洁、多样和工艺3方面（每个方面又包括了若干个衡量因素），基于Moshagen[2]的成果，提炼出新的网页视觉美感框架。由于用户对网页美感评估时是模糊的不确定的，因此使用基于模糊集的理论使用语义变量来表示用户的评分，再使用模糊加权平均的方法得到网页的总体视觉美感值。实验结果表明，基于感性描述的新视觉美感框架具现实意义，并且模糊理论的应用更加符合人在作出判断时模糊的本质[3]，模糊加权平均方法也证明是可行的。

1 相关工作

传统的人机交互领域研究更倾向于网站的功能性和可用性。Nielsen[4]提出了指导设计可用性网页的113条方法，包括40条特别设计建议。而目前人机交互领域的研究开始强调美感在界面设计上的重要性[56]。 Kurosu 和 Kashimura[7]发现用户在界面可用性感知和界面视觉美感之间存在很大的关联，实验结果显示具有美感视觉的界面更具优势。

Ngo.et.al[8]提出了测量页面布局美感的14个因素，例如平衡性、对称型、统一性等。每一个因素都使用一个数学公式进行计算，实验结果显示计算出来的美感度值和人感知的美感度之间有很高的关联度。

Altaboli[9]研究了网页布局的平衡性、整体性和顺序性对视觉美感的影响，提出了测量美感度的回归模型，并且用网页验证了这个模型，结果显示：这3个因素足够衡量页面的经典美感度。

周蕾[10]在Ngo.et.al的基础上，结合多学科领域的理论和方法，提取了平衡、比例、简洁、呼应4个影响界面布局美感度的潜在因子及与其对应的12个具体评价指标，使用灰色关联分析进行美度综合评价。

多数研究都倾向于采用数学公式计算出每个指标值，再计算界面布局的整体美感值，此方法存在一定的缺陷：①对美的接受是基于人的感知，而人对美的感受是因人而异的，因此要从感知用户本身的角度去考虑；②人的感知是模糊且不确定的，很难用公式去测量；③多数研究都是只从界面布局出发来评估美感，但是影响视觉美感的因素还包括颜色、工艺等 [9]。

Lavie 和Tractinsky [11]从人对页面整体美的感知出发，提出了美感的两个维度，将其定义为“经典美感”和“表达美感”。经典美感强调有序简洁的设计，一个简洁的布局可以让浏览页面的过程变得流畅， “简洁就是美”；表达美感强调的是设计者的创新性和网页的可探索性。Moshagen[2] 在前者的基础上提出了网页视觉美感框架，将影响美感的因素分为4个：简洁、多样、颜色和工艺。简洁性对应的是经典美感，多样性、颜色和工艺对应的是表达美感。

2 模糊理论

2.1 模糊集

模糊集作为普通集合的扩展是由Zadeh[12]提出的，模糊集为全域中的个体赋一个值（在0到1之间），表示该个体对此模糊集的隶属程度，使用隶属度函数μ（x）表示元素x隶属于模糊集合A的隶属程度。例如对一个35岁的人（x），他属于模糊集 “年老”（A）的隶属度为0.3（μ（x） = 0.3），从隶属度可以看出，35岁并不算老，但是也可以记入这个集合内。模糊集更符合人类的思考方式，对于页面的美感感知也同样存在这种模糊性。

2.2 模糊数（Fuzzy number）

正规模糊集合是指隶属度函数的值至少有一个等于1的模糊集；凸模糊集是指隶属度函数严格的单调递增（减），或者先单调递增（减）的模糊集。定义：如果A是一个只有单个顶点的正规则凸模糊集合，则A成模糊数。常见模糊数是三角模糊数，见图1，梯形模糊数，见图2。一个模糊数例如“重要”、“很好”可以用[a，b，c]或者[a，b，c，d]来表示。

图1 三角模糊数 图2 梯形模糊数

2.3 模糊加权平均（FWA-fuzzy weighted average）

给出n个模糊权重wi和n个模糊量xi，获得它们的模糊加权平均值：y=∑ni=1wixi∑ni=1wi=f（w1，...，wn，x1，...，xn） （1） wi和xi分别用隶属度函数μ（wi）和μ（xi）表示，模糊加权平均后得到的是隶属度函数μ（y）。

2.4 解模糊（Defuzzification）

解模糊是将模糊量变成精确值的过程，模糊与其相反。常用的解模糊方法是重心法（Center-of-gravity）。

z*=∫μ（z）·zdz ∫μ（z）dz （2）

使用解模糊方法可以将模糊加权平均得到的隶属度函数去模糊化，得到一个精确值。

3 网页视觉美感框架

以前的美感衡量框架[8，9]都是从计算美学的角度出发，采用一些容易用数学公式表示的因素计算，忽略了抽象的感性描述。本文基于Moshagen[9]的美感框架，召集3位界面设计师和10名普通用户，经过反复讨论，总结出10个影响因素，构成一个基于感性描述的网页视觉美感框架，如图3所示。

图3 网页视觉美感框架

4 实验

S1：基于网页视觉美感框架图，建立比较矩阵。请两个界面设计专家共同给出成对比较矩阵A=[aij]， i，j=1，2，...，n，其中aij∈[19，1]，aij表示因素ci比cj的相对重要程度。

S2：计算权重并检验矩阵A的一致性。本文使用正交几何平均（NGM）来得到权重，

wi=（∏nj=1aij）1/n/∑ni=1（∏nj=1aij）1/n，i，j=1，2，...，n（3）

本文使用一致性率（CR）来判断决策的一致性：

CR=Ci/Ri （4）

其中Ci被称为一致性率，Ri是一个统计数字，当n=10时，Ri=1.49。Ci的计算公式为：

Ci=λmax-nn-1 （5）

其中λmax表示成对比较矩阵中的最大特征值，n表示矩阵的维度，可以用公式（6）表示。

λmax=1n∑ni=1（awiwi）（6）

使用式（4）～（6）可以计算得到CR=0.075≤0.1，表示矩阵具有一致性。将每个权重除以最大的权重值后转换成语义权重，见表1，每个语义变量的隶属度函数见图4。例如C1的数值权重为0.081，它对应的语义权重为VL。

5 结语

从表3可以看出，对美感因素使用模糊加权方法得到的网页美感排序与直接给出的网页美感排序是一致的，视觉美感较好的网页如中国国家地理网和美国白宫首页都排在前面，而美感体验较差的赶集网和中国天文网排在后面。

实验结果表明，本文提出的网页视觉美感框架不仅符合对视觉美感的感性描述，而且通过层次分析法得到的语义权重是有意义的。此外，使用模糊加权方法求得网页的总体主观美感度，更加符合用户在评分时存在模糊和不确定的本质。通过打分，设计师可以从得分低的美感因素方面改进网页设计，这样设计出来的网页也更加符合用户的个人偏好。

未来要进一步完善网页视觉美感评估体系，探索美感框架在其它方面的应用，为设计工作提供理论基础和技术支持。

参考文献：

[1] FOX E A. WorldWide Web and computer science reports[J]. Communications of the ACM，1995，38（4）：4143.

[2] MORTEN MOSHAGEN，MEINALD T， THIELSCH. Facets of visual aesthetics[J].HumanComputer Studies， 2010 ：689–709.

[3] SHIH WEN HSIAO，JYH RONG CHOU. A Gestaltlike perceptual measure for home page design using a fuzzy entropy approach[J].HumanComputer Studies，2006（64）： 137156.

[4] NIELSEN J ，TAHIR M. Homepage usability： 50 webstie deconstructed[M].New Riders，Indianapoils，2002.

[5] Y LIU. Engineering aesthetics and aesthetic ergonomics： theoretical foundations and a dualprocess research methodology[J]. Ergonomics，2003，46（13）：12731292.

[6] Y LIU. The aesthetic and the ethic dimensions of human factors and design[J]. Ergonomics，2003，46（13）：12931305.

[7] KUROSU，KASHIMURA. Apparent usability vs. inherent usability experimental analysis on the determinants of the apparent usability[J]. Proceeding of the conference on Human Factors in Computing Systems，1995（2）：292293.

[8] D C L NGO，L S TEO，J G BYRNE. Modelling interface aesthetics[J]. Information Sciences，2003（152）：2546.

[9] AHAMED ALTABOLI， YINGZI LIN. Investigate effects of screen layout elements on interface and screen design aesthetic[M].Advances in HumanComputer Interaction，2011.

[10] 周蕾.界面元素布局设计的美度评价方法[J]. 计算机辅助设计与图形学学报，2013，25（5）：758766.

[11] TALIA LAVIE，NOAM TRACTINSKY. Assessing dimensions of perceived visual aesthetics of web sites[J]. Int. J. HumanComputer Studies， 2004（60）：269298.

[12] ZADEH L A. Fuzzy sets[J]. Information and Control ，1965（8）：338353.

[13] TA CHUNG CHU，P A H NGUYEN. A centroid based fuzzy weighted average for ranking alternatives[C].Proceedings of 2013 4th International Asia Conference on Industrial Engineering and Management Innovation ，IEMI，2013.