[null,null,["最后更新时间 (UTC)：2025-07-27。"],[],[],null,["# Focus system\n\nUnlike touch interfaces, TV heavily relies on different main states\n(default, focused, pressed) to draw the user's attention to the focused\nelement. This serves as the starting point for navigation.\n\nHighlights\n----------\n\n- A focus system consists of sections of focusable elements.\n- Focus indicators are visual devices that emphasize focused elements.\n- Scale indication adjusts an element by x factor when focused or selected.\n- While background color is static, surface color can change when focused.\n\nFocus\n-----\n\nFocus is the key state definition for TV design. Navigation is constrained\nto D-Pad interactions available on the remote control. Users can use arrow\nkeys to move, center button to select, and back key to return. The remote\nallows users to move through one interaction at a time. The state change\nof an element is represented using focus indicators to aid the user in\nvisualization.\n\nFocusable elements and groups\n-----------------------------\n\n\"Focusable elements\" are an integral part of the TV interface.\n\"Focusable elements\" can be any component such as buttons, cards, list items\nor a custom defined surface. At any given time, users should be able to focus\non only one focusable element.\n\n\"Focusable groups\", on the other hand, contain one or\nmore \"focusable elements\". There can be any number of nested\n\"focusable groups\". Focusable groups are used to logically group different\nfocusable elements for user friendly navigation.\n\nFocus indicators\n----------------\n\nFocus indicators are a distinct visualization of a focused element.\nWhen an element is selected, it enters a \"pressed\" state until the remote\nbutton is released.\n\nEach state of a focusable element is configured by adjusting the\nfollowing properties:\n\n- **Scale** --- Change the size of a focused element\n- **Border** --- Draw an outline around the element\n- **Glow** --- Create a shadow under element (commonly used on cards)\n- **Colors** --- Change element background and content color\n\n| **Tip:** Mix and match these properties to achieve different effects for different contexts.\n\n### Scale indication\n\nScales the element when focused or selected. Default scaling values\nare: 1.025, 1.05 and 1.1x. Use this indication for clear feedback on\nnavigation. The scaling values for different elements can vary based\non their size.\n\n### Glow indication\n\nAdds a diffused glow or shadow around the element. Glow indication takes the\nfollowing parameters:\n\n1. Glow level: suggests elevation of the element, ranging from 2dp - 32dp\n2. Glow color: can be specified according to image or brand color\n\n### Outline indication\n\nAdds an outline around the element independent from the border. The outline\nindication uses the following parameters:\n\n1. Outline width: forms outside the element\n2. Outline inset: spacing between the element and its outline\n3. Outline color: can be specified according to image or brand color \\\\\n\n### Color indication\n\nElements can change state by adapting to colors. The color\nindication uses the following parameters:\n\n1. Background color: Changes the surface color of an element\n2. Content color: Changes the color of content over a surface\n\n### Tonal elevation\n\nWhile background color is static, surface color can change. Surfaces\nat elevation levels +1 to +5 are tinted via color overlays\nbased on the primary color. This introduces tonal variation\nto the surface baseline.\n\nTonal surfaces provide many benefits:\n\n- Create the effect of elevation to create differentiate the various elements and text\n- Establish contrast for accessibility benefits\n- Create visual engagement, and soften transitions between interactive elements\n\n### Disabled\n\nIn disabled state, the background color and opacity display a\nlower prominence to express that the object is not clickable.\n\nUse cases\n---------\n\nA focusable element has the 3 main states: default, focused and pressed,\nwith additional states: enabled, disabled and selected forming a matrix.\n\n### Cards\n\n| | Default | Focused | Pressed |\n|---------|---------|---------|---------|\n| Enabled | | | |\n\n### Buttons\n\n| | Default | Focused | Pressed |\n|----------|---------|---------|---------|\n| Enabled | | | |\n| Disabled | | | |\n\n### Chips\n\n| | Default | Focused | Pressed |\n|---------------------|---------|---------|---------|\n| Enabled | | | |\n| Enabled + Selected | | | |\n| Disabled | | | |\n| Disabled + selected | | | |"]]
