mozilla
您的搜索结果

    Responsive Navigation Patterns

    这篇翻译不完整。请帮忙从英语翻译这篇文章

    Need some help designing your app's navigation? These patterns are a great place to start. The following present several ways to handle navigation on large and small screens. Top and left navigation menus are common on larger screens, but are often not the optimal way to present information on small screens because of the reduced screen real estate. Therefore, it is necessary to consider the presentation of content and ease of navigation for all screen sizes.

    Note: HTML/CSS for the corresponding patterns will be available soon.

    模式1: Top toggle menu

    In this pattern, as the screen width is reduced, the top navigation items rearrange until there is not enough space. At that point, some items move from the top navigation to a drop-down menu. In the smallest screen, all navigation items live in a toggle menu, and the user has to tap to expand the toggle menu.

    You could rank the item priorities to ensure the most important items always appear in the top navigation.

    Pros:

    • one button in header maximizes space for content on a small screen
    • important items stay visiblein most screen sizes and you decide the item priorities
    • legibility of navigation items is maintained with adequate spacing, by automatically hiding items that don't fit

    Cons:

    • navigation items might be less discoverable because some items are hidden in the drop-down or toggle menu
    • users may not notice the button contains a navigation menu in the smallest screen size
    • one more step is needed to access the hidden navigation items

    wide UI layout with top toggle menu and three by two layout of content blocks

    moderate width UI layout with top toggle menu and two by three layout of content blocks

    moderate but short UI layout with top toggle menu and size content blocks in a scrolling strip

    narrow mobile layout with top toggle menu and smaller content blocks in two by three layout

    模式 2: Expandable bottom menu

    Similar to the first pattern, the top navigation items rearrange for smaller widths until there is not enough space. At that point, some items move from the top navigation to a drop-down menu. You could rank the item priorities to ensure the most important items always appear in the top navigation.

    In the smallest screen, several items stay on the bottom of the screen, and the rest of the items are hidden. The user can flip the menu open and select from the rest of the navigation items. You could select the items that remain on the bottom.

    Pros:

    • expandable menu is easy to discover
    • important items are always visible and you decide the item priorities
    • legibility of navigation items is maintained with adequate spacing, by automatically hiding items that don't fit

    Cons:

    • one more step is needed to access the navigation items that are hidden
    • navigation items might be less discoverable because some items are hidden
    • less space for content in the smallest screen size

    wide layout with top horizontal menu bar, which moves to the bottom of the content when the layout gets narrower

    moderate layout with top horizontal menu bar, which moves to the bottom of the content when the layout gets narrower

    moderate but short layout sees the top menu bar moving to the bottom of the page so it doesn't get in the way of the content so much.

    narrow screen mobile layout sees the top menu bar moving to the bottom of the page so it doesn't get in the way of the content. It can be dragged up to reveal the menu options.

    模式 3: Left hidden menu

    The main navigation is always on the left except in the smallest screen size, where the navigation menu is hidden in a button by default. In the smallest screen, when the user taps the button, the navigation menu slides into view and displays the navigation items.

    Pros:

    • potentially displays more navigation items in a left navigation compared to a top navigation
    • most items are always visible except in the smallest screen size
    • one button in header maximizes space for content on a small screen

    Cons:

    • navigation items might be less discoverable because some items are hidden in the drop-down or toggle menu
    • users may not notice the button contains a navigation menu in the smallest screen size
    • one more step is needed to access the navigation items that are hidden

    wide UI layout with vertical navigation menu down the left hand side

    moderate layout with vertical navigation down the left hand side and narrower content area

    moderate but short layout with vertical navigation down the left hand side and narrower content area

    narrow mobile layout with hidden left hand menu, which can be dragged onto the screen using a special button to reveal the menu options.

    文档标签和贡献者

    Contributors to this page: liminjun
    最后编辑者: liminjun,