New components and changes in Material Design Guidelines
Google just released a new material design guidelines, so I was trying to find what are the difference with the old ones. I just list some new components and changes in the following section and give some introduction and comments. If you are quite familiar previous versions of Material Design, this article will help you get main points of this new version.
1. Bottom App Bars
Material Design now not only have app bars on the screen top but also bottoms app bars.
Bottom app bars should be used for mobile devices only and there is a new navigation drawer, which slides in from bottom when you tap the drawer icon, for the app bars. Bottom app bars cannot be used with a bottom navigation bar. A bottom app bar can be used with 2 to 5 actions. It is forbidden to use it with only 1 or no actions.
It is obvious that this component is trying to provide convenient access to actions for single hand operation. The bottom navigation drawer is also served for the same purpose.
This new component is a nice try, but still have some issues in my personal opinion. First, if you enter the children screens and want to go back to parent screen, you still need to tap the Up button which be put on the top-left corner of the screen and hard to reach while you interact with a single hand. The Up button is forbidden to put on bottom app bars.
Second, it is no so clear where we should put the overflow (more) icon. Take the image below as an example, the overflow icon is put on top-left corner, but why is it not placed at the end of other actions? What situation should we put overflow icon on the top-left corner and when should we put it in the action bar?
Third, I hope the image below just a mistake, is it required to show navigation drawer icon in the children screens always? We assume that is a mistake, then if users go into a deeper level, how can they reveal bottom navigation drawer? In the case of using top app bars, users can evoke modal navigation drawer (in the left side) via swipe right from the edge of the screen. But now, because bottom navigation drawer slides from bottom to up, I think users cannot swipe right, but is it support swipe up from the bottom edge of the screen to evoke the drawer? It seems impossible because there is a navigation bar below. If it is not a mistake, then the hierarchy seems no quite right because other actions are for this screen but drawer button is not. Maybe it need a divider between them or other layout.
Fourth, the headline also can be put into bottom app bars, but it seems not so good for navigation purpose because visual flow will be from the bottom first and then jump to the top.
2. Bottom Navigation Drawer
In addition to 1) Standard navigation drawers, which can be used on tablet and desktop only and 2) Modal navigation drawers, using a overlay to block interaction with the rest of an app’s content on mobile, now Material Design has 3) Bottom navigation drawers, which are a specialized type of modal drawer for use with a bottom app bar for increased reachability from the bottom app bar’s menu icon.
A backdrop is a new design in Android, but probably you will immediately associate it with iOS Modal View while composing a new email and swipe it down to view other emails. But Android’s backdrop is quite different because the back and front layer are related to each other. When you take an action in the back layer, the content in the front layer will be changed. A backdrop’s main purpose is displaying contextual and actionable content.
When the back layer is hidden, it can provide contextual information about the front layer. When revealed, the back layer displays contextual controls that relate to the front layer; in the meantime, the front layer can have text and icon, or a mask covered, as hints providing a way to hide the back layer.
The front layer can contain browsing components, such as: 1) Text lists, 2) Image lists, 3) Cards, and 4) Text.
The back layer contains components for navigation or filtration, such as: 1) Navigation, 2) Steppers, 3) Text fields, and 4) Selection controls. These components affect content on the front layer.
I think the Backdrop is an excellent design because it has lots of flexibility to fit many requirements and scenarios, and also it helps users to understand the context. I have only one concern on the way of hiding the back layer (revealing the front layer). It is forbidden to swipe down and up the font layer to show/hide the back layer in the guidelines, but the transition animation is a kind of hint that it supports swipe gesture. In our physical world, if there is a paper covered on an object, you definitely can push the paper away.
Users can also scroll the active back layer or font layer to see the content.
Banners are displayed at the top of the screen, below a top app bar. If you are an Android device user, you probably have seen this design in Google apps. Now it also appears in the guideline officially.
The purpose of banners is communicating messages which are important but don’t require user immediate action allowing the user to ignore. But banners do require a user action to be dismissed, so they are more prominent than snackbars, and less interruptive than dialogs.
5. Outlined Buttons
Outlined Buttons ,which has been seen in Android apps, now are added into guidelines. In the meantime, the guidelines for buttons are more detailed and comprehensive now.
There are 4 types of buttons:
1) Text Buttons: used for less important actions. 2) Outlined Buttons: have more emphasis due to the stroke comparing to text buttons. 3) Contained buttons: have high emphasis because of using a color fill and shadow. 4) Toggle buttons: group a set of actions using layout and spacing.
In addition to Input Chips which have been defined in the guidelines before, we have Choice Chips, Filter Chips and Action Chips. Like Buttons’ visual style, Chips also have outlined and contained chips.
1) Input Chips: Input Chips represent information used in fields, such as an entity or different attributes.
2) Choice Chips: In sets that contain at least two options, choice chips represent a single selection.
3) Filter Chips: Filter Chips represent filters for a collection, so they can be multiple section.
4) Action chips: Action chips trigger actions related to primary content.
Choice Chips, like dropdown menus and radio buttons, served for a single section. But Choice Chips have better usability than dropdown menus because the options are visible without tapping and save more space compared to radio buttons which need many rows for the list.
Chips as filters have been quite often seen in many apps. Some times they are also used as toggles to filter search results in real-time. Or during on-boarding process as multiple section components, chips are used for selecting topics that users are interested.
Action chips, in the example below, can be on/off toggle or triggers for a dialog of settings. I think Action chips may also be tappable tags used as search conditions. Users can tap them to go to the results screen showing the information with that tag.
7. Middle Dividers
In addition to 1) Full-Bleed Dividers, used for separating distinct content into sections and 2) Inset Dividers, used for separating related content, now material design has 3) “Middle Dividers”.
Middle Dividers are similar to Inset Dividers. Both of them are used for separating related content. The difference is Middle Dividers are centered in a layout or list with right and left margin, but Inset Dividers anchored by elements that align with the app bar title.
8. Image Lists
Image Lists, in the past were called Grid Lists, now also have more types being defined into guidelines.
1) Standard Image Lists, best for items of equal importance, have a uniform container size, ratio, and padding.
2) Quilted Image Lists, emphasizing certain items over others in a collection, use varied container sizes and ratios to create hierarchy across images.
3) Woven image lists, best for browsing peer content, use alternating container ratios to create a rhythmic layout.
4) Masonry image lists, being best used for browsing uncropped peer content, use dynamically sized container heights that reflect the aspect ratio of each image.
9. Standard Bottom Sheets
In addition to Modal Bottom Sheets, there is a new bottom sheets, called Standard Bottom Sheets, displaying content that complements the screen’s primary content. It remains visible while users interact with the primary content.
Standard Bottom Sheets in some way like backdrops because of 2 layers. However, you can interact with the back and front layer in the same time in Standard Bottom Sheets, but there is only one active layer in the backdrop.
10. Side Sheets
Side Sheets seem like Navigation Drawers; they just slide in from different directions. But in fact, they are different because of serving different purposes. Side Sheets display a list of actions that affect the screen’s primary content, like filters, or supplemental content and features.
There are 2 types of side sheets: 1) Standard side sheets, mainly used on desktop and tablet, remain visible while users interact with primary content; 2) Modal side sheets, used on mobile due to limited screen size, must be dismissed to interact with the underlying content.
11. Text Fields
To my surprise, the classic, first generation of text fields is removed from Material Design Guidelines. Now we have 1) Filled Text Fields, which have been shown in Android O, 2) Outlined Text Fields, the third generation, work well with Outline Buttons for app’s visual style consistency.
I think the first generation of text fields are abandoned gradually because they do not have a container providing a clear affordance and lead to less discoverable. Also, the style of text fields are hard to apply to text areas. It is not so matched if the text fields and text area appear in the same time. (Even though you can use multi-line fields instead of text areas, the fields still lack affordance to indicate they can input multiple lines)
12. Other Tiny Changes
Snackbars and the focused category in the navigation drawer have round corner and margin now. Toasts are removed from guidelines. Reorder grip icon becomes 2 lines from 4 lines. Overflow menu on the app bar now is not covered on overflow icon directly. The value indicator on discrete slider look like a drop connected to the slider thumb.
Bottom Navigation Drawer and Bottom App Bars are for easy access to actions. A Backdrop displays contextual and actionable content. Banners communicate messages in a mildly-interruptive way. Outlined Buttons have middle importance comparing to text buttons and filled buttons. Middle Dividers are used for separating related content. Image Lists have 4 types, standard, quilted, woven, and masonry. You can interact with Standard Bottom Sheets and the content behind in the same time without dismissing sheets. Side Sheets display content that complements the screen’s primary content. Text fields have Filled Text Fields and Outlined Text Fields; both of them have a container to have better discoverable. There are some tiny changes on Snackbars, Reorder Icon, Overflow Menu and Discrete Slider.
One more thing, Google provides a Material Design customization tool, called Material Theme Editor. It is a Sketch plugin. You can use it to create a design which is better reflecting your brands. Now Material Design has more flexibility on typeface, shape of buttons, and icons. So it is time to say goodbye to All-Look-The-Same design.
If you like this post then share this post with your friends and developers tel me in the comment what you want in the next post
More where this came from
This story is published in Noteworthy
, where thousands come every day to learn about the people & ideas shaping the products we love.
Follow our publication to see more product & design stories featured by the Journal