the main difference between p>UI design and graphic design is that besides the aesthetics of the interface, the designer is also responsible for the interaction between the user and the interface. UI design is a high-tech design industry. Although IT is a new industry, many large IT enterprises at home and abroad have set up corresponding UI design departments, and PS, AI, Axure, C4D and other softwares have all made great efforts in this industry. This shows the importance of this profession in the Internet age. Regarding UI design, many people will be basic, but it is often not so simple to design a sense of advanced! To this end, let's share some advanced UI design skills in detail. Let's take a look! UI design advanced sense enhancement skills sharing: 1. Visual elements In today's increasingly mature Internet products, you will find that all apps are more and more similar, and it seems that they are products designed by the same set of templates. And this universal design will lead to serious homogenization, making the design not exquisite and the product without temperament and brand sense. Whether an App design is exquisite or not depends on its details, which means that when designing, we should start from the nuances and study how to create a touching UI design from many aspects. This section summarizes 12 simple and intuitive small details to enhance the sense of design. Let's learn together. 1.1 Using color shades to build a hierarchy When controlling the style of UI text, the most common mistake is to rely too much on font size differences to create contrast. Simply using font size contrast, the contrast created is not enough. Try to combine colors and words to create a better contrast effect. Each color has a visual weight, which helps to establish a hierarchy in the content. By using the depth of color, the elements are given different importance. If you can, you can even use two or three colors: the main content uses dark gray (such as the title, but don't use pure black), the secondary content uses gray (such as the product introduction), and the auxiliary content uses light gray (such as the release date). In UI design, usually two different word weights are enough to create an excellent layering: most texts use normal word weights (411 to 511, Depending on the font) Use a heavier word weight (611 to 711, depending on the font) ▲ The word weight of the main title is 611, and the word weight of other words marked with green dots is 411. We should try not to let the word weight of the body part be less than 411, because the size of this part of the font itself is already small, and less than 411 will make the readability poor. If you still need to reduce the word weight, you might as well make the font lighter, or replace it with other fonts with strong recognition and relatively small word weight. Gray text should be treated separately in achromatic/colored background. Don't use gray text on colored background. In white background, it is a good practice to change black text into gray (or use gray text on black background) to dilute its visual effect. However, in a colored background, there are usually two ways to reduce the contrast with the background color: one is to reduce the opacity of white text; The second is to make the text gradually close to the background color instead of changing it to gray. ▲ The position information of the designer on the left is white text to reduce the opacity, and the color on the right is the color with the same hue as the background. Secondly, when it comes to long content, a large area of dark bold text will give people a heavy feeling and jump. By choosing a color like dark gray (#4F4F4F), this problem can be easily solved, and the characters can be easily recognized. 1.2 Uniform Tone Choose a basic color, and then adjust the tone and color depth to increase the balance. Avoid using too many colors when designing. If the project allows, just use a fixed color swatch and adjust the saturation and lightness of the basic color to increase the consistency of the design in this simple way. 1.3 Clean shadow is the most common visual expression in UI design, which can increase the depth of elements, make them stand out from the background, attract users' attention, and at the same time enhance the visual layering of the picture. Compared with using a wide range of diffuse fuzzy shadows, using subtle vertical offset shadows is more obvious and natural. It simulates the shadow effect created by the most common light source characteristics, and the light shines from top to bottom. This soft shadow is clean and adds to the exquisiteness of the picture. If the range of shadows is too small or the color is too dark, and the position is not offset, but gathered around the elements, the picture will be flatter, the vision will become heavy, and the picture feeling will not be refined. Another kind of extended shadow is to simulate the color of the element itself projected on the background. Because the shadow is consistent with the color of the element, it presents a very harmonious picture. In UI design, this technique should not be used too much, otherwise the various color combinations will be dazzling. 1.4 Personality Icon Design Qualified designers can draw icons with uniform styles, while excellent designers can create icons with unique styles. Can we add more creativity to its visual expression while pursuing the same size, fillet, line width and color matching? For example, the following group of icon designs show unparalleled creativity in both graphic innovation and color matching. As the global navigation of an App, the tab bar plays a vital role, and its design affects the visual style of the whole product. Usually, most apps use the design style of iOS specification (gray by default, and brand color is selected), which is too common and common. If you want to make the design of the tab bar icon exquisite and full of personality, you can enrich the visual expression of each selected icon, such as adding background and expression to the icon, which is vivid and interesting, and increases the user's goodwill and leaves a deep impression. 3D icon design is a popular trend in recent years, which looks very exquisite and gorgeous, but it will cause slight visual fatigue after a long time, and at the same time, it will increase the cognitive cost of users because of its complex structure. Generally, it is more common in the application of take-away food. The design sense of 1.5Tab Tab is one of the most common controls in App design, which comes from the design specification of MaterialDesign. Nowadays, many iOS products have also started to use this navigation bar style for design, and the segment selector originally belonging to the iOS specification has become less common. In terms of visual expression, Tab and tab bar are also divided into selected state and unselected state, and its design is relatively simple. Usually, a group of text labels are used to distinguish their states by color or adding small strips under the labels. Because it is simple, the more difficult it is to design brilliantly. Only by exerting great design imagination and jumping out of the limitation of design specifications can we find a perfect scheme. For example, Xiami Music's Tab selected state is an audio wave line, and with the comparison of text size, a Tabs with design sense and product characteristics is created. We can also get inspiration from brand genes, and brand is an excellent source as a familiar image of users. From the brand image, the visual rich with unique temperament is extracted as a small strip of Tab selected state, thus establishing a visual connection and allowing users to have a consistent feeling from the inside out. For example, the smile symbol in the brand image of Ma Honeycomb and the pig head in the brand image of Flying Pig travel are extended to the design of Tab, which not only makes the interface vision unique, but also further strengthens the user's cognition of the brand image. 1.6 frameless design to simplify in UI design, there are many decorative elements, such as the borders of cards and the dividing lines of lists. Although borders and dividing lines are a good way to separate two elements, they are not the only way. Too much use will reduce the design sense of the whole layout, which will more or less interfere with the user's browsing line of sight and make the information content lose attention, so unnecessary decorative elements can be reduced. We can divide the visual level of elements in the following ways to make the picture clean and tidy: using shadows can also create a sense of boundary, and it is more subtle than the border dividing line, and it will not appear abrupt and will not distract users. Use different background colors to distinguish them. Usually, adjacent elements only need subtle differences to distinguish them. So, all you need to do is use different background colors in different blocks and try to delete the dividing line because you don't need it at all. Adding extra white space to create the separation effect between elements does not have to be expressed by wireframe, just add white space to separate them. It is a common technique in UI design to group elements by leaving spaces and spacing. 1.7 Unified Design Elements There are many elements in every interface of the App, and those similar elements should maintain a unified design style. Usually, the tab bar icon in the personal center is a human silhouette, which represents the user, so it can be used continuously in the interface showing the user's head and image. If a graphic has a unique appearance, such as an oval rectangle, it can also be used as a visual symbol to continue to other interfaces and become the appearance of a graphic or a button. In this way, the whole interface is linked by unified design elements, giving users a consistent sense of consistency. 1.8 Fonts conforming to product temperament Choose fonts conforming to product temperament, which can be consistent with product positioning and convey correct emotional awareness to users. Although the default font can meet the design requirements of most apps. However, there will be a problem that the universality of system fonts has no characteristics, and it has little effect in some specific situations. For example, in sports apps, it is more suitable for thick italics to convey the feeling of strength, explosiveness and speed. After changing to system fonts, the overall feeling is much weaker in momentum. 1.9 The style of third-party icons is unified. Most apps support three-party login, which can reduce the time cost of user registration. Usually, the third-party icon entrance is displayed at the bottom of the registration landing page, which is also the content that designers often ignore. They often directly adjust the third-party icons to the same size and place them neatly, without redesigning them. A well-designed App should not miss any details. We can optimize the design of third-party icons based on the icon style of our own App. It is very important to find the beautiful graphic design in the color App in 1.11 pictures, which can bring users visual enjoyment like spring breeze. We often see the design style of text superimposed on the picture background. In order to reduce the interference of complex picture background on the text, the usual method is to superimpose a semi-transparent black mask to make the white text clearly visible, but this is not the optimal method. We can extract the main color from the picture and use it to overlay the filling color of the background, so that the text, color blocks and pictures are integrated together, and the picture becomes advanced and full of design sense. 1.11 Improving the quality of pictures The quality of pictures affects the style of the whole App and the mood of users. High-quality pictures give people pleasant visual enjoyment and produce beautiful associations. And low-quality pictures will instantly lower the texture of the App. In App design, a beautiful picture needs to be cut and colored before it can be used from collection to online. Even if it is an ordinary product picture, we will adjust it to a uniform size after matting, and with a clean background, we can immediately enhance the aesthetic feeling of the product, and the interface vision will become beautiful and neat. 1.12 Card design In the current UI interface design, card design has become a very common design form, which is conducive to information layering and integration, dividing a clearer organizational structure, simplifying the processing of complex content and improving space utilization. At the same time, card design usually relies on visual elements, and strong visual elements are an advantage of card design and a good way to improve the sense of design quality. 2. Emotional design psychology believes that emotion is the attitude experience of people about whether objective things meet their own needs. Only when the product touches the user's heart and makes him feel emotional changes, then the product will no longer be cold. What he sees through what is in front of him is that the designer carefully ponders every devil detail for his use experience, and people will feel happy, fond and happy. Emotional design is not vigorous, sometimes just a copy, an illustration and an animation can touch people's hearts and make users get a pleasant experience. Making the design advanced is not only the visual level, these simple and beautiful design details are full of positive emotions, and it is the goal of pursuing a higher level after satisfying the functionality and ease of use of the product. 2.1 Prompt written language is the most direct weapon of emotional design. Compared with cold words, anthropomorphic dialogue can gain users' goodwill and give products new vitality. For example, those push notifications of App, because users receive too many PUSH notifications every day, which is already in quiet inside! At this time, you need a low-cost and efficient PUSH copy to stir the hearts of users. Turn the original disturbance to the user into a kind of fun, which makes people smile. 2.2 Drop-down refresh Drop-down refresh is an operation that users often perform in the use of the App. The common drop-down refresh design is in the form of icons and text. This design is simple and intuitive, but it has no sense of design and cannot trigger any emotions of users. Pull-down refresh is a temporary state, and enriching its design details will not cause incompatibility with the product interface. On the contrary, a pull-down refresh design with a sense of design can make the product win the favor of users. For example, when uc headlines are refreshed, a running deer will pop up, suggesting that new content is being loaded quickly, and the image of the deer continues the brand logo. As an information product, the speed of content update is very important, and the running deer just metaphors this point. Users also have a good impression on the product in this happy mood, which instantly makes the drop-down refresh lively and interesting. 2.3 The personal center page of avatar design is closely related to the user's information, and the user's virtual image can be displayed here. The common design is a user's avatar plus login text. This default avatar design can't get the user's identity.