[null,null,["最后更新时间 (UTC)：2025-07-27。"],[],[],null,["# Navigation on TV\n\nTV devices provide a limited set of navigation controls for apps.\nTo create an effective navigation scheme for your TV UI, consider these\nlimited controls and how the user navigates using remote control buttons\ninstead of a touch screen. \n\nHighlights\n----------\n\n- The controller offers limited navigation capabilities -- up-down-left-right -- so pay attention to how this can shape your app's UI design.\n- Navigation should feel natural and familiar.\n- Create a simple navigation experience with the remote's back button.\n- If a user doesn't have a straight path to get to a control, consider relocating it.\n\nPrinciples\n----------\n\nThe goal is for navigation to feel natural and familiar without dominating\nthe user interface or diverting attention from content. The following\nprinciples help set a baseline for a consistent and intuitive user\nexperience across TV apps.\n\n\n### Efficient\n\nMake it fast and simple to get to content. Users want to access content quickly,\nusing a minimal number of clicks. Organize your information in a way that\nrequires the fewest screens. \n\n### Predictable\n\nFollow best practices and recommendations to make navigation predictable to\nusers. Don't reinvent navigation patterns unnecessarily, as this leads to\nconfusion and unpredictability. \n\n### Intuitive\n\nMake navigation simple enough to seamlessly support widely adopted user\nbehaviors. Don't over-complicate by adding unnecessary layers of navigation.\n\n\u003cbr /\u003e\n\nController\n----------\n\nControllers come in a variety of styles, from a minimalist remote control\nto complex game controllers. All controllers include a directional pad (D-pad)\nplus select, home, and back buttons. Other buttons vary by model.\n\n- Directional pad (D-pad) - The primary navigation method on TV is through the D-pad, which includes up, down, left, and right directional hardware buttons.\n- Select button - Selects the on-screen item with focus. Press and hold can be used to show more options.\n- Home button - Takes the user to the system Home screen.\n- Back button - Gives users a way to return to the previous view.\n- Microphone button - Invokes either Google Assistant or voice input.\n\n| **Note:** The remote control shown here is for reference only. There are many layouts and styles of remotes and controllers, though all of them have the basic functionality described here. For more information, see [Manage TV controllers](/training/tv/start/controllers).\n\n### D-pad navigation\n\nOn a TV device, users navigate using a 4-way D-pad: up, down, left, and right.\nTo build an optimal TV app, design a navigation scheme where the user\ncan quickly learn how to use your app with the four arrow keys. The\nD-pad moves focus from one element to the nearest element in\nthe corresponding direction.\n\nTo test your app's navigation works well with a D-pad on a TV device,\nconsider the following:\n\n- Ensure a user can navigate to all focusable elements on the screen.\n- Ensure that the navigation direction is straightforward and predictable.\n- For scrolling lists, make sure the D-pad up and down buttons scroll the whole list and each list item can be selected.\n\n### Home button\n\nPressing the home button always takes the user back to the Google\nTV Home or Launcher. The current app would suspend in the background\nby default.\n\nLong pressing on the home button displays the system dashboard on Google\nTV and apps grid on Android TV. Default behavior may vary according\nto manufacturer.\n\n### Back button\n\nFor consistency across apps on the platform, ensure the\nbehavior of the back button follows these guidelines.\n\n#### Use predictable back button behavior\n\nTo create a predictable navigation experience, when the user\npresses the remote's back button, take them to the previous destination.\nUltimately, the user should land on the Google TV Home or Launcher\nif they keep pressing the back button.\n\n\n**App with top navigation**\n\nUser is taken back to the top of the page by scrolling quickly and activates the\nfocus to the menu.\n\n**App with left navigation**\n\nThe left side menu is activated and the user's focus is taken to the active menu\nitem.\n\n\u003cbr /\u003e\n\nEnsure that the back button isn't gated by confirmation screens or part\nof an infinite loop. \ncancel\n\n### Don't\n\nAvoid exit gating. Users should be able to exit out of the app without any confirmation.\n\n#### Don't display a back button\n\nUnlike on handheld devices, the back button on the remote is used to\nnavigate backward on a TV. It's not necessary to show a virtual back\nbutton on the screen. \ncancel\n\n### Don't\n\nAvoid showing a back button on the screen. Users can use the back button on the remote.\n\n#### Show cancel button, if necessary\n\nIf the only visible actions are confirming, destructive, or purchase actions,\nit's good practice to have a Cancel button that returns to the previous\ndestination. \ncheck_circle\n\n### Do\n\nDisplay a cancel button -- when needed -- to let the user navigate back to the previous page.\n\nNavigation architecture\n-----------------------\n\n### Fixed start destination\n\nThe first screen the user sees when they launch the app from the\nlauncher is also the last screen the user sees when they return to\nthe launcher after pressing the back button.\n| **Note:** Some apps display a splash screen while preparing the main app UI. Don't include a splash screen in the backwards navigation.\n\n### Deep linking simulates manual navigation\n\nWhether deep linking or manually navigating to a specific destination,\nusers can use the back button to navigate from anywhere in the app to\nthe start destination.\n\n\nDeep linking into an app from another app simulates manual navigation. For\nexample, if the user goes directly to a details page on the Moviestar app from\nGoogle TV and then presses the back button, they are taken to the home page of\nthe Moviestar app.\n\n\u003cbr /\u003e\n\n| **Note:** This does not apply when launching from the Live Tab for direct playback. See the Live Tab navigation section for details.\n\n### Clear path to all focusable elements\n\nLet users navigate your UI with a clear direction. If there isn't a\nstraight path to get to a control, consider relocating it. \ncheck_circle\n\n### Do\n\nPlace controls, like the search action, in locations that don't overlap with other clickable elements. \ncancel\n\n### Don't\n\nAvoid layouts that contain controls in hard-to-reach places. Reaching the search action shown here is not easy to manage with the D-pad.\n\n### Axis\n\nDesign your layout to take advantage of horizontal and vertical axes.\nGive each direction a specific function to make it fast to navigate\nlarge hierarchies. \ncheck_circle\n\n### Do\n\nCategories can be traversed on the vertical axis, and items within each category can be browsed on the horizontal axis. \ncancel\n\n### Don't\n\nAvoid complex and nested layout hierarchies."]]
