任小帆 薛澄岐
摘要:為客觀評價界面元素的布局美度,選取76個美度指標(biāo):平衡度、對稱度、整體度、簡潔度、密集度和凝聚度,分別將其量化,引入層次分析方法計算各指標(biāo)的權(quán)重,提出界面元素布局方案的綜合美度計算公式方法。以Camera Connect APP的界面元素布局設(shè)計為例,驗證了該方法對于衡量界面元素布局的美度水平的客觀性與準(zhǔn)確性,并能反映出單個評價指標(biāo)對于綜合美度的影響力,有助于指導(dǎo)設(shè)計師對界面進行設(shè)計與改進。
關(guān)鍵詞:界面設(shè)計 層次分析法 美度指標(biāo) 設(shè)計評價
中圖分類號:TB47 文獻標(biāo)識碼:A
文章編號:1003 0069(2018)02-0142-02
引言
人機界面布局設(shè)計是通過對界面元素進行合理布局,使之稱為有效的信息輸入與輸出媒介。其設(shè)計的優(yōu)劣不僅影響用戶的視覺感官,更影響人機界面系統(tǒng)的工作績效。雖然影響界面設(shè)計的主要因素是用戶任務(wù)和用戶能力,但是隨著時代發(fā)展,用戶的審美和需求也在與時俱進,設(shè)計師不應(yīng)局限于考慮功能的實現(xiàn)?,F(xiàn)今人機界面在功能相近的背景下,如何從眾多產(chǎn)品中脫穎而出,產(chǎn)品美感度成為一個愈發(fā)重要的因素。目前尚無明確的標(biāo)準(zhǔn)來指導(dǎo)界面設(shè)計,也無法應(yīng)用于實際的界面設(shè)計。
在美度標(biāo)準(zhǔn)的探究中,Ngo等人提出一種自下而上,可客觀地測量界面美感的方法,把界面設(shè)計特征元素與用戶視覺美感的感知相結(jié)合。該評價模型由13個測量特征組成,Ngo等人同時驗證了這些特征對于界面美感的影響程度,獲得影響程度最高的界面美感評價指標(biāo)。但其特征數(shù)量過多,不便于計算;同時對于功能性質(zhì)各異的界面,其美度指標(biāo)之間的相對重要性也不一致,這可能對界面美感的計算結(jié)果的客觀性產(chǎn)生影響。
本研究提出影響界面元素布局的6個美度指標(biāo):平衡度、對稱度、整體度、簡潔度、密集度和凝聚度,將其量化,利用層次分析法獲得各指標(biāo)的權(quán)重值,最終得到界面元素布局的綜合美度計算公式,為設(shè)計師進行界面設(shè)計與選擇提供指導(dǎo)建議。
一、界面元素布局評價量化指標(biāo)
經(jīng)用戶訪談和設(shè)計師聚焦,結(jié)合界面布局設(shè)計特點,同時刪去主觀抽象的詞匯,如成熟的,時尚的等,以保證評價結(jié)果的客觀性。最終獲得6個較為客觀的美度指標(biāo)——平衡度、對稱度、整體度、簡潔度、密集度和凝聚度,作為評價指標(biāo)進行量化。
(一)平衡度
指界面整體元素布局給用戶的視覺上的穩(wěn)定感,避免用戶因為信息布局失衡而感覺左右失衡或頭重腳輕。
三、實例驗證
(一)camera Connect APP界面元素布局的美度計算
為了驗證本研究方法準(zhǔn)確性,選取現(xiàn)有產(chǎn)品界面布局——六個不同相機品牌自帶的Camera Connect APP進行綜合美度計算,(如圖1)所示。
首先對APP界面進行簡化處理,為忽略色彩對界面布局綜合美度的影響,對界面進行去色,將界面元素按功能劃分為標(biāo)題欄、菜單欄、信息欄和設(shè)置欄,將功能區(qū)塊表征為最小化矩形,并通過不同顏色將界面和元素區(qū)分開,(如圖2)所示。
根據(jù)界面元素布局評價量化指標(biāo)計算公式,分別計算各方案的平衡度、對稱度、整體度、簡潔度、密集度和凝聚度的值,(如表1)所示。
(二)美度計算結(jié)果比較分析
為與此計算結(jié)果對比,由81位來自不同地區(qū)和年齡段的用戶對各樣本進行投票,選出設(shè)計得最令其滿意的一款,分別得到各樣本的票數(shù)。按票數(shù)降序排列為:界面3>界面6>界面2>界面1>界面4>界面5。
比較美度公式計算結(jié)果與用戶投票結(jié)果可知,在用戶對界面的投票中,樣本界面3所獲票數(shù)遠(yuǎn)高于其他樣本,這與其通過綜合美度計算公式所得到的分?jǐn)?shù)遠(yuǎn)高于其他樣本的情況相符;同時用戶投票得出的樣本優(yōu)劣排序與通過公式計算得出的排序結(jié)果也一致,說明該綜合美度計算方法能夠較準(zhǔn)確地反映出用戶對界面元素布局的喜好程度。
手機APP的界面設(shè)計既要考慮人機間的交互性、可靠性,還要考慮到用戶使用過程中的快捷性和便利性,為用戶創(chuàng)造一種舒適愉悅的美的交互體驗??旖荼憷膶嵱迷瓌t和極簡主義的審美原則是手機交互設(shè)計的基本原則,這也與通過層次分析法得到權(quán)重前三位的平衡度、對稱度、簡單度相一致。
(三)改進方案
界面3的美度計算結(jié)果與用戶投票票數(shù)在6個樣本界面中皆為最高分,可知界面3的元素布局設(shè)計較為優(yōu)秀,具有較強參考價值。通過(表1)中的界面布局單個美度指標(biāo)值可得,界面3在權(quán)重較大的平衡度、對稱度與簡單度的得分皆最高,平衡度與對稱度基本接近滿分,其高度的平衡性和對稱性給用戶舒適友好的交互體驗。但界面3在整體度方面略有不足,因其三個主體元素布局部分分布較為分散,可能造成用戶在使用過程中信息獲取的疏漏,增加用戶信息查找的負(fù)荷和時間,因此對界面3進行改進,(如圖3)所示,減小三部分之間的間隙,使其分布較為緊湊,以提高用戶的使用績效,視覺效果也不再如先前零散。
結(jié)語
本研究構(gòu)建了一種界面形態(tài)元素布局的綜合美度計算方法,通過六款Camera Connect APP的界面形態(tài)元素布局的案例,驗證了該方法對于評價界面美感程度的客觀性與準(zhǔn)確性,可科學(xué)地指導(dǎo)界面的選擇與改進設(shè)計。但本研究工作仍有不足之處:APP的不同功能模塊對界面美感的影響沒有納入考慮,在日后將進行深入研究。