5.1 KiB
| order | title |
|---|---|
| 3 | List |
Lists are very common UI elements which can be applied to various scenarios:
- Get an overview
- Browse item by item
- Find specific list item
- Sort and filter
- Rearrange, add, delete or re-categorize list items
Interaction
Display Details
Popover: When a user clicks or hovers a link or piece of content, display a small amount of detailed information for the corresponding list item in a floating layer.
Embedding: A user can directly view detailed information in the context via a click, without opening a new page or modal.
Modal: A user can view detailed information in a modal dialog via a click. But it loses the contextual/visual tie to the clicked list item, because, unlike popover and embedding, modal is usually presented in a fixed position regardless of the position of clicked list item.
Dual-Panel Selector: A user can view a large amount of detailed information in a (usually right) panel beside the list.
Full-Window: A user can view a large amount of detailed information in current page. This mode loses contextual/visual tie to the clicked list item, however it is suitable for scenarios where detailed information is completely irrelevant, or screen size is small (i.e. mobile), or list and details are huge.
Display More Text
Text Wrap: Expand certain list item into multi-line text.
Grid: Arrange list items in a grid or matrix where each item shares a similar visual weight.
Display Images
Carousel: Display images in one dimension, scrolling of images can be triggered either manually by user or automatically by system.
Thumbnail Grid: Display images/icons in two dimensions, this approach has strong visual effects which attracts user attention.
Display Long List
Pagination: Load list in a sectioned way, user determines whether to load other list items.
Infinite Scrolling: When user reaches the bottom of the first section, load next section via listening to scroll event or a button click.
Display Categorized/Layered List
