Abstract
In recent years, touch-screen mobile phones have been loved by more and more users, and the word user experience has been mentioned more and more, and interface design has undoubtedly become an important method of interactive design of touch-screen mobile phones. With the progress of technology and market demand, the importance of rational design of smart phone interactive interface is particularly prominent, and user-centered experience design has been paid more and more attention. The traditional style migration is only used on computers, and its target audience is relatively small, with low efficiency and poor effect. At present, the application of interactive art design is becoming more and more homogeneous, without too much change in essential functions, and with no outstanding features in mature applications, some applications have failed to meet users’ expectations in terms of functions and operation modes, resulting in polarization of application use and difficulty for new applications to survive. Mobile phone theme design, as a new field of interface interaction design, meets the personalized needs of users and attracts more and more designers’ attention. With the rise of artificial intelligence technology, especially the rapid development of deep learning and convolutional neural network, a large number of advanced theories and algorithms have emerged in the field of computer vision. As an important direction of vision research, target detection and style transfer have become the research hotspot of many researchers. How to reasonably formulate the interaction mode, determine the user interface style, layout structure, and information display mode and how to organically combine the mobile phone theme interface design and user interaction experience are problems worthy of discussion and research at present. By studying the process of smart phone theme interface interaction design, sorting out the methods of mobile phone interface interaction design style, this paper deeply analyzes the popular flat and quasi-materialized style and discusses the skills of application.
1. Introduction
With the development of mobile Internet, touch-screen mobile phone, as a platform for information exchange, has become more and more important in people’s life [1]. But on the other hand, mobile phones seem to bring great convenience to people. In fact, more and more users complain that mobile phones are difficult to use because they are too complex to try many functions [2]. With the pursuit of verticality, specialization, scenario, and differentiation in all walks of life, artificial intelligence, as a powerful assistant to assist the development of all walks of life, also needs fine and high-quality performance to serve all walks of life.
According to statistics, when users use mobile phones, 20% of their time is spent on making phone calls and texting, and the remaining 80% is spent on other things [3], for example, browsing news information online, watching video programs, electronic reading, playing mobile games, taking photos and recording videos, and brushing friends circle. Style transfer technology is widely used. For example, in the military field, many satellite remote sensing images or night vision images contain a lot of useful contour information, but due to the limitation of conditions, images generally have no good color effect [4]. Style transfer algorithm, as a new method in the field of artificial intelligence, guides computer learning by applying experience and examples, and trains computer vision algorithm by using massive image data, which has become the research direction that attracts much attention at present. It not only has a wide application space in many professional fields, but also plays its role in daily life. For example, after people take photos, they will do some processing on the photos to achieve the desired effect, and the style transfer technology between images almost perfectly simplifies this tedious process [5]. Mainly, today’s mobile phones are becoming more and more multifunctional, concentrating the functional features of many digital products, and becoming mobile personal communicators and even remote controllers of life [6]. This puts the interactive interface design on the agenda. It has become one of the most important things for users to get rid of the shackles of technology and free themselves from the passive position in man-machine dialogue [7]. However, at present, the research on the interaction design of interactive interface in touch-screen mobile phone is still a relatively new research field, and a systematic research theory and framework have not been formed. Especially in China, it is difficult to find research materials in this field [8]. Therefore, in the information age, we should shift the focus of design to people’s attention and establish good interaction. In the process of rapid social development, design methods and design styles change with each passing day. In the face of extremely fierce market competition, rapid renewal of iterative products has become a magic weapon for enterprises to survive.
From the product point of view, researching and analyzing the interactive design of mobile phone theme interface is helpful to spread the word-of-mouth of mobile phone brands, promote mobile phone sales, and increase market share [9]. The purpose is to serve the sustainable development of enterprises, society, and users better. Imagine that if the hardware, appearance, and internal functions of the two phones are basically the same, then the phone with beautiful interface design and reasonable interaction will undoubtedly win the favor of consumers more [10]. The purpose of analyzing the interactive design style and design method of mobile phone theme interface is to deeply understand users’ demand for smart phones. This is closely related to people’s life and even changes people’s lifestyle for the design of mobile phone products. Appearance and style are on the one hand, and the usability of interaction is on the other hand [11]. However, the user-centered interface design requires that the usability of interaction must be investigated [12]. It is not the appearance of appearance, but a deep cognitive mechanism. It forms the user’s thinking, forms the user’s judgment on the software, and makes the software structured and systematic, thus having great productivity [13]. From the perspective of mobile phone users, beautiful interface design and reasonable interaction design are one of the criteria to measure whether mobile phones are worth buying [14]. The starting point of usability theory is derived from the attention to user experience, which is flexible in the research of man-machine information exchange in the computer field [15]. In this case, we can use style migration technology to color these pictures without good color effect. In the long-term use process, excellent theme interface interaction design can bring users sensory pleasure and operational comfort and maximize the use value of mobile phones.
2. Related Work
Literature [16] proposes to analyze an image of a certain style, establish a mathematical model or statistical model for this style of image, and then analyze another image that needs to be migrated and make it better conform to the mathematical model or statistical model established by the previous selected style. In literature [17], the feature extraction methods designed for different application scenarios are poor in other scenarios and lack of good mobility, which will bring huge workload. A support vector machine classifier combined with HOG features is proposed in the process of sample training, which achieves excellent generalization performance through module fusion. Literature [18] puts forward a new theory, which combines image texture with neural network. In literature [19], using VGG neural network, the characteristics of high-level features of images can be extracted, and the content features and style features of images can be described, so that the output images can obtain the texture features of style images while retaining the structure of content images, and then, there are many methods to expand and improve the neural style transfer algorithm based on this idea. Literature [20] uses scale invariance of SIFT to extract features of related targets and then uses support vector machine (SVM) to classify, thus realizing multitarget detection. In literature [21], because the features extracted by the target detection algorithm based on traditional manual features are designed for one aspect, and the influence of other factors cannot be considered, the effect of style transfer is improved by modifying the style loss function and adding constraint items. Reference [22] proposed fast up robust features (surf), which filtered the Gaussian Laplace operator through the filter to obtain the approximate value, and added the integral image to perform convolution calculation. Literature [23] realized rapid neural style transfer through pretrained neural network. Document [24] proposed that common Hal features mainly include two rectangular features, three rectangular features, and four rectangular features, representing edge features, linear features, and diagonal features, respectively. Literature [25] uses a smaller convolution kernel and pooling layer, which can control the number of parameters while obtaining more image features and reduce the amount of calculation.
3. Method of Interactive Design Style of Mobile Interface
3.1. Quasi-Materialization and Flattening
The word quasi-materialization design originates from the Greek words skeuos (meaning appliance or tool) and morphe (meaning shape) [26]. It is the application of visual clues from one object to another; that is, it simulates the shape and texture of real objects; simulates and reproduces the real objects through various superimposed highlights, textures, materials, shadows, and other effects; and can also be appropriately deformed and exaggerated [27]. The quasi-materialization design system is divided into five main parts, namely, custom template diagram, image color transfer, image correction after transfer, user interface construction, and sound production. The system structure diagram is shown in Figure 1.
Man-machine interface or user interface is the operation mode of human-machine interaction, that is, the medium for users and machines to transmit information to each other, including information input and output [28]. We can regard the man-machine interface as an interactive system. When analyzing the man-machine interface system model, we can establish and analyze the human behavior model, so as to establish and design the man-machine interface. The custom template image module is to make the user’s template image library more diversified, so that the user can obtain the template image from many ways, so that the user can have more choices. Through the interactive interface, concepts outside the interface can be introduced into the interface design to help users understand the functions referred to in some concepts in the interface, such as using the “trash can” to dispose of waste files, “setting” to guide users to modify various designs, and “navigation” to act as the user’s role; through the interactive interface, users can more easily understand the functional significance of interface elements [29]. Interface design simulates real objects. The concept of this design style is to provide users with real-time context: by imitating the visual clues of familiar daily objects, it can reduce the cognitive barriers required by users to understand and use products. Style migration module is the core part of the system, which mainly uses image color style extraction technology and image rendering technology to complete the most important functions of the whole system [30]. Through the color balance processing of an image, it is possible to correct the problems of color deviation and saturation over or under in the image. In this case, better image effect can be obtained by using the color balance processing of the image. Its design idea is to eliminate the factors that hinder the understanding of received information to the greatest extent and provide users with a visual environment for quickly loading information and receiving important content. Image correction module is also a relatively important module, which realizes the color balance operation of the image and the contour correction operation of the image, so that the image can be presented to users with better effect. In the design of man-machine interface, the adaptation of the machine to people must be the communication process of how the machine conveys information to people and how to operate effectively.
The main work of the user interface building module is to integrate all functions into a mobile application, so that the whole application can interact with users in a friendly interface style and improve the user experience. The music production module is mainly to produce some sound effects and give tips or feedback when users click a specific button to improve interactivity. Flat design is to abandon all styles and attributes with three-dimensional prominent effects in the design process, such as highlights and shadows commonly used in quasi-materialized design, which can cause perspective and three-dimensional effects and present simple and clear design contents. Because the flattening follows the minimalism that less is more, the constituent elements are abstract and modern, in line with the contemporary aesthetics, and load faster on the mobile device end and reduce power consumption. It is refreshing to appear gorgeous in the design era dominated by the imitation style, so it is favored by the majority of designers.
3.2. Characteristics and Methods of Mobile Phone Interactive Interface
When it comes to buying a mobile phone, consumers’ first reaction is to think of the shape and function. The term “interactive design” is mainly put forward for computer interface. Interactive interface design has played an important role in the process of human-computer interaction. It can make users directly enter a familiar environment to operate, greatly facilitate users’ understanding and use, and reduce memory load and anxiety. When consumers buy a mobile phone, they will notice the operability of the interactive interface of this mobile phone, that is, whether it is easy to use. Before buying a mobile phone, consumers refer to the term interactive interface mode of the mobile phone, and most of them equate with the operation mode. Channels represent people’s information input and output, and sensory channels are collectively referred to as visual, auditory, tactile, and kinesthetic sensory organs. The interactive relationship and information channels between people and computers are shown in Figure 2.
In the design of touch-screen mobile phone interface, the application of interactive interface in information organization, language prompt, operation mode, and even graphic design can reduce the load of users’ understanding of interface elements and reduce the amount of users’ thinking. Because the quasi-materialized design simulates the material, texture, and shadow of familiar objects in the real world, it shows the benefits of recognition and familiarity as an element of interface control. However, this can only belong to the division basis of the main body shape of the mobile phone or the operation mode between one button on the screen, and cannot cover the category of interactive interface. This idea does bring corresponding results to programmers, but this method has a big defect: “the basic function of a program includes a mathematical or statistical model, which means that only one style can be converted,” so the practical application of style migration is limited.
Style migration algorithm framework can encapsulate basic algorithm modules, which lays a solid foundation for the subsequent rapid construction of required models or training, tuning, testing, and deployment of existing models. The details of the edges or lines of the image correspond to the high-frequency components of the image spectrum, so high-pass filtering is used to let the high-frequency components pass smoothly, and the middle- and low-frequency components are properly suppressed to make the details of the image clear. Manufacturers can convey humanized feelings and create comfortable interactive experience through quasi-materialization design. Including template images preinstalled when installing pictures, download pictures of your favorite style from the Internet, and import the downloaded images into the application as template drawings. Users collect images through the camera and use the collected images as template drawings. The function of mobile phone involves three interactive interface types: mobile phone screen area, mobile phone body, and mobile phone sound.
In the design of touch-screen mobile phone interface, the use of interactive interface can make the interface communicate with users emotionally, reduce the cold and boring feeling brought by scientific and technological products, reduce users’ anxiety, and improve user experience. Hue is the human eye’s cognition of the main wavelength of light. Once the color enters another color from one color, the human eye will immediately find it. It is measured by the angle system, and the value range is between 0 degrees and 360 degrees. It is calculated counterclockwise from red. Red is 0 degrees, green is 110 degrees, and blue is 250 degrees. When the details of the quasi-materialized design are very specific, it is inevitable to bring complex and complicated feelings to users in the process of use, resulting in visual fatigue during operation. Therefore, in order to complete the image style transfer operation, fully consider the user experience effect.
4. Analysis of Style Transfer Neural Network Model
4.1. Construction and Analysis of Style Transfer Neural Network Model
The core of the style transfer algorithm is to train the style in the revolutionary neural networks (CNN) proposed by Leona Gatys. Using R-VST method and style transfer algorithm, respectively, the average statistical results are shown in Figure 3.
In this algorithm, the content image and style image are trained separately and finally combined to produce a new artificial target image. Generally speaking, two 3×3 convolution kernels with a step size of 2 are equivalent to a 7×7 convolution kernel, which is calculated by the convolution formula
In the traditional neural network, any pair of input and output neurons will interact to form a densely connected structure, while in the convolutional neural network, each output neuron only has connection weight with the neurons in the specific area of the previous layer, thus achieving sparse interaction. However, here, means that the stylized output of the frame is transformed into the T-th frame by warp transformation, and the time comparison of each frame image generated on MPI Sintel dataset before and after using the network model training method is shown in Figure 4.
In the seed feeding model, the hue is expressed as the angle around the central axis of the cone, the saturation is expressed as the distance from the center of the cross section of the cone to this point, and the brightness is expressed as the distance from the center of the cross section of the cone to the vertex. After the deep lab V3 semantic segmentation network, the segmentation map with semantic regions is generated, and different styles are adopted for these regions. The color transfer module is a core part of the whole system. In this module, users can see two picture views, one is to place the template image, and the other is to transfer the target image. First of all, some pictures are needed as the input content images. There is no requirement for the content of the images and no annotation. Here, we choose to use the Train2020 part of MSCOCO dataset, with a total of 78,943 images and use VGG-19 and style transfer neural network as the basic networks to generate training weights. The training results are shown in Figure 5.
That is, the effect after convolution is very different, so this can increase the depth of the network under the condition of the same receptive field, improve the training effect of the neural network to a certain extent, and reduce the amount of parameters. Generally, the most frequently used parts should appear first, and then, the parts with low frequency should be arranged to the places with less visual information distribution. The convolution operation of images is to extract features step by step, in which each convolution kernel represents a feature. Because of the progressive characteristics of its network structure layer by layer, the extraction of image features is also gradually changing from low-level simple texture features to high-level complex structure features and finally combined into feature map. Let be equal to the smallest of these values, and the value of is usually normalized to be between 0 and 180. In the loss function part, the content features are represented by the high-level features of the VGG network, which is used to retain the spatial structure information of the content image. According to the different settings of mobile phones, it can be divided into single screen and multiscreen. The difference is that the single-screen wallpaper will not change according to the user switching the interface icons of each screen, and all the contents in the picture will be displayed on the screen. The formula of content image feature extraction is as follows:
When the value of convolution kernel is jointly calculated with the value of a part of the image, the larger result shows that the two parts are more similar; that is, the machine can recognize the similarity of two images through calculation and carry out classification and other operations. Because the color saturation may not reach the most satisfactory effect after the style transfer of the image, and the edge information of the image may be lost in the process of redrawing, we can get the content loss function:
The rule shows that if something is put together, enclosed by wire frames, moved at the same time, changed at the same time or similar in shape, color, size, or printing pattern, it can be considered as a whole, a unit or a group. VG19 has five modules, including 19 hidden layers, 16 convolution layers, and 3 fully connected layers.
4.2. Analysis of Network Training Results
The index to judge the style transfer is to observe the changes of their loss function and weight parameters. Through the input of images, the whole model obtains the total style loss function, total content loss function, and total loss function. Since the optical flow data provided by MPI Sintel dataset only has forward optical flow, forward optical flow can convert the current frame to its previous frame, and reverse optical flow can convert the current frame to its next frame, the time-domain error comparison of different methods on MPI Sintel dataset is shown in Figures 6 and 7.
However, the concrete description will encounter some technical obstacles in the mobile phone screen display. In addition, it is too intuitive and often cannot express more or deeper meanings and functions. Especially for the case of limited mobile phone display space, the multilayer structure is doomed that the subfunctions must be included in the upper menu, and the imitation is less able to convey the concept of subfunction set. Therefore, the change of the whole model is observed through the image generated by tensorboard, and the longitudinal index of the function gradually tends to be 0 with less fluctuation. The more texture of the extracted artistic image, the richer the texture of the picture. The extraction of texture features from the style map is different from the feature extraction of the content image. The style map does not need to consider the specific location of the image information, so the GMM matrix needs to be used in the extraction
Tensorboard framework has built an active community of programming enthusiasts, and has a perfect document system, which greatly reduces the learning cost of beginners. Its framework features flexibility: it can express the input as a data flow graph and use tensor flow’s internal architecture for calculation. Also, the operation of CPU and GPU can run on desktop, server, mobile phone, and other devices. Activation represents the activation function, which is mainly used to enhance the nonlinear mapping ability of the network. Here, two interactive interface styles, Re LU and Tanh, are used to convert network parameters, as shown in Figure 8.
When calculating the style loss function, the Gram matrix representing style features is limited to calculate in a specific area according to the semantic segmentation results. Firstly, the coordinates of the middle point and the scanning point of the image are determined, and then, initial scanning point and coordinate point are set in the eight preselected directions. This coordinate point is at the edge of the image: the coordinates of the middle point of the point and the scanning point in the image are found through the coordinate midpoint formula, and the pixel eigenvalues of this coordinate point are stored in an array for use. At the same time, in order to avoid the style interaction between different regions, the regularization loss is added to the loss function to ensure the natural transition between different regions, so the loss function is
The model training uses two modules, color correction and edge correction, so that users can manually adjust the color saturation and restore the lost edge information. After the style transfer processing, the content still has the detailed content characteristics of the image; that is to say, we can still see the content in the image after the conversion, but the style image cannot be distinguished, so the fluctuation range of the loss function of the content image is not large, and it is also a manifestation that tends to be stable.
Convolution operation generally uses convolution check with different sizes to perform different convolution processing on the input image, so as to obtain a variety of feature representations such as edges, lines, and blocks, or obtain more sparse features by setting different step intervals in the convolution process, so as to increase the local receptive field of the feature map. Next, assign the newly calculated midpoint coordinate to the scanning point coordinate, and use the distance formula between two points to calculate the distance between the scanning point and other points in the image to judge whether it is less than a fixed value. If it is small, the value of one trip ends. On the contrary, in the neural style migration algorithm, the generated image needs to have the content features of content image and the style features of style image at the same time. Finally, use the following formula to update the target image:
5. Conclusions
As the mainstream terminal carrier in the Internet era, smart phones have been integrated into human social life and become an indispensable part. The rapid development of technology has greatly expanded the functions of mobile phones, which naturally has an impact on product interface design. On the basis of satisfying the basic communication purposes, more and more functions are realized on smart phones, bringing endless convenience and comfort to human beings. Because of this, beautiful interface design and good interactive experience play an increasingly important role, which directly affects users’ use and product sales performance. The application of the style transfer algorithm introduced in this paper in interactive art design of mobile phone interface can make the interface concise and clean and create a lighter operation experience visually. On the other hand, it can maximize the prominent content theme, make the information ontology stand out as the core, relieve the information load, let users pay more attention to the content itself in the operation process, and reduce the navigation cost of users on the interface. The traditional migration algorithm system can only be used on computers. The object-oriented is relatively small, and there are some problems in efficiency and effect. The style migration algorithm designed in this paper solves these problems. The new trend also makes the interface interaction no longer limited to a specific product itself. It may begin to involve the communication with the use environment and other users. Therefore, through the good interactive art design of mobile phone interface based on style migration algorithm, we eliminate the unspoken inconvenience in the use process, arouse our resonance to the mobile phone brand concept through various humanized details, and stimulate our life enthusiasm hidden in the bottom of our heart through the above forms.
Data Availability
The labeled dataset used to support the findings of this study are available from the corresponding author upon request.
Conflicts of Interest
The author declares no competing interests.