Abstract
In order to improve the interface experience effect of the mobile terminal software, this paper improves the UI design by combining computer image processing technology and improves the diffusion algorithm for images by improving the diffusion model, improving the diffusion coefficient and adaptively selecting the diffusion threshold. Moreover, this paper has carried out deep research on coordinate transformation and image interpolation and stored the result of coordinate transformation in the coordinate transformation table and weight table. In addition, this paper proposes an improved digital scan conversion method based on a lookup table and constructs an improved UI design system model. Through the analysis of experimental data, it can be seen that the application effect of computer image processing technology in UI design is very good, and it can effectively promote the improvement of UI design technology.
1. Introduction
With the rapid development of society and technology, the Internet awareness of all walks of life has risen and grown rapidly, and a large number of network application platforms have emerged rapidly. In the complex Internet world, users gradually tend to have a simple product experience and independently choose products with smooth operation and visual aesthetics. The visual system is the most developed among all human sensory systems and is the main medium of communication between humans and the interface, and users mainly make corresponding operations according to the visual performance of the interface. Nowadays, the speed of social development is accelerating, and the rhythm of users’ life is tense. In order to facilitate users to quickly solve the required problems, the UI design should guide the user experience through perfect visual performance, and reasonable visual performance can maximize the basic functions that satisfy users in a limited visual space.
Although visual elements are words, graphics, images, and colors that exist objectively, their purpose is to convey subjective information to the audience, such as the meaning, font size and font of words, the shape and size of images and graphics, and the hue, brightness, and saturation of colors. Degrees are the influencing factors of subjective visual information [1]. Many classic cases that have appeared and been eliminated so far are all determined by the visual needs of the user group. Although the classic case will be eliminated, no matter how it develops, it has been changed based on the element of visual elements, and no matter what type of information is transmitted, it needs to rely on electronic equipment to finally achieve its effect [2]. There are various types of display devices in UI design, among which the most mainstream devices are computers and mobile phones, but devices such as watches and home appliances are also rising day by day. These devices have more or less characteristics in display size and interactive thinking. In order to better meet the user’s aesthetic needs for UI interfaces, the selection and combination of display devices are also important factors affecting visual performance [3].
In order to improve the interface experience effect of mobile software, domestic scholars have proposed UI design patterns for mobile software from different perspectives. In the literature [4], when studying the interface design patterns of learning resources in the mobile environment, the design theory of knowledge and case studies are used. This paper proposes that the design mode of mobile learning resources should be designed from the layout design, information presentation design, and visual element design. Reference [5] pointed out in the research on the interface design of serious games for children on mobile terminals that the interface should be based on children’s psychological maturity and cognitive level and design details such as communication modes, input methods, tasks, and interface appearance that conform to children’s characteristics, so as to maintain children’s interest and attention to serious games. Literature [6] proposed that the capacity of human information channels is limited, and people will subjectively reduce the amount of information, making some information redundant information to improve perception efficiency, and this redundant information often makes human perception errors, in the interface design. Attention should be paid to the role of information communication. However, among the many research studies on UI design of mobile software, very few people have studied the special UI design pattern of mobile software such as visual training. Vision training includes functional vision training and skill-acquisition vision training. Reference [7] defines functional vision as the vision that people use to complete various purposeful behaviors in daily activities; functional vision training is called functional vision training. The common functional vision training software [8] on mobile terminal equipment is divided into two types: amblyopia training and myopia training. Studies have shown that visual trainers are different from those with normal vision in terms of color vision, light perception, and spatial frequency. Therefore, in the process of UI design of mobile terminal visual training software, while complying with the existing mobile terminal software UI design principles, the design should be optimized according to the particularity of the trainer’s vision, so as to promote the trainer to obtain the training information efficiently and fully [9].
The interface design has always been considered to only play a role in “beautification”, and it is the work of the artists. However, more and more researchers have begun to pay attention to the usability of the user interface. The literature [10] used eye-tracking technology to establish a usability evaluation model of mobile phone UI, so as to evaluate the usability of mobile phone user interface objectively and efficiently. Under the guiding ideology of usability, many domestic scholars have proposed different UI design patterns for mobile software. Reference [11] proposes a human-machine interface design mode for learning resources in Fan Zai by using HTML5-based adaptive technology for different mobile devices with different screen resolutions, sizes, and aspect ratios, so that different mobile devices can use the same The interface design improves the usability of the user interface on the mobile terminal device. In literature [12], in the research of user experience-oriented handheld mobile device software interface design, it is proposed to analyze the key factors of user experience and build a mapping model between interface providers and interface acceptors, so that the user’s implicit elements can be transformed into interface display and dominant element. Reference [13] proposes dividing the user interface into multiple modules, each module has a different design mode, and designers select appropriate modules for reuse when designing the interface Reference [14] proposes a safe interaction mode for UI design. By using certain warning colors, sound effects, text, etc. to feedback different states in the process of user interaction with the interface, it eliminates the psychological discomfort of users to a certain extent. Certainty and anxiety reduce the error rate in interaction; each color and sound effect has a fixed matching mode so that when users encounter similar feedback information in different interfaces, they can quickly identify the information conveyed by the software interface but also improve the usability of UI design.
The user interface design is complicated and cumbersome. The earliest Nokia mobile phones and the microcomputer era of the last century were all doing skeuomorphic icon design, although the resolution and clarity of the display screen at that time were very backward. The style skeuomorphism is also to make the user group easily identifiable, which can reduce the learning cost for new users; for those who are just using UI, everything is new [15]. After a period of time, after the user group has been domesticated, the UI interface design of the skeuomorphic style loses its own functionality. Compared with the tediousness of skeuomorphic style design, flat-style icon design has become popular in the UI interface theme design of smart facilities. It is increasingly favored by more media and icon designers, and UI interface designers and practitioners of intelligent devices also begin to use this style more for icon and interface design [16]. The UI interface design in the flat-style smart facility is to reduce the cluttered feeling and the cumbersome system operation experience brought by the quasi-material design style icon design to users. This simplification retains the conceptual value of the quasi-object. The smallest points understand complex things. The UI interface of the flat design style is actually a design of direct metaphor without any decorative effect. Compared with the skeuomorphic style design, the reason for the prevalence of the flat design style is due to the advent of the era of electronic information explosion. The user group in this stage is more inclined to obtain useful information efficiently [17]. However, Microsoft’s MetroUI design is a relatively novel design style of interactive UI interface, which is a breakthrough in the field of UI design. The design style of the MetroUI interface is not just a simple combination of geometric colors, but it is also a combination of each function. The button designs of sex icons are vivid, but they are by no means hyperrealistic and simulated like skeuomorphism. The essence of the MetroUI design style is the design of the structure so that the simple icon design style still maintains a balance in the logical structure to achieve a visual beautiful feeling [18]. Although the emergence of the new style of design was not loved by most users at first, its unique design style is indeed impressive [19].
Based on the above analysis, it can be seen that there are still some problems in the application effect of image design technology in UI design, so this paper combines computer image processing technology to improve UI design and improve UI design effect.
2. Computer Image Processing
2.1. Improvement and Simulation of Computer Simulation Denoising Method Based on Anisotropic Diffusion
The basic principle of the PM algorithm is to use different gradients in different directions for diffusion, and the gradients in different directions are inversely proportional to the diffusion coefficient. At the edge of the image, the image pixels will have a relatively large change, so the diffusion coefficient will be relatively small, and the diffusion process will be slower. In this way, local edge details can be preserved as much as possible. However, in the homogeneous region, the image gradient changes are small or there are only isolated noise points, the diffusion coefficient is larger, and the diffusion is faster. At this time, the effect of smoothing processing is strong, which can not only suppress noise better but also retain image detail information. This processing process is iterative until the noise in the image is filtered out.
The mathematical expression of the PM model is as follows:
Here, div is the divergence operator, is the gradient operator, || represents the amplitude, is the diffusion coefficient function, is the initial image, and t is the time operator, which indicates that the denoising process is related to the diffusion duration. The diffusion coefficient function in this model is the key to the algorithm, and there are two classical forms of the diffusion coefficient function:
Here, K is the gradient threshold, that is, the diffusion threshold, which is related to the noise variance and is a constant in the PM model, and represents the gradient of the image I. When is much larger than the gradient threshold K, tends to 0, and the diffusion process is suppressed. However, when is much smaller than the gradient threshold K, will approach 1, and the diffusion process will be enhanced.
The application areas of formulas (2) and (3) are also different. In images rich in high-contrast edges, formula (3) is often used, while for larger regions, formula (2) is more appropriate.
In the actual operation, the discretized form of formula (1) is used to iteratively solve the result, and the discretized form is as follows:
In order to overcome the shortcomings of the PM model, Gaussian filtering is used to process the image in the Catte model, and then, the gradient mode after Gaussian filtering is used to replace the original gradient mode. The optimized model is as follows:
In formula (5), represents a Gaussian function with standard deviation , and “” is convolution.
Commonly used evaluation methods for objective evaluation include peak signal-to-noise ratio (PSNR), edge retention coefficient β, quality factor FOM, and mean square error (MSE). In this paper, PSNR and FOM are used for evaluation.
2.1.1. Peak Signal-to-Noise Ratio (PSNR)
The peak signal-to-noise ratio characterizes the ability of the algorithm to suppress speckles, and objectively indicates the similarity between the denoised image and the original image. The larger its value is, the closer the denoised image is to the original image, that is, the stronger the noise suppression ability. It is defined as follows:
Here, M and N represent the row and column of the image, and represent the original image and the denoised image, respectively, and L represents the value range of the image grayscale. For an 8-bit grayscale image, L = 255.
2.1.2. Quality Factor FOM
The computer simulation image not only needs to filter out the noise but also needs to protect the details of the image. The quality factor is specially used to describe the accuracy of the edge details of the denoised image. It is defined as follows:
Here, and represent the number of points on the ideal and actual edge distribution map, respectively, and represents the proportional constant, generally represents the vertical distance from the actual edge point to the ideal edge line. The FOM is normalized, in the range [0, 1], for perfect detected edges, .
2.2. Improved Computer Simulation Image Denoising Method Based on Anisotropic Diffusion
An adaptive median filter is a nonlinear denoising method, which has a good removal effect on speckle noise and salt and pepper noise. Moreover, it does not take the median value of each pixel value like median filtering but takes the median value of the noise points in the image according to the size of the filtering window, not the pixels of the noise points, and outputs them according to the original value. This filtering method avoids the occurrence of errors.
The improved diffusion model is as follows:
Here, AMF represents the adaptive median filter, and the meanings of other parameters are the same as those of the PM model.
The model not only achieves a good denoising effect but also enhances the removal effect of Gaussian noise and uniformly distributed noise. In addition, the model protects image details and edges better.
To improve the diffusion coefficient, it is first necessary to understand the three conditions that the diffusion coefficient satisfies the following:(1)The diffusion coefficient c(x) is a decreasing function of the gradient x as the independent variable, and c(x) > 0(2)When x⟶∞, c(x) = 0(3)When x⟶0, c(x) = 1
Among the two classical choices of the PM model, we choose formula (2) as the blueprint for improving the diffusion coefficient and improve it on this basis. In order to increase the sensitivity of the diffusion process to the details of the image and preserve the details, this paper proposes the following diffusion coefficients according to the three conditions that the above diffusion coefficients should meet:
Here, Δ represents the Laplacian operator, the rest of the parameters are the same as those of the PM model, and only ∇I is used to control the diffusion in the PM model. This leaves the image with a lack of detail preservation. Formula (9) comprehensively uses the first-order and second-order differential operators of the image, which makes it possible to better capture the detailed features such as the peak lines of the computer simulation image during the diffusion process. Moreover, it avoids the smoothing of these detailed features in the diffusion process, thereby protecting the features and details of the computer simulation image, and achieving a good denoising effect.
The signal-to-noise ratio indicates the ratio of the useful information of the image to the noise variance. The image SNR increases after each iteration, so a decreasing function can be constructed with the image SNR as the denominator. However, the difference between the maximum and minimum gray values of the image indicates the overall span of pixels in an image, that is, the maximum gradient of the image. Therefore, this paper uses the signal-to-noise ratio and the maximum and minimum gray values of the image to adaptively select the diffusion threshold K. The definition of the signal-to-noise ratio is as follows:
Here, is the image to be estimated, and represents the source image without noise pollution.
After each iteration, the ratio of the image signal to noise increases, and the maximum gradient of the image decreases. Therefore, the ratio of the maximum gradient of the image after an iteration and the image signal-to-noise ratio can well reflect the gradient change in the image. At the same time, the diffusion threshold K should also change with the image gradient, so the expression of the diffusion threshold K used in this paper is as follows:
Here, represents the maximum gray value of the image, represents the minimum gray value of the image, and the constant 0.5 is the weight coefficient that controls the change of the ratio. In the denoising process, SNR, , and are the new values of the image after each iteration, so the selected diffusion threshold is more suitable for the diffusion process, and the denoising effect will be better.
In the practical application of this algorithm, formula (4) is used as the discrete form of this algorithm. Generally, in formula (4), 0.25 is used in this algorithm.
The diffusion coefficient and diffusion threshold are updated once in each iteration. The calculation of the diffusion coefficient, gradient, and Laplace operator in the discrete form of formula (4) is as follows, where the diffusion coefficient adopts the following form:
The discrete computation of the gradient is as follows:
The discrete calculation formula of the Laplacian operator is as follows:
2.3. Improvement of the Catte Model and Computer Simulation Denoising Method for Controlling the Number of Iterations
There are many reducing functions that qualify. Due to the characteristics of computer simulation images, the grayscale of computer simulation images does not decrease linearly during the diffusion process. The standard normal distribution can be regarded as a decreasing function when it is greater than or equal to 0, and it is not linearly decreasing. At the same time, the standard normal distribution is more in line with the decreasing characteristic of the parameter K. Therefore, the expression of the parameter K used in this paper is based on the standard normal distribution and the local variance of the computer simulation image, and based on this, the parameter K is optimally estimated, which is defined as follows:
Here, t is the iteration time and , where n represents the number of iterations, is the iteration constant, and is the initial value here, which is related to the local variance of the image, and the calculation formula is as follows:
In the formula, M and N represent the number of rows and columns of the image, and represents the local variance of the image, which is defined as follows:
Here, I represents the original image, which takes any point as the center of the window of size , m and n are positive integers, this paper uses a 33 window, represents the average gray level of all pixels in the window, and its expression is as follows:
Anisotropic diffusion is performed iteratively, and the iterative process cannot proceed indefinitely. In the iterative process, once the image starts to become blurred, and the iteration continues, the denoising effect of the image will be worse. Therefore, it is necessary to stop the iteration at an appropriate time during the iterative process.
The theory points out that when the noise has nothing to do with the signal of the image, the correlation coefficient can be used to evaluate the denoising effect of the image. Based on this idea, the relative correlation coefficient can be considered as the iteration termination criterion, which is defined as follows:
Here, represents the correlation coefficient after the k-th iteration, A represents the original image, represents the image after the k-th iteration, represents the mean value of the original image, and represents the mean value of the image after the k-th iteration. Then, the iteration termination criterion is
When formula (20) is satisfied, the iterative process terminates. The number of iterations reached at this time is the optimal number of iterations, and the value of in the formula increases continuously with the iteration. Since the numerator is decreasing and the denominator is increasing, and the left side of formula (20) is decreasing, an appropriate threshold value is predefined to control the iteration. When the left ratio is less than the threshold value , it means that the correlation coefficients after the two iterations are almost equal. In order not to overrun the iteration, the iteration should be terminated at this time. The threshold value used in the experiment is .
2.4. Research, Improvement, and Simulation of the Digital Scan Conversion Method
The coordinates of the (x, y) coordinates of the pixel point Z in the display plane in Figure 1 are (u, ) after rectangular-orthogonal transformation, and the polar coordinates of the point in the sampling plane are (ρ, θ). Then, the process of coordinate transformation can be expressed by
If there are N scanning lines distributed in arcs on the computer simulation probe, each scanning line has M sampling points, and the maximum scanning angle of the arc is , then the scanning line angle increment is . The address of the storage plane can be expressed by
In formula (22), is the row address, is the column address, and R is the scanning depth.
Commonly used image interpolation techniques include nearest-neighbor interpolation, bilinear interpolation, circular interpolation, and cubic spline interpolation.
2.4.1. Nearest-Neighbor Interpolation Method
Nearest-neighbor interpolation is a one-dimensional interpolation method. This method rounds the transformed floating-point coordinates, and the pixel value at the integer coordinate position is the pixel value of the point; that is, the pixel value of the point closest to the coordinate position after the transformation is regarded as the pixel value of the point. Moreover, this method is simple in calculation and fast in operation. However, it only considers the influence of the nearest pixel value on the pixel value of the point but does not consider the influence of the surrounding pixel points on the value of the point, so this method is only suitable for occasions that do not require high image quality.
2.4.2. Bilinear Interpolation Method
Bilinear interpolation is a two-dimensional interpolation method. The idea of the algorithm is to find the values of the four sampling points closest to their positions according to the position information after a coordinate transformation and then calculate the corresponding interpolation coefficients according to the distances from these points. Then, it obtains the pixel value of the point to be interpolated by weighted averaging in two directions. The schematic diagram of bilinear interpolation is shown in Figure 2.
The coordinate of the point P(x, y) in the rectangular coordinates corresponding to the point in polar coordinates is , and the and are rounded to obtain and . From and , four adjacent points, namely, and , are obtained; then, the pixel value of point P can be given by
Here, and are the different values of point P in the axial and angular directions, which are related to the fractional part of the transformed coordinates.
2.4.3. Circular Interpolation Method
It can be seen from the images of the computer-simulated echoes that the data density of the sampling point in the mode direction is relatively high, while the data density in the arc direction is relatively small, especially in the far-field region. Therefore, in order to reduce the complexity of the operation, the interpolation in the modulo direction can be abandoned, and only the interpolation in the arc direction can be performed. This interpolation algorithm is better than the nearest neighbor interpolation algorithm but weaker than the bilinear interpolation algorithm.
2.4.4. Cubic Spline Interpolation Method
The cubic spline interpolation method requires that 16 sampling points can be found near the transformed coordinate position, and the values of these sampling points are arranged into a 44 matrix, and then, the final pixel value is calculated by the cubic spline interpolation formula.
The pixel matrix obtained by the arrangement of 16 sampling points is shown in
The calculation formula of the pixel value at the point to be interpolated is shown in
Here, the definitions of and are shown in
The spline function S(x) is shown in
During coordinate transformation, if all points are performed according to formula (21), it will undoubtedly increase the computational complexity of the algorithm. For the point on the axis, the incremental method can be used to quickly calculate the polar coordinates of the point. Since the incremental calculation speed is faster, this can reduce the calculation amount of the algorithm, as shown in Figure 3.
In Figure 3, the Cartesian coordinate of point Z is (x, y), the corresponding polar coordinate is point is a point laterally adjacent to point Z, then the polar coordinate of point P can be obtained from the polar coordinate of point Z, and the formula is as follows:
Then, the increments of point Z and point P in the axial direction are shown in
Then, the polar coordinate of point P can be expressed as , which is calculated by the increment of point Z.
When the system is started or the probe is replaced, the coordinates are translated according to the Cartesian coordinates of the pixels of the display plane obtained in the background of the acquisition device, and the translated coordinates are transformed into Cartesian-polar coordinates by formula (21) and the incremental method described above. The converted polar coordinates are converted into storage addresses by formula (22), and then the storage addresses are rounded up, the integer part is stored in the coordinate transformation table, and the fractional part is stored in the weight table for later use.
The convex array probe scans in a fan-shaped manner. In order to illustrate the specific process of bilinear interpolation, the pixel point P to be determined and its adjacent scan lines in Figure 4(a) are enlarged, and the enlarged result is shown in Figure 4(b).
(a)
(b)
The number of scanning lines of the convex array probe is N, and the number of sampling points on each scanning line is M. Then, for any point P on the display screen, the four adjacent sampling points around it are and are two points on the same arc as point P and on the scanning line. As shown in Figure 4(b), point P in the figure is the desired pixel point, is the difference between two adjacent sampling points, is the angle between the two scan lines, and the maximum sweep angle of the sector is . Then, the scan line angle increment is , and each point in the sector can be obtained by linear interpolation in the axial direction and angular direction.
Then, the calculation method of linear interpolation along the axial direction is shown in
After the axial interpolation is completed, the interpolation calculation is performed in the angular direction. The calculation formula is as follows:
The interpolation formula obtained by combining these three interpolation operations is as follows:
Here, is the difference between point P and point in the axial direction, and is the difference between point P and point in the angular direction. If the difference between the two sampling points on the scan line and on the adjacent arc is a 1-pixel unit, there is , and the weight coefficient in formula (34) is only related to and . After coordinate transformation, point P will include an integer part and fractional part, and the fractional part is the difference between point P and point in the axial and angular directions. Therefore, the fractional part after the coordinate transformation can be used as the weighting coefficient of formula (34).
During interpolation, the sampling value in the memory is read from the address in the coordinate transformation table, and the interpolation formula and the weight table are used to perform the interpolation operation on the point to be interpolated. The flow of the algorithm is shown in Figure 5.
3. Application of Computer Image Processing Technology in UI Design
In order to meet the needs of users, the user experience requirements are divided into five layers: presentation layer, framework layer, structure layer, scope layer, and strategy layer (Figure 6). These five levels basically constitute the logical framework of user experience design and also run through the entire design and development process.
The construction of the UI design mode of the mobile visual training software is a process of gradually refining the design of the interface elements according to the visual characteristics and visual preferences of the trainer with the support of the characteristics of the mobile device (Figure 7). At the same time, ergonomics is added to quantitatively analyze interface elements, thereby improving the usability of software UI design.
To sum up, based on the UI design mode of the visual training software in the mobile terminal environment, the visual characteristics of the trainer, the design of interface elements, and the ergonomic analysis of the interface elements are gradually refined, and the UI design scheme of the visual training software in the mobile terminal environment is formed (Figure 8). This solution can guide UI designers of visual training software to design interfaces more specifically.
According to the UI interface designed in this paper, the computer image processing effect and UI design effect of the technology proposed in this paper are evaluated, and the results are shown in Table 1 and Table 2.
Through the above experimental data analysis, it can be seen that the application effect of computer image processing technology in UI design is very good, which can effectively promote the improvement of UI design technology.
4. Conclusion
If developers want to stand out in the Internet entrepreneurial army, they should follow the trend and shift from focusing on products to focusing on human experience, which makes UI design also begin to be valued. An interface with a good visual experience can bring the audience a more relaxed interactive experience, improve the friendliness of the application, and increase the user’s sense of identity with the product. The UI design industry has recognized that successful UI design can guide users to a convenient interactive experience through visual performance. This paper combines computer image processing technology to improve UI design and improve the UI design effect. Through the analysis of experimental data, it can be seen that the application effect of computer image processing technology in UI design is very good, and it can effectively promote the improvement of UI design technology.
Data Availability
The labeled dataset used to support the findings of this study is available from the corresponding author upon request.
Conflicts of Interest
The authors declare no conflicts of interest.