What is the "perceptual pattern design" that Tencent experts are learning?

I recently read a book that talked about an interesting topic, which is the perceptual pattern. So what is the perceptual pattern?

In general, the so-called perceptual pattern is the feeling or sensation given by the external presentation of an object or subject. For example, on the same computer desk, there are computers, mice, or other objects, but the feeling given by different people when using them is completely different, either messy, neat, or simple. The more intuitive difference may come from the visual perception conveyed by the different styles, materials, colors, and textures of these objects.

If applied to Internet design, examples of perceptual patterns may include: text information, typography, color matching, layout, illustrations, icons, shape texture, spacing, interaction or animation, etc., which are all specific ways to express perceptual design.

[[414695]]

At this point, you may think that perceptual design is a purely external visual expression, but if you want to fully achieve some results, you need to integrate this matter into the core of the brand, develop it with the development of the product, and then stand out from many similar products.

Examples of products with strong perceptual patterns

Case 1: WeChat

As a product with over one billion users, WeChat has become more and more powerful with the continuous iteration of versions, so the product experience may give people a bloated feeling. However, the overall perceptual mode design of WeChat is very clear, from the desktop APP logo to the icons, colors, button styles, interactive feedback, etc. presented on the inner pages, all of which are well unified.

Case 2: Instagram

As the world's most popular photo-sharing community, Instagram has always had a very obvious perception. The simple design of the overall APP allows users to focus more on the content itself. The subtle brand blue seems to have been firmly integrated into the user's brain. This perception does not need to be deliberately amplified, but users can feel it imperceptibly.

Case 3: TikTok

As the hottest short video platform in China, Douyin's perceptual model has been deeply imprinted in the minds of users. I think Douyin makes users remember it mainly in the following three aspects: 1. Brand attributes. Douyin's brand attribute is to make users remember it in the simplest way, through the connection of APP icons, splash screens, launch button graphics and brand colors; 2. Content attributes. The content characteristics have their own platform temperament. Douyin's earliest main "trendy and cool" videos made it clearly different from Kuaishou; 3. Experience attributes. The bold full-screen sliding video interaction is well combined with the mobile phone experience.

The role of perceptual patterns

1. Helps convey brand image

Products in the same field are mostly similar in function, and the popularity of flat design in recent years has pushed the similarity between products to the extreme. Therefore, it is more necessary to distinguish them through perceptual pattern design. This distinction is not just a visual difference, but more from the product creator's control over the direction of their own products.

The book mentions the example of Spotify, which gives people a warm and personal feeling. Although its monthly active users have exceeded 100 million, the feeling it gives to users is still unique. In addition to its functions, it mainly lies in the overall graphic style, color matching (the proportion of black and green brand colors), the subtle and calm feeling in the interaction, and the feeling conveyed by the layout.

From the above case, the basic experience is an important part that users are worth participating in, but the design of the perceptual mode is more derived from what kind of brand personality or brand core the product developer wants to convey to users. Spotify's quietness and immersive experience are the brand core that Spotify designers want to convey.

2. Perceptual patterns convey brand through interfaces

The brand transmission of the perceptual mode is mainly through the interface or operation tone to make users feel and remember. If we want users to remember our products on the interface, we need to think more about three key points: the uniqueness of the design; the recognizability of the design; and the differentiation of the design.

Uniqueness of design

The uniqueness of the design is often established through a series of contents such as the layout, icons, images, interactive experience, interactive wording, etc. We can often see many good examples of these contents in foreign software.

Let’s take Instagram as an example. The minimalist design of Instagram is a unique existence that is consistent from beginning to end. In addition to the research on the design interface itself, a lot of effort has been put into the content. For photo browsing, it always adheres to the experience of large pictures to ensure immersion within one screen, rather than for efficiency. This is inseparable from the high quality of photos that Instagram has always had.

Recognizable design

There are many ways to improve the recognizability. Taking icons as a basic example, when designing icons, do we think and design them in combination with the overall product character, and polish them in depth? For a simple distinction, we can start from the style (for example: simple, interesting, tough, soft, etc.). More in-depth content requires thinking about how to convey the brand sense, and combining graphics with brand concepts and product character to implement brand recognizability through design.

Taking the icon of the YouTube app as an example, the designer wanted to express the simplicity of the overall app design and weaken the impact of graphics on the content. Therefore, he adhered to three core key points: simplicity, thin lines, and popularity.

Distinction of design

Under the current trend of convergence, it is particularly important to grasp the differentiation of product design, that is, when users look at our product, will they think it is another product at first glance? The grasp of differentiation often comes from the brand's choice of color. Before defining the color tone, we need to analyze the mainstream competing products, find out our own differentiation, and try to avoid overlap.

Taking the popular e-commerce apps as an example, the designs of most e-commerce platforms are similar, and the choice of brand colors is particularly important, so coupling should be avoided as much as possible.

Making the design system more coherent

It is almost impossible to make all modules or components exactly the same in product design, but we can use the design of perceptual patterns to penetrate content modules so that users can have a consistent overall perception.

Taking the material design system as an example, what it determines is a rule, but not all modules or icons are the same and indistinguishable. If they all look exactly the same, the design will become monotonous and indistinguishable. The overall graphic style is limited by design guidelines and applied in different positions so that users can perceive the consistency of style from a visual perspective, which can also make the overall experience more coherent.

Material design principles

Expressive

To highlight what Material Theming has to offer, each Material study expresses a different brand.

Various

To ensure that material theming and components meet the needs of as many products as possible, material research represented different types of products.

Based on reality

To replicate the real product as closely as possible, each study identifies users, shows functional user flows, and applies real-world constraints.

Exploration and thinking of perceptual patterns

In our daily design of functional modules, we consider the user's experience of the product more, while the perceptual module is what brand perception we want users to get here. By combining the brand with the visual design system, we can give users a unique product character and personalized atmosphere.

There are many ways to explore perceptual design. The most popular techniques are: mood board, style overlay, element collage. No matter which method is used, there is no single answer. It is more about using these methods to explore the perception of your own brand through continuous attempts.

Mood Board

Mood boards are a relatively lightweight method of exploring styles. We don’t need to spend too much energy in this process. All we need to do is reintegrate pictures of the same or similar types to get the visual experience we want to express.

Mood boards are a relatively early stage of visual brand tone exploration. You can also use mood boards to get preliminary answers to the overall color and layout. If you want to go a step further, you may need to use style overlays.

Style Overlay

After getting the general brand direction from the mood board, we can use the style overlay method to conduct more detailed exploration. We can use one or more different style overlays to express it, but when intercepting these contents, we hope to remember to maintain the consistency of controls, components, colors, fonts, etc. to avoid large differences and fail to form a unified visual system.

Element Collage

The general concept in the book is to collage interface elements and other content together to achieve the prototype of the first draft of the design. This method can be used to test the demand side more quickly, but it takes more time and energy than the above two methods, and the content produced by this method is also more high-fidelity.

On the surface, these three methods seem to help us design better, and there is not much difference between them. However, in essence, these three methods affect the fidelity of our initial design output. From mood boards to style overlays to element collages, it seems to be an increasingly fidelity approach. We can choose one of them, or a combination of the two to perform.

Balancing brand identity and consistency

Too much personalized design will weaken the overall brand sense. Similarly, if the design content needs to be exactly the same, it will also kill the creativity of the brand sense of the design. Therefore, under the concept of perceptual design, consistent design is not blindly reused without flexibility, but through the concept of overall unity, it allows the existence of personalized design, which not only meets the unique visual expression of some modules but also does not affect the brand transmission.

For example

For example, when designing a complete APP outside, we have already standardized the general basic visual specifications. Without affecting this specification, for some modules, such as welfare and game categories, which are more operational design interfaces, we can consider having richer colors, graphics and other visual expressions, but the premise is whether it complies with the settings of the basic specifications. If it does, we can completely customize the design for these types.

If we don’t break the conventional design methods and solidify the pursuit of consistency, then the design will become ordinary and rigid. The existence of perceptual design allows us to pursue more different designs within the permitted scope and encourages designers to actively explore more possibilities. A good design system can not only reflect the consistency of the brand but also express creativity.

Because the design related to perceptual mode is easily regarded as just style or theme skin design, many people think that this aspect of design is easier than optimizing the interaction process. In this case, temporary business often challenges the brand and standardization of the product. Combining these two reasons, we need to adjust our strategy for perceptual mode at any time.

Good data does not mean good or bad perceptual design

The quality of data often comes from various reasons. We get good data after optimizing the design, but it does not mean that our perceptual design is good. First of all, there are many ways to stimulate data, such as emphasizing the performance of content and using color contrast to highlight the modules you want to highlight. These methods are contrary to perceptual design.

Based on the above problem, we need to follow several basic principles in daily design, and try to avoid affecting the overall design perception in order to meet short-term product needs.

1. Do not challenge basic normative principles

As the basic standard of the overall design, the basic specification must be formulated after many attempts. If it is easily overturned, the design cost will be huge. It often needs to be re-output, multiple alignments, and finally output, and then landed to form an open component. I often encounter this in my daily work. It is often because of a very small module that huge design costs are generated.

2. Do not change the user’s common habits

What this does not mean is that we should not optimize or iterate the experience design, but that we should try to avoid adjusting the global experience because of a small content.

For example: In the past, many APPs liked to customize the UI when designing form selectors. From this analysis, when using this form selector, do users use the system more or our APP more? If it is the system more, why don’t we call the system directly? Because the UI transformation of components often brings certain development costs, but the perception caused is not large enough, instead it will make users feel very strange, why these options are inconsistent in different APPs.

3. Maximize consistency

Any design should be based on consistency as the biggest premise, so that the perceptual model can be more completely reflected, and each module, color, graphic and other content can be fully presented, affecting users all the time and allowing users to have a subtle perception of the whole.

at last

The perceptual model is not a principle, but a way of working and a design model. In addition to personal persistence, we also need team awareness to make our design more branded. The tone and direction must be determined from top to bottom, and consensus must be formed within the team so that the design language can be formed.