摘要：通過分析當(dāng)前界面美感研究和美感計(jì)算的不足，改進(jìn)了網(wǎng)頁視覺美感框架，并基于模糊理論的模糊加權(quán)平均法，提出了一種主觀評價(jià)網(wǎng)頁美感的方法。首先分析了影響網(wǎng)頁視覺美感的因素，并在此基礎(chǔ)上進(jìn)行改進(jìn)，提出了新的感性框架；然后使用層次分析法得到每個(gè)因素的權(quán)重值，由于用戶在評估網(wǎng)頁時(shí)本質(zhì)上存在模糊和不確定性，因此評分使用語義變量值更符合實(shí)際；最后，通過權(quán)重和評分的模糊加權(quán)平均得到網(wǎng)頁的總體主觀美感值。實(shí)驗(yàn)結(jié)果表明，新的美感框架和權(quán)重有效且模糊加權(quán)方法可行。

關(guān)鍵詞：網(wǎng)頁美感；模糊集理論；模糊加權(quán)平均；感性美感結(jié)構(gòu)

DOIDOI：10.11907/rjdk.143612

中圖分類號：TP302.1

文獻(xiàn)標(biāo)識碼：A 文章編號文章編號：16727800（2015）001002403

作者簡介作者簡介：張虹（1990-），女，江蘇江陰人，四川大學(xué)計(jì)算機(jī)學(xué)院碩士研究生，研究方向?yàn)槿藱C(jī)交互、界面美感。

0 引言

互聯(lián)網(wǎng)的興起，使得人們獲取資訊、交流和傳播的形式發(fā)生了巨大的變化，訪問網(wǎng)頁成為用戶與網(wǎng)絡(luò)最普遍的交流方式[1]。網(wǎng)站主頁是網(wǎng)站的入口，用戶由此獲得網(wǎng)站的第一印象，這在很大程度上影響用戶是否愿意深入探索該網(wǎng)站，因此，吸引用戶的主頁至關(guān)重要，評估一個(gè)網(wǎng)頁的視覺美感意義重大。

本文從網(wǎng)頁的簡潔、多樣和工藝3方面（每個(gè)方面又包括了若干個(gè)衡量因素），基于Moshagen[2]的成果，提煉出新的網(wǎng)頁視覺美感框架。由于用戶對網(wǎng)頁美感評估時(shí)是模糊的不確定的，因此使用基于模糊集的理論使用語義變量來表示用戶的評分，再使用模糊加權(quán)平均的方法得到網(wǎng)頁的總體視覺美感值。實(shí)驗(yàn)結(jié)果表明，基于感性描述的新視覺美感框架具現(xiàn)實(shí)意義，并且模糊理論的應(yīng)用更加符合人在作出判斷時(shí)模糊的本質(zhì)[3]，模糊加權(quán)平均方法也證明是可行的。

1 相關(guān)工作

傳統(tǒng)的人機(jī)交互領(lǐng)域研究更傾向于網(wǎng)站的功能性和可用性。Nielsen[4]提出了指導(dǎo)設(shè)計(jì)可用性網(wǎng)頁的113條方法，包括40條特別設(shè)計(jì)建議。而目前人機(jī)交互領(lǐng)域的研究開始強(qiáng)調(diào)美感在界面設(shè)計(jì)上的重要性[56]。 Kurosu 和 Kashimura[7]發(fā)現(xiàn)用戶在界面可用性感知和界面視覺美感之間存在很大的關(guān)聯(lián)，實(shí)驗(yàn)結(jié)果顯示具有美感視覺的界面更具優(yōu)勢。

Ngo.et.al[8]提出了測量頁面布局美感的14個(gè)因素，例如平衡性、對稱型、統(tǒng)一性等。每一個(gè)因素都使用一個(gè)數(shù)學(xué)公式進(jìn)行計(jì)算，實(shí)驗(yàn)結(jié)果顯示計(jì)算出來的美感度值和人感知的美感度之間有很高的關(guān)聯(lián)度。

Altaboli[9]研究了網(wǎng)頁布局的平衡性、整體性和順序性對視覺美感的影響，提出了測量美感度的回歸模型，并且用網(wǎng)頁驗(yàn)證了這個(gè)模型，結(jié)果顯示：這3個(gè)因素足夠衡量頁面的經(jīng)典美感度。

周蕾[10]在Ngo.et.al的基礎(chǔ)上，結(jié)合多學(xué)科領(lǐng)域的理論和方法，提取了平衡、比例、簡潔、呼應(yīng)4個(gè)影響界面布局美感度的潛在因子及與其對應(yīng)的12個(gè)具體評價(jià)指標(biāo)，使用灰色關(guān)聯(lián)分析進(jìn)行美度綜合評價(jià)。

多數(shù)研究都傾向于采用數(shù)學(xué)公式計(jì)算出每個(gè)指標(biāo)值，再計(jì)算界面布局的整體美感值，此方法存在一定的缺陷：①對美的接受是基于人的感知，而人對美的感受是因人而異的，因此要從感知用戶本身的角度去考慮；②人的感知是模糊且不確定的，很難用公式去測量；③多數(shù)研究都是只從界面布局出發(fā)來評估美感，但是影響視覺美感的因素還包括顏色、工藝等 [9]。

Lavie 和Tractinsky [11]從人對頁面整體美的感知出發(fā)，提出了美感的兩個(gè)維度，將其定義為“經(jīng)典美感”和“表達(dá)美感”。經(jīng)典美感強(qiáng)調(diào)有序簡潔的設(shè)計(jì)，一個(gè)簡潔的布局可以讓瀏覽頁面的過程變得流暢， “簡潔就是美”；表達(dá)美感強(qiáng)調(diào)的是設(shè)計(jì)者的創(chuàng)新性和網(wǎng)頁的可探索性。Moshagen[2] 在前者的基礎(chǔ)上提出了網(wǎng)頁視覺美感框架，將影響美感的因素分為4個(gè)：簡潔、多樣、顏色和工藝。簡潔性對應(yīng)的是經(jīng)典美感，多樣性、顏色和工藝對應(yīng)的是表達(dá)美感。

2 模糊理論

2.1 模糊集

模糊集作為普通集合的擴(kuò)展是由Zadeh[12]提出的，模糊集為全域中的個(gè)體賦一個(gè)值（在0到1之間），表示該個(gè)體對此模糊集的隸屬程度，使用隸屬度函數(shù)μ（x）表示元素x隸屬于模糊集合A的隸屬程度。例如對一個(gè)35歲的人（x），他屬于模糊集 “年老”（A）的隸屬度為0.3（μ（x） = 0.3），從隸屬度可以看出，35歲并不算老，但是也可以記入這個(gè)集合內(nèi)。模糊集更符合人類的思考方式，對于頁面的美感感知也同樣存在這種模糊性。

2.2 模糊數(shù)（Fuzzy number）

正規(guī)模糊集合是指隸屬度函數(shù)的值至少有一個(gè)等于1的模糊集；凸模糊集是指隸屬度函數(shù)嚴(yán)格的單調(diào)遞增（減），或者先單調(diào)遞增（減）的模糊集。定義：如果A是一個(gè)只有單個(gè)頂點(diǎn)的正規(guī)則凸模糊集合，則A成模糊數(shù)。常見模糊數(shù)是三角模糊數(shù)，見圖1，梯形模糊數(shù)，見圖2。一個(gè)模糊數(shù)例如“重要”、“很好”可以用[a，b，c]或者[a，b，c，d]來表示。

圖1 三角模糊數(shù) 圖2 梯形模糊數(shù)

2.3 模糊加權(quán)平均（FWA-fuzzy weighted average）

給出n個(gè)模糊權(quán)重wi和n個(gè)模糊量xi，獲得它們的模糊加權(quán)平均值：y=∑ni=1wixi∑ni=1wi=f（w1，...，wn，x1，...，xn） （1） wi和xi分別用隸屬度函數(shù)μ（wi）和μ（xi）表示，模糊加權(quán)平均后得到的是隸屬度函數(shù)μ（y）。

2.4 解模糊（Defuzzification）

解模糊是將模糊量變成精確值的過程，模糊與其相反。常用的解模糊方法是重心法（Center-of-gravity）。

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

使用解模糊方法可以將模糊加權(quán)平均得到的隸屬度函數(shù)去模糊化，得到一個(gè)精確值。

3 網(wǎng)頁視覺美感框架

以前的美感衡量框架[8，9]都是從計(jì)算美學(xué)的角度出發(fā)，采用一些容易用數(shù)學(xué)公式表示的因素計(jì)算，忽略了抽象的感性描述。本文基于Moshagen[9]的美感框架，召集3位界面設(shè)計(jì)師和10名普通用戶，經(jīng)過反復(fù)討論，總結(jié)出10個(gè)影響因素，構(gòu)成一個(gè)基于感性描述的網(wǎng)頁視覺美感框架，如圖3所示。

圖3 網(wǎng)頁視覺美感框架

4 實(shí)驗(yàn)

S1：基于網(wǎng)頁視覺美感框架圖，建立比較矩陣。請兩個(gè)界面設(shè)計(jì)專家共同給出成對比較矩陣A=[aij]， i，j=1，2，...，n，其中aij∈[19，1]，aij表示因素ci比cj的相對重要程度。

S2：計(jì)算權(quán)重并檢驗(yàn)矩陣A的一致性。本文使用正交幾何平均（NGM）來得到權(quán)重，

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

本文使用一致性率（CR）來判斷決策的一致性：

CR=Ci/Ri （4）

其中Ci被稱為一致性率，Ri是一個(gè)統(tǒng)計(jì)數(shù)字，當(dāng)n=10時(shí)，Ri=1.49。Ci的計(jì)算公式為：

Ci=λmax-nn-1 （5）

其中λmax表示成對比較矩陣中的最大特征值，n表示矩陣的維度，可以用公式（6）表示。

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

使用式（4）～（6）可以計(jì)算得到CR=0.075≤0.1，表示矩陣具有一致性。將每個(gè)權(quán)重除以最大的權(quán)重值后轉(zhuǎn)換成語義權(quán)重，見表1，每個(gè)語義變量的隸屬度函數(shù)見圖4。例如C1的數(shù)值權(quán)重為0.081，它對應(yīng)的語義權(quán)重為VL。

5 結(jié)語

從表3可以看出，對美感因素使用模糊加權(quán)方法得到的網(wǎng)頁美感排序與直接給出的網(wǎng)頁美感排序是一致的，視覺美感較好的網(wǎng)頁如中國國家地理網(wǎng)和美國白宮首頁都排在前面，而美感體驗(yàn)較差的趕集網(wǎng)和中國天文網(wǎng)排在后面。

實(shí)驗(yàn)結(jié)果表明，本文提出的網(wǎng)頁視覺美感框架不僅符合對視覺美感的感性描述，而且通過層次分析法得到的語義權(quán)重是有意義的。此外，使用模糊加權(quán)方法求得網(wǎng)頁的總體主觀美感度，更加符合用戶在評分時(shí)存在模糊和不確定的本質(zhì)。通過打分，設(shè)計(jì)師可以從得分低的美感因素方面改進(jìn)網(wǎng)頁設(shè)計(jì)，這樣設(shè)計(jì)出來的網(wǎng)頁也更加符合用戶的個(gè)人偏好。

未來要進(jìn)一步完善網(wǎng)頁視覺美感評估體系，探索美感框架在其它方面的應(yīng)用，為設(shè)計(jì)工作提供理論基礎(chǔ)和技術(shù)支持。

參考文獻(xiàn)：

[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] 周蕾.界面元素布局設(shè)計(jì)的美度評價(jià)方法[J]. 計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào)，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.