リスト

List

目的・詳細

リストはテキストやアイコンなど一連の同じグループが連続して並ぶときに使用します。 主に一覧性を保つために使用されますが、押下するとアクションを引き起こすものもあります。
使用される場面や引き起こされるアクションによってパターンが分かれます。 ユーザーが迷わずアクションできるよう、リスト内の情報には適度な強弱をつけましょう。
メニューで使用されているリストコンポーネントです。押下した際に引き起こされるアクションによって右側に配置されるアイコンが異なります。 メニューリスト メニューリスト

History List

履歴関連一覧のリストコンポーネントです。 使用されるサービスや場面によって、履歴の内容や必要となる情報が異っています。 押下時に詳細画面に遷移することができるため、アローアイコンを右側に配置しています。 リスト リスト リスト リスト

Charge Detail List

明細一覧のリストコンポーネントです。 「アロー有り」は、押下すると明細の詳細画面に遷移することができます。「アロー無し」は遷移やアクションが行われず、コンポーネント内で情報が完結しています。
使用されるサービスによって、必要な情報や表示方法が異なります。 情報の有無により明細の状態が変化し、それによりコンポーネントの高さが変わります。
リスト リスト