Research on visual size and visual alignment optimization of icon set design*

被引:2
作者
Shao, Ming [1 ]
Che, Zi [1 ]
Lu, Yizhou [1 ,2 ]
机构
[1] Zhejiang Univ Sci & Technol, Sch Design & Fash, Hangzhou, Peoples R China
[2] Zhejiang Univ Sci & Technol, Sch Design & Fash, 318 Liuhe Rd, Hangzhou 310023, Peoples R China
关键词
Visual size; Visual alignment; Icon design; User interface; PERCEPTION; AREA;
D O I
10.1016/j.displa.2023.102571
中图分类号
TP3 [计算技术、计算机技术];
学科分类号
0812 ;
摘要
The industry's relevant guidelines on icon design point out that in the design of icon sets, designers should adjust the size and position of each icon, instead of simply unifying the size and position by icon bounding box, to ensure consistency in visual size and visual alignment. However, existing guidelines provide vague answers on specifically adjusting different icons, leaving designers to rely on subjective experience and intuition for adjustments. To explore the general pattern of visual size and alignment between different icons, we first measured the visual size and alignment of different icons through subjective experiments, analyzed the data to find the influencing factors. Next, we constructed a visual size optimization model composed of these factors and proposed an optimization method based on the reference square. Then, we measured the difference between icons' visual alignment and bounding box alignment through experiments. Finally, we used expert evaluation to test the model's effectiveness in visual size consistency. We have reached the following conclusions: (1) For icons with the same convex hull, the perceived visual size is consistent; (2) To unify the icon visual size using a reference square as the standard, there are two factors affecting the visual size adjustment: the convex hull area of the icon and the convex hull area outside the bounds of the reference square. (3) The visual size optimization model helps slightly improve the visual alignment consistency of icons. These conclusions and the visual size optimization model contribute to establishing more rigorous icon design standards and developing plugins to enhance the quality and efficiency of icon design.
引用
收藏
页数:16
相关论文
共 48 条
[1]  
[Anonymous], 1954, Art and visual perception
[2]  
Apple, 2023, SF Symbols - Foundations - Human Interface Guidelines - Design - Apple Developer
[3]  
Apple, 2023, Icons - Foundations - Human Interface Guidelines - Design - Apple Developer
[4]   Effects of Mobile Application Icon Complexity and Border on College Students' Cognition [J].
Cao, Yaqin ;
Ding, Yi ;
Deng, Yiming ;
Zhang, Xuefeng .
ADVANCES IN AFFECTIVE AND PLEASURABLE DESIGN, 2020, 952 :273-279
[5]  
Chen X., 2023, International Journal of Human-Computer Interaction, P1
[6]   Design standards for icons: The independent role of aesthetics, visual complexity and concreteness in icon design and icon understanding [J].
Collaud, Romain ;
Reppa, Irene ;
Defayes, Lara ;
McDougall, Sine ;
Henchoz, Nicolas ;
Sonderegger, Andreas .
DISPLAYS, 2022, 74
[7]  
DIMAIO V, 1990, PERCEPT MOTOR SKILL, V71, P459
[8]  
Fang You, 2020, Human Interaction, Emerging Technologies and Future Applications II. Proceedings of the 2nd International Conference on Human Interaction and Emerging Technologies: Future Applications (IHIET - AI 2020). Advances in Intelligent Systems and Computing (AISC 1152), P285, DOI 10.1007/978-3-030-44267-5_43
[9]  
Google, 2022, Overshoot
[10]  
Hamlyn D.W., 2017, The psychology of perception: A philosophical examination of Gestalt theory and derivative theories of perception