周 蕾,薛澄岐,湯文成,李 晶,牛亞峰
(東南大學(xué) 機(jī)械工程學(xué)院,江蘇 南京 211189)
在產(chǎn)品信息界面的設(shè)計(jì)過程中,界面元素空間位置的細(xì)微調(diào)整往往可以營造非常明顯的視覺差異感,從而影響用戶的美感體驗(yàn)。平衡、簡潔、統(tǒng)一和呼應(yīng)等感性描述常被用于具體方案的評價(jià)之中。然而,這類描述大多停留在抽象化的主觀感知層面上。本文嘗試從總體構(gòu)圖出發(fā),量化定義界面布局的抽象特征,建立布局與感性間的內(nèi)隱關(guān)聯(lián)機(jī)制,從而為設(shè)計(jì)評價(jià)提供有效的輔助手段。
隨著感性工學(xué)的誕生與發(fā)展,研究用戶直觀感受的工學(xué)技術(shù)開始受到設(shè)計(jì)界的普遍關(guān)注,其基本理念在于將用戶的感性體驗(yàn)映射成相應(yīng)的設(shè)計(jì)特征,從而有效地輔助設(shè)計(jì)實(shí)踐[1]。綜觀近年來的相關(guān)研究,基于語意差分法的用戶感性分析是較為成熟的內(nèi)省分析方法之一[2],目前使用較為廣泛。在工業(yè)設(shè)計(jì)領(lǐng)域,“設(shè)計(jì)特征”研究主要針對產(chǎn)品的三維造型單元或功能單元[3-4]和關(guān)鍵性的外形一維曲線及其關(guān)聯(lián)節(jié)點(diǎn)[5-6]展開。在平面設(shè)計(jì)領(lǐng)域,“設(shè)計(jì)特征”則大多面向與網(wǎng)頁可用性相關(guān)的色彩、圖像、按鈕、圖案、文字、字體、超級鏈接和動(dòng)態(tài)效果等界面造型元素[7-12]。此外,模糊集、層次分析法、數(shù)量化一類、遺傳算法、支持向量機(jī)、粗糙集理論和灰度理論[13-19]等數(shù)學(xué)方法都曾被用于定量分析和模型構(gòu)建中。
產(chǎn)品信息界面設(shè)計(jì)處于產(chǎn)品設(shè)計(jì)與平面設(shè)計(jì)的交叉領(lǐng)域,功能組件在整體空間中的布局規(guī)劃是影響設(shè)計(jì)效果的核心要素之一,展現(xiàn)出明顯的二維屬性。針對整體界面與界面元素間的二維空間聯(lián)系,Ngo[20]、Bauerly[21]等都曾嘗試從界面元素的數(shù)字化特征出發(fā),尋找視覺美感的數(shù)學(xué)解釋。其中,Ngo將視覺美感定義為由平衡度、均衡度、對稱度、連續(xù)度、凝聚度、整體度、比例、簡單度、密集度、規(guī)律度、經(jīng)濟(jì)性、同質(zhì)性和節(jié)奏度等13個(gè)布局特征所決定的線性模型[22],實(shí)現(xiàn)了布局特征的量化。但他尚未對布局指標(biāo)間的關(guān)聯(lián)度進(jìn)行分析,在一定程度上影響了指標(biāo)體系的可靠性。
為研究用戶對產(chǎn)品信息界面的感知規(guī)律,結(jié)合感性工學(xué)的研究方法,建立感性測評的指標(biāo)體系。研究邀請了6位資深人機(jī)界面設(shè)計(jì)師、31名設(shè)計(jì)初學(xué)者和非設(shè)計(jì)專業(yè)學(xué)生,將他們分為專業(yè)組和非專業(yè)組兩類。選擇具有代表性的交互界面設(shè)計(jì)樣本20個(gè),由6位界面設(shè)計(jì)師首先對樣本進(jìn)行意象分析,非專業(yè)組成員進(jìn)行判斷和補(bǔ)充,重復(fù)多次,直到?jīng)]有新的意象詞匯出現(xiàn)為止。對意象詞匯進(jìn)行初步篩選,確定27個(gè)區(qū)分度明顯的界面設(shè)計(jì)意象特征。本文有意回避了較為抽象的感性描述,譬如穩(wěn)重的、流行的等,保證評價(jià)結(jié)果不會(huì)因個(gè)人理解造成較大分歧。請非專業(yè)組對界面樣本進(jìn)行李氏量表分析,運(yùn)用因子分析法,提取影響用戶感性的潛在因子,因子分析的結(jié)果如表1所示。
表1 界面美度意象的因子分析
表1提取了平衡感、引導(dǎo)感、簡潔感和統(tǒng)一感作為影響用戶感知的四個(gè)較為獨(dú)立的潛在要素。四類因子中:界面布局的平衡感是對用戶感性影響最大的因素,強(qiáng)調(diào)界面元素的面積與定位的合理性;元素排布的視覺引導(dǎo)感強(qiáng)調(diào)依據(jù)人類視/知覺的規(guī)律展開界面元素的差異化布局;簡潔感強(qiáng)調(diào)界面設(shè)計(jì)簡潔明了;統(tǒng)一感強(qiáng)調(diào)界面設(shè)計(jì)的整體化風(fēng)格,其關(guān)鍵性程度逐次遞減。結(jié)合因子分析的結(jié)論,本文在Ngo理論的基礎(chǔ)上提出了12個(gè)用于描述信息界面布局特征的衡量指標(biāo),如表2所示。
表2 產(chǎn)品信息界面布局特征的量化指標(biāo)
續(xù)表2
續(xù)表2
在構(gòu)建界面布局與用戶感性的映射模型之前,首先必須解決這樣的疑問:12個(gè)量化指標(biāo)能否作為界面布局的評估依據(jù),以及界面布局與用戶感性之間是否存在可以度量的映射規(guī)律?因此,運(yùn)用驗(yàn)證性因子分析檢驗(yàn)預(yù)想模型的可靠性。
考慮到待測因子(布局指標(biāo))的數(shù)量較大,將RMSEA和ECVI指標(biāo)作為驗(yàn)證性因子分析的主要檢驗(yàn)指標(biāo)。其中:RMSEA指標(biāo)的最大優(yōu)勢在于不受樣本數(shù)大小與模型復(fù)雜度的影響,其值越?。ǖ陀?.06時(shí)),模型的擬合程度越好;ECVI指標(biāo)反映了同一總體多次抽樣所得擬合度的期望值,其值越小模型擬合度的波動(dòng)性越小,該假設(shè)模型的擬合度也越好,尤其適合作為樣本數(shù)很小但自由度很大的模型的合理性依據(jù)。
選定機(jī)柜插箱界面作為測試對象,搜集國內(nèi)外不同廠家不同型號的插箱界面樣本,篩選后選擇49個(gè)具有代表性的插箱界面(如圖1)并隨機(jī)編號。為避免其他因素對實(shí)驗(yàn)結(jié)果可能造成的影響,事先采用黑、白、灰、藍(lán)作為整體色系對插箱界面進(jìn)行統(tǒng)一處理,并抽象出每個(gè)樣本的布局圖。采用5點(diǎn)量表法進(jìn)行用戶感性調(diào)研,對界面的平衡感、引導(dǎo)感、簡潔感和統(tǒng)一感進(jìn)行評估(如圖2),結(jié)果取均值。
構(gòu)建驗(yàn)證性模型1(Chi-square=126.7,df=40)(如圖3a),檢驗(yàn)界面的布局指標(biāo)是否符合最初的預(yù)想設(shè)定——布局特征存在與用戶感性一致的潛在共性。其RMSEA和ECVI的指標(biāo)值分別為0.006和0.003,說明該模型擬合度理想。12個(gè)布局指標(biāo)存在明顯的表征側(cè)重,證明最初的指標(biāo)設(shè)定基本達(dá)到了預(yù)期。建立如圖4所示的感性映射測試模型,并進(jìn)一步運(yùn)用驗(yàn)證性因子分析檢驗(yàn)該測度模型的擬合性。
檢驗(yàn)用戶感知到的界面布局特征(a:界面元素分布的均衡、和諧的程度,b:界面四象限元素分布是否有視覺引導(dǎo)的效果,c:設(shè)計(jì)元素簡單明了的程度,d:界面元素的整體性和一致性)與布局指標(biāo)的有效匹配程度,構(gòu)建測試模型的驗(yàn)證性因子模型如圖3b所示(Chi-square=335.5,df=85),RMSEA和ECVI指標(biāo)均為0.007,模型較穩(wěn)定。但布局特征間的相關(guān)性非常明顯,表明每一種主觀體驗(yàn)與布局特征間可能存在較為復(fù)雜的多元相關(guān)關(guān)系。由此,修改預(yù)測模型中完全獨(dú)立的感性意象假設(shè),構(gòu)建最終的感性映射模型(如圖5)。
針對上文中所構(gòu)建的感性映射模型AM=g{f(M)}(其中:M表示布局特征集,f表示感性因子與布局特征間的函數(shù)關(guān)系,g表示感性因子間的函數(shù)關(guān)系),研究函數(shù)f的量化映射關(guān)系。為達(dá)到更好的數(shù)據(jù)擬合效果,本文采用神經(jīng)網(wǎng)絡(luò)和線性回歸兩類方法比較用戶感性的預(yù)測效果。
(1)網(wǎng)絡(luò)構(gòu)建
運(yùn)用MATLAB R2010a中的BP(back propagation)神經(jīng)網(wǎng)絡(luò)工具箱輔助計(jì)算,設(shè)定輸入向量p為12個(gè)界面布局指標(biāo)值,輸出向量t為4個(gè)用戶感性意象的主觀評估值,初步確定網(wǎng)絡(luò)為3層,輸入層和輸出層的節(jié)點(diǎn)數(shù)分別為12和4,隱層節(jié)點(diǎn)數(shù)采用經(jīng)驗(yàn)式(1)計(jì)算。經(jīng)過多次試驗(yàn),取中間值15作為隱層的節(jié)點(diǎn)數(shù)。其網(wǎng)絡(luò)結(jié)構(gòu)如圖6所示。
界面布局指標(biāo)為0~1之間的連續(xù)值,感性評估值為1~5之間的連續(xù)值,運(yùn)用式(2)對主觀評估值進(jìn)行標(biāo)準(zhǔn)化處理。
隱層分別采用tansig()、logsig()和purelin()傳遞函數(shù),輸出層采用logsig()傳遞函數(shù)構(gòu)建模型,檢驗(yàn)?zāi)P偷臄M合程度。
(2)網(wǎng)絡(luò)訓(xùn)練
設(shè)置網(wǎng)絡(luò)的學(xué)習(xí)次數(shù)為200,誤差目標(biāo)值為0.000 1,采用trainlm()函數(shù)訓(xùn)練網(wǎng)絡(luò)。將49個(gè)樣本數(shù)據(jù)導(dǎo)入建立好的網(wǎng)絡(luò)進(jìn)行訓(xùn)練。三類傳遞函數(shù)組合的擬合結(jié)果如圖7所示。
由BP網(wǎng)絡(luò)訓(xùn)練結(jié)果可知,隱層采用tansig()和logsig()傳遞函數(shù)進(jìn)行網(wǎng)絡(luò)訓(xùn)練時(shí),數(shù)據(jù)擬合度非常高,分別達(dá)到99.63%和99.648%,而采用purelin()傳遞函數(shù)進(jìn)行網(wǎng)絡(luò)訓(xùn)練的數(shù)據(jù)擬合度僅為71.854%。單從擬合度判斷,前兩種訓(xùn)練網(wǎng)絡(luò)較優(yōu),后一種相對擬合度較低(但也在可接受范圍內(nèi))。除此以外,采用purelin()傳遞函數(shù)在200次迭代內(nèi)無法達(dá)到預(yù)定的目標(biāo)值0.000 1,大致收斂于0.01的目標(biāo)精度。僅從擬合度來看,隱層采用tansig()和logsig()傳遞函數(shù)較優(yōu)。為了避免可能出現(xiàn)的過擬合問題,采用外來樣本進(jìn)行網(wǎng)絡(luò)測試。
(3)網(wǎng)絡(luò)測試
從互聯(lián)網(wǎng)上收集4個(gè)產(chǎn)品信息界面,構(gòu)成測試樣本(如圖8),進(jìn)行布局特征計(jì)算和用戶感性評估。運(yùn)用式(3)比較3個(gè)網(wǎng)絡(luò)的預(yù)測誤差,tansig-log模型、logsig-log模型和 purelin-log模型的偏差值分別為1.236 757 9,1.9425 698 9和0.095 702 22。由此可知tansig-log模型和logsig-log模型確實(shí)存在比較嚴(yán)重的過擬合問題,預(yù)測值與目標(biāo)值間存在較大差異,而purelin-log模型的預(yù)測值與目標(biāo)值間的匹配性較好,因此采用purelin-log函數(shù)組合作為最終的非線性預(yù)測模型。
將49個(gè)訓(xùn)練樣本數(shù)據(jù)導(dǎo)入SPSS13.0軟件進(jìn)行線性回歸分析,研究4個(gè)感性評估值與12個(gè)界面布局指標(biāo)間的線性回歸關(guān)系。測試樣本的關(guān)鍵性擬合指標(biāo)值如表3所示。4個(gè)模型的復(fù)相關(guān)系數(shù)R均接近或大于0.7,顯著性水平均低于0.01,因此可以舍棄假設(shè)H0,即所求出的復(fù)回歸式對預(yù)測沒有幫助,模型可以被接受。
表3 多元回歸模型的基本指標(biāo)
運(yùn)用式(3)求得多元回歸線性模型的偏差值為0.093 061 905 2,相比而言,線性模型的預(yù)測效果似乎更加精確,而界面布局與用戶感性的量化映射關(guān)系f也可表示為:
1)平衡感=-9.796+Db,a×(-3.763)+Df,l×15.946+Ds,y×(-0.369)+Ds,q×0.145+Du,n×(-0.048)+Dd,o×(-1.558)+Ds,i×1.116+Dd,e×0.621+De,c×0.542+Dc,o×0.612+Dr,h×2.462+Dp,r×(-0.199);
2)引導(dǎo)感=-6.577+Db,a×(-2.573)+Df,l×11.655+Ds,y×3.592+Ds,q×(-0.44)+Du,n×(-1.021)+Dd,o×(-0.764)+Ds,i×2.177+Dd,e×1.05+De,c×(-0.162)+Dc,o×(-1.982)+Dr,h×1.823+Dp,r×(-0.371);
3)簡潔感=0.295+Db,a×0.964+Df,l×1.929+Ds,y×2.107+Ds,q× (-0.272)+Du,n× (-0.075)+Dd,o×(-0.577)+Ds,i×0.558+Dd,e×(-0.568)+De,c×1.256+Dc,o×(-1.947)+Dr,h×3.366+Dp,r×(-0.948);
4)統(tǒng)一感=-3.971+Db,a×(-1.346)+Df,l×8.391+Ds,y×0.306+Ds,q×(-0.291)+Du,n×0.204+Dd,o×(-0.646)+Ds,i×1.468+Dd,e×0.176+De,c×(-0.035)+Dc,o×(-1.134)+Dr,h×3.351+Dp,r×(-0.937)。
結(jié)合探索性因子分析的因子貢獻(xiàn)率值確定函數(shù)g為:
5)綜合美度=平衡感×0.487 4+引導(dǎo)感×0.281 4+簡潔感×0.140 5+統(tǒng)一感×0.096 5。
以某插箱面板的5個(gè)設(shè)計(jì)方案為例進(jìn)行美度評價(jià)(如圖9),通過對界面元素進(jìn)行抽象表征,計(jì)算5個(gè)方案的12個(gè)美度指標(biāo)值(如表4)。依據(jù)3.2節(jié)所提“用戶感性的線性回歸預(yù)測模型”,各方案的平衡感、引導(dǎo)感、簡潔感、統(tǒng)一感和綜合美度的預(yù)測值如表5所示。
表4 方案1~5的用戶感性預(yù)測
以某插箱面板的5個(gè)設(shè)計(jì)方案(如圖9)為研究對象,進(jìn)行主觀評估和感性預(yù)測。首先運(yùn)用心理物理學(xué)常用的對偶比較法對方案美度進(jìn)行主觀評價(jià)。將方案1~5分別編號A,B,C,D,E,對5個(gè)設(shè)計(jì)方案進(jìn)行配對,然后采用E-prime軟件進(jìn)行樣本呈現(xiàn)。由于每一個(gè)方案都要分別與其他方案進(jìn)行比較,配對樣本數(shù)為10。為消除前后順序的誤差,進(jìn)行兩輪比較,配對樣本改變左右順序消除其他因素對人類心理感知的影響。因此,每個(gè)方案都要與其他方案比較4次,兩輪共需比較8次,總體樣本量為20。對17位受試的測試結(jié)果求平均值,求得5個(gè)設(shè)計(jì)方案的 評 估 值 分 別 為 0.590 7,0.624 5,0.518 2,0.453 3,0.526 7,優(yōu)勢次序?yàn)锽>A>E>C>D。
結(jié)合上文提出的元素抽象法和感性預(yù)測模型對設(shè)計(jì)方案進(jìn)行量化評估,建立界面美度計(jì)算的原型系統(tǒng)如圖10所示。分別求出5個(gè)方案的12個(gè)美度指標(biāo)值以及各個(gè)方案相應(yīng)的平衡感、引導(dǎo)感、簡潔感、統(tǒng)一感和綜合美度的預(yù)測值如表4所示,結(jié)果表明主觀評估和感性預(yù)測的結(jié)論基本一致。
分析表4數(shù)據(jù)可知,由于各方案的元素體量幾乎未作調(diào)整,且位置空間變化不大,因此界面的比例分配幾乎沒有太大差異,1、2號方案較優(yōu),4號方案的各方面效果均不占優(yōu)勢。因此在方案決策時(shí),設(shè)計(jì)師應(yīng)優(yōu)先選擇方案1或2,而首先淘汰方案4。結(jié)合界面美度的細(xì)節(jié)分析,展開有針對性的設(shè)計(jì)優(yōu)化,這樣既可以避免盲目的修改和創(chuàng)新,也有利于保持設(shè)計(jì)風(fēng)格的一致性。本文提出的美度評價(jià)方法可以有效模擬用戶的心理評估機(jī)制,對界面設(shè)計(jì)具有切實(shí)的指導(dǎo)作用。
本文針對產(chǎn)品信息界面的布局設(shè)計(jì)研究了界面布局特征的量化指標(biāo)體系、界面布局指標(biāo)體系的可靠性分析及界面布局與用戶感性的量化映射關(guān)系A(chǔ)M=g{f(M)},提出了產(chǎn)品信息界面的感性預(yù)測與評估方法,對界面設(shè)計(jì)研究和設(shè)計(jì)工作的開展具有非?,F(xiàn)實(shí)的指導(dǎo)意義。
未來會(huì)將布局設(shè)計(jì)的理念進(jìn)一步導(dǎo)入相關(guān)設(shè)計(jì)領(lǐng)域中進(jìn)行拓展性研究,探索基于界面布局的感性預(yù)測方法的有效性和普適性,完善原型系統(tǒng)中的設(shè)計(jì)建議和設(shè)計(jì)推理的功能模塊,為設(shè)計(jì)師的設(shè)計(jì)創(chuàng)新工作提供理論依據(jù)和技術(shù)支持。
[1] FAN Yuefei.Research on the product form image design system based on Kansei engineering and neural network[D].Lanzhou:Lanzhou University of Technology,2011(in Chinese).[范躍飛.基于感性工學(xué)和神經(jīng)網(wǎng)絡(luò)的產(chǎn)品意象造型設(shè)計(jì)系統(tǒng)研究[D].蘭州:蘭州理工大學(xué),2011.]
[2] HUANG Yuexiang,CHEN C H,LI P K.Kansei clustering for emotional design using a combined design structure matrix[J].International Journal of Industrial Ergonomics,2012,42(5):416-427.
[3] SHI Fuqian,SUN Shouqian,XU Jiang.Employing rough sets and association rule mining in KANSEI knowledge extraction[J].Information Sciences,2012,196(1):118-128.
[4] SU Jianning,LI Heqi.Investigation of relationship of form design elements to Kansei image by means of quantification-Ⅰtheory[J].Journal of Lanzhou University of Technology,2005,31(2):41-44(in Chinese).[蘇建寧,李鶴歧.應(yīng)用數(shù)量化一類理論的感性意象與造型設(shè)計(jì)要素關(guān)系的研究[J].蘭州理工大學(xué)學(xué)報(bào),2005,31(2):41-44.]
[5] XU Jiang.Research on the technology of product creative generative design driven by style evolution[D].Hangzhou:Zhejiang University,2008(in Chinese).[徐 江.風(fēng)格進(jìn)化驅(qū)動(dòng)的產(chǎn)品創(chuàng)新生成設(shè)計(jì)技術(shù)研究[D].杭州:浙江大學(xué),2008.]
[6] XUE Chengqi,ZHANG Ping,ZHOU Lei.Computer-aided style design based on feature construction[J].Journal of Southeast University:Natural Science Edition,2011,41(4):734-738(in Chinese).[薛澄岐,張 坪,周 蕾.基于特征重構(gòu)的輔助風(fēng)格設(shè)計(jì)技術(shù)[J].東南大學(xué)學(xué)報(bào):自然科學(xué)版,2011,41(4):734-738.]
[7] DIANNE C,KINDRA G S,SATYABHUSAN D.Web site design,trust,satisfaction and e-loyalty:the Indian experience[J].Online Information Review,2008,32(6):773-790.
[8] RAU P L P,GAO Qin,LIU Jie.The effect of rich web portal design and floating animations on visual search[J].International Journal of Human-Computer Interaction,2007,22(3):195-216.
[9] BAUERLY M,LIU Yili.Effects of symmetry and number of compositional elements on interface and design aesthetics[J].International Journal of Human-Computer Interaction,2008,24(3):275-287.
[10] LAI C Y,CHEN P H,SHIH S W,et al.Computational models and experimental investigations of effects of balance and symmetry on the aesthetics of text-overlaid images[J].International Journal of Human—Computer Studies,2010,68(1/2):41-56.
[11] DIANNE C,MILENA H,HECTOR L.Colour appeal in website design within and across cultures:a multi-method evaluation[J].International Journal of Human-Computer Studies,2010,68(1/2):1-21.
[12] SCHMIDT K E,LIU Yili,SRIDHARAN S.Webpage aesthetics,performance and usability:design variables and their effects[J].Ergonomics,2009,52(6):631-643.
[13] SINGH N,BHATTACHARYA S.A GA-based approach to improve web page aesthetics[C]//Proceedings of the 1st International Conference on Intelligent Interactive Technologies and Multimedia[J].New York,N.Y.,USA:ACM,2010:29-32.
[14] YANG C C.Constructing a hybrid Kansei engineering system based on multiple affective responses:Application to product form design[J].Computers &Industrial Engineering,2011,60(4):760-768.
[15] WANG K C.A hybrid Kansei engineering design expert system based on grey system theory and support vector regression[J].Expert Systems with Applications,2011,38(7):8738-8750.
[16] HUANG M S,TSAI H C,HUANG T H.Applying kansei engineering to industrial machinery trade show booth design[J].International Journal of Industrial Ergonomics,2011,41(1):72-78.
[17] LAN L W,WU W W,LEE Y T.Promoting food tourism with Kansei Cuisine design[J].Procedia-Social and Behavioral Sciences,2012,40:609-615.
[18] SMITH S,F(xiàn)U S H.The relationships between automobile head-up display presentation images and drivers'kansei[J].Displays,2011,32(2):58-68.
[19] HSIAO S W,CHIU Fu-Yuan,LU Shuhong.Product-form design model based on genetic algorithms[J].International Journal of Industrial Ergonomics,2010,40(3):237-246.
[20] NGO D CL,BYRNE J G.Application of an aesthetic evaluation model to data entry screens[J].Computers in Human Behavior,2001,17(2):149-185.
[21] Michael Bauerly,LIU Yili.Effects of symmetry and number of compositional elements on interface and design aesthetics[J].International Journal of Human-Computer Interaction,2008,24(3):275-287.
[22] NGO D C L,TEO L S,BYRNE J G.Modelling interface aesthetics[J].Information Sciences,2003,152:25-46.