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.

    Basic list view,  List view with subtext, List view with multiple subtexts

    List view with an icon, List view with check boxes, List view with radio buttons


    Multi-line item

    Design specs

    • Basic list view

    • List view with subtext

    • List view with multiple subtexts

    • List view with an icon or radio button