Material Design needs no introduction. Its priceless contribution to enhanced user experience is transparently documented. This Android-oriented design language and Google-supported protege flexes its contribution to feature-rich onscreen touch experiences through natural motion. The endgame of Material Design has always been to mirror real-world objects attributed to realistic animations and lighting features that intend to produce appealing 3D effects.<\/p>\n
Google\u2019s Material Design 3 (M3) got its fair share of the spotlight during the 2021 Android Dev Summit. Through Material You; Google\u2019s updated Material Design language version, Android 12 users are first in line to experience this design system\u2019s adaptive user interface. The expressiveness of Google\u2019s Material Design 3 showcases several updated libraries, components, and guidelines.<\/p>\n
M3 color schemes are responsible for Android 12 devices\u2019 dynamic color ranges. Through customization settings like wallpaper generation, it is possible for an Android 12 user to work with individualized color schemes. In this case, users have the flexibility of customizing their visual experiences such that the app colors and the user-generated colors can mutually co-exist.<\/p>\n
Dynamic color implementation can be broken down into three segments:<\/p>\n
When a user enables dynamic color<\/em> under their personal wallpaper selection, they will have initiated user-generated schemes on an individual device level. Built-in apps (e.g. clocks and calculators) and Settings are examples of system UI components that can reflect the user-generated color preferences.<\/p>\n Users that prefer their apps to operate under a dark or light theme will benefit from the default colors the baseline color scheme offers. User-generated color schemes are seamlessly accepted by the Android system apps as a result of tone relationships<\/em> and color roles<\/em> attributes that define the baseline scheme structure. Therefore, apps can ignore the baseline color values and go with user-generated color schemes.<\/p>\n While dynamic colors are good for an app\u2019s thematic lifespan, custom colors ensure that these apps do not lose their thematic meaning through the reservation of specific additional color roles. With dynamic color and baseline scheme already existing, custom\/semantic color adds some flexibility to interface design.<\/p>\n Devices with flexible screens have a lot to gain from this feature. The objective is to have the folding and unfolding actions of flexible screens reserve the much-needed screen space instead of making it unavailable.\u00a0 For an app to be adaptable to a foldable screen design, it needs to pass through some considerable conditions and constraints.<\/p>\n A folded smart device depicts the outlook of a smartphone while an unfolded one depicts the outlook of a tablet. This outlook comparison is in relation to the screen space with anticipated conditions of 4-6 inches for the smartphone and 8-10 inches for the tablet.<\/p>\n Regardless of a smart device\u2019s posture (folded or unfolded), scalable content should be under a comfortable and adaptable viewing distance of 12-20 inches.<\/p>\n An adaptable and automated landscape or portrait screen orientation should be initiated upon any screen folding or unfolding action. It helps scale the displayed content for a comfortable viewing angle.<\/p>\n Since user interactions like typing can be discouraging on an unfolded screen and encouraging on a folded screen, users have the flexibility of limiting their screen actions to one-hand or two-hand interaction.<\/p>\n 25% of unfolded screen display areas tend to be unreachable to most users. Several factors add up to this user limitation including the size of the users\u2019 hands or fingers. Therefore, this 25% upper screen area should accommodate limited user interaction actions. Also, the screen\u2019s bottom edge should only accommodate non-essential interactive elements. With such implementations, a user should be able to comfortably reach the targeted areas of their device\u2019s screen without straining.<\/p>\n Since this area of a smart device initiates the folding action of the screen, a UI design of an unfolded screen should not have essential elements or information alongside the center hinge (48dp).<\/p>\n Style values such as fonts and colors need to be implemented easily and consistently across usable platforms, designs, tools, and codes. By storing such style values, tokens help achieve this objective. The use of hardcoded values is sidelined to ensure the design system\u2019s products are built, scaled, and maintained in a streamlined manner. Color and typography values in Material Design now embrace the use of the system and reference tokens.<\/p>\n With tokens, the need for hex codes static values for colors is no longer a requirement. Design tokens enable you to identify and reference the design color you wish to implement via self-explanatory terminologies. Also, implemented style choices and changes are easy to record and track due to the design token\u2019s repository-like feature. An entire product consistently benefits from an implemented style update.<\/p>\n2. M3 Baseline Color and Token<\/h4>\n
3. Custom Colors<\/h4>\n
Foldable Devices Design<\/h3>\n
1. Size<\/h4>\n
2. Content Viewing Distance<\/h4>\n
3. Screen Orientation<\/h4>\n
4. Ergonomics<\/h4>\n
5. Reachability<\/h4>\n
6. Center Hinge<\/h4>\n
Design Tokens<\/h3>\n
Final Note<\/h2>\n