Application of circular elements in interface design

Circular elements are widely used in interface design, from common circular icons to rounded heads or rounded contour shapes. A circle is a special shape that can be quickly noticed by us in many geometric shapes. As such, there are a few caveats when designing an interface with a round element.

　One, round Head

Looking around, the rounded avatar has occupied our mobile phone. Take a look at these examples below, as shown in the following illustration.

From left to right in turn is Sogou map, QQ, Instagram. There are many other examples, of course, that are not listed. At the moment, there must be some students have to jump out to refute, micro-letter and Facebook is not a round head, do not believe you look at the following two pictures.

Between Square and Circle, which is right or wrong, please continue to see the decomposition below.

1. The purpose of the user to use Avatar

Whether it's a round head or a square head, it's all about the avatar. The purpose of using Avatars is primarily as a symbol of personal identity. There are a number of features that differ from other users, such as user names, user IDs, and user avatars. In these options, the avatar is the easiest to identify and memorize quickly, especially for handsome girls.

In addition, there is a part through the avatar to highlight their personality, for example, beautiful women usually use their own sexy self-portraits as a portrait to express their charm, or use the cartoon characters or images as a portrait to express their artistic flavor, or use Meng Pet as a portrait to express their love or stay Meng.

2. What photos do users use as avatars?

With the increasing popularity of smartphones, the threshold for people to take photos is getting lower, and more and more users are using self-portraits as avatars. The photos are of a variety of contents, such as characters, landscapes, flowers, pets. Even in a normal photo, there are many other elements in the background, such as the image below.

Although the background of the first photo is virtual, but the background is still messy, some weak contrast color easily rob the user's view. The second photo of the characters is a supporting role, luxury car is the real protagonist, this type of photography is no longer a minority. The third photo of the people shooting the shadow of the light, deliberately exposed a line of background content, its intentions are clear. In addition, the user's mobile phone is good or bad, the level of photography is not consistent, photographed the quality of the photos are uneven.

When using these photos as avatars, the characters are not only highlighted but weakened. While the smartphone screen is growing larger, each avatar is still small when it is displayed in the interface.

3. The difference between a square head and a round head

The difference between a square head and a rounded head can be illustrated by two contrasting graphs, as shown in the following figure.

The left picture is a square head, and the right picture is a round head. By contrast, the following points can be found:

A, round avatar can better help users focus on the human face. Although the left image can fully present the characters, there are more interference information, such as lighting, door posts and screens in the background. In contrast, the right picture shows the character's facial features more clearly, such as an awl face, a beautiful pupil, and false lashes. In the previous analysis, it was noted that the quality of photos taken by mobile phones was uneven. In this reality, the circular head is more favorable to ignore the background of the photo and improve the recognition efficiency of the head.

B, the strict meaning of the left figure is not called the Avatar, but more should be called photos. The reason is very simple, avatar, nature should be displayed "head" mainly, and the picture on the left is only one-fourth of the screen less than the area. From this point of view, it is obvious that the right picture is more appropriate. In the selection of photos as head, if it is round, users prefer to choose the face of the picture as a portrait, if the square, the user is relatively more casual, usually the whole body or bust. Don't believe it, you can open your own micro-mail, look at your friend Avatar, or slide forward to see the front of the map.

C, in daily life, most of the frames we see are square, with less circular frames, because most of the photos are square. Therefore, the use of rounded contours to represent the avatar, can be quickly separated from the photo, more prominent.

Of course, there are other reasons, such as technical advances, to use rounded outlines as avatars.

Early due to the immaturity of technology such as CSS, round, fillet graphics processing is very troublesome, now become a lot easier.

　Second, the circular icon

In the app's UI design, we often see a row of rounded icon, as shown in the following image.

In the picture above, the first two are the United States Group and Taobao. In design, there are two rows of horizontal circular icons. The last picture is the Service tab of the Sogou map, and you can find a round icon with a vertical arrangement.

Here are two questions to answer:

1. Why should I use a circle?

2. Why use a circle rather than a rectangle?

The 1th question is very convenient to answer. Each feature entry icon is not the same, if you remove the circular contour, it is bound to appear very messy. We all know that the circle is a closed form, plus the circle can weaken the difference of the icon, so that it becomes more regular, looks more refreshing, uniform. At the same time, the function also shows the equality between the various icons, not because of a particular icon shape and biased.

Before answering the 2nd question, we first return to the basic features of the circular and square

Circle: Moving, curved, moving, smart, flowing

Square: Static, straight line, regular, serious, rational

The circle and the square compare, appear to want to be clever many, not so stiff, serious. So, it's not hard to understand why you use circles rather than rectangles.

Second, the circle can make the icons stand out on the square page-don't you think these circular icons are very prominent on the page? Why, it's very simple. Most of our cell phone screens are square, and most of the elements in the interface are square, with a little bit of a circle, naturally forming the focus in the interface, as you'll see in the analysis later.

In addition to this form, there are a number of individual circular icons floating at the bottom of the page, usually performed to return to the top of the operation.

　　Three, round and square combination

Circle and Square is like the yin and yang in Taiji, allelopathy, and endless. Skillfully combining the circle with the square, can make the page become lively at the same time, but also can better achieve the function of guidance, the following figure shows several cases.

The first picture is Google mobile phone map, the location of the top right corner of the trip icon just by the square of the temporary layer in split. Functionally speaking, the way to travel is the next step, not part of the temporary layer of content, so put in the upper right corner of the position is more appropriate. From the UI point of view, the circle and the square, so that the circle becomes more prominent, while the circle in the upper right corner, the page is not so rigid, but let the page become lively and lively.

The second picture is a pleasant loan, a slightly bulging radian to make this project become very prominent, but also broke the page boring layout.

The third picture is kitchen stories, the entire page remains centered, the author's avatar centered reality, the page was divided at the same time played a role in the connecting link.

In page design, circular elements are usually not independent, but are freshly with other elements, accommodating each other. Looking for good visual effects, but also to understand the relationship between the page elements, so that the design of output is really good design.

　　The outline of a circle

Combined with real objects, the use of a circular contour, to create a page dotting the pen. Let us have a few chestnuts to see, as shown in the following figure.

The first picture shows the play interface of NetEase cloud music. The rounded outline is consistent with the record, although it occupies the main space of the page, but makes the whole page become artistic and concise.

The second picture shows the account page of the search for easy loans. The Available balance is the design of bottled water, the more the balance is higher water, at the same time will have the effect of shaking, lifelike at the same time make the page become smart.

The third picture shows the homepage of the Le Power. The more steps you have, the more the stroke progress bar is, the warmer the dark color becomes. With the real life of the instrument panel, gradually changing color with the circle, so that the page becomes primary and secondary, very rich visual impact.

You can find that you need to be aware of the balance of the page when you use circular elements, such as aligning the right and left and the top and bottom alignment. To ensure that the page is balanced and refreshing, it is common to keep more white space around the rounded elements. These are the things you need to be aware of when using round elements.