DISTRIBUTION OF TIZEN-BASED WATCH APPS HAS BEEN DISCONTINUED
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.
-
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.
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.
-
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