Material Design has gained tremendous traction since its launch at I/O 14, and while most developers these days pack a toolbar and a FAB in their apps, thanks to the automatic AppCompat setup in newer versions of Android Studio, a large number of these Material Design manifestations fall short of what is expected.
Material Design is based on a series of core principles, the laws of the Material world if I may, which define the underlying properties of that world and its occupants, and go beyond to suggest and recommend patterns and styles best suited for apps living in it. Following these principles to the T is far from what’s recommended though, with developers expected to use them as a foundation and go on to build wonderful apps reinforced by their product’s branding on top of them.
Material Surfaces
Tangible Objects
Objects in the Material word are composed entirely of a digital paper material, which forms tangible surfaces that type and icons live on. Respecting the physical nature of these surfaces while designing is a key factor in establishing the Material paradigm within your app. Following this principle is perhaps the easiest of all, since it requires an imagination of a 3-dimensional material world and common sense, but despite its simplicity, respecting and establishing tangibility of surfaces defines the underlying physical world that they live in, strengthening the idea of a paper and ink world. Respecting tangibility involves basic principles like preventing overlapping at the same elevation, allowing surfaces to appear and disappear through appropriate grow and shrink animations, et al.
Hierarchy
The laws of the Material world bring into play a z-index, which enabled objects to elevate themselves and cast a shadow on the object below. Elevated objects are “closer” to the user, and thus are more important in the hierarchy. For example, a Floating Action Button is the most promoted action and has the highest elevation save for the system decor, or an event in the call log is more elevated than its counterparts since it is the one being interacted with. Elevation can be altered using the android:elevation attribute or by using setElevation() on the view, and can be animated using a state list animator as shown. Further reading:
Interaction Cues
Users are often lost in the experience of an app and need certain cues that point them in the right direction. Cues can be anything from the pull-to-refresh indicator following the user’s swipe down interaction or cards fading away as they’re swiped to the sides. One of the best examples of interaction cues is in Plaid, wherein the entire layout begins to scale down when the user attempts to pull it down, revealing the parent view behind and implying that pulling further will finish the current activity. Such transitions can vary over a wide range of parameters, and often involve writing custom views. However, Plaid’s custom ElasticDragDismissFrameLayout is open source and super easy to implement.
Bold Graphic Design
Palette
One of the core features of Material Design is its bright and attractive color palette, a stark contrast to the muted colors that Holo sported. In addition to apps having their primary and accent colors being pre-defined to match Material’s bold standard, numerous apps rely heavily on imagery, and the support library brought a solution for such apps. Called Palette, the library allows views to dynamically set their colors based on the color of the image using a method call. The output is in the form of swatches with muted and vibrant variants of dark and light colors, allowing for a wide variety of permutations. Further reading:
Typography and Keylines
While the concept of aligning content to keylines has gained significant traction in the recent months, the idea that type needs to align to a 4dp baseline grid to provide a consistent, uniform and structured look has been less popular. While playing around with text sizes and line spacing multipliers might achieve the desired result, Google’s very own Nick Butcher has a custom TextView class packaged in Plaid which simplifies this entire process with no extra tweaking needed. Further reading:
Meaningful Motion
Transitions
Transitions are an extremely important part in defining the user’s experience as they navigate across the app. The expansion, fading and moving of elements while transitioning from one state to the other defines their relation and their position within the app’s structure, while at the same time implying their hierarchical level and providing a sense of context to the user. Transitions before Android Lollipop, while easy to write, were extremely limited in nature, but the introduction of API21 brought along with it an entire new transition framework using SharedElements, WindowTransitions and TransitionSets.
- SharedElement Transitions in Activities
- Android’s Transition Framework Tutorial
- Fragment Transitions
Delightful Details
While minor animations aren’t a necessary component in design, Material Design strongly recommends the use of delightful details in the form of small animations that bring pure delight to the user, either through their clever use of lines like Timely’s famous number morphing, or through inter-drawable transitions such as the cross-to-check animation in the Google I/O app. These small details can be implemented either through regular ObjectAnimators, or through more complex methods like SVG animations and frame animations. However, they should be used sparingly and with proper duration, lest they annoy the user instead. Further reading:
Important Links
0 comments:
Post a Comment