基于美度计算的Camera Connect App界面元素布局评价

任小帆 薛澄岐

摘要：为客观评价界面元素的布局美度，选取76个美度指标：平衡度、对称度、整体度、简洁度、密集度和凝聚度，分别将其量化，引入层次分析方法计算各指标的权重，提出界面元素布局方案的综合美度计算公式方法。以Camera Connect APP的界面元素布局设计为例，验证了该方法对于衡量界面元素布局的美度水平的客观性与准确性，并能反映出单个评价指标对于综合美度的影响力，有助于指导设计师对界面进行设计与改进。

关键词：界面设计 层次分析法 美度指标 设计评价

中图分类号：TB47 文献标识码：A

文章编号：1003 0069（2018）02-0142-02

引言

人机界面布局设计是通过对界面元素进行合理布局，使之称为有效的信息输入与输出媒介。其设计的优劣不仅影响用户的视觉感官，更影响人机界面系统的工作绩效。虽然影响界面设计的主要因素是用户任务和用户能力，但是随着时代发展，用户的审美和需求也在与时俱进，设计师不应局限于考虑功能的实现。现今人机界面在功能相近的背景下，如何从众多产品中脱颖而出，产品美感度成为一个愈发重要的因素。目前尚无明确的标准来指导界面设计，也无法应用于实际的界面设计。

在美度标准的探究中，Ngo等人提出一种自下而上，可客观地测量界面美感的方法，把界面设计特征元素与用户视觉美感的感知相结合。该评价模型由13个测量特征组成，Ngo等人同时验证了这些特征对于界面美感的影响程度，获得影响程度最高的界面美感评价指标。但其特征数量过多，不便于计算；同时对于功能性质各异的界面，其美度指标之间的相对重要性也不一致，这可能对界面美感的计算结果的客观性产生影响。

本研究提出影响界面元素布局的6个美度指标：平衡度、对称度、整体度、简洁度、密集度和凝聚度，将其量化，利用层次分析法获得各指标的权重值，最终得到界面元素布局的综合美度计算公式，为设计师进行界面设计与选择提供指导建议。

一、界面元素布局评价量化指标

经用户访谈和设计师聚焦，结合界面布局设计特点，同时删去主观抽象的词汇，如成熟的，时尚的等，以保证评价结果的客观性。最终获得6个较为客观的美度指标——平衡度、对称度、整体度、简洁度、密集度和凝聚度，作为评价指标进行量化。

（一）平衡度

指界面整体元素布局给用户的视觉上的稳定感，避免用户因为信息布局失衡而感觉左右失衡或头重脚轻。

三、实例验证

（一）camera Connect APP界面元素布局的美度计算

为了验证本研究方法准确性，选取现有产品界面布局——六个不同相机品牌自带的Camera Connect APP进行综合美度计算，（如图1）所示。

首先对APP界面进行简化处理，为忽略色彩对界面布局综合美度的影响，对界面进行去色，将界面元素按功能划分为标题栏、菜单栏、信息栏和设置栏，将功能区块表征为最小化矩形，并通过不同颜色将界面和元素区分开，（如图2）所示。

根据界面元素布局评价量化指标计算公式，分别计算各方案的平衡度、对称度、整体度、简洁度、密集度和凝聚度的值，（如表1）所示。

（二）美度计算结果比较分析

为与此计算结果对比，由81位来自不同地区和年龄段的用户对各样本进行投票，选出设计得最令其满意的一款，分别得到各样本的票数。按票数降序排列为：界面3>界面6>界面2>界面1>界面4>界面5。

比较美度公式计算结果与用户投票结果可知，在用户对界面的投票中，样本界面3所获票数远高于其他样本，这与其通过综合美度计算公式所得到的分数远高于其他样本的情况相符；同时用户投票得出的样本优劣排序与通过公式计算得出的排序结果也一致，说明该综合美度计算方法能够较准确地反映出用户对界面元素布局的喜好程度。

手机APP的界面设计既要考虑人机间的交互性、可靠性，还要考虑到用户使用过程中的快捷性和便利性，为用户创造一种舒适愉悦的美的交互体验。快捷便利的实用原则和极简主义的审美原则是手机交互设计的基本原则，这也与通过层次分析法得到权重前三位的平衡度、對称度、简单度相一致。

（三）改进方案

界面3的美度计算结果与用户投票票数在6个样本界面中皆为最高分，可知界面3的元素布局设计较为优秀，具有较强参考价值。通过（表1）中的界面布局单个美度指标值可得，界面3在权重较大的平衡度、对称度与简单度的得分皆最高，平衡度与对称度基本接近满分，其高度的平衡性和对称性给用户舒适友好的交互体验。但界面3在整体度方面略有不足，因其三个主体元素布局部分分布较为分散，可能造成用户在使用过程中信息获取的疏漏，增加用户信息查找的负荷和时间，因此对界面3进行改进，（如图3）所示，减小三部分之间的间隙，使其分布较为紧凑，以提高用户的使用绩效，视觉效果也不再如先前零散。

结语

本研究构建了一种界面形态元素布局的综合美度计算方法，通过六款Camera Connect APP的界面形态元素布局的案例，验证了该方法对于评价界面美感程度的客观性与准确性，可科学地指导界面的选择与改进设计。但本研究工作仍有不足之处：APP的不同功能模块对界面美感的影响没有纳入考虑，在日后将进行深入研究。