draft: [design proposal] Increase padding overall, use components closer to Kirigami, use of grids etc
Grids and margin
Use grids throughout the UI to make Voice skills, native Bigscreen apps and the Home screen with Settings be more consistent and readable. We should add more padding around the screen edges and set a "diffuse" region. I'll be explaining this below.
For these examples, we're assuming the display resolution will be 1920x1080@2x as a baseline since it's probably the most common resolution, but as the display resolution and density is scaled everything will look the same.
Margin
First, we need to think about the margin between the main content and screen edge. The diffuse region in the example below is 64px@1x (units.smallSpacing * 16). In this area, content may still present and legible when overflowing the visible area, but not in focus so it should have less visual weight or importance.
The upper margin between the content and the screen edge would still be used as an always displayed header. If non fullscreen UI elements add a scrim to the previous content, it can use less padding as long as the text label stays inside the region. Footers with additional information would be displayed on the lower margin, as much as possible.
This makes it so the information is never obscured to the user but it still gets out of the way.
Grid
The grid isn't a magical or mythical number of lines that are chosen randomly. It should work the way users do, aiding at displaying and organizing the content, be it apps, videos, songs etc. We need to balance the density of information like text and images with the negative background. In a TV environment, we should strive to display content in a way where users don't get stressed with small text and images, or have to keep pressing buttons to continue searching for information.
We want to ideally display two to three lines of cards, which may vary depending on the additional information presented to the user.
Comfort at all times: Our eyes love staying at the vertical center of our vision, where there's less eye strain. Think about the way dense information on museums are written, with content being centered vertically and starting just above the center and titles right above that. Never push important information away from the center.
Control at all times: We must try avoiding making the user feel lost after selecting an option. They should always feel in control of their devices and feel like second nature to use. Went down a row of content? Display part of the previous one on the top, set the selected row at the center and expose the third row so the user knows what to expect. Searched content inside a skill on a search bar? Display a FAB in the diffuse region so users don't have to go all the way up to switch between views or search again.
wip
Expose settings clearly, and when it matters. When selecting an option with settings on the sidebar/drawer, use a scrim on the main content area to bring focus towards the settings. Use the new keyboard highlight style for navigation, and break down the options into Kirigami style cards, which look more interactive then floating components.
- Take weight away from the panel and into the content by increasing the background contrast with smooth gradients so the panel isn't the protagonist on the screen. Add useful information like the time and date.
- More use of typography overall.