融合视觉认知特征的虚拟博物馆界面布局美度评价方法

doi:10.11996/JG.j.2095-302X.2023020389

图学学报 ›› 2023, Vol. 44 ›› Issue (2): 389-398.DOI: 10.11996/JG.j.2095-302X.2023020389

融合视觉认知特征的虚拟博物馆界面布局美度评价方法

裴卉宁(), 温志强, 黄雪芹, 谭昭芸, 张新新()

河北工业大学建筑与艺术设计学院，天津 300401

收稿日期:2022-05-09 接受日期:2022-08-29 出版日期:2023-04-30 发布日期:2023-05-01
通讯作者: 张新新(1991-)，女，讲师，博士。主要研究方向为感性工学、智能设计等。E-mail：zhangxinxin@hebut.edu.cn
作者简介:裴卉宁(1986-)，女，副教授，博士。主要研究方向为认知工效学、智能设计等。E-mail：peihuining@hebut.edu.cn
基金资助:
河北省社会科学基金项目(HB20YS046)

Evaluation method of virtual museum interface layout aesthetic with visual cognitive characteristics

PEI Hui-ning(), WEN Zhi-qiang, HUANG Xue-qin, TAN Zhao-yun, ZHANG Xin-xin()

School of Architecture and Art Design, Hebei University of Technology, Tianjin 300401, China

Received:2022-05-09 Accepted:2022-08-29 Online:2023-04-30 Published:2023-05-01
Contact: ZHANG Xin-xin (1991-), lecturer, Ph.D. Her main research interests cover kansei engineering and intelligence design, etc. E-mail：zhangxinxin@hebut.edu.cn
About author:PEI Hui-ning (1986-), associate professor, Ph.D. Her main research interests cover cognitive ergonomics and intelligent design, etc. E-mail：peihuining@hebut.edu.cn
Supported by:
Social Science Foundation of Hebei Province(HB20YS046)

摘要/Abstract

摘要：

针对人机界面布局评价中缺乏对用户视觉认知特征的量化研究问题，提出一种考虑人体视觉认知特征的虚拟博物馆界面布局美度评价方法。首先，选取对称度、密集度、简洁度、次序度、优势度作为美度评价指标，以抽象后的矩形布局图像为样本进行界面布局美度评价；其次，采用眼动追踪技术对界面布局美度进行实验测试，进行用户视觉认知生理数据结果的获取；再次，基于灰色理论构建改进的灰色H-凸关联模型，量化用户视觉认知与人机界面布局美度之间的映射关系；最后，将提出方法应用于虚拟博物馆人机界面布局设计方案分析中，验证了评价方法的有效性和其对界面布局美度指标正负关联性的判断能力。

关键词: 虚拟博物馆, 界面布局美度, 视觉认知特征, 灰色H-凸关联

Abstract:

To address the lack of quantitative research on users′ visual cognitive characteristics in the evaluation of human-machine interface layout, an evaluation method for virtual museums′ interface layout aesthetics was presented, taking into account human visual cognitive characteristics. Firstly, symmetry, density, simplicity, order and dominance were selected as the evaluation indexes, and the abstract rectangular layout image was taken as the sample to evaluate the aesthetic of the interface layout. Secondly, the eye tracking technique was used to test the aesthetic of the interface layout, and the results of the users′ visual cognitive physiological data were obtained. Thirdly, based on the grey theory, an improved grey H-convex correlation model was constructed to quantify the mapping between users′ visual cognitive characteristics and the aesthetic of human-machine interface layout. Finally, the method was applied to the analysis of human-machine interface layout design in virtual museums, the validity of the evaluation method and its ability to judge the positive and negative correlation of the aesthetic index of man-machine layout were verified.

Key words: virtual museum, interface layout aesthetic, visual cognitive characteristics, grey H-convex incidence

中图分类号:

TP391

裴卉宁, 温志强, 黄雪芹, 谭昭芸, 张新新. 融合视觉认知特征的虚拟博物馆界面布局美度评价方法[J]. 图学学报, 2023, 44(2): 389-398.

PEI Hui-ning, WEN Zhi-qiang, HUANG Xue-qin, TAN Zhao-yun, ZHANG Xin-xin. Evaluation method of virtual museum interface layout aesthetic with visual cognitive characteristics[J]. Journal of Graphics, 2023, 44(2): 389-398.

图/表 12

图1 凹凸折线H-凸度计算示意图

Fig. 1 Concave-convex broken line H-convexity calculation schematic diagram

图2 研究框架

Fig. 2 Research framework

图3 界面布局美度元素表征和定位

Fig. 3 Characterization and orientation of interface aesthetic elements in interface layout

图4 虚拟博物馆界面布局样本

Fig. 4 Virtual museum interface layout sample

表1 布局样本界面美度量化指标值

Table 1 The quantified index values of interface aesthetic for layout samples

布局方案	对称度	密集度	简洁度	次序度	优势度
A	0.94	0.99	1.00	0.88	0.84
B	0.93	0.78	0.82	0.75	0.81
C	0.91	0.76	0.75	0.75	0.78
D	0.44	0.69	0.65	0.50	0.72
E	0.32	0.72	0.70	0.50	0.67
F	0.52	0.85	0.75	0.63	0.73

图5 实验样本示例

Fig. 5 An example of an experimental sample

图6 实验流程

Fig. 6 Experimental procedure

表2 实验中眼动指标均值

Table 2 Mean value of eye movement index

布局方案	注视长(ms)	注视次数 (N)	平均瞳孔直径 (mm)	注视转移频率 (%)	注视时间百分比(%)
A	2 527	7.00	3.00	68.9	70.43
B	2 963	10.30	3.02	60.5	71.27
C	3 751	14.40	3.04	60.1	65.48
D	5 460	20.60	3.06	45.8	56.55
E	6 628	17.20	3.05	45.2	49.69
F	5 062	10.80	3.04	57.0	59.33

表3 虚拟博物馆界面视觉认知特征与布局美度的加权后标准化数据结果

Table 3 The results of the weighted standardized data on visual cognitive characteristics and layout aesthetic of virtual museum interface

界面布局方案	注视时长 Y₁ (ms)	注视次数 Y₂ (N)	平均瞳孔直径Y₃ (mm)	注视转移频率Y₄ (%)	注视百分比 Y₅ (%)	对称度 X₁	密集度 X₂	简洁度 X₃	次序度 X₄	优势度 X₅
V₁	1.000 0	1.000 0	1.000 0	1.000 0	0.961 1	1.000 0	1.000 0	1.000 0	1.000 0	1.000 0
V₂	0.893 7	0.757 4	0.666 7	0.645 6	1.000 0	0.983 9	0.300 0	0.485 7	0.657 9	0.823 6
V₃	0.701 5	0.455 9	0.333 4	0.628 7	0.731 7	0.949 9	0.233 3	0.285 7	0.657 9	0.647 1
V₄	0.284 8	0.000 0	0.000 0	0. 025 3	0.317 9	0.193 5	0.000 0	0.000 0	0.000 0	0.294 1
V₅	0.000 0	0.250 0	0.166 7	0.000 0	0.000 0	0.000 0	0.100 0	0.142 9	0.000 0	0.000 0
V₆	0.381 9	0.720 6	0.333 4	0.497 9	0.446 7	0.322 6	0.533 4	0.285 7	0.342 1	0.353 0

表4 虚拟博物馆界面方案中用户注视时长与布局美度的关联系数及关联度

Table 4 The correlation association and the correlation degree between the fixation duration and the layout aesthetic in the virtual museum interface scheme

x(k)	x(2)	x(3)	x(4)	x(5)	${{\hat{R}}_{H}}(a,m)$
${{\hat{\gamma }}_{H({{Y}_{1}},{{X}_{1}})}}$	-0.983	-0.897	-0.912	-0.963	-0.939
${{\hat{\gamma }}_{H({{Y}_{1}},{{X}_{2}})}}$	0.887	-0.987	-0.950	-0.920	-0.492
${{\hat{\gamma }}_{H({{Y}_{1}},{{X}_{3}})}}$	-0.949	-0.9686	-0.929	0.857	-0.497
${{\hat{\gamma }}_{H({{Y}_{1}},{{X}_{4}})}}$	-0.940	-0.907	-0.888	-0.924	-0.461
${{\hat{\gamma }}_{H({{Y}_{1}},{{X}_{5}})}}$	-0.979	-0.989	-0.983	-0.995	-0.983

表5 不同模型有关虚拟博物馆注视时长与各界面布局美度指标的关联度结果对比

Table 5 Comparison of the correlation degree between the fixation duration and each layout aesthetic index of virtual museum interface in different models

方法	Y₁-X₁	Y₁-X₂	Y₁-X₃	Y₁-X₄	Y₁-X₅
文献[23]	-0.701	-0.413	-0.359	-0.202	-0.854
本文	-0.939	-0.492	-0.497	-0.461	-0.983

图7 用户视觉认知特征与各界面布局美度指标变化趋势折线图((a)注视时长与各界面布局美度指标变化趋势折线图；(b)注视次数与各界面布局美度指标变化趋势折线图；(c)平均瞳孔直径与各界面布局美度指标变化趋势折线图；(d)注视转移频率与各界面布局美度指标变化趋势折线图；(e) AOI注视时间百分比与各界面布局美度指标变化趋势折线图)

Fig. 7 The change trend of user visual cognitive characteristics and each aesthetic index of interface layout ((a) Line chart of the trend of fixation duration and the beauty index of all fields; (b) Line chart of the trend of the number of eyes and the beauty index of the layout of various fields; (c) Line chart of average pupil diameter and beauty index of all surfaces; (d) Line chart of the change trend of the frequency of gaze shift and the beauty index of the layout of various fields; (e) Line chart of the change trend of AOI fixation time percentage and beauty index of all walks of life layout)

参考文献 30

[1]	陈茜朦. 非物质文化遗产虚拟展览馆用户体验评价与量化模型研究[D]. 重庆: 重庆大学, 2019.
	CHEN Q M. Research on user experience evaluation and quantitative model of virtual exhibition hall of intangible cultural heritage[D]. Chongqing: Chongqing University, 2019. (in Chinese)
[2]	TRUNFIO M, CAMPANA S. A visitors′ experience model for mixed reality in the museum[J]. Current Issues in Tourism, 2020, 23(9): 1053-1058. DOI URL
[3]	LEOPARDI A, CECCACCI S, MENGONI M, et al. X-reality technologies for museums: a comparative evaluation based on presence and visitors experience through user studies[J]. Journal of Cultural Heritage, 2021, 47: 188-198. DOI URL
[4]	PAGANO A, ARMONE G, DE SANCTIS E. Virtual museums and audience studies: the case of "Keys To Rome″ exhibition[C]// 2015 Digital Heritage. New York: IEEE Press, 2015: 373-376.
[5]	王圣洁. 虚拟现实技术在博物馆展示设计中的应用研究[D]. 无锡: 江南大学, 2018.
	WANG S J. Research on the application of virtual reality in museum display design[D]. Wuxi: Jiangnan University, 2018. (in Chinese)
[6]	任英丽, 李鑫圆, 阳倩. VR虚拟博物馆交互体验设计研究[J]. 大众文艺, 2019(5): 121.
	REN Y L, LI X Y, YANG Q. Research on interactive experience design of virtual museum[J]. Popular Literature, 2019(5): 121. (in Chinese)
[7]	滕红, 王正东, 涂善东, 等. 过程系统中人机界面布局设计的实验研究[J]. 机械设计与研究, 2008, 24(5): 79-82, 87.
	TENG H, WANG Z D, TU S D, et al. Experimental study on layout designs for general interface in process plant for process plants[J]. Machine Design ＆ Research, 2008, 24(5): 79-82, 87. (in Chinese)
[8]	许永生, 李丽丽, 吴尤荻, 等. 基于注意力分配的高铁操纵台界面布局优化设计[J]. 西南交通大学学报, 2022, 57(2): 401-409.
	XU Y S, LI L L, WU Y D, et al. Optimization design of interface layout of high-speed railway control console based on attention distribution[J]. Journal of Southwest Jiaotong University, 2022, 57(2): 401-409. (in Chinese)
[9]	李晶, 郁舒兰, 刘玮. 基于眼动追踪的数控界面布局认知特性评价[J]. 计算机辅助设计与图形学学报, 2017, 29(7): 1334-1342.
	LI J, YU S L, LIU W. Cognitive characteristic evaluation of CNC interface layout based on eye-tracking[J]. Journal of Computer-Aided Design & Computer Graphics, 2017, 29(7): 1334-1342. (in Chinese)
[10]	WANG N, LIU S T. Research on virtual exhibition platform based on user experience[C]// 2010 IEEE 11th International Conference on Computer-Aided Industrial Design & Conceptual Design 1. New York: IEEE Press, 2010: 711-714.
[11]	ZOU N, GONG Q, ZHOU J P, et al. Value-based model of user interaction design for virtual museum[J]. CCF Transactions on Pervasive Computing and Interaction, 2021, 3(2): 112-128. DOI
[12]	KABASSI K, MARAVELAKIS E. Walkthrough evaluation of a VR museum for the physical environment[C]// The 6th International Conference on Information, Intelligence, Systems and Applications. New York: IEEE Press, 2015: 1-5.
[13]	徐琳, 陈强, 汪青. 色彩熵在图像质量评价中的应用[J]. 中国图象图形学报, 2015, 20(12): 1583-1592.
	XU L, CHEN Q, WANG Q. Application of color entropy to image quality assessment[J]. Journal of Image and Graphics, 2015, 20(12): 1583-1592. (in Chinese)
[14]	董天阳, 杨丽锦, 张鑫鹏. 用户多维感知的3D图像体验质量评价[J]. 中国图象图形学报, 2019, 24(5): 782-793.
	DONG T Y, YANG L J, ZHANG X P. 3D image experience quality evaluation method for users′ multi-dimensional perception[J]. Journal of Image and Graphics, 2019, 24(5): 782-793. (in Chinese)
[15]	HORBIŃSKI T, CYBULSKI P, MEDYŃSKA-GULIJ B. Graphic design and button placement for mobile map applications[J]. The Cartographic Journal, 2020, 57(3): 196-208. DOI URL
[16]	LAZARD A J, KING A J. Objective design to subjective evaluations: connecting visual complexity to aesthetic and usability assessments of eHealth[J]. International Journal of Human-Computer Interaction, 2020, 36(1): 95-104. DOI URL
[17]	DIANAT I, ADELI P, ASGARI JAFARABADI M, et al. User-centred web design, usability and user satisfaction: the case of online banking websites in Iran[J]. Applied Ergonomics, 2019, 81: 102892. DOI URL
[18]	PENGNATE S, SARATHY R, LEE J. The engagement of website initial aesthetic impressions: an experimental investigation[J]. International Journal of Human-Computer Interaction, 2019, 35(16): 1517-1531. DOI URL
[19]	NGO D C L, TEO L S, BYRNE J G. Modelling interface aesthetics[J]. Information Sciences, 2003, 152: 25-46. DOI URL
[20]	周蕾, 薛澄岐, 汤文成, 等. 界面元素布局设计的美度评价方法[J]. 计算机辅助设计与图形学学报, 2013, 25(5): 758-766.
	ZHOU L, XUE C Q, TANG W C, et al. Aesthetic evaluation method of interface elements layout design[J]. Journal of Computer-Aided Design ＆ Computer Graphics, 2013, 25(5): 758-766. (in Chinese)
[21]	周爱民, 苏建宁, 阎树田, 等. 产品形态审美综合评价的非线性信息动力学模型[J]. 机械工程学报, 2018, 54(15): 150-159. DOI
	ZHOU A M, SU J N, YAN S T, et al. Nonlinear information dynamics model of synthetic evaluation on product form aesthetic[J]. Journal of Mechanical Engineering, 2018, 54(15): 150-159. (in Chinese) DOI
[22]	邓聚龙. 灰理论基础[M]. 武汉: 华中科技大学出版社, 2002: 63-170.
	DENG J L. Grey theory basis[M]. Wuhan: Huazhong University of Science and Technology Press, 2002: 63-170. (in Chinese)
[23]	潘平国, 陈勇明, 谢海英. 灰色H-凸关联度模型研究[J]. 统计与决策, 2016(9): 31-34.
	PAN P G, CHEN Y M, XIE H Y. Study on grey-convex correlation degree model[J]. Statistics ＆ Decision, 2016(9): 31-34. (in Chinese)
[24]	周蕾, 薛澄岐, 汤文成, 等. 产品信息界面的用户感性预测模型[J]. 计算机集成制造系统, 2014, 20(3): 544-554. DOI
	ZHOU L, XUE C Q, TANG W C, et al. User perceptual prediction model of product information interface[J]. Computer Integrated Manufacturing Systems, 2014, 20(3): 544-554. (in Chinese)
[25]	马文静. 网页常见布局类型及布局技术的分析[J]. 现代信息科技, 2018, 2(7): 103-104, 106.
	MA W J. Analysis of the common layout types and layout techniques of web pages[J]. Modern Information Technology, 2018, 2(7): 103-104, 106. (in Chinese)
[26]	张婷婷. 图形用户界面中影响用户认知的图标设计因素研究[D]. 上海: 上海交通大学, 2011.
	ZHANG T T. Effects of icon design factors on user recognition in graphical user interface[D]. Shanghai: Shanghai Jiao Tong University, 2011. (in Chinese)
[27]	邓丽, 余隋怀, 陈波. 基于Vague集的人机界面布局眼动追踪评价[J]. 工程设计学报, 2016, 23(3): 222-227.
	DENG L, YU S H, CHEN B. Eye tracking evaluation of human-machine interface layout based on Vague set[J]. Chinese Journal of Engineering Design, 2016, 23(3): 222-227. (in Chinese)
[28]	王坚浩, 王龙, 张亮, 等. 灰色群组聚类和改进CRITIC赋权的供应商选择VIKOR多属性决策[EB/OL]. [2021-11-02]. https://kns.cnki.net/kcms/detail/detail.aspx?dbcode=CAPJ&dbname=CAPJLAST&filename=XTYD20211101003&uniplatform=NZKPT&v=eV6a0WLq41o77kb9LQufyGzSh2n6D9Su7Mi2EVgyNcHem7Kq3Ctb9wDOq9SzUxtP.
	WANG J H, WANG L, ZHANG L, et al. Supplier selection vikor Multi-attribute decision making of grey group clustering and improved critic weighting[EB/OL]. [2021-11-02]. https://kns.cnki.net/kcms/detail/detail.aspx?dbcode=CAPJ&dbname=CAPJLAST&filename=XTYD20211101003&uniplatform=NZKPT&v=eV6a0WLq41o77kb9LQufyGzSh2n6D9Su7Mi2EVgyNcHem7Kq3Ctb9wDOq9SzUxtP.
[29]	DING X C, WANG J, LAHIJANIAN M, et al. Temporal logic motion control using actor-critic methods[J]. 2012 IEEE International Conference on Robotics and Automation, 2012: 4687-4692.
[30]	LIU Z G, FAN W L, HU P. Multi-attribute node importance evaluation method based on Gini-coefficient in complex power grids[J]. IET Generation, Transmission and Distribution, 2016, 10(9): 2027-2034. DOI URL

融合视觉认知特征的虚拟博物馆界面布局美度评价方法

Evaluation method of virtual museum interface layout aesthetic with visual cognitive characteristics

RichHTML

PDF (PC)

可视化

摘要/Abstract

引用本文

使用本文

图/表 12

参考文献 30

相关文章 15

编辑推荐

Metrics

本文评价

[1]	胡欣, 周运强, 肖剑, 杨杰. 基于改进YOLOv5的螺纹钢表面缺陷检测[J]. 图学学报, 2023, 44(3): 427-437.
[2]	李刚, 张运涛, 汪文凯, 张东阳. 采用DETR与先验知识融合的输电线路螺栓缺陷检测方法[J]. 图学学报, 2023, 44(3): 438-447.
[3]	毛爱坤, 刘昕明, 陈文壮, 宋绍楼. 改进YOLOv5算法的变电站仪表目标检测方法[J]. 图学学报, 2023, 44(3): 448-455.
[4]	郝鹏飞, 刘立群, 顾任远. YOLO-RD-Apple果园异源图像遮挡果实检测模型[J]. 图学学报, 2023, 44(3): 456-464.
[5]	罗文宇, 傅明月. 基于YoloX-ECA模型的非法野泳野钓现场监测技术[J]. 图学学报, 2023, 44(3): 465-472.
[6]	李雨, 闫甜甜, 周东生, 魏小鹏. 基于注意力机制与深度多尺度特征融合的自然场景文本检测[J]. 图学学报, 2023, 44(3): 473-481.
[7]	肖天行, 吴静静. 基于残差和特征分块注意力的激光打码字符分割[J]. 图学学报, 2023, 44(3): 482-491.
[8]	王佳婧, 王晨, 朱媛媛, 王笑梅. 基于民国纸币的图元素匹配检索[J]. 图学学报, 2023, 44(3): 492-501.
[9]	孙龙飞, 刘慧, 杨奉常, 李攀. 面向医学图像层间插值的循环生成网络研究[J]. 图学学报, 2023, 44(3): 502-512.
[10]	刘冰, 叶成绪. 面向不平衡数据的肺部疾病细粒度分类模型[J]. 图学学报, 2023, 44(3): 513-520.
[11]	史彩娟, 石泽, 闫巾玮, 毕阳阳. 基于双语义双向对齐VAE的广义零样本学习[J]. 图学学报, 2023, 44(3): 521-530.
[12]	吴文欢, 张淏坤. 融合空间十字注意力与通道注意力的语义分割网络[J]. 图学学报, 2023, 44(3): 531-539.
[13]	葛海明, 张维, 王小龙, 朱晶晶, 贾非, 薛亚东. 基于SfM的城市电缆隧道三维重建方法优化研究[J]. 图学学报, 2023, 44(3): 540-550.
[14]	严圆, 高欣健, 高隽, 王昕, 程前. 基于非局部信息的大气偏振模式生成方法[J]. 图学学报, 2023, 44(3): 551-559.
[15]	赵玉琨, 任爽, 张鑫云. 结合对抗样本检测和重构的三维点云防御框架[J]. 图学学报, 2023, 44(3): 560-569.