Material Design: Shape - tips for improving the GUI application of Android (and not only) by changing the shape of elements

Original author: material.io
  • Transfer


From the translator


Hello. I’m doing this translation because I recently started to work with Shape in Android myself, decided to fumble around material.io , and found this collection of usage tips there. It seemed to me interesting, useful, and informative, so I decided to share it with the Russian segment of mobile application developers.

It seems to me that this topic is quite important, because the use of different forms for interface elements makes the application more interesting, and maybe even more serious.

When the user sees some non-standard implementation (within reason of course) of ordinary interface elements, it catches the eye. In addition, subconsciously, the user of such an application will understand that the developer did not just throw up the components in the editor, but came up with the creativity, came up with something of his own.

I hope that you will be able to benefit from reading, and it is possible to improve the quality of your applications.

Table of contents


Introduction



Hierarchy of Forms



Form as a means of expression



Forms in motion



Introduction


GUI elements in the Material Design style can have different shapes. Custom forms of elements attract the attention of users, make your product more expressive, and improve the impression of use.



Forms of elements


By default, in Material Design all elements are rectangular with rounded corners (4dp). Their shape can be changed by adjusting the following parameters:

  • Corner roundness
  • Degree of sharpness of the corners

Thus, you can either slightly change the shape of the element, or make it completely different.



Customization of the standard form of the Material Design elements.



Application


Focusing attention


Since the uniqueness of forms highlights them on the screen, they can focus the user's attention on its different parts.



This combination of a round button and a rounded bottom panel stands out against the background of ordinary rectangular elements located anywhere on the screen.

Identification of elements


Forms give users the ability to identify interface elements by meaning, to guess their purpose.



Guess about the purpose of these inserts can be in their form.

Status display


You can display a change in the state of elements using forms. When using a form to display a state change, use the same form every time you want to display a state change.



The element partially changes its shape to display the selection.

Branding


To give your brand a recognizable visual style, use forms in combination with other customization methods (for example, color). Small context changes of forms throughout the application will improve the impression of use.



Proper use of form elements in the application helps to improve the impression of its use.



Form Display


Modified shapes are especially visible when their contour contrasts with the background. By default, Material Design uses shadow highlighting to emphasize the shape outline. Other ways to highlight shapes (such as color or transparency) can be used in combination with a shadow.


How to do it The
color of the button fill contrasts with the background, making the button shape noticeable.
How to do it is not necessary The
translucent background of the button and its color worsens the visibility of its shape.




Relationship between elements


Forms can be used to reflect dependencies between interface components. Text or icons can help strengthen the meaning, but only if the form of the element clearly indicates which way to think.


How to do The
drop-down menu has a pointed angle, similar to an arrow pointing to a navigation
bar, showing the connection between these two components.


How to do it is not necessary
Give up using the form if you feel that it creates an ambiguous idea. The cancel button implies a return to the previous stage, while its shape, similar to the “Forward” arrow, creates the false impression that the button takes the user to the next stage.



The need to change the form


The shapes of the components influence their perception by the user. The degree of need to change the shape depends on the following factors:

  • How much a component depends on another component
  • Is the component limited to ergonomic requirements?


How to do it is not necessary.
Do not use forms that make components completely unrecognizable.


How to do it is not necessary
Do not use forms which complicate interaction with the user. This button is too small area of ​​depression.


How to do it is not necessary.
Do not use forms that make components completely unrecognizable. These buttons have the same shape with the inserts above. Because of this, it becomes difficult to distinguish one component from another.



Hierarchy of Forms


Forms can draw attention to important interface elements and display the relationships between components.



Hierarchy design


Unique shapes


Components with unique forms stand out from the rest of the elements, content around, and in the interface as a whole. The form emphasizes their importance and attracts the user's attention.


How to do it
Make the shapes of the components contrast with the environment. The round shape of this button makes it stand out against the background of rectangular elements, and the black color contrasts with the white background.


How to do it is not necessary
The element is more difficult to distinguish from others, if it has the same shape. This button is difficult to notice due to the fact that it is among the elements with the same shape.



Relationship of elements


Joining elements with forms


Forms of elements can help the user to understand how they are interconnected.

Identical elements


The identical form of the elements indicates their interconnectedness and general meaning.

Related Items


If one of the elements complements the other, but is not an exact copy of it, this relationship can be expressed in form. For example, the acute angle of a shape may symbolize an arrow pointing to a related element.

Unrelated items


With the help of the figures, it is also possible to emphasize that the elements are not connected with each other, and work separately.



How to do The
rounded corners of the white element emphasize that it is not associated with purple.
How to do
Here the shape of the button in the lower right corner indicates that it is not associated with the element behind.



How to do it.
The form and size of the cards signal that these elements belong to the same group.


How to do it is not necessary
Do not use the pointing form if the element is not associated with other elements. Here the dialog box has a form pointing to the card behind, giving the impression that they are connected.




Form as a means of expression


Forms can display the status of an item, and make your brand recognizable.

Status display


Forms can display different states of elements, such as selection, the result of data processing, and much more.

Elements Interactivity


To use the forms to display the interactivity of elements, use a change of form at the moment of user interaction with the element. For example, change the shape of an element to display its selection after the user touches it, or mark the selection element with an icon.

Lack of interactivity


If the element is not interactive, you should choose a form for it so that the user does not think that you can interact with this element.


How to do
Changing the form should be clearly related to the specific actions of the user, or other obvious reason. Here the shape of the element changes after the swipe to the right, and the element has a corresponding indicator in the corner.



How to do it is not worth it.
If you want to display the state of an element, do not do it with too small forms of indicators.
How to do it is not necessary
But you should not overdo it with the size. It uses too large form indicator.



Accurately
In some cases, the form of an element can create ambiguity - is this form a state display, or is it just a developer trick? Here, the bent corners of the cards just create such ambiguity. It may not be clear to the user whether the folded corner is an indication that the card is highlighted, or added to favorites. You can resolve this ambiguity in one of the following ways:

  • Assign a change in the angle of the card to a specific user action, selection or addition to favorites
  • remove the imitation of the bending in general, but leave the corner rounding if you want to use it as a chip



How to do it
Use one form to display one state. Rounded corners here represent the selection of cards.
Gently
Here, different forms are used to display one state, which makes it difficult for the user to perceive.




Brand recognition


Formation of brand style using forms


Use forms in combination with other customization options (color and font, for example) to create a visual style for your brand. Repetitive forms will help make your brand unique and recognizable. Your application can also use a set of forms with similar forms for different components. The style of the forms in the set should match the style of your brand.

Style creation


When you create your form style, avoid:

  • Nemekov on interactivity
  • ambiguous forms
  • difficulty using

Mixing different styles makes it difficult to associate any form with your product or brand.

Abuse using


Too frequent use of the form, which was conceived as a feature of the brand, can reduce the degree of its perception as such.


How to do it
Reasonable use of forms contributes to the formation of the visual style of your product. This application uses a form based on its logo.


How to do
This application uses forms similar to the shape of the logo.



Accurate
Too frequent use of one form negatively affects its perception.
How to do it is not necessary
Do not use forms that are not included in the set of forms of your application.



Forms in motion


Forms may change as a result of changing content or user actions.

Application


Forms change is an event that occurs in response to a change in content within a form, a state change, or a user action. For example, when you translate a device in a horizontal position, the interface elements may change their size, which will lead to a change in shape.

The form can also be changed to preserve the visual style of the application, or to display the addition of new objects to a set ( for example, a translator: for example, adding cards to a sheet ).

The main reasons for the dynamic change of form:

  • Item does not fit on screen
  • Disturbed ergonomics
  • Change the meaning of an element
  • Mismatch app style
  • Binding / relationship to another element



How to do it
The form can change in response to other changes in the interface. On the bottom panel, a button cutout appears dynamically.
How to do
The item may reflect state changes. In this application, the form dynamically expands as the selection of cards, while maintaining the rounding of the corner.



Dynamic shape change


Change forms


As the size of the element changes, its shape also changes. It can keep the current position on the screen, but at the same time stretch or shrink.



Dimensions



How to do it.
The form can keep the original dimensions and position when changing. Part “B” retains its original dimensions and position in relation to part “A”, while part “C” is stretched.


How to do it
The element can change its original dimensions to save the form. The height of part “A” changes in proportion to the width of the element in order to maintain the angle of inclination.



Stretching and cutting


Forms can stretch and shrink in response to component size changes. The transformation must maintain the proportions of the original shapes.


How to do this
As you stretch this element, its shape remains recognizable because its distinctive rounded corners retain their original dimensions.


How to do it is not necessary
Avoid deforming elements during the contraction or stretching. The corners of this figure do not retain their original dimensions, but stretch in proportion to the base.



Resizing


Keep the aspect ratio of the shape when resized to avoid distortion.


How to do
The corner radius changes its size in accordance with its initial ratio to the size of the form.



Transformation to another form


The form may change to a completely different.


Gently
Changing the shape to exactly the same, but with different parameters, looks smooth during the conversion process. Changing the form to something other than the original may look strange or ridiculous in the process of transformation.



Content Display


Content Visibility


All content contained in the element must be visible to the user, without clipping, even when changing the form.



How to make
the form elements must be resized in accordance with the content changes, but keeping the original recognition.
How to do it is not necessary
Avoid separating the form from the content. The form of the panel of this application creates a false perception of the buttons separately from the panel itself.



Default form


By default, components in the Material Design style are rectangular. They can transform into something else, and vice versa. For example, a round button can turn into a rectangular menu, and in the opposite direction.

Rectangular shapes provide maximum space for scrolling content and blend with the rest of the shapes on the screen. As a result, the element pays attention to its contents.

Using the standard form, you can add a hint (for example, an expand and collapse icon) to show how to change it.


How to do The
round button is transformed into a rectangular menu to give the content a maximum of space.


How not to do
Choose such forms of unfolding elements that are suitable for the content that they display. This round menu prevents content from being perceived because it retains the shape of the button.


How to do
Maximum space to display the list is achieved by transforming the rounded corner into a standard right angle.

Concentration of attention


Rectangular shapes merge with other rectangular shapes, allowing you to focus attention.


How to do
When the drop-down list is active, the shape of the upper layer removes the rounded corners, reducing the selection among other shapes, focusing the user's attention on the filter settings.




Translator's conclusion


Well, that's all. You probably noticed that some moments were repeated several times, and this is true. This I have removed some very obvious repetitions that are in the original, but I tried to follow the source text as much as possible.

Do you have any thoughts on how you can improve the experience of using the application? I would be glad to read what you think about it in the comments!

Only registered users can participate in the survey. Sign in , please.

Would you be interested to see an article with the programming of the examples given?


Also popular now: