Please wait a minute...
浙江大学学报(工学版)
浙江大学学报(工学版)  2020, Vol. 54 Issue (12): 2273-2285    DOI: 10.3785/j.issn.1008-973X.2020.12.001
机械工程、能源工程     
基于指标适度标准化的界面风格美综合评价模型
周爱民(),周彩霞,欧阳晋焱,张书涛*()
兰州理工大学 设计艺术学院，甘肃 兰州 730050
Model of synthetic evaluation on interface stylistic beauty based on moderately standardized of index
Ai-min ZHOU(),Cai-xia ZHOU,Jin-yan OUYANG,Shu-tao ZHANG*()
School of Design Art, Lanzhou University of Technology, Lanzhou 730050, China
 全文: PDF(1514 KB)   HTML
摘要：

为了客观、定量地评价界面布局的美度，从设计风格的角度，提出非线性审美综合评价模型. 以“活泼美”为例，基于已提出的美度指标体系，针对各美度指标的形式特征设计各组实验样本，计算各样本美度指标值，运用李克特量表法对“活泼美”进行调查评分；运用最小二乘法将各美度指标值与“活泼美”调查值进行曲线拟合，得出关系表达式，实现美度指标适度标准化；运用逼近理想解排序法和相关性定权法，建立界面布局“活泼美”的综合评价模型. 对10个界面样本进行实例研究，运用心理物理学中的两极递进式排序法对模型进行验证分析。结果表明，模型具有良好的精度，可以作为界面智能设计系统的适应度评价函数，为界面智能设计的发展提供可靠的技术支撑.
关键词： 界面设计;  美度;  风格美;  指标适度标准化;  综合评价    
Abstract:

A nonlinear model of aesthetic synthetic evaluation was proposed for objectively and quantitatively evaluating the interface layout aesthetics from the perspective of design style. Taking “lively beauty” as an example, experimental sample groups were designed according to the formal characteristics of aesthetic measure indexes, the aesthetic measure index values of each sample were calculated, based on the aesthetic measure index system proposed. The “lively beauty” was investigated and scored by Likert scale method, the aesthetic measure index values and the “lively beauty” survey values were curve?fitted by least square method, and a relation expression derived from the curve fitting moderately standardized the aesthetic measure indexes. Technique for order preference by similarity to ideal solution and criteria importance through intercriteria correlation method were used to establish a synthetic evaluation model of “lively beauty” of interface layout. Ten interface samples were analyzed, and the model was validated and analyzed by the bipolar progressive sorting method of psychophysics. Results show that the model has good accuracy. The model can be used as the fitness function of the interface intelligent design system, and provide reliable technical support for the development interface intelligent design.
Key words: interface design    aesthetic measure    stylistic beauty    moderate standardized of index    synthetic evaluation
收稿日期: 2019-10-08 出版日期: 2020-12-31
CLC:  TH 166  
基金资助: 国家自然科学基金资助项目（51705226）；甘肃省自然科学基金资助项目（2017gs10786）
通讯作者: 张书涛     E-mail: 51289547@qq.com;364725955@qq.com
作者简介: 周爱民（1978—），男，副教授，从事产品形态智能设计研究. orcid.org/0000-0002-3994-9040. E-mail： 51289547@qq.com
服务　　
把本文推荐给朋友
加入引用管理器
E-mail Alert
作者相关文章　　
周爱民
周彩霞
欧阳晋焱
张书涛

引用本文:

周爱民,周彩霞,欧阳晋焱,张书涛. 基于指标适度标准化的界面风格美综合评价模型[J]. 浙江大学学报(工学版), 2020, 54(12): 2273-2285.

Ai-min ZHOU,Cai-xia ZHOU,Jin-yan OUYANG,Shu-tao ZHANG. Model of synthetic evaluation on interface stylistic beauty based on moderately standardized of index. Journal of ZheJiang University (Engineering Science), 2020, 54(12): 2273-2285.

链接本文:

http://www.zjujournals.com/eng/CN/10.3785/j.issn.1008-973X.2020.12.001    或    http://www.zjujournals.com/eng/CN/Y2020/V54/I12/2273

图 1  美度指标计算坐标图
图 2  平衡度样本
样本序号 S /mm2 dx/mm dy/mm 样本序号 S /mm2 dx/mm dy/mm
1 1 600 60 0 19 1 600 60 60
2 1 225 50 0 20 1 225 50 50
3 900 40 0 21 900 40 40
4 756.25 35 0 22 756.25 35 35
5 625 30 0 23 625 30 30
6 506.25 25 0 24 506.25 25 25
7 400 20 0 25 400 20 20
8 225 10 0 26 225 10 10
9 100 5 0 27 100 5 5
10 1 600 0 60 28 1 600 20 60
11 1 225 0 50 29 1 225 30 50
12 900 0 40 30 900 40 40
13 756.25 0 35 31 756.25 45 35
14 625 0 30 32 625 50 30
15 506.25 0 25 33 506.25 55 25
16 400 0 20 34 400 60 20
17 225 0 10 35 225 70 10
18 100 0 5 36 100 75 5
表 1  平衡度各变化样本的面积和中心—轴距离
图 3  整体度样本
图 4  规则度样本
图 5  重复度样本
图 6  相似比例度样本
图 7  次序度样本
图 8  均匀度样本
图 9  节奏度样本
样本序号 B1 E 样本序号 B1 E
1 0.60 0.89 19 0.20 0.23
2 0.65 0.75 20 0.31 0.43
3 0.76 0.60 21 0.52 0.88
4 0.85 0.36 22 0.71 0.60
5 1.00 0.07 23 1.00 0.05
6 0.84 0.40 24 0.68 0.57
7 0.71 0.65 25 0.43 0.67
8 0.56 0.94 26 0.12 0.18
9 0.51 1.00 27 0.03 0.07
10 0.60 0.93 28 0.54 0.81
11 0.65 0.73 29 0.55 0.66
12 0.76 0.55 30 0.70 0.58
13 0.85 0.44 31 0.91 0.20
14 1.00 0.00 32 1.00 0.08
15 0.84 0.48 33 0.90 0.24
16 0.71 0.56 34 0.60 0.58
17 0.56 0.62 35 0.31 0.50
18 0.51 0.98 36 0.13 0.15
表 2  平衡度和风格美调查值
样本序号 B2 E
1 0.00 0.00
2 0.13 0.28
3 0.25 0.53
4 0.36 0.73
5 0.47 0.95
$\vdots $ $\vdots $ $\vdots $
13 1.00 0.19
表 3  整体度和风格美调查值
样本序号 B3 E
1 0.00 0.00
2 0.13 0.25
3 0.13 0.44
4 0.25 0.41
5 0.25 0.42
$\vdots $ $\vdots $ $\vdots $
25 1.00 0.29
表 4  规则度和风格美调查值
样本序号 B4 E
1 0.89 0.00
2 0.78 0.22
3 0.67 1.00
4 0.56 0.95
5 0.44 0.81
$\vdots $ $\vdots $ $\vdots $
9 0.00 0.04
表 5  重复度和风格美调查值
样本序号 B5 E
1 0.60 0.48
2 0.63 0.55
3 0.67 0.61
4 0.75 0.64
5 1.00 0.12
$\vdots $ $\vdots $ $\vdots $
30 0.58 0.61
表 6  相似比例度和风格美调查值
样本序号 B6 E
1 0.75 0.68
2 0.25 0.21
3 0.63 0.63
4 0.75 0.63
5 0.75 0.58
$\vdots $ $\vdots $ $\vdots $
25 0.88 0.70
表 7  次序度和风格美调查值
样本序号 B7 E
1 1.00 0.32
2 0.50 0.40
3 0.25 0.84
4 0.17 0.88
5 0.04 0.40
$\vdots $ $\vdots $ $\vdots $
19 1.00 0.00
表 8  均匀度和风格美调查值
样本序号 B8 E
1 0.50 0.71
2 0.43 0.45
3 0.67 0.45
4 0.44 0.48
5 0.40 0.76
$\vdots $ $\vdots $ $\vdots $
64 0.46 0.48
表 9  节奏度和风格美调查值
图 10  平衡度的各种拟合曲线
图 11  整体度的三次多项式拟合曲线
图 12  规则度的三次多项式拟合曲线
图 13  重复度的三次多项式拟合曲线
图 14  相似比例度的四次多项式拟合曲线
图 15  次序度的四次多项式拟合曲线
图 16  均匀度的二阶高斯拟合曲线
图 17  节奏度的二阶高斯拟合曲线
图 18  10个样本界面元素布局图
美度指标 σj Cj Wj
平衡度 0.289 3.167 0.195
整体度 0.053 0.483 0.030
规则度 0.054 0.430 0.026
重复度 0.225 1.973 0.121
相似比例度 0.027 0.237 0.015
次序度 0.171 1.418 0.087
均匀度 0.220 2.156 0.132
节奏度 0.242 2.043 0.126
密集度 0.097 0.826 0.051
比例度 0.100 3.551 0.218
表 11  各美度指标的标准差、信息量和权重
样本序号 综合评价值 综合评价排名 调查值 调查排名
1 0.549 7 0.320 8
2 0.615 5 0.810 3
3 0.659 3 0.505 6
4 0.649 4 0.740 4
5 0.661 2 0.855 2
6 0.557 6 0.420 7
7 0.442 9 0.230 9
8 0.688 1 0.870 1
9 0.487 8 0.625 5
10 0.367 10 0.200 10
表 12  10个样本的综合评价值与调查值
样本序号 SM
平衡度 整体度 规则度 重复度 相似比例度 次序度 均匀度 节奏度 密集度 比例度
1 0.35 0.96 0.49 0.76 0.68 0.97 0.67 0.98 0.58 0.64
2 0.80 0.99 0.34 0.95 0.66 0.97 0.25 0.51 0.34 0.65
3 0.79 0.83 0.44 0.82 0.63 0.62 0.30 0.98 0.44 0.65
4 0.74 0.99 0.45 0.72 0.64 0.97 0.55 0.52 0.44 0.58
5 0.78 0.91 0.38 0.33 0.66 0.65 0.74 0.98 0.27 0.76
6 0.49 0.94 0.43 0.94 0.71 0.65 0.61 0.53 0.30 0.57
7 0.06 0.99 0.49 0.94 0.66 0.97 0.69 0.98 0.49 0.67
8 0.80 0.91 0.52 0.89 0.69 0.62 0.35 0.98 0.32 0.90
9 0.66 1.00 0.49 0.42 0.70 0.65 0.30 0.53 0.43 0.61
10 0.12 0.98 0.45 0.58 0.63 0.65 0.88 0.52 0.45 0.62
表 10  10个样本界面各美度指标适度标准化值
1 MENDEL J Understanding the relative attentional demands of the dimensions of interface consistency[J]. International Journal of Cardiology, 2012, 53 (2): 189- 192
2 PETERSEN M G, HALLNAES L, JACOB R J K Introduction to the special issue on the aesthetics of interaction[J]. ACM Transactions on Computer-Human Interaction, 2008, 15 (3): 1- 5
3 BALINSKY H Evaluating interface aesthetics: measure of symmetry[J]. Proceedings of SPIE: The International Society for Optical Engineering, 2006, 6076: 52- 63
4 ZHOU L, XUE C Q, TOMIMATSU K Research of interface composition design optimization based on visual balance[J]. Practical Applications of Intelligent Systems, 2014, 279 (1): 483- 493
5 LAI C Y, CHEN P H, SHIH S W, et al Computational models and experimental investigations of effects of balance and symmetry on the aesthetics of text-overlaid images[J]. International Journal of Human-Computer Studies, 2010, 68 (1/2): 41- 56
doi: 10.1016/j.ijhcs.2009.08.008
6 BAUERLY M, LIU Y Effects of symmetry and number of compositional elements on interface and design aesthetics[J]. International Journal of Human-Computer Interaction, 2008, 24 (3): 275- 287
doi: 10.1080/10447310801920508
7 VALENCIA R A, LUGO J E Part-worth utilities of gestalt principles for product aesthetics: a case study of a bottle silhouette[J]. Journal of Mechanical Design, 2016, 138 (8): 801102
8 MAITY R, MADROSIYA A, BHATTACHARYA S A computational model to predict aesthetic quality of text elements of GUI[J]. Procedia Computer Science, 2016, 84: 152- 159
doi: 10.1016/j.procs.2016.04.081
9 HSIAO S W, CHOU J R A Gestalt-like perceptual measure for home page design using a fuzzy entropy approach[J]. International Journal of Human-Computer Studies, 2006, 64 (2): 137- 156
doi: 10.1016/j.ijhcs.2005.05.005
10 NGO D C L, TEO L S, BYRNE J G Modelling interface aesthetics[J]. Information Sciences, 2003, 152 (8): 25- 46
11 周蕾, 薛澄岐, 汤文成, 等 界面元素布局设计的美度评价方法[J]. 计算机辅助设计与图形学学报, 2013, 25 (5): 758- 766
ZHOU Lei, XUE Deng-qi, TANG Wen-cheng, et al Aesthetic evaluation method of interface elements layout design[J]. Journal of Computer Aided Design and Graphics, 2013, 25 (5): 758- 766
doi: 10.3969/j.issn.1003-9775.2013.05.022
12 周爱民, 苏建宁, 阎树田, 等 产品形态审美综合评价的非线性信息动力学模型[J]. 机械工程学报, 2018, 54 (15): 150- 159
ZHOU Ai-min, SU Jian-ning, YAN Shu-tian, et al Nonlinear information dynamics model of product form aesthetic evaluation system[J]. Journal of Mechanical Engineering, 2018, 54 (15): 150- 159
doi: 10.3901/JME.2018.15.150
13 罗仕鉴, 翁建广, 陈实, 等. 基于情境的产品族设计风格DNA [J]. 浙江大学学报: 工学版, 2009, 43(6): 1112-1117.
LUO Shi-jian, WENG Jian-guang, CHEN Shi, et al. Scenario-based product family design styling DNA [J]. Journal of Zhejiang University: Engineering Science, 2009, 43(6): 1112-1117.
14 徐江, 王海贤, 孙守迁 基于风格进化模型的产品生成设计方法[J]. 东南大学学报: 自然科学版, 2012, 42 (4): 654- 658
XU Jiang, WANG Hai-xian, SUN Shou-qian Method of product generative design based on style evolution model[J]. Journal of Southeast University: Natural Science Edition, 2012, 42 (4): 654- 658
15 XIONG B, DU Z, LI J Modulation index optimization for optical fringe suppression in wavelength modulation spectroscopy[J]. Review of Scientific Instruments, 2015, 86 (11): 113104
doi: 10.1063/1.4935920
16 TULLIS T S Predicting the usability of alphanumeric displays[J]. Dissertation Abstracts International, 1984, 45 (4): 1310
17 MARCUS A. Graphic design for electronic documents and user interfaces [M]. New York: ACM, 1991: 218-221.
18 张芳, 程文红, 肖泽萍, 等 渥太华自我伤害调查表中文版信效度研究[J]. 上海交通大学学报: 医学版, 2015, 35 (3): 460- 464
ZHANG Fang, CHENG Wen-hong, XIAO Ze-ping, et al Study on reliability and validity of Chinese version of Ottawa self-injury inventory[J]. Journal of Shanghai Jiaotong University: Medical Science, 2015, 35 (3): 460- 464
19 KIM C J, PARK S H, SUNG S K, et al Dynamic modeling and analysis of vortex filament motion using a novel curve-fitting method[J]. Chinese Journal of Aeronautics, 2016, 29 (1): 53- 65
doi: 10.1016/j.cja.2015.12.019
20 ASHOK S D Least square curve fitting technique for processing time sampled high speed spindle data[J]. International Journal of Manufacturing Research, 2011, 6 (3): 256- 276
doi: 10.1504/IJMR.2011.041129
21 陈志林, 邢世雄. HPGe探测器在121 keV~1408 keV之间的效率拟合函数比较[C]// 第二届全国核技术及应用研究学术研讨会大会论文摘要集. 绵阳: 中国核物理学会、国家核技术工业应用工程技术研究中心, 2009.
CHEN Zhi-lin, XING Shi-xiong. Comparison of efficiency functions for HPGe gamma-ray detectors in the 121-1408 keV energy range [C]// Paper Abstract of the 2nd National Conference on Nuclear Technology and Application Research Conference. Mianyang: Chinese Society of Nuclear Physics, National Engineering Research Center of Nuclear Technology Application in Industry, 2009.
22 艾俊强, 周莉, 杨青真. S弯隐身喷管[M]. 北京: 国防工业出版社, 2017: 250-255.
23 李威, 蒋平, 赵卫权, 等 TRMM卫星降水数据在喀斯特山区的适用性分析——以贵州省为例[J]. 水土保持研究, 2016, 23 (1): 97- 102
LI Wei, JIANG Ping, ZHAO Wei-quan, et al Analysis on applicability of TRMM precipitation data in karst areas: a case study in Guizhou Province[J]. Research of Soil and Water Conservation, 2016, 23 (1): 97- 102
24 SEVASTJANOV P, TIKHONENKO A Direct interval extension of TOPSIS method[J]. Expert Systems with Applications, 2013, 40 (12): 4841- 4847
doi: 10.1016/j.eswa.2013.02.022
25 ZHANG X, XU Z Extension of TOPSIS to multiple criteria decision making with pythagorean fuzzy sets[J]. International Journal of Intelligent Systems, 2014, 29 (12): 1061- 1078
doi: 10.1002/int.21676
26 BHASIN S, KAMALAPURKAR R, JOHNSON M, et al A novel actor–critic–identifier architecture for approximate optimal control of uncertain nonlinear systems[J]. Automatica, 2013, 49 (1): 82- 92
doi: 10.1016/j.automatica.2012.09.019
[1] 郝楠楠, 郑兵, 张超勇. 灰模糊积分在多目标决策中的应用[J]. 浙江大学学报(工学版), 2018, 52(4): 663-673.
[2] 陈淑琴, 潘阳阳, 谭洪卫. 高校浴室太阳能热水系统区域适应性综合评价[J]. 浙江大学学报(工学版), 2017, 51(8): 1519-1526.
[3] 王连生, 徐月同, 蒋钧海, 徐冠华. 零件质量在机测量系统综合评价体系[J]. 浙江大学学报(工学版), 2016, 50(6): 1088-1094.
[4] 尚淑丽, 顾正华, 赵世凯, 刘国良. 基于模糊逻辑的水电工程生态效应综合评价[J]. 浙江大学学报(工学版), 2014, 48(9): 1603-1609.
[5] 尚淑丽, 顾正华, 赵世凯, 刘国良. 基于模糊逻辑的水电工程生态效应综合评价[J]. J4, 2014, 48(4): 0-0.
[6] 王相兵,童水光,钟崴,张健. 基于可拓重用的液压挖掘机结构性能方案设计[J]. J4, 2013, 47(11): 1992-2002.
[7] 欧立勇, 杜树新. 基于多智能体的公共检测资源协调方法[J]. J4, 2010, 44(1): 81-86+123.
[8] 陈硕, 张锋, 沈模卫. 基于同时亮度对比现象的亮度感知用户模型[J]. J4, 2009, 43(5): 822-826.
[9] 黄喜 丁祥海 唐任仲. 制造企业资源规划实施能力的评测方法[J]. J4, 2007, 41(2): 319-324.
[10] 金伟良 鲁征 刘鑫 袁雪霞 陈天民. 支模架施工安全性的评价研究[J]. J4, 2006, 40(5): 800-803.