The rounded trend
1. Mobile hardware trends
Equipment trend
Take the current mainstream hardware devices for example, such as Apple, Xiaomi, Vivo, OPPO and Huawei hardware devices tend to be more rounded industrial design, the trend of rounded corners from outside to inside.
Screen trend
The screen is larger, the full screen has larger rounded corners, and even the curved screen has greater visual impairment beyond the right Angle.
2. UI interface design trend
Take iOS and MIUI as an example, the system UI tends to be larger rounded corners and cards, and the domestic mainstream manufacturers’ system UI also tends to be rounded corners.
The rounded edge
1. Easy to identify
In terms of information recognition, rounded corners are easier to identify than right angles.
Take the iOS interface as an example. Rounded corners are easier to identify, easier to navigate, and easier to read on the page.
2. Reduce visual impact
An acute Angle produces a more illusory burst than an obtuse Angle, meaning that an acute Angle has a visual impact on the user, without which the content is more focused.
3. Sense of security
Sharp objects have alertness and rounded corners have softness and gentleness.
Take the video play button as an example. A button with a larger rounded corner will give the user a friendly and safe feeling.
4. Guidance
The card with curved corners has an invisible sense of focusing content, which can guide users to focus their vision toward the middle. Curve can predict the direction of the approaching, with the role of safety and predictability.
Why do we use rounded corners?
1. Improve visual comfort and focus on content
Using rounded corners in components makes it easier for users to focus on content, and smooth rounded corners make browsing more comfortable.
2. Improve brand recognition and brand consistency
Check whether rounded corners are used in the details of application modules or component controls. Uniform rounded corners help improve brand recognition and brand consistency.
3, tend to mobile device system UI direction, follow the popular trend
Reduce the difference between application and equipment and system, tend to popular equipment and system, conform to popular design principles.
How to use rounded corners?
Rounded corners and smooth rounded corners
After iOS7, iOS fillet uses curvature fillet, applying the concept of curvature in industrial design in the system interface, the excessive curvature is more smooth and comfortable. A detailed introduction can be found in the article “From Rounded Corners to Rounded Corners”.
The largest rounded corners
Find the largest card fillet used in the application and set the fillet size of modules of different sizes from top to bottom based on the largest card. For example 48px, 40px, 32px, 24px, 16px, 12px, 8px.
Proportion of card
Alternatively, you can set the size of the rounded corners based on how much of the screen the card occupies. For example, 1 times, 1/2 times, 1/3 times.
Design details
Pay special attention to the rounded corners in the rounded corners. If the card uses rounded corners, the corner of the label must not be larger than the card rounded corners. In order to make the card carrier more inclusive and visual spacing more harmonious, the corner should be smaller than the card corner.