Please wait a minute...
Journal of ZheJiang University (Engineering Science)  2020, Vol. 54 Issue (12): 2273-2285    DOI: 10.3785/j.issn.1008-973X.2020.12.001
    
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
Download: HTML     PDF(1514KB) HTML
Export: BibTeX | EndNote (RIS)      

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 wordsinterface design      aesthetic measure      stylistic beauty      moderate standardized of index      synthetic evaluation     
Received: 08 October 2019      Published: 31 December 2020
CLC:  TH 166  
  TB 472  
Corresponding Authors: Shu-tao ZHANG     E-mail: 51289547@qq.com;364725955@qq.com
Cite this article:

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.

URL:

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


基于指标适度标准化的界面风格美综合评价模型

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


关键词: 界面设计,  美度,  风格美,  指标适度标准化,  综合评价 
Fig.1 Coordinate map of aesthetic measure indexes calculating
Fig.2 Samples of balance
样本序号 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
Tab.1 Area and center-axis separation of each variable sample in balance
Fig.3 Samples of unity
Fig.4 Samples of regularity
Fig.5 Samples of repeatability
Fig.6 Samples of proportional similarity
Fig.7 Samples of sequence
Fig.8 Samples of homogeneity
Fig.9 Samples of rhythm
样本序号 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
Tab.2 Balance and stylistic beauty survey values
样本序号 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
Tab.3 Unity and stylistic beauty survey values
样本序号 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
Tab.4 Regularity and stylistic beauty survey values
样本序号 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
Tab.5 Repeatability and stylistic beauty survey values
样本序号 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
Tab.6 Proportional similarity and stylistic beauty survey values
样本序号 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
Tab.7 Sequence and stylistic beauty survey values
样本序号 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
Tab.8 Homogeneity and stylistic beauty survey values
样本序号 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
Tab.9 Rhythm and stylistic beauty survey values
Fig.10 Fitting curves of equilibrium
Fig.11 Cubic polynomial fitting curve of unity
Fig.12 Cubic polynomial fitting curve of regularity
Fig.13 Cubic polynomial fitting curve of repeatability
Fig.14 Quartic polynomial fitting curve of proportional similarity
Fig.15 Quartic polynomial fitting curve of sequence
Fig.16 Second order Gaussian fitting curve of homogeneity
Fig.17 Second order Gaussian fitting curve of rhythm
Fig.18 Ten samples interface element layout
美度指标 σ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
Tab.11 Standard deviation, information quantity and weight of each aesthetic measure index
样本序号 综合评价值 综合评价排名 调查值 调查排名
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
Tab.12 Synthetic evaluation and survey values of ten sample interface
样本序号 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
Tab.10 Moderately standardized values of aesthetic measure indexes of ten samples interfaces
[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] CHEN Shuo, ZHANG Feng, CHEN Mo-Wei. Brightness perceptive user model based on simultaneous brightness contrast phenomena[J]. Journal of ZheJiang University (Engineering Science), 2009, 43(5): 822-826.
[2] XIE Dun, BAI Xin-Zhong, GAN De-Jiang. Evaluation and incentive mechanism of peaking capability of ydroelectric/thermoelectric generators[J]. Journal of ZheJiang University (Engineering Science), 2009, 43(11): 2079-2084.