List

List guideline is created on 23 May 2018

A list is a collection of rows that display information on the mobile interface. Lists are continuous vertical indexes of text and sometimes images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.

There are no major structural differences between iOS and Android lists. The forward icon on iOS lists is an indicator and we referenced from Apple’s design guidelines. A notable difference would be the typography on either platforms, we use San Francisco for iOS and Roboto for Android.


iOS

iOS lists are inspired by Apple’s design guidelines. All list components are full-width, and the height for the three variations are 44px, 72px, and 88px. Static labels serve as a guidance to our users while dynamic labels show the state of the user’s chosen value.

iOS List Example

Android

Android lists are inspired by Google Material Design guidelines. All list components are full-width, and the height for the three variations are 48px, 72px, and 88px. Static labels serve as a guidance to our users while dynamic labels show the state of the user’s chosen value.

Android List Example