"Material Design Visual Design Language" application component designing (i): button

Guo Xiaoxing
Weibo: Guo Xiaoxing's Sina Weibo
Email:[email protected]
Blog: http://blog.csdn.net/allenwells
Github:https://github.com/allenwells

Buttons are made up of text and/or icons, and the text and icons must be easily linked to what is displayed after the click.

Category 1.1 Hover response button for one button

The hover response button (floating action button), which creates a circular button that produces the ink diffusion effect when clicked.

The hover response button is a special type in the promotion action. is a circular, floating, on-screen button that has a series of special actions, often associated with transformations, launches, and its own conversion anchor points.

The hover response button is available in two sizes: Default size and mini size. Mini size is only used to create visual continuity with other elements on the screen.

1.2 Floating button

Floating buttons (raised button), common square paper buttons, will produce ink diffusion effect when clicked.

Design principle of 1.2.1 floating button

The floating button makes the button more visible on the more crowded interface. Gives a layered feel to most flat layouts. When you animate a floating button, the floating button looks like a piece of paper on the page that floats up and shows a good color when clicked.

One screen only recommends using a floating action button to increase its significance. It should only represent the most common operation (the main action button applied should be a circular button, and do not add extra dimensions to the button). The following is a wrong approach.

Floating buttons are often used for positive actions, such as creating, collecting, sharing, browsing, and exploring.

Avoid the following minor destructive actions with the floating action button

• Archive or delete
• Non-specific operation
• Alert or Error
• Restricted tasks such as clipping text
• Controls should be placed in a toolbar, such as volume control or changing font color

1.2.2 Floating button placement on the big screen

About the position of the floating button in a large-screen device such as a tablet.

The floating action button can be attached to an extended app Bar

A floating action button can be attached to a toolbar or a structured element in a single page

The floating action button can be attached to the edge of a single page.

Do not have more than one floating action button on a single screen

Do not associate a floating action button with every element on the screen

1.3 Flat button

Flat buttons (Flat button), the ink diffusion effect after clicking, and the difference between the floating button is no floating effect.

Flat buttons are typically used in dialogs or toolbars to avoid too many meaningless stacks on the page. When you animate a flat button, you should let the flat button remain in the shape of the page and fill the color when clicked.

How to use two buttons

The rules for using the buttons are as follows:

• Full-color icons should be functional and try to avoid them as purely decorative elements.
• The button type should be selected based on the main button, the number of containers on the screen, and the overall layout.
• Choose whether to use a floating or flat button based on the container where the button is placed and the number of stacked layers on the screen. And you should avoid too many stacks.
• A container should use only one type of button. You should mix multiple types of buttons only in special cases, such as the need to emphasize a floating effect.
• Choose to use a flat button or a floating button depending on the specific layout. For a flat button, you should leave enough space (padding) around the interior to make the button visible.

2.1 Buttons in the dialog box

The dialog box uses a flat button as the primary button type to avoid excessive layering.

2.2 Bottom Mount Button

If you need a non-primary, but quick-to-navigate button, you can use the bottom pinning button.

2.3 Icon Switch

The icon is suitable for use on the application navigation bar or toolbar as an action button or switch. The icon switch can show elastic or non-elastic ink diffusion ripple effects within its range.

2.4 Drop-down menu button

The drop-down menu button can be used to control the object state; There are generally two or more states. The button displays the current status and a downward arrow-when the button is triggered, a menu containing all the states pops up around the button (usually underneath). The status in the menu is usually presented as a character, palette, icon, or other form. Clicking on any of the states will change the status of the button display. This shows a common drop-down menu button with a list menu.

Three-button animation design

We usually use the ink ripple effect to achieve the interactive response of the button, and the ink ripple effect shifts from one button to another with the change of focus. The animation of the focus state shows the transition between the normal state and the click state.

When you simulate button state, you can use graphics rotation to represent the animation. Note that the focus state will always be in the animated state

3.1 Flat button Animation design

Flat Light/light Color
Min. Width: DP, Height: DP
Overwrite status: 20% #999, click Status: 40% #999, unavailable status: 10% #999

Flat Dark/dark Color
Min. Width: DP, Height: DP
Overwrite status: 15% #ccc, click Status: 25% #ccc, unavailable status: 10% #ccc

Let's take a look at the actual flat button animation performance

3.2 Floating button Animation design

The floating action button is like an extended object that is active on the screen. The icons inside it may be active.

Raised Light/light Color
Min. Width: DP, Height: DP

Raised Dark/dark Color
Min. Width: h dp, Height:
Normal state: Color 500, Overwrite status: Color 600, click Status: Color 700, unavailable status: 10% #ccc

Let's take a look at the actual floating button animation performance

3.2.1 The focus change of the floating button

Floating button gets focus

The floating button is selected

3.2.2 The switch of the floating button

If there are floating action buttons (for example, tabs) on multiple screens next to each screen, the buttons should be displayed and hidden if the action is different on each screen. If the operation is the same, the button should remain on the screen and, if necessary, be converted to a new position.

For screens with labels, the floating action button should not exit the screen in the same direction as when the screen exits. Otherwise, it can cause visual noise. This will also result in a malfunctioning floating action button on the screen. In addition, it mistakenly implies that the floating action button is at the same Z-level height as the content, rather than at the horizontal height of the UI main element in the root horizontal height.

3.2.3 The deformation of the floating button

The floating action button becomes a toolbar

The toolbar turns into a floating action button when scrolling

A floating action button is able to release the associated action, while pressing the button maintains more than three options, but not more than six, including the original floating action button. If you have two options, that is, your floating action button only pops up another option--choose which action is most important. If there are more than six options, the user may be confused about the selection.

A floating button transforms into a material single page, and the floating action button can be transformed into a material single page, part of the app structure. This magical shift highlights the actions that the button can do.

When a floating action button is deformed, it is converted in a reasonable manner between the start and end positions. For example, do not pass through the other material single page.

The Morph animation should be reversible, changing the new material single page back into a floating action button.

Floating action buttons can be turned into new items that fill the entire screen

Copyright NOTICE: When we seriously to do one thing, we can find the endless fun, colorful technology like the scenery on the road, while walking to appreciate.

"Material Design Visual Design Language" application component designing (i): button