基于意象推导的配色方法在APP界面设计的应用

孙雯婷, 马锐杰, 秦诗雅, 艾鑫, 徐锦阳, 侯云鹏, 张高煜

(上海立信会计金融学院,上海 201209)

基于意象推导的配色方法在APP界面设计的应用

孙雯婷, 马锐杰, 秦诗雅, 艾鑫, 徐锦阳, 侯云鹏, 张高煜

(上海立信会计金融学院,上海 201209)

APP的界面风格现已成为影响用户体验的一个重要因素，为了帮助APP搭建者解决在设计界面时的配色问题，提出了一个基于意象推导的配色方法，并阐述如何将其应用于APP的界面设计中。通过使用该方法，可以帮助UI设计者快速地确定APP的主色调，并通过提取色彩样本生成与预期主题相符的配色方案，以博得APP用户的喜爱。

配色; 意象; APP界面; 色彩和谐度; 色彩感性因素

0 引言

色彩意象是指人们看到色彩时大脑潜意识地搜索具有类似特征的事物从而引发一连串的情感激励的现象。随着计算机科学技术的发展，色彩意象开始被一些软件设计者所关注，而利用计算机制定配色方案一直都是艺术领域和计算机领域的一项重要研究内容。

首先是色彩和谐度模型[1]，该模型用于评价颜色和谐度，主要利用了均值漂移算法[2]、高斯混合模型[3]和潜在狄利克雷分布模型[4]。该模型适用于以色相为主的对象,然而还存在着样本不足、评价标准不一等问题。其次是色彩感性因素量化方法[5]，该方法从色彩学的和谐、偏好与构图3方面入手, 提出了面向用户的色彩偏好方案生成方法以及量化模型。然而，由于色彩感性因素的复杂性, 该模型还需进行复杂的基础量化研究。最后是色彩意象回归模型[6],该模型综合了色彩属性及色彩心理,利用多种统计学分析方法,选取具有代表性的色彩感性意象语汇及色彩样本,获得色彩客观参数及主观评价的量化值。然而，该模型只考虑了色相调和理论的一个方面，具有一定的局限性。

由此可见，人们虽提出了各式各样的颜色和谐模板以及与之对应的颜色和谐度量化方案和配色规则。然而，这些模型的构建往往步骤繁琐，且都具有一定的局限性，不能广泛地被应用。在此，本文提出了基于意象推导的配色方法，结合艺术学和统计学分析方法，科学地完成配色方案的制定，并将其应用于APP的界面设计中。

1 设计流程

基于意象推导的配色方法实际上是色彩意象的逆过程，首先根据大脑的记忆与经验，由目标对象的主题联想与之有关的或具有代表性的词语和实体，再经过多层推导，最终确定相应的多主体自然场景，并提取该场景内的色彩样本，选择最优的配色方案。本文将此方法应用于APP的界面设计中，具体流程,如图1所示：

图1 总体流程

2 确定APP类型及目标主体

为了便于阐述，本文将以大学生校园信息服务类APP为例，该类APP的功能主要有校园信息、周边购物信息、培训推荐等。由于APP界面的面向对象是APP的使用者，因此，APP的目标主体将作为推导的开端，目标主体是指APP的运营所涉及到的人群或机构，并根据主体相对于app的重要性决定各自的权重大小,现将APP目标主体归纳,如表1所示。

表1 主体归纳表

3 推导代表名词

在确认了APP的目标主体后，将正式开始意象推导。首先，推导所有与主体相关或具有代表性的词语，主要包含形容性词汇和特征性名词，所有词语均为褒义词或中性词，必须避免贬义词的出现，且相同主体下的所有名词权重相同，推导流程如下：

3.1 推导主体的精神印象名词

为了给用户留下良好的第一印象，首先要建立好各个主体对于用户来说的正面的、积极的精神印象。因此，精神印象名词的推导为名词推导的第一步，也是最重要的一步，而推导的结果要具有代表性，且能够体现该主体的积极形象。

3.2 推导主体的行为印象名词

由于每个主体使用APP的目的不同，这就导致了其行为的不一致性，为了较好地为每个主体营造不同的行为环境，本文将推导各个主体的行为印象名词。同样地，推导结果要具有代表性，以便当用户实施其行为时，APP可提供恰当的色彩情感激励。

3.3 推导主体的职能印象名词

职能印象名词与行为印象名词有些类似，而不同之处在于行为印象名词仅仅代表主体在使用APP时的行为，而职能印象名词表示的是主体在生活或工作中的整体代表性行为。而该推导结果可帮助分析主体的心理常态，并更加准确地确定色彩意象。

3.4 推导主体的行为目的名词

行为目的名词的推导与4.2中行为印象的推导相呼应，推导内容为主体在使用APP的行为目的，该推导可帮助完善对每个主体的基本认识以及在APP中扮演的角色，从而进一步确定该主体所对应的色彩意象。

3.5 推导用户在该主体的帮助下可能实现的未来期望

为了让用户在使用APP时拥有满足感和期待感，在确定意象之前，首先要分析用户对APP的功能需求。换言之，要确认在各个主体的帮助下，用户对于未来的期望与可能实现的目标。因此，名词推导的最后一步便是推导用户的未来期望，该类名词往往蕴含着积极向上之情和美好的希望与想象。

根据以上步骤，推导结果,如表2所示。

表2 推导代表名词

4 确定APP主色

下一步，本文对表2中的所有代表词语进行权重的计算，按横向权重和纵向权重的乘积计算，其中，横向权重是指同一主体下每个词语的权重，纵向权重是指每个词语所对应的主体的权重。为了便于计算，本文对APP的目标主体进行了编号，由数字1-5分别代表在校大学生、所在高校、周边商家、培训机构和大学教师，具体的权重计算公式，计算过程,如表3所示。

如式(1)。

(1)

式(1)中，W表示权重，word表示代表词语，xwi表示i号主体下该词语的横向权重，ywi表示i号主体下该词语的纵向权重，n为APP的主体数量，i表示主体编号。

表3 名词权重计算

由计算结果可知，词语“理想(LX)”与“青春(QC)” 的权重值位于前两位。参考色彩感性因素量化与交互方法[5]可知，草绿色为“青春”的第一代表色，如果相对草绿色加入一些清冷的色调，则给人以宽广远大的感性体验，蕴含理想远大之意。因此，将APP主色确定为#66CCCC。

5 推导关联实体

在确定了代表名词的基础之上，继续推导其关联实体，一般而言，在实体范围给定的情况下，凭借一定数量的描述性词语可以基本锁定目标实体。在此，本文以自然界实体为固定范围，推导结果如下：

5.1 在校大学生——小草

经过上文的推导可知，在校大学生的代表名词为“青春”、 “努力”、“学习”、“进步”和“理想”。因此，笔者选择“小草”作为最后的关联实体。该意象多用于表现蓬勃顽强的生命力，贤才君子和自己追求的理想以及成长、奋斗的含义。

5.2 所在高校——树林

根据上文的推导，所在高校的代表名词为“青春”、“教学”、“培养”、“进步”和“理想”，因此，笔者选择“树林”作为最后的关联实体。该实体包含了千姿百态的古木奇树，在此意喻各种各样的学术与理想的交流与发展。

5.3 周边商家——花海

根据上文的推导，周边商家的代表名词主要为“服务”、“宣传”、“销售”、“竞争”和“娱乐”，在APP中扮演的是通过发布购物信息来吸引顾客的角色，因此，笔者选择“花海”作为最后的关联实体。该意象多用于表现群芳争艳，各自以独特的姿态吸引眼球的含义。

5.4 培训机构——高山

根据上文的推导，培训机构的代表名词为“专业”、“宣传”、“教学”、“培养”和“理想”，是一个校外的发展成长之地，因此，笔者选择“高山”作为最后的关联实体。该意象多用于表现豪情壮志，远大的理想以及勇于攀登，目标清晰明确的含义。

5.5 大学教师——江海

根据上文的推导，大学教师的代表名词主要为“专业”、“教学”、“指导”、“培养”和“理想”，是在校大学生的学习和人生上的引导者，因此，笔者选择“江海”作为最后的关联实体。该意象多用于表现学海无涯，心胸宽广，海纳百川的含义。

6 提取色彩样本

在确定了最终的关联实体后，笔者在包含所有实体的色彩场景中随机提取相应的色彩样本。在此过程中，需要使用一款名为ColorSchemer Studio的软件，拾取图片中的色彩样本，并将其转换成HTML颜色值，所有实体的取样结果,如表4所示。

以此为参考，APP的界面设计,如图2所示。

7 总结

本文提出的基于意象推导的配色方法，采用多层推导和多次筛选的方法，具有较强的科学性和可行性。下一步笔者将致力于研究实现色彩意象的系统化，完善意象推导理论，同时加入聚类分析和多维采样的方法，为艺术计算机领域的研究带来新的活力。

表4 提取色彩样本

图2 APP界面

[1] 邝智杰. 基于颜色和谐度的可计算图像美学评估关键技术研究与应用[D].北京:北京邮电大学,2015. 1-53.

[2] Comaniciu D, Meer P. Mean shift: A robust approach toward feature space analysis[J]. IEEE Transactions on,Pattern Analysis and Machine Intelligence, 2002,24(5): 603-619.

[3] Bishop C. Bishop, C.M.: Pattern Recognition and Machine Learning.Springer[J]. Journal of Electronic Imaging, 2006, 16(4):140-155.

[4] Heinrich G. Parameter Estimation for Text Analysis[J]. Technical Report, 2005: 1-32

[5] 胡国生. 色彩的感性因素量化与交互设计方法[D].杭州:浙江大学,2014: 1-129

[6] 王欢. 基于PCCS色立体的产品色彩意象规律及配色方法研究[D].哈尔滨:哈尔滨工业大学,2015:1-69

Application of Color Matching Method Based on Image Derivation In APP Interface Design

Sun Wenting,Ma Ruijie,Qin Shiya,Ai Xin,Xu Jinyang,Hou Yunpeng,Zhang Gaoyu

(Shanghai Lixin University of Accounting and Finance,Shanghai 201209,China)

Nowadays， the interface style of APP has been a critical factor in user experience. In order to help APP builders to solve the color matching problem in interface designing, this paper puts forward a color matching method based on image deduction, and expounds how to apply it to APP interface design. Through this method, it is possible to help UI designers determine the main colors of APP quickly, generate color schemes which are in the line with the expected theme by extracting color samples, and finally win the favor of APP users.

Color matching; Imagery; APP user interface; Color harmony; Color perceptual factor

上海大学生创新创业项目(201511639061)

孙雯婷(1996-)，女，上海立信会计金融学院,学生，专业：电子商务,上海 201209 马锐杰(1996-)，女，上海立信会计金融学院,学生，专业：电子商务,上海 201209 秦诗雅(1996-)，女，上海立信会计金融学院,学生，专业:电子商务,上海 201209 艾 鑫(1996-)，女，上海立信会计金融学院,学生，专业:电子商务,上海 201209 徐锦阳(1995-)，女，上海立信会计金融学院,学生，专业：电子商务,上海 201209 侯云鹏(1996-)，男，上海立信会计金融学院,学生，专业:电子商务,上海 201209 张高煜(1972-)，男，上海立信会计金融学院,信息管理学院,副教授，工学博士/博士后，研究方向：社会计算，嵌入式系统开发，上海 201209

1007-757X(2017)02-0022-04

TP311

A

)