List

A list arranges multiple items in a single column.

Usage

A list shows multiple items belonging to a single category. Users can select an item from a list to view more details or perform tasks.

Elements

  • List items

    • Text only

      Text that’s longer than one screen slides in and fades out at the right-hand edge. Subtext strings are limited to two lines and need to be center-aligned.

    • Icon with text

      Supplement list items with an icon.

    • Icon only

      Lists can consist solely of icons when providing list buttons.

    • Additional controls

      You can provide an on/off switch, checkbox, or radio button along with the main text.

    • Multi-line item

      Multi-line items provide details of the listed items or other items. By providing details of listed items, this feature can effectively reduce users’ efforts in searching for in-depth details. Detailed text should not exceed one page.

  • Group index

    • An index helps users quickly find the items they want by dividing a long list into groups. Groups can be browsed more easily and can be indexed in alphabetical order, by category, date, or time.

    Group index in developer’s guides
    Native

    		 genlist > Groupindex
    Web

    		 ―

    A group index should fit on a single line and come before the first item of each group. As they’re just used as a visual divider, they can’t be selected. Fast scroll indexes can also be used to facilitate quick browsing.

    A group index divides list items into groups.

    Behavior

    • Focus

      An item comes into focus when it’s brought to the center of the screen. Other items above and below the focus are demagnified.

    • Rotary action

      The bezel or touch can be used to browse a list. Turning the bezel by one detent scrolls the list by one item. Swiping up or down scrolls the list.

      Users can browse lists with the rotary or swiping action.

    • Select mode

      Users can select multiple items by touching and holding one list item.

    • Touch

      Users can slide their finger up or down to browse a list.

    Types

    You can design list pages using one of the following formats. The default height for a list item is 130 pixels, but you can customize it if your list items have subtext.

    Design specs

    • Basic list view

    • List view with subtext

    • List view with multiple subtexts

    • List view with an icon or radio button