任小帆 薛澄岐

摘要：為客觀評價界面元素的布局美度，選取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的不同功能模塊對界面美感的影響沒有納入考慮，在日后將進行深入研究。