Multi-level Visual Communication Design Strategies and Practices for Digital Brand Image Construction

The human eye is a complex optical system regulated by the optic nerve. In the whole process of human eye observing and perceiving external things, from the photoreceptor cells on the retina to the optic cortex cells in the visual nerve center system have different receptive fields, which are oriented to different visual features such as different directions and frequencies and process them separately, making the HVS a system with multi-scale and multi-channel processing mechanisms.

Humans can select visually salient regions or regions of interest (ROI) from natural scenes for prioritization. This active selective mental activity is known as the visual attention mechanism.

The visual attention mechanism is categorize into two modes: top-down and bottom-up. The top-down mode is characterized by a subjective conscious influence that directs visual attention towards the target area in an image while disregarding other areas after receiving a specific instruction. Bottom-up mode is influenced by the salience of the image itself, such as the brightness and color of the image, as well as when the image contains content information such as a specific shape or a specific thing, the human eye will pay more attention to the region and perceive the detailed information in the region.

Due to the visual attention mechanism of the human visual system, there are differences in the acquisition of information in different areas of the image when the human eye is viewing the image, and this visual characteristic will have a great impact on the visual communication design. Visual optimization design in the image area that the human eye pays more attention to will cause a stronger response from the human visual system, and it is easier to perceive the three-dimensional corporate digital brand image, while visual optimization design in the image area that is ignored by the visual attention mechanism will relatively not perceive the optimization of the digital brand image. Therefore, effectively simulating the visual attention mechanism, finding the region of interest in the image and differentiating it can improve the effectiveness of visual communication design, thus building a multi-layered digital brand image for the enterprise.

The visual masking effect of the human eye is caused by mutual interference between visual information, including luminance masking, texture masking, and color masking. Luminance masking effect refers to the fact that when the target object is close to the background luminance, it will be difficult for the human eye to distinguish between the two. The texture masking effect refers to the lower sensitivity of the human eye when observing images with complex textured backgrounds, which usually shows that the human eye is insensitive to the distortion of the textured regions of the image, while it can easily detect the quality degradation of the edge regions. The color masking effect is caused by the fact that the human eye has different sensitivity to different colors, and is especially sensitive to red, green, and blue colors. Additionally, the ability of the human eye to perceive color changes and distinguish color distortion is linked to both color saturation and image brightness.

The visual masking effect prevents the human eye from perceiving changes below a certain threshold, which is known as the Just Noticeable Distortion (JND). In the research of multi-level visual communication design strategy, the JND threshold can help us distinguish which distortions in the image are detectable by HVS and which changes in the image information are not perceptible by HVS. According to the JND threshold, finding out the quality changes that can be perceived by HVS and ignoring the imperceptible quality changes can effectively reduce the complexity of the multilevel visual communication design strategy, so that the constructed digital brand image can be more in line with the human eye’s perception of image quality.

The human visual system perceives luminance in a logarithmic relationship with light intensity, which makes the human eye insensitive to gray-scale changes in brighter image regions, resulting in the human eye being less sensitive to absolute luminance and more likely to perceive changes in relative luminance. The luminance sensitivity properties of the human eye are usually expressed using the Weber-Rechner law, which is calculated as shown in Equation (1): (1) Cw=ΔLLb where ΔL represents the minimum difference between the image content and the background brightness perceivable by the human eye, L_b represents the background brightness, and C_w approximates a constant.

The contrast sensitivity property refers to the phenomenon where the human eye is unable to distinguish the blurring of edges within a certain degree due to its limited discriminatory ability. Contrast sensitivity is usually related to the spatial information and luminance contrast of the image region, which can be measured according to the frequency or strength of spatial signals. The luminance and contrast sensitivity properties of the human eye reflect the ability of HVS to discriminate the intensity of light and edge contrast when perceiving images, which lays a theoretical foundation for the study of multilevel visual communication design.

PCGAN consists of four main parts: grayscale compression module, color feature extraction module, generator, and discriminator for bidirectional feature fusion.

First, the color feature extraction module can generate a local color feature map, which is used as the input for the color condition for the subsequent generator. At the same time, the grayscale compression module performs grayscale scaling and compression operations on the product region in the image to produce a grayscaled product image. Then, both the grayscaled product image and the local color feature map are fed into a dual-input color generator, which adopts the structure of a codec and is capable of generating color information for the product. Finally, the generated image and the real image are fed into a PatchGAN discriminator for confidence scoring, which maps the input image into a probability matrix in the form of a full convolution [29].

Graying is done in PCGAN using weighted averaging method, which takes into account that the human eye has the lowest sensitivity to blue and the highest sensitivity to green, so the three RGB channels are given different weights for weighted averaging to compute the gray values of the pixel points, i.e.: (7) Pgray=Pred×0.299+Pgreen×0.587+Pblue×0.114 Where P_red, P_green and P_blue represent the red channel value, green channel value and blue channel value respectively.

For some black system or white system images, their grayscale images are very close to the original image and cannot achieve the effect of color removal. In order to alleviate this problem, PCGAN carries out the processing of grayscale compression on the basis of image grayscaling, i.e., compression of the image grayscale value into a fixed interval.

The color feature extraction module can extract color features from the reference image and convert them into a local color feature map, which is divided into a color clustering module, a color coding module, and a color broadcasting module. Firstly, the color clustering module is responsible for extracting the main color system of the reference image, then the color feature coding module is responsible for compressing the main color system image into a one-dimensional color feature vector, and finally the color feature broadcasting module is responsible for broadcasting the feature vector to the product area of the image. Eventually, the color feature extraction module outputs a local color feature map, which is used as the color style input to the generator.

In order to extract the dominant colors in the reference image and remove the redundant color information, the first step of the color feature extraction module is to use the K-means algorithm to perform clustering operation on the pixel points with the following algorithmic flow:

Step1, randomly select K pixel points in the reference image as the initial K clustering centers.

The K centers obtained by the K-means clustering algorithm can be used as the primary color palette of the reference image, and the primary color palette is sorted according to the number of pixel points in each category, and a pair of primary color palette images are generated proportionally. The generated primary color system image breaks the spatial correlation of various colors in the original reference image, allowing the model to learn color information more freely. In this way, the dominant color family can be extracted not only from the whole image, but also from a limited region of the image, i.e., only the pixel points in the limited region are subjected to the clustering operation.

In order to achieve the alignment of color features with the gray scale region of the human image, PCGAN adopts a coding and then broadcasting approach. The color feature encoding module will perform the next step of feature extraction on the main color system image to obtain a one-dimensional color feature vector by convolution. The color feature broadcast module will randomly initialize a tensor with the same width and height as the human image and broadcast the color feature vector to the specified region of the tensor. The final generated tensor will be used as a color style input to the generator for feature fusion with the grayscaled product image. The introduction of the color feature encoding module and the color feature broadcasting module allows the model to perform color generation tasks for multiple reference images and regions. In the model testing phase, the color feature extraction module can encode multiple reference images into different feature vectors, and then broadcast the different feature vectors to different product regions, thus enabling the rendering of multiple regions of the image with different color styles at one time.

The generator part of PCGAN adopts a dual-input single-output structure, where the dual encoders encode the features of the color feature map and the grayscaled product image, respectively, and perform bi-directional feature fusion. The decoder reconstructs the fused features and outputs a new product image with the same color style as the reference image.

The dual encoder consists of a product feature encoder E_p and a color feature encoder E_c. The input to E_p is a grayscaled product image and the input to E_c is a local color feature map. The structures of E_p and E_c are identical and both contain four downsampled convolutional layers, which are followed by a RELU activation layer. The output of each convolutional layer in E_p and E_c is passed through a SPADE module for bidirectional feature fusion [30]. The final generated image is used as the input to the discriminator. The discriminator in PCGAN uses the structure of PatchGAN, which consists of a total of five convolutional layers, the last four of which have a convolutional kernel step of 2, so that each convolutional layer performs a 2-fold downsampling operation of the feature map, which is a total of 16-fold. The output of the discriminator is a confidence score matrix, where each value in the matrix represents the probability of whether its corresponding sense field is a real product image.

SPADE is a spatially adaptive normalization layer, which improves on the traditional batch normalization layer by learning two sets of transform parameters γ and β by convolution, which not only achieves the normalization function, but also can supplement enough semantic information.

First, the SPADE module performs the convolution operation on the semantic image to obtain the scale factor and translation factor. In the batch normalization layer, the scale factor and translation factor are two groups are network parameters, which need to be learned by means of network training. In addition, the scale factor and the translation factor in the batch normalization layer are one-dimensional vectors, while those in SAPDE are three-dimensional tensors, which have not only channel dimension but also width-height dimension, and thus are spatially adaptive. The calculation of the batch normalization layer without considering the spatial dimension is also one of the important reasons for the loss of image information. The output f^iout after SPADE normalization is shown in equation (8): (8) fiout=γc,h,wifn,c,h,wi−μciσci+βc,h,wi where γⁱ is the scale factor, βⁱ is the translation factor, N is the number of batches, and fⁱ is the output feature map of the ith convolutional layer.

Among them, the mean μ and standard deviation σ are calculated in the same way as the batch normalization layer, as shown in Eqs. (9) to (10): (9) μci=1NHiWi∑n,h,wfn,c,h,wi (10) σci=1NHiWi∑n,h,wfn,c,h,wi−(μci)2

The loss function of PCGAN contains three parts: the generative adversarial loss of the GAN, the perceptual loss between the real product image and the generated product image, and the reconstruction loss between the real image and the generated image. The computation of generative adversarial loss L_adv is shown in equation (11): (11) Ladv(G,D,x,y,c)=Ex~pdata(x),c~pdata(c)log(1−D(G(x,E(c))))+Ey~pdata(y)logD(y) Where, G(·) denotes the generator function, D(·) denotes the discriminator function, E(·) denotes the color feature extraction module, x denotes the local grayscaled product image, y denotes the real product image, and c denotes the reference image.

Perceptual loss is used to measure the Euclidean distance between the perceptual features of the generated image and the output image, which aims to penalize the difference in semantic information between the real image and the generated image. PCGAN uses a VGG-16 network pre-trained on the Imagenet dataset to extract the perceptual features of the image. The perceptual loss L_per is calculated as shown in equation (12): (12) Lper(G,x,y,c)=∑j1CjHjWj‖ ϕj(y)−ϕj(G(x,E(c))) ‖22 where ϕ_j(y) denotes y the output feature map of the jrd convolutional layer in VGG-16, C_j denotes the number of channels of the jth feature map, H_j denotes the height of the jth feature map, W_j the width of the j th feature map, and ∥·∥₂ denotes the number of computational L₂ paradigms.

The reconstruction loss is used to penalize the color difference between the generated image and the real image, which is crucial for supervised color generation tasks. The reconstruction loss L_rec used in this paper is the Manhattan distance, which is computed as shown in equation (13): (13) Lrec(G,x,y,c)=1CHW‖ y−G(x,E(c)) ‖1 where ∥·∥₁ denotes the computation of the L₁-parameter.

In summary, the specific expression of the objective function of PCGAN is shown in Eq. (14), where λ₁, λ₂ can be used to adjust the proportion of the three parts of the loss. When training the discriminator, the parameters of the generator will be fixed, and the optimization objective is to maximize the first loss. When training the generator, the parameters of the discriminator will be fixed, and the optimization objective at this time is to minimize the weighted sum of the three losses. PCGAN achieves the final Nash equilibrium state by alternating the training of the generator and the discriminator. Then: (14) minG maxDLadv(G,D,x,y,c)+λ1Lper(G,x,y,c)+λ2Lrec(G,x,y,c) where λ₁ and λ₂ are the weights of perceived loss and reconstruction loss, respectively.

The SPGAN network model obtains the input image from the B domain by passing the input image through the first generator G_B2A, G_B2A whose function is to transform the image in the B domain into the A domain, and the generated image through another generator G_A2B, whose function is to transform the image in the original B domain into the output image Cyclic_B, and to relate the input image to the output image by means of a cyclic loss consistency function, so that the closer the two are, the better. SPGAN network The overall architecture as well as the data flow is shown in Fig. 2.

Figure 2.

Overall architecture and data flow of SPGAN network

The basic principle of SPGAN is that a picture of a domain can be changed back to itself after two transformations. The representation is as follows: (15) GB2A(GA2B(x))=x (16) GA2B(GB2A(x))=x

Based on the cyclic idea of the above equation, the loss function of SPGAN is divided into two parts, one part is used for the adversarial loss that matches the distribution of the generated image with the distribution of the image in the target domain. The other part is the cyclic consistency loss used to learn the two mapping functions. In this paper, the data distributions are represented as x ~ p_data(x) and y ~ p_data(y), including the two mappings G:X → Y and F:Y → X. In addition, two adversarial discriminators, D_X and D_Y, are introduced to distinguish the real image from the generated image.

The attention mechanism can find a good balance between reducing the number of parameters and increasing the sensory field while considering the global information. Adding the attention mechanism to the generative adversarial network can enable the network to better learn the detailed features of the product [31].

To verify the effectiveness of the PCGAN-based product color migration model, this paper applies it to a specific mobile interface color migration task. In this section, user interface visual images from the RICO dataset are used to train the interface color visual style model.

The RICO dataset is the largest repository of mobile application interfaces today, specifically including 27 application categories (including sports, shopping, transportation, food, etc.) from the current mobile application market, more than 9,700 Android apps with high app ratings, and 72,219 user interfaces with design and interaction data (interface screenshots and interface visual hierarchy code). It discloses properties of visual images, text, structure, and interaction elements of more than 7200 unique user interfaces. Compared to other publicly available mobile application datasets, such as ERICA, Shirazi, and Alharbi, the RICO dataset is newer and has the advantage of more interface data, variety, and richness.

By designing the specific structure of PCGAN, the RICO dataset is utilized for training, and the experiments in this section divide the dataset into training part and testing part, the training part is divided into TrainA and TrainB, and the testing set is divided into TestA and TestB. Firstly, 80,000 screenshots of mobile application interfaces are randomly selected from the RICO dataset, and according to the PCGAN model, the extracted The application interface is classified into color styles according to the PCGAN model and 80% of the image data of the application interface image dataset of one of the color styles is selected and put into TrainA as the target interface. After that, 80% of the image data from the application interface dataset in a different color style is selected and put into TrainB as the migration body interface. Finally, the remaining 20% of the application interface image data is put into TestA and TestB correspondingly. The objective of this experiment is to transfer the color scheme of the application interface in TrainB to the application interface in TrainA, and verify it using TestA and TestB.

In the parameter selection of the PCGAN network proposed in this paper, the hyperparameter α=30 for cyclic consistency loss, β=10 for ontology consistency loss, and λ=10 for gradient penalty for discriminator network loss. In addition, data enhancement such as light and dark, stretching, saturation, contrast, and rotation are used for model enhancement, and the Step of the whole experiment training is 21000 times.

The process of PCGAN network adversary A loss DA_Loss, adversary B loss DB_Loss, generator A loss GA_Loss, generator B loss GB_Loss change during the whole experiment is shown in Fig. 3’s (a)~(d).

Figure 3.

Loss trend chart

As can be seen from Fig. 3, the antagonist loss in model training is significantly smaller than the generator loss, especially in the pre-training period, and the difference between the two is extremely large. With the increase of training Step, both generator loss and adversary loss gradually converge to 0. However, it can be seen that the loss fluctuation value of generator is much larger than that of adversary, i.e., the loss change of adversary in training is more stable. In addition, comparing the two types of mobile application interface data, A and B, the fluctuation of the loss value of class A data is relatively small.

Peak Signal to Noise Ratio PSNR is a scientific metric used to measure the quality of an image, the formula for which is shown below: (30) MSE=1H×W∑i=1H∑j=1W[ X(i,j)−Y(i,j) ]2 (31) PSNR=10log10(2n−1)2MSE Where MSE denotes the mean square error between two images, X and Y denote the pixel data in the corresponding coordinates of the image, and H and W represent the height and width of the image respectively. In the PSNR formula n is 8, and a larger value of this value indicates a sharper image.

Image Structural Similarity SSIM is a scientific metric used to calculate the structural similarity of two images. One of them is the original high-definition image and the other is the image with distortion, the SSIM of the two images can be used as an indicator of is the effect of the distorted image on the quality of the original image. It is proved experimentally that the results of this method on image quality satisfy the visual judgment of image quality. The SSIM value ranges between [0,1], where the larger the value means the smaller the image distortion.

For a given two samples x and y, their structural similarity is defined as: (32) SSIM(x,y)=[ l(x,y) ]α[ c(x,y) ]β[ s(x,y) ]γ

Among them: (33) l(x,y)=2μxμy+C1μx2μy2+C1,c(x,y)=2σxσy+C2σx2σy2+C2,s(x,y)=2σxy+C3σxσy+C3

l(x,y) compares brightness, c(x,y) compares contrast, s(x,y) compares structure, α,β,γ > 0. μ_x,μ_y,σ_x,σ_y is the mean and standard deviation of x and y, respectively. σ_xy is the Pearson correlation coefficient. C₁,C₂,C₃ are constants to ensure l,c,s stability.

In this paper, the image quality of the proposed PCGAN-based color style migration method is compared with ImagineNet method in generating mobile application interfaces, where the SSIM comparison results are shown in Fig. 4.

Figure 4.

SSIM trend chart

By analyzing the results of the test experiments, the mean value of PSNR of the application interface generated by the PCGAN model is 19.245, while the mean value of PSNR of the application interface generated by the ImagineNet method is 16.214. Therefore, the proposed method in this paper improves 18.69% over the ImagineNet method in terms of PSNR metrics.

And as can be seen from Fig. 4, the method proposed in this paper finally achieves a structural similarity of 0.98 on the SSIM metric, and any element in the application interface can be easily recognized without any obvious missing contour information. On the other hand, the ImagineNet method only achieves a structural similarity of 0.86, and some elements in the application interface lack obvious contour information and cannot be recognized. This paper shows that the PCGAN-based color migration method performs better than the ImagineNet method and is suitable for the color migration task of products.

To demonstrate the effectiveness of the SPGAN-based product style transformation algorithm, this paper conducts a comparison test with the StarGAN model and the latest StarGAN-v2 model. On the basis of 6000 samples generated, the performance differences of the models of different methods are evaluated by calculating the Frechet distance (FID) between the generated samples and the training dataset, where a smaller value of FID indicates a better quality of model generation. The Frechet distance between the three models is shown in Table 1.

As can be seen from Table 1, SPGAN achieved the smallest FID distance value of 60.241 among the three experimental models, while the StarGAN model and StarGAN-v2 model of the same type of scheme achieved scores of 120.467 and 82.625, respectively, which is a more significant improvement in the quality of the generated images compared to SPGAN, verifying that the SPGAN model in this paper The SPGAN model in this paper can explicitly control the feature resolution of each scale in the network model, expand the convolutional network sensory field, and carry out multi-feature extraction and fusion, which makes the generated image more complete and detailed in terms of the learning and embodiment of stylistic features, and the quality of the image generation is also improved accordingly.

In order to verify that the improved SPGAN can improve the network training stability as well as the generator convergence, the SPGAN model is compared with the StarGAN model and the latest StarGAN-v2 model in this subsection in a comparison experiment. In the comparison experiments, the FID value (the smaller the FID value is, the better the generation quality of the model) is used as the evaluation criterion by recording the FID value calculated by each model after every 2,000 iterations under the training background of the seat dataset for a total of 80,000 iterations, and the curve of the FID value of the model training is plotted as shown in Fig. 5. In Fig. 5, the purple curve, the orange curve, and the cyan curve are the convergence trends of the FID values of the StarGAN model, the StarGAN-v2 model, and the SPGAN model, respectively, during the training process.

Figure 5.

The FID value curve of the models training

As can be seen from Figure 5, for the StarGAN model, in the process of 80,000 iterations, the FID value reaches the lowest point in the training process in 14,000 iterations, and then the model training in the subsequent training fluctuates drastically and in the subsequent iterations, the model convergence trend is not clear. In contrast, StarGAN-v2 is relatively stable, the overall curve shows a downward trend, but the model still shows large fluctuations in the convergence process, and oscillates within the convergence interval. SPGAN convergence is slower in the initial iteration, but the curve shows a more stable convergence trend in the first 30,000 iterations, and in the last 50,000 iterations, the model shows some fluctuations, but the fluctuations are not clear. The model has some fluctuations, but the fluctuation is small, and the curve is still relatively smooth. By observing the curve, it can be well confirmed that the SPGAN model in this paper has a more obvious advantage in training stability.

In addition, it can be observed in Fig. 5 that the SPGAN curve is at the lowest position in the graph among the three types of model training results, which indicates that SPGAN has a better convergence of the generator and higher quality of the generated images while the model is stably trained.

The descriptive statistics and normality test results of the product color elements are shown in Table 2. Based on the statistics in Table 2, it can be seen that the overall score of this group of packaging in brand evaluation is relatively excellent, reaching a mean value of 4.13 and 4.16 respectively. Among the many brand evaluation indicators, the contribution to shaping the brand image received the highest rating of 4.16, which reflects the effectiveness of the package design in creating a strong brand impression. The low score in emphasizing brand uniqueness indicates that there is a lack of brand awareness. The highest ratings for color design were given to attractiveness and aesthetics, which indicates that the package is significantly attractive and representative in its color application. The evaluation participants were more consistent in their recognition of the package, indicating a high level of agreement due to the small standard deviation of the ratings. The slightly lower rating of 3.89 for color in terms of overall visual coherence may be due to the large amount of information in the package design, which has a certain degree of distracting effect on the focus of marketing objectives.

The results of the evaluation of the effectiveness of the brand logo elements of the product are shown in Table 3. In the score statistics of the group’s packaging evaluation, the logo elements of the packaging design received scores of 3.94, 3.87 and 4.03 in terms of the overall layout matching, the appropriateness of the size and proportion of the brand logo, and the prominence of the brand logo, respectively. This indicates that in the overall design, the salience of the brand logo performed most prominently, while its size, proportion, and overall layout rationality did not differ much in the evaluation. In terms of the four psychological impact ratings, the packages in this group received high ratings for “liking and willingness to buy”, which is mainly attributed to the brand’s high level of awareness. Meanwhile, ratings were also relatively high for “intrigued and impressed by the packaging brand”. This suggests that consumers are highly aware of brands they are familiar with and have a good understanding of the brand’s message.

The results of the descriptive statistics and normality test for the elements of the visual layout of the product are shown in Table 4. According to the scoring results in Table 4, it can be observed that the visual layout scores 3.91, 3.96 and 4.10 in the three aspects of the visual layout as a whole with reasonable collocation, the visual layout helps the content understanding and the visual layout is memorable respectively. The scores of the various scores are similar, so when changing the visual layout elements, the effect on the overall presentation of the package is small, and this group of packages is suitable for the change of the visual layout elements in the Comparative analysis. In terms of psychological evaluation, this type of packaging has less information, but it scores higher in terms of attracting visual attention, triggering preference, and stimulating purchase desire. However, it scored lower in brand effect scores, which was mainly due to the lack of a prominent logo and clear copy descriptions in this package, resulting in poor performance in understanding the brand message and highlighting the brand image.