pk10技巧34567名定位

Classic Case
  • Website of Tongren Development and Reform Commission
  • Tongren City Science and Technology Innovation Service Platform
  • Tongren Science and Technology Bureau

Website Construction-Must-See 2018 UI Design Trends

Posted: 2018-06-19 16:29 Source: Wuling world Network Technology Author: Rank Name Click: Times

Designers need the help designed to grab the user's attention, to grasp the recent design trends will be better able to seize the hearts of customers. 2018 design trends will continue to follow the design in the form of 2017, but also adds many new ways, then, we'll take a look at UI design trends of 2018.

First look at 2018UI outline design trends:

Image title

I. Flat, minimalist design is still mainstream

Flattening started with the iPhone's official UI design specifications (of course, there are many trends that are also led by the iPhone). Later, Android began to follow suit, and then all other products began to flatten designs. I believe everyone is already familiar with flat design. The core meaning of the concept is to remove redundant, heavy and complicated decorative effects, advocate simple, clear, space, white space, etc., and highlight the core design elements. At present, many apps have begun to remove redundant lines and open the relationship through spacing. De-iconization is also a trend that has become popular; these design behaviors are designed to make users more intuitive and purposeful when using them. Satisfactory aesthetic trends also make minimalist UI designs have a good user experience.

Image title

Image title

Larger, thicker fonts, more white space

I believe many of you have upgraded the new iPhone system. With the release of ios11, new design trends have also become popular. If you are familiar with Material Design (hereinafter referred to as MD), then, ios and Android is slowly close in design. In flat design, text layout affects the clarity of the information level display. Through the comparison of text size, weight, spacing, color, etc., to establish a clear information level without using too many decorative elements.

Image title

Similarly, Airbnb also uses a thick title design. The headline text contains a set of text with pictures and descriptions. Keep a large amount of white space between the texts. It seems that they do not interfere with each other and do not make the interface look loose. Therefore, it brings a very easy browsing experience for users. .

Image title

(For some domestic e-commerce apps, I personally guess that the possibility of adopting this design method is small, because for these applications, the position in the page is relatively expensive, and large fonts should not be used to waste space)

Three design trends for page icons

1. Change of icon icon

Since ios7, Apple has standardized 2px linear icons; in ios10, the selected state of the linear icons has changed to the background fill style; and in the current ios11, the face icon is used. The unselected and selected states are only distinguished by color. , And the icon is more rounded. At present, this design is more used in foreign apps, and it is relatively rare in China, with more iOS10 styles.

Image title

2. Add animation to the icon icon to make it more interesting

At present, many app has been added micro efficiency to the bottom of the page icon in the tab bar, play a kind of dynamic efficiency is a finishing touch, less likely to be noticed, to make the user aware I found it fascinating, such as Ali's Taobao, rookie wrapped wrap ... I feel goose factory QQ do the most interesting, at the bottom tab bar icon not only micro-efficient, but also smiling face icon will automatically turn to look at the side clicked, and long press icon to move it will be based on the rotation direction of the finger, is very interesting, in line with the user's state of mind after the moment after 9500.

Image title

3, icon of the more important details of the characterization

Currently icon design is no longer merely content with easy to read as a precondition, while the details of the design is also very important. Can be graded on color, the icon can be linear color contrast, etc., it will appear icon is carefully designed, bringing the user's experience also at the next level.

Image title

Four, card + projection combination

IOS11 uses a large rounded card design, it is no longer as rigid as the small rounded corners in the past MD, the large rounded corners make the design more airy. I believe you have seen many cards use the projection method. The slight, seemingly non-existent projection will not be immediately noticed by the user, but it will add depth to the design, form a layered relationship, be more eye-catching, and can be better. To grab the user ’s attention.

Image title

Image title

Five, of course, gradient colors are still very popular

Gradient color is one of the biggest trends this year. Beginning in 2016, Instagram changed its logo to a gradient color. This trend has become popular. Domestic apps have begun to follow suit. Currently, Taobao, QQ and other status bars use their own. The brand color is gradual. When designing the gradient color, the transition of the color should be soft, the color should be bright, and the rigidity should be avoided, which can effectively improve the user experience.

Image title

Image title

Image title

Sixth, 3D effects are popular

This year's C4D is very hot, I believe everyone has felt it. Many merchants on Double 11 this year have used 3D effects, and some have added dynamic effects, which can allow you to observe the products from all directions, from multiple angles, and more realistically. Designers who are not yet C4D, in order to improve your competitiveness, it is necessary to learn, after all, skills are not overwhelming.

Image title

Image title

Seven, illustration style is also a big trend

Image title

The illustration style is used more and more widely, suitable for the start page, default page, banner map, thematic header map, pop-up illustration, icon, etc. in the app. It should be matched with the overall style of the app when it is used. Creative illustrations will greatly increase the user ’s appetite for the app.

Image title

孟菲斯风格 设计,在地铁站看见各大品牌挂出的海报十分抢眼。 btw, this year more popular Memphis style, saw major brands hung out posters in the subway station is very eye-catching. The style of color is more vivid, lively, the use of highly saturated colors, an estimated 18 years will continue to be popular for some time.

Image title

Eight, pay interaction effect has been very important

Interactive animation is more and more used in UI design. Its role in product design includes: transmitting hierarchy and status information. Good dynamic effects should be invisible. The premise is to improve usability and improve experience. Its several features: fast and smooth, just the right feedback, improving the operating experience, providing good visual effects.

Image title

Image title

Image title

Image title

Application of dynamic video

1.Small video of the startup page

Generally, small videos are used in the startup page for the first time to open the app. It has a strong sense of substitution for users and can infect users' emotions, but the video time should not be too long.

2, from dynamic pictures to dynamic video

Dynamic pictures that have been popular since 16 years, that is, cinemagraph, have also been popular for a while in 17 years. They are commonly used in WeChat with pictures. The core is that there are a small number of dynamic elements in the picture, as if giving the picture life, which is more beautiful and close to reality.

Image title

Image title

In order to attract more users ’attention, the mobile phone banner design uses dynamic video for display. In addition, the Taobao product details page will also place dynamic video effects to facilitate 360-degree viewing of products and stimulate your desire to chop your hands. At the same time, dynamic video with banner js transition effect may make visitors more immersed in the website experience.

Image title

Other homepages also place high-quality, story-telling videos that will make your site unique. General visitors see this design, the first feeling is that this company is powerful and tall, it can be described as pretending to be the highest state!

Image title

Ten, responsive design

Responsive design has been popular for a long time. This function that automatically deforms according to the resolution of the device now looks cool. Is it right? With the growth of mobile terminals, mobile phones have surpassed PCs as the first choice for daily website browsing. Google's MD responsive grid system has introduced most of the domestic web pages because of high labor costs. Foreign countries adopt responsive design. Websites are: Youtube, Spotify, Behance ... Jingdong, Tencent Video, etc. in China. This responsive design is indeed more complicated, but this trend will continue, and for products and companies, it still needs to upgrade within its capabilities.

Image title

Eleven, VR / AR / VUI is the future trend

As we all know, the VR (virtual reality) and AR (augmented reality) fires are now at the core of computer vision. VR is currently used in the entertainment field, and AR will really affect our work and life, and is mostly used in multimedia, marketing, education and other aspects.

Image title

In the 17th Spring Festival, Alipay's VR finds red envelopes, Meitu Xiuxiu and other camera software are popular. This type of interaction method has a strong sense of user substitution and a good experience.

Image title

Judging from the development of Siri, Amazon echo, Google home, Xiaobing, etc., VUI (Voice User Interface) is different from GUI and belongs to a new field. It will be designed based on "conversation" and presented to users mainly speaking and listening . VUI is the most natural and easy way to interact, but it will not completely replace the GUI, but better collaboration.

Image title

Overall, these areas are in terms of the design is relatively new, so designers should always keep the attitude of learning, to keep pace with the times, the strong interaction of design products.




    ------ Divider ----------------------------
    ------ Divider ----------------------------