From the warm spring to the bright early summer, with the gradual decline of the epidemic, did you go to the surrounding places to play together?

As Ali's most representative design team for "play" - FliggyDesign, what fun and thoughtful things have you done in the past year?

From design concept to visual language, from interface framework to component mode, from single user contact to full link scenarios... Throughout 2019, we have carried out a comprehensive experience upgrade of Feizhu App.

We hope to strengthen the connection between users and products by upgrading the design language, and further stimulate the communication between the brand and users, so as to achieve a product experience with a sense of journey.

1、 Exploration of core design concept

The beginning of experience upgrading needs to be supported by core concepts. The unity of concepts helps us form a highly consistent cognition at the design level.

As for the exploration of flying pig design concept, we trace back to the travel itself. As for the feeling of travel, we can think of countless beautiful words to describe it: happiness, fun, freedom, vitality... Travel is a complete experience of the process. From the beginning of the idea to the end of the journey, all these processes make people intoxicated and happy.

However, due to the excessive attention paid to the differences between industries and the complexity of the scene, the front desk experience lacks unity and standards. Through our early research, we found that there was a certain deviation between the user's perception and the brand proposition. Many users thought that the use of the Feizhu App at that time was a bit stiff, outdated and complex.

From "enjoying great difference" to "enjoying more and more", Flying Pig's travel attitude is also evolving towards a younger, more authentic and more playful direction. So, back to the design upgrade of the Flying Pig App, our task is to continuously improve the product experience of each user contact while delivering the pleasure of travel, so as to help users complete the whole process of travel more easily and efficiently.

With such goals and propositions, after internal discussion and sorting, we finally focused on three key words: Interesting, simple and considerate 。

1. Fun: brand touch, real and rich emotional resonance

Play fun is the first impression conveyed by the Flying Pig brand. We hope to make users feel interesting and interesting flying pigs through vivid, fresh, young and changeable external design expression.

Fun is first the presentation of content. The attraction of travel content lies in the true and natural images and their diversity. Combining the characteristics of these scenes and images, we created rich "words/painting style" tags with humorous language, which greatly improved the expression ability of travel goods.

As a brand gene, fun is not only the content itself, but also a way of communication with users. Inadvertently refreshing, dynamic display of scores, and emergence of abnormal states are all presented through interesting dynamics.

2. Simple and considerate: a more relaxed experience is the beginning of a beautiful journey

Based on the construction and orderly development of travel ecology, more content and services are also growing on the Feizhu App, and the information load on the experience container is also increasing. Therefore, no matter the cognition of content or the operation experience of platform product functions, we all hope to directly face users in a simpler way, so that users can easily control everything and feel the meticulous service experience.

Therefore, for each subtle experience contact, combined with the core design concept and overall trend, we uniformly upgrade the basic visual language and specification of the user interface:

2、 Visual language upgrading, unified and standardized

1. Interface framework: focus on functions, reasonable and unified

Framework is the starting point of interface design language, which determines the way in which the content and functions in the interface are presented and organized, and the way in which users conduct the most basic interaction. In the framework design of Flying Pig 2019, on the one hand, we need a universal and clear interface structure to carry the unified and stable basic functions of the platform. On the other hand, based on the demands of continuous business development and change, it is more necessary to have flexible content changes and expressions compatible with different scenarios. Therefore, we define the general page framework of Feizhu App from the perspective of "space" layering and "function" layout.

First, starting from the "space" attribute, divide the unified hierarchical structure of the interface: stable background, navigation and event layers, and flexible and compatible content layers.

Secondly, on the content level, according to the characteristics of different scenarios, we have summarized five interface layout frameworks from the perspective of "function":

A. Flat:

It is suitable for shopping guide and browsing scenarios. The shopping guide scenario of travel emphasizes the richness and attractiveness of information content itself. The core task of users in such scenarios is to quickly browse content and easily obtain information. Therefore, we pull through the cards, level the container hierarchy, and improve the overall readability of the page.

B. General list:

It is used in the second level undertaking scenario. It focuses more on the aggregation of information of a certain dimension and type, and emphasizes the user's browsing efficiency. Therefore, the module is more streamlined, such as the undertaking of a large number of topics, lists and other types.

C. Large banner:

Basically, it is used in detail scenarios. This kind of scenario is generally the presentation of the end of a certain type of information link. It is the most complete scenario for users to understand this type of information. The amount of information is large and complex. We continue to use the traditional layout of billboard cards to maximize the presentation of content while ensuring the immersion of reading.

D. Card format:

In this framework, we use the most efficient independent card of information clustering to organize content or functions. Focus on function or information clustering, and emphasize the ease of use of functions and the integrity of information modules.

E. Cascading panels:

In order to adapt to more information bearing and richer expansion capabilities, and also to use a new interactive trend, it is currently mainly used in map scenes.

In the selection of layout frame, function determines form. Designers need to judge and make reasonable choices according to the characteristics of different scenes and the content centered design principle.

At the same time, in view of the diversity of the current framework, we are still exploring more compatible framework schemes, with a view to finding the best balance between the scene characteristics, information content and formal expression.

2. Text: font size promotion, orderly application

Text is the core carrier of information. In order to reduce the fatigue of reading content on mobile devices and improve the readability of information, we have comprehensively improved the font size. At the same time, standardize the use of text sequences to maintain a unified information reading rhythm.

3. Color: integration of quality and effect to improve recognition

Color is not only the first external feature of a brand, but also bears a part of the functional attributes of information in the user interface. Based on the overall lively and fun tone of the brand, we have improved the brightness and saturation of colors.

At the same time, in view of the problems such as unclear identification caused by the instability of yellow, we added two functional standard colors in the same color system and three core auxiliary colors from the functional perspective.

Delineate the color gamut of Flying Pigs through HSB, provide more abundant auxiliary colors, and establish the color system of Flying Pigs user interface.

The use of rich colors is everywhere, from the embellishment of icon, the strengthening and assistance of container information, to the penetration of the atmosphere of the whole scene, all of which are conveying the vivid brand perception.

4. Icon: Brand gene, simplify the complexity

Icon is the most intuitive design language. We combine brand genes, remove redundant details, strengthen functionality, and ensure simple, recognizable, unified and orderly graphics through grid standard drawing.

3、 Component improvement and scenario application

The establishment of design language is a process of continuous integration from element component scenario to global integration. The scenario is the end of the application, the visual element is the basic supply, and the component is the core capability. Therefore, we also constantly improve and promote the platformization capability of components, so that they can be applied to suitable scenarios in a more efficient way.

As the first impression of the page layout, we have uniformly optimized the title bar components. The color removal and immersive processing of pages below the second level enable users to focus more on the content itself during browsing.

The home page of Jijiuhuo is a high frequency use scenario for users. We standardized and unified the retrieval entry module, and optimized the overall layout through immersive page layout, which enhanced the awareness of different scenarios while improving ease of use.

Map is a common and necessary tool for travel scenes. Based on the principle of simplicity and efficiency, we have converged the previous complex map scenes and unified the whole scene through componentization.

Finally, the application of Feizhu 2019 design language makes the design process, including visual elements and frame layout, traceable. At the same time, on the basis of consistent experience, based on rich formats and product strategies, designers can constantly explore more rich and creative expressions.

4、 Write at the end

2019 has already passed, but the design upgrade of Flying Pig will not end here. We always adhere to the goal of creating the most beautiful travel experience, focus on the refined design of the industry around the user's journey perception and full scene experience. At the same time, we continue to pay attention to new travel trends and explore more new travel experiences.