面向知识重用和智能创新的交互界面进化设计研究

景春晖，支锦亦

面向知识重用和智能创新的交互界面进化设计研究

景春晖，支锦亦

(西南交通大学建筑与设计学院，四川 成都 611756)

为了让交互界面脱离依赖设计师个人经验和主观认知的传统设计方式，将设计知识加以重用，并为人工设计提供自动智能的创新启发。基于交互产品中常见的交互界面构建重用知识规则和边界，构建了交互界面进化基因模型，并利用遗传算法，通过构建针对交互界面编码的遗传算子、重用知识约束规则库和交互式评价等进化模块，形成了面向知识重用和自动化智能创新的交互界面进化设计方法。最后，在方法基础上，以目前常见的5个交互登录界面作为初始种群，进化生成了45个有效的子代个体。并通过设计实践验证了方法的有效性。结果表明，设计知识通过设计规则的方式被总结重用，并通过约束进化的方式进行了自动智能化式的辅助设计，提升了设计知识重用及计算机辅助智能创新水平。

知识重用；智能创新；进化；交互界面；遗传算法

当前，交互界面设计主要依赖设计师个人的经验和主观认知，设计知识难以有效的传承和重用，这对设计经验不足的新手设计师具有不良影响[1]，也不利于设计水平的稳定控制。针对这种现象，业界开展了计算机辅助界面设计的探索，如阿里巴巴公司的“鲁班”系统，可自动对banner界面进行设计。但这种设计更多采用视觉元素排列组合的方式进行创新，在本体创新上比较薄弱。目前关于计算机辅助界面设计本体创新的研究主要包括：

(1) 通过进化生成突破性的“创新点”，触发和引导设计师的创新能力[2]。如CHAN等[3]利用进化算法获取家族化磨具设计的创新结构；赵海英等[4]利用遗传进化思想对地毯图案进行了创新设计；YUAN等[5]基于进化方法对蜡染的图形进行了创新设计等。

(2) 以继承设计知识为前提启发设计师的创作灵感，使设计过程和结果同时兼具创新性和合理性。如邓海静和邓丁奇[6]借用TRIZ需求进化定律对微耕机进行了创新设计；景春晖和赵江洪[7]基于现有产品设计知识进行汽车造型进化设计；以及基于用户知识的进化设计和在建筑设计中的应用[8-9]等。

可见，交互界面设计机理尚不明确，进化驱动的交互界面设计方法研究还比较薄弱，亟待开展相关研究。因此，本文基于进化思想，将交互界面设计问题映射为视觉单元的组合变异问题，将客观设计知识转化为约束算法，形成设计知识库。将主观设计知识通过参与式评价的方式对设计知识加以重用，并在此基础上，基于进化算法形成完整的交互界面智能设计辅助方法，且进行了设计实践验证。该方法在继承设计知识，启发设计师创新、提高设计效率等方面具有重要意义。

1 交互界面进化基因模型

原型(prototpe)的概念来源于希腊语“prototypos”，是一个由“protos(初始)”和“typos(模式、模式、印象)”组成的复合词[10]。对于交互界面来说，界面原型是交互界面的几何布局基础，包含了界面的基础构型信息，也被称为“低保真”(图1)。因为界面原型可以帮助设计师采用较少的时间、专业技能和资源实现快速的产品推想与测试[11]，因此常被用于描绘设想、设计方案以及界面布局。设计师在进行界面设计时，为了降低修改成本，会将界面架构的形式创新放在线框层面的低保真设计阶段。其中关键的视觉单元(form，如登陆按钮等)，及单元之间的布局与关系的组合，决定了交互界面的表现形式[1]。因此，本文以界面原型作为进化设计的操作对象。

界面基因是构成界面的基本元素，也是构建进化方法的前提。构建界面进化基因表达模型，可以将交互界面设计的主观感性求解问题转化为理性求解问题，即完成问题域到编码域的知识映射。以典型交互界面-登陆界面为例(图1)，登陆界面原型是由账号登录框、密码框、登陆按钮等几何单元构成。若将整个交互界面视作产品基因的表现型，这些几何单元即为产品基因的局部表现型，基因片段的组合即构成产品基因组。

图1 登录界面及界面原型

交互界面的产品基因组是由代表局部几何单元的子基因组构成的。将每个子基因组的几何形态与所处位置加以参数化描述，即可将子基因组映射为最底层的数据形式，即基因。将基因编码进行组合即构成了交互界面基因组。基因组编码采用定长的二进制编码。以登陆界面为例，界面基因组主要由账号登录框、密码框、登陆按钮、帮助按钮、注册按钮、以及快捷登陆选项子基因组构成，将其分别进行编码，则有：1为快捷方式、2为账户名、3为密码、4为帮助、5为登陆、6为注册等6组子基因组。

以界面左上端为原点构建参数坐标，矩形单元基因由矩形中心位置参数和矩形长宽参数构成，即

以某移动端交互产品登录界面为例(图2)，其基因构成主要为

将1~6加以组合，即构成了该交互界面的产品基因组

图2 登录界面产品基因组构成

Fig. 2 Login page product genome

2 进化策略

将每个交互界面视为一个个体，多个个体即可组成种群。在种群繁衍过程中，生成的新个体需要在基因变异(创新)的同时，受到规则(设计经验知识)的约束。因此，在进化策略方面，主要采用模拟生物进化的选择、交叉、变异等进化算子进行计算机模拟，进化生成的个体受到审美体验、可用性和易用性等知识约束框架的筛选，并受到人因评价因素的影响。

2.1 进化算子

进化算子决定了个体基因的交叉和变异形式。包括选择、交叉、变异算子。

(1) 选择算子。根据优劣度决定个体基因的保留概率，本文选用适应度比例选择方法，采用轮盘赌的方式来实现。对于给定规模为的群体={1,2,···,a}，个体aÎ的适应度值为(a)，其选择概率为

(2) 交叉算子。可决定个体间交换基因串的概率。在一般的进化算法中，交叉概率P通常取值0.25~0.75，通过多次试运行，本文取值为0.49，交叉方式为多点交叉。

(3) 变异算子。决定个体基因发生突变的概率。首先对个体进行基本变异概率的判断，然后根据基本变异概率进行实际的基因变异操作。对于基本变异概率P，为了保证性状的稳定性，通常取较小的0.01~0.20。然而由于本文采用小样本种群(5个个体)，并且在设计情境中需要较大的变异激发设计灵感，因此增大了变异概率P。通过试运行发现P值位于0.20~0.40间较为合理，本文取值为0.34。

2.2 设计知识重用约束框架

交互界面设计的知识重用与计算机算法的结合有2种途径：①将客观性较强的设计知识转化为计算机约束算法的逻辑形式；②将主观性较强的设计知识通过人的参与(如打分评价)进行收敛化和参数化。构建约束算法形式，设计重用知识的目的在于，总结现有的设计知识，形成可用于约束的设计知识，并持续补充“可成长”的设计知识库。

具有丰富经验的设计师，在发散概念的同时会考虑产品的可用性和可实现性。设计知识此时就体现为逻辑和规则的约束。如果将这些约束机制进行参数化定义，即形成一系列参数化约束框架，可用于规范后续设计个体的生成，从而引导进化。界面设计的约束知识有多种类型，对于设计知识的总结是持续性的，相应的知识库也是具有成长性的。

2.2.1 设计逻辑约束知识

设计师的经验知识经常以逻辑规则的形式体现。本文主要采用：①访谈法结合问卷调查[12]来收集抽象信息，并在此基础上加以总结，得到几何逻辑的经验知识；②基于“形状文法(shape grammar，SG)”的图形化比例分析等方式对界面几何特征进行分析分解[13]，得到造型表征的几何逻辑规则。逻辑约束知识案例如下：

名称：账号输入与密码输入单元几何关系(图3)。

表达：账号输入与密码输入单元在横向长度上等距，平行且起始位置相同。

逻辑表征为

,(5)

图3 账号输入与密码输入单元几何关系

2.2.2 边界阈值约束知识

边界阈值约束知识用来保证进化结果中不会出现脱离界面尺寸约束的个体。根据国家标准GB 8567等技术法规，利用时间序列分析法，以5.8寸移动屏幕为缩放标准，以左上角点为缩放基点，提取39个典型登陆界面设计中的原型轮廓线(图4)。对携带关键几何信息的轮廓线控制点进行叠加提取，然后进行极值筛选，即可得到每个视觉单元的关键几何信息的最大和最小值。为了宽松设计空间，将极值各扩展mm (为变量，可依扩展需求而定，值越大，设计空间越宽松，生成个体的创新性就越高，但随之可行性风险也越高)，最终可以得到界面设计边界演变阈值空间向量min，max。新生成的个体知识参数必须在阈值范围内，否则就会被降低适应度甚至直接被淘汰，即

图4 账号单元边界阈值抽取

Fig. 4 Boundary threshold extraction of account unit

2.2.3 认知极限约束知识

界面设计需符合人的认知规则，如较小的字体在有的设计情境中可以营造精致的认知感，但字体过小会造成用户认知困难。为了获取登陆界面设计各设计单元的认知约束阈值，研究通过在登陆界面整体尺寸不变的前提下，针对一系列逐次递减的尺寸单元进行对比性测试，以触发式响应实验的方式获取极限阈值。以账号输入框纵向认知为例，阈值知识表达方式如下：

名称：账号单元认知阈值(图5)。

表达：当账号输入名单元方向的尺寸数据小于阈值时，用户认知发生困难。即需要大于 该值。

逻辑表征为

当=1时，2≥，=4.6 (mm)(7)

图5 账号单元认知阈值

2.3 界面设计交互式评价

设计知识重用的另一种形式是将主观设计知识通过人的参与(如评价)进行收敛化和参数化。在进化设计中，对个体的评价可以决定其基因被遗传的概率大小，进而影响后续个体的形态发展，因此评价机制的设计对于整个进化方法至关重要。本文以图形美学为例，构建多因素设计评价规则。基于剑桥CRILLY等[14]提出的“基于视觉的用户与产品互动”模型，将设计物视作信息的发射端，评价者视作为接收端，那么这种交互可以引发用户在认知、情感与行为的反应[15]。因此，本文的界面设计评价主要从认知、情感和行为角度进行体现。

在处理时，认知、情感方面的体验评价采用交互式语义评价的方式进行(图6)，即根据短文本语义分析法[16]，首先搜集自然语言中与移动设备界面设计认知和情感相关的“词条本体”[17]，按照GB13190_91《汉语叙词表编制规则》将包含认知情感信息的形容词语义抽取出来作为界面设计的标准认知情感体验评价目标语义，经过频次排序，最终得到标准认知情感语义子集分别为

而后将标准认知情感语义设计成Likert 5点语义量表，让用户对被评价个体根据标准语义进行打分，最终得到个体在认知和情感方面的体验评价分值。为了提升评价方法的有效性和适用性，开发了一个可以将特征点基因可视化为低保真界面图像的程序[18]，用户直接面对造型特征线进行评价。

图6 评价语义抽取流程

行为方面的体验评价主要利用界面原型的方式让用户进行模拟操作，计算其操作的正确性与效率，从而确定该设计个体在操作行为方面的体验评价分值。

得到种群中每个个体的认知、情感、行为体验评价分值后，即可组成评价矩阵，按照各分值对于界面设计个体的重要程度模糊子集=(认知，情感，行为)，得到最终评价结果集合=×。

3 进化驱动的界面设计创新方法

利用遗传算法将知识约束、交互式评价等知识组织起来，即可构成进化设计创新方法。其流程如图7所示。

图7 进化驱动的界面设计创新方法

模块介绍：

(1) 种群模块。由于界面设计类型有限，导致初始种群个体相对较少。因此本文采用小种群Micro-GA算法，每代种群包含5个个体。

(2) 约束模块。为了判断生成的个体是否符合界面设计规则，即对于每个生成的个体，首先用设计规则加以匹配，并赋予相应的适应度值，保证筛选后的种群在基本设计逻辑范围内，保证个体合格率，提高评价效率。

(3) 遗传算子模块。其特点为：①增强进化算法的随机搜索能力，加大变异概率；②加大导向个体的选择概率；③保持种群个体的多样性。

(4) 评价模块。采用上一节中交互式评价方法对个体适应度进行评价。

(5) 迭代终止模块。界面设计的创新实际上是一种探索，当可变参数变为确定参数时，解空间就变得愈加受限，随之设计的变化选择自由度就越小，探索性随之减弱。对前期设计而言，需要的是设计空间(design space)，而不是设计集中(design fixation)，设计进化需要的是提出一系列良好解(“pretty good” solutions)而不是一个单一解(single optimal solution)[15]。因此，和传统的进化目标不同。设计师需要的是具有基本设计逻辑的“设计启发，而不是机器代替设计师进行创新。即在设计过程中，不会存在一个“综合最优”的个体，而是生成一系列“较优”的个体刺激设计师进行后续创新。只有保持一定的模糊性，为设计创新的生成留有一定空间，才能服务于设计实践。因此，当经历5代进化后，如果连续两代出现至少3个适应度大于等于3.5分(分值1~5)的个体，即认为达到了目标的设计空间，即可终止进化。

4 案 例

通过设计实践来考察和验证进化设计方法的可靠性和可用性。选取5款移动APP登陆界面作为进化设计的初始样本(图8)。样本群基本覆盖了目前市场上的典型登陆界面形式。

图8 进化设计初始样本种群

4.1 进化设计实验

在设计教学中发现，没有设计经验的大一新生具有普通用户的特征，而研究生则具有了一定的设计经验知识，可视为设计师。为了收集普通用户和设计师的见解，进而形成对设计进化方向的引导。通过随机抽样，选取大一学生和设计专业研究生各15人共30人组成评价组(平均年龄24.56岁，标准差4.27)。设计实验流程如图9所示，具体做法为：

(1) 由工作人员引导评价人员了解界面设计特征，介绍评价方法。

(2) 由评价人员针对进化设计的初始种群个体形态进行体验评价，得到初始适应度值，然后开始进化计算。

(3) 计算机每生成一代个体，均由评价人员对其进行交互式评价后再返回进化计算中，循环迭代，直至符合进化迭代终止条件，结束实验。

图9 进化设计实验流程图

在设计知识库中储存了56个可用的知识约束条目算法，并由计算机自动控制表达满足知识约束的造型数据信息，通过进化计算得到基因编码后，通过可视化程序将编码转化为可视化形式，再由评价人员对可视化图像进行打分。

4.2 进化设计结果

进化设计实验进行10代终止，共产生45个新个体，如图10所示，其收敛曲线如图11所示。

基于进化结果中的优质个体(适应度较高)，辅助设计师进行设计，设计师并不是只在最后一代中选择，而是在所有的优良个体中选择。图12为设计师按照此方法得到的方案。设计流程为：

(1) 在进化所得优质个体组中按设计师个人喜好选择一个个体。

(2) 将选择个体与父辈个体进行比较，确定其变化特征，变化特征即为设计重点。

(3) 结合设计定位进行概念发散，最终得到高保真设计方案。

图10 进化谱系

图11 收敛曲线((a)个体收敛曲线；(b)优质个体收敛曲线)

图12 设计案例

5 结 论

本研究提出了一种面向知识重用和智能创新的交互界面进化设计方法。该方法将界面设计问题视作进化演变问题，对视觉单元进行了基因编码，并根据设计师的逻辑化经验知识对创新个体进行约束，结合交互式评价等进化操作，生成了可以辅助设计师进行概念生成和完善的创新个体。最终形成了一套计算机辅助智能创新的、面向设计知识重用的界面设计创新方法。方法可以辅助设计师在缺乏设计知识和主观灵感时，进行启发式、辅助式的产品设计，提升设计知识重用及计算机辅助智能创新水平。

本研究还存在着一系列不足，如研究在评价用户筛选、评价因素规划方面都不够全面，采用的界面形式较单一；进化算子和进化规则也较简单；评价机制还不够智能、敏捷等。这些问题会在后续研究中深入探讨。

[1] ALAN C. About Face 4交互设计精髓[M]. 电子工业出版社, 2015.ALAN C. About face 4[M]. Electronic Industry Press, 2015 (in Chinese).

[2] ROSENMAN M A. An exploration into evolutionary models for non-routine design[J]. Artificial Intelligence in Engineering, 1997, 11(3): 287-293.

[3] CHAN I W M, PINFOLD M, KWONG C K, et al. Automation and optimisation of Family Mould cavity and runner layout design (FMCRLD) using genetic algorithms and Mould layout design grammars[J]. Computer-Aided Design, 2014, 47: 118-133.

[4] 赵海英, 彭宏, 张小利. 基于进化计算的地毯图案生成方法[J]. 图学学报, 2015, 36(1): 41-46.ZHAO H Y, PENG H, ZHANG X L. A generation method of carpet pattern based on evolutionary computation[J]. Journal of Graphics, 2015, 36(1): 41-46 (in Chinese).

[5] YUAN Q N, XU S H, JIAN L. A new method for retrieving batik shape patterns[J]. Journal of the Association for Information Science and Technology, 2018, 69(4): 578-599.

[6] 邓海静, 邓丁奇. 基于TRIZ需求进化定律的微耕机创新设计[J]. 图学学报, 2017, 38(6): 881-886.DENG H J, DENG D Q. Innovative tiller design based on the TRIZ demand revolution law[J]. Journal of Graphics, 2017, 38(6): 881-886 (in Chinese).

[7] 景春晖, 赵江洪. 基于进化思想的汽车造型优化设计方法研究[J]. 中国机械工程, 2014, 25(11): 1517-1523.JING C H, ZHAO J H. Optimization design method of automobile styling based on evolution strategy[J]. China Mechanical Engineering, 2014, 25(11): 1517-1523 (in Chinese).

[8] DOU R L, ZONG C, LI M Q. An interactive genetic algorithm with the interval arithmetic based on hesitation and its application to achieve customer collaborative product configuration design[J]. Applied Soft Computing, 2016, 38: 384-394.

[9] MARS A, GRABSKA E, ŚLUSARCZYK G, et al. Design characteristics and aesthetics in evolutionary design of architectural forms directed by fuzzy evaluation[J]. Artificial Intelligence for Engineering Design, Analysis and Manufacturing, 2020, 34(2): 147-159.

[10] 顾伟康, 尹欢. 隐藏式的设计方法在汽车内饰上的KANO模型研究[J]. 包装工程, 2020, 41(24): 115-120.GU W K, YIN H. Research on Kano model of hidden design method in automobile interior[J]. Packaging Engineering, 2020, 41(24): 115-120 (in Chinese).

[11] 郑杨硕, 贺世超, 罗文澜. “有情输入法”之信息交互原型设计与评价研究[J]. 包装工程, 2019, 40(10): 162-168.ZHENG Y S, HE S C, LUO W L. Information interaction design and evaluation research of “youqing input method” prototype[J]. Packaging Engineering, 2019, 40(10): 162-168 (in Chinese).

[12] 张海涛, 唐诗曼, 魏明珠, 等. 多维度属性加权分析的微博用户聚类研究[J]. 图书情报工作, 2018, 62(24): 124-133.ZHANG H T, TANG S M, WEI M Z, et al. Research on the clustering of microblog users based on multi-dimensional attribute weighting analysis[J]. Library and Information Service, 2018, 62(24): 124-133 (in Chinese).

[13] 鲜洁宇, 钱筱琳, 江国珍, 等. 拖拉机产品族设计DNA视觉化方法[J]. 机械设计, 2018, 35(8): 111-115.XIAN J Y, QIAN X L, JIANG G Z, et al. Visualization method for product family design DNA of tractor[J]. Journal of Machine Design, 2018, 35(8): 111-115 (in Chinese).

[14] CRILLY N, MOULTRIE J, CLARKSON P J. Seeing things: consumer response to the visual domain in product design[J]. Design Studies, 2004, 25(6): 547-577.

[15] 景春晖. 兼变传衍、持经达变—基于进化思想的汽车造型设计方法[D]. 长沙: 湖南大学, 2015.JING C H. The car styling design method based on evolutionary thought[D]. Changsha: Hunan University, 2015 (in Chinese).

[16] 楚东晓, 彭玉洁. 构建面向服务产品的感性价值创造模型[J]. 装饰, 2019, (7): 87-91.CHU D X, PENG Y J. Building a kansei value creation model in product design for senvice-oriented products[J]. Art & Design, 2019, (7): 87-91 (in Chinese).

[17] 马静, 何雪枫, 简旭文. 动态热门话题的“特征词条本体”自动构建与进化研究[J]. 现代图书情报技术, 2016(10): 33-41.MA J, HE X F, JIAN X W. Automatically building “feature items ontology” for trending topics[J]. New Technology of Library and Information Service, 2016(10): 33-41 (in Chinese).

[18] 景春晖, 张晶. 汽车造型设计空间研究[J]. 机械设计, 2016, 33(7): 121-124.JING C H, ZHANG J. Study on space design of automotive modeling[J]. Journal of Machine Design, 2016, 33(7): 121-124 (in Chinese).

Research on evolutionary design of interactive interface for knowledge reuse and intelligent innovation

JING Chun-hui, ZHI Jin-yi

(School of Architecture and Design, Southwest Jiaotong University, Chengdu Sichuan 611756,China)

In order to break away from the traditional design method depending on the designer’s personal experience and subjective cognition, to reuse design knowledge, and to provide innovative inspiration for artificial design with automatic intelligence, the evolutionary gene model of interactive interface was constructed based on the reuse knowledge rules and boundaries summarized in the process of interactive interface design. Then, the genetic algorithm was employed to construct the evolutionary modules of the interactive interface coding, such as genetic operators, knowledge reuse constraint rules base, and interactive semantic evaluation, forming an interactive interface evolutionary design method for knowledge reuse and automation intelligent innovation. Finally, on the basis of the method, forty-five effective offspring individuals were generated from the ten generations of evolution using five common login interactive interfaces as the initial population. The effectiveness of the method was verified by design practice. The results show that the design knowledge can be summarized and reused through design rules, and the automatic intelligent aided design can be undertaken through constraint evolution, thereby elevating the level of design knowledge reuse and computer-aided intelligent innovation design.

knowledge reuse; intelligent innovation; evolutionary design; interactive interface; genetic algorithm

TP 391；V 221；TB 47

10.11996/JG.j.2095-302X.2021020332

A

2095-302X(2021)02-0332-07

2020-09-10；

10 September，2020；

2020-10-23

23 October，2020

教育部人文社会科学研究项目(19YJA760094)；四川省社会科学规划项目“四川统计发展专项课题”(SC20TJ031)；四川省哲学社会科学重点研究基地-现代设计与文化研究中心重点项目(MD20Z001)；工效学会-津发优秀青年学者联合研究项目(CES-Kingfar-2019-001)；教育部人文社科青年基金项目(19YJC760054)

MOE Layout Foundation of Humanities and Social Sciences (19YJA760094);Sichuan Social Science Planning Fund Program: Sichuan Statistical Development Special Project (SC20TJ031); Sichuan Key Research Base of Philosophy and Social Science Key Project of Modern Design and Culture Research Center (MD20Z001); CES-Kingfar Excellent YoungScholar Joint Research Funding (CES-Kingfar-2019-001); Humanities and Social Science Youth Fund Project of Ministry of Education (19YJC760054)

景春晖(1986-)，男，河北承德人，讲师，博士。主要研究方向为交互体验与人因工程。E-mail：JINGCH@swjtu.edu.cn

JING Chun-hui (1986-), male, lecture, Ph.D. His main research interests cover user experience and human factors. E-mail：JINGCH@swjtu.edu.cn