基于美度計(jì)算的Camera Connect App界面元素布局評(píng)價(jià)

任小帆 薛澄岐

摘要：為客觀評(píng)價(jià)界面元素的布局美度，選取76個(gè)美度指標(biāo)：平衡度、對(duì)稱(chēng)度、整體度、簡(jiǎn)潔度、密集度和凝聚度，分別將其量化，引入層次分析方法計(jì)算各指標(biāo)的權(quán)重，提出界面元素布局方案的綜合美度計(jì)算公式方法。以Camera Connect APP的界面元素布局設(shè)計(jì)為例，驗(yàn)證了該方法對(duì)于衡量界面元素布局的美度水平的客觀性與準(zhǔn)確性，并能反映出單個(gè)評(píng)價(jià)指標(biāo)對(duì)于綜合美度的影響力，有助于指導(dǎo)設(shè)計(jì)師對(duì)界面進(jìn)行設(shè)計(jì)與改進(jìn)。

關(guān)鍵詞：界面設(shè)計(jì) 層次分析法 美度指標(biāo) 設(shè)計(jì)評(píng)價(jià)

中圖分類(lèi)號(hào)：TB47 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1003 0069（2018）02-0142-02

引言

人機(jī)界面布局設(shè)計(jì)是通過(guò)對(duì)界面元素進(jìn)行合理布局，使之稱(chēng)為有效的信息輸入與輸出媒介。其設(shè)計(jì)的優(yōu)劣不僅影響用戶的視覺(jué)感官，更影響人機(jī)界面系統(tǒng)的工作績(jī)效。雖然影響界面設(shè)計(jì)的主要因素是用戶任務(wù)和用戶能力，但是隨著時(shí)代發(fā)展，用戶的審美和需求也在與時(shí)俱進(jìn)，設(shè)計(jì)師不應(yīng)局限于考慮功能的實(shí)現(xiàn)?，F(xiàn)今人機(jī)界面在功能相近的背景下，如何從眾多產(chǎn)品中脫穎而出，產(chǎn)品美感度成為一個(gè)愈發(fā)重要的因素。目前尚無(wú)明確的標(biāo)準(zhǔn)來(lái)指導(dǎo)界面設(shè)計(jì)，也無(wú)法應(yīng)用于實(shí)際的界面設(shè)計(jì)。

在美度標(biāo)準(zhǔn)的探究中，Ngo等人提出一種自下而上，可客觀地測(cè)量界面美感的方法，把界面設(shè)計(jì)特征元素與用戶視覺(jué)美感的感知相結(jié)合。該評(píng)價(jià)模型由13個(gè)測(cè)量特征組成，Ngo等人同時(shí)驗(yàn)證了這些特征對(duì)于界面美感的影響程度，獲得影響程度最高的界面美感評(píng)價(jià)指標(biāo)。但其特征數(shù)量過(guò)多，不便于計(jì)算；同時(shí)對(duì)于功能性質(zhì)各異的界面，其美度指標(biāo)之間的相對(duì)重要性也不一致，這可能對(duì)界面美感的計(jì)算結(jié)果的客觀性產(chǎn)生影響。

本研究提出影響界面元素布局的6個(gè)美度指標(biāo)：平衡度、對(duì)稱(chēng)度、整體度、簡(jiǎn)潔度、密集度和凝聚度，將其量化，利用層次分析法獲得各指標(biāo)的權(quán)重值，最終得到界面元素布局的綜合美度計(jì)算公式，為設(shè)計(jì)師進(jìn)行界面設(shè)計(jì)與選擇提供指導(dǎo)建議。

一、界面元素布局評(píng)價(jià)量化指標(biāo)

經(jīng)用戶訪談和設(shè)計(jì)師聚焦，結(jié)合界面布局設(shè)計(jì)特點(diǎn)，同時(shí)刪去主觀抽象的詞匯，如成熟的，時(shí)尚的等，以保證評(píng)價(jià)結(jié)果的客觀性。最終獲得6個(gè)較為客觀的美度指標(biāo)——平衡度、對(duì)稱(chēng)度、整體度、簡(jiǎn)潔度、密集度和凝聚度，作為評(píng)價(jià)指標(biāo)進(jìn)行量化。

（一）平衡度

指界面整體元素布局給用戶的視覺(jué)上的穩(wěn)定感，避免用戶因?yàn)樾畔⒉季质Ш舛杏X(jué)左右失衡或頭重腳輕。

三、實(shí)例驗(yàn)證

（一）camera Connect APP界面元素布局的美度計(jì)算

為了驗(yàn)證本研究方法準(zhǔn)確性，選取現(xiàn)有產(chǎn)品界面布局——六個(gè)不同相機(jī)品牌自帶的Camera Connect APP進(jìn)行綜合美度計(jì)算，（如圖1）所示。

首先對(duì)APP界面進(jìn)行簡(jiǎn)化處理，為忽略色彩對(duì)界面布局綜合美度的影響，對(duì)界面進(jìn)行去色，將界面元素按功能劃分為標(biāo)題欄、菜單欄、信息欄和設(shè)置欄，將功能區(qū)塊表征為最小化矩形，并通過(guò)不同顏色將界面和元素區(qū)分開(kāi)，（如圖2）所示。

根據(jù)界面元素布局評(píng)價(jià)量化指標(biāo)計(jì)算公式，分別計(jì)算各方案的平衡度、對(duì)稱(chēng)度、整體度、簡(jiǎn)潔度、密集度和凝聚度的值，（如表1）所示。

（二）美度計(jì)算結(jié)果比較分析

為與此計(jì)算結(jié)果對(duì)比，由81位來(lái)自不同地區(qū)和年齡段的用戶對(duì)各樣本進(jìn)行投票，選出設(shè)計(jì)得最令其滿意的一款，分別得到各樣本的票數(shù)。按票數(shù)降序排列為：界面3>界面6>界面2>界面1>界面4>界面5。

比較美度公式計(jì)算結(jié)果與用戶投票結(jié)果可知，在用戶對(duì)界面的投票中，樣本界面3所獲票數(shù)遠(yuǎn)高于其他樣本，這與其通過(guò)綜合美度計(jì)算公式所得到的分?jǐn)?shù)遠(yuǎn)高于其他樣本的情況相符；同時(shí)用戶投票得出的樣本優(yōu)劣排序與通過(guò)公式計(jì)算得出的排序結(jié)果也一致，說(shuō)明該綜合美度計(jì)算方法能夠較準(zhǔn)確地反映出用戶對(duì)界面元素布局的喜好程度。

手機(jī)APP的界面設(shè)計(jì)既要考慮人機(jī)間的交互性、可靠性，還要考慮到用戶使用過(guò)程中的快捷性和便利性，為用戶創(chuàng)造一種舒適愉悅的美的交互體驗(yàn)。快捷便利的實(shí)用原則和極簡(jiǎn)主義的審美原則是手機(jī)交互設(shè)計(jì)的基本原則，這也與通過(guò)層次分析法得到權(quán)重前三位的平衡度、對(duì)稱(chēng)度、簡(jiǎn)單度相一致。

（三）改進(jìn)方案

界面3的美度計(jì)算結(jié)果與用戶投票票數(shù)在6個(gè)樣本界面中皆為最高分，可知界面3的元素布局設(shè)計(jì)較為優(yōu)秀，具有較強(qiáng)參考價(jià)值。通過(guò)（表1）中的界面布局單個(gè)美度指標(biāo)值可得，界面3在權(quán)重較大的平衡度、對(duì)稱(chēng)度與簡(jiǎn)單度的得分皆最高，平衡度與對(duì)稱(chēng)度基本接近滿分，其高度的平衡性和對(duì)稱(chēng)性給用戶舒適友好的交互體驗(yàn)。但界面3在整體度方面略有不足，因其三個(gè)主體元素布局部分分布較為分散，可能造成用戶在使用過(guò)程中信息獲取的疏漏，增加用戶信息查找的負(fù)荷和時(shí)間，因此對(duì)界面3進(jìn)行改進(jìn)，（如圖3）所示，減小三部分之間的間隙，使其分布較為緊湊，以提高用戶的使用績(jī)效，視覺(jué)效果也不再如先前零散。

結(jié)語(yǔ)

本研究構(gòu)建了一種界面形態(tài)元素布局的綜合美度計(jì)算方法，通過(guò)六款Camera Connect APP的界面形態(tài)元素布局的案例，驗(yàn)證了該方法對(duì)于評(píng)價(jià)界面美感程度的客觀性與準(zhǔn)確性，可科學(xué)地指導(dǎo)界面的選擇與改進(jìn)設(shè)計(jì)。但本研究工作仍有不足之處：APP的不同功能模塊對(duì)界面美感的影響沒(méi)有納入考慮，在日后將進(jìn)行深入研究。