Lists

リストには4つの種類があります。

  • Test list
  • Image list
  • Grid list
  • Paginated list

Text list

テキストリストは、スクロールレイアウトで項目を表示します。名前、タイトル、連絡先、やることリストなど、主にテキストベースの情報を表示するのに使用します。

テキストリストには次の要素が含まれます(番号はスクリーンショットの数字に対応しています)。

  1. ヘッダー
  2. テキスト
  3. 順序数
  4. 区切り線

項目の選択

リスト項目をタップまたは音声で指定すると、アクションが有効になります。たとえば、リスト項目を選択して、詳細ページに移動したり、キーボードを開いたりできます。

スクロール

テキストリストは、テレビオーバーレイを除くほとんどのViewportプロファイルで縦方向にスクロールします。ユーザーがコンテンツをスクロールすると、リスト項目はヘッダーの背後にスクロールします。

スワイプアクション

スワイプアクションを使用すると、デバイスエクスペリエンスの場合は画面のスワイプ、テレビエクスペリエンスの場合はボタンの選択により、リスト項目に対してアクションを実行できます。リストからの削除、チェックリスト内の項目の完了、アーカイブなど、リスト項目に対するすばやいアクションを追加するためにスワイプアクションを使用します。リスト項目へのアクションの状態はカスタマイズできます。

Image list

Image Listテンプレートには、画像のコレクションが一貫したレイアウトで表示されます。画像リストは、テキストでの説明よりも画像の方がわかりやすい項目に使用します。画像リストを使用すると、レシピ、写真のカテゴリー、映画タイトルなど、コレクション内の項目にすばやく目を通して比較できます。

画像リストには次の要素が含まれます(番号はスクリーンショットの数字に対応しています)。

  1. ヘッダー
  2. 画像リスト項目(画像、順序数、第1テキスト、第2テキスト、第3テキストが含まれます)
  3. フッター

項目の選択

リスト項目をタップまたは音声で指定すると、アクションが有効になります。たとえば、リスト項目を選択して、詳細ページに移動したり、キーボードを開いたりできます。

スクロール

画像リストは横方向にスクロールします。

画像のアスペクト比

画像リストに使用可能な画像アスペクト比は7つあります。

:これらのアスペクト比は、グリッドリストでも使用できます。

Grid list

Grid Listテンプレートは、縦方向にスクロールするグリッドにコンテンツを表示します。グリッドリストを使用して、複数のリスト項目を、より高密度な形式で表示します。複数列の縦スクロールグリッドリストでは、画面上により多くのコンテンツが表示され、横スクロールのImage Listテンプレートと比較して、複数の項目を一度に比較できます。

: 円形デバイスのViewportプロファイルの場合は、代わりにPaginated Listテンプレートを使用します。

グリッドリストには、次の要素が含まれます。

  1. ヘッダー
  2. 画像リスト項目(画像、順序数、第1テキスト、第2テキスト、第3テキストが含まれます)

項目の選択

リスト項目をタップまたは音声で指定すると、アクションが有効になります。たとえば、リスト項目を選択して、詳細ページに移動したり、キーボードを開いたりできます。

スクロール

グリッドリストは縦方向にスクロールします。スクロール中、ヘッダーは固定されます。

良い例

horizontal divider line

5個以上の項目がある場合は、グリッドリストを使用してコンテンツを表示します。

悪い例

horizontal divider line

項目が4個以下の場合は、グリッドリストを使用しないでください。代わりに、Image Listテンプレートを使用します。

ページ付リスト

ページ付リストは、一連の画面で一度に1つの画像を表示します。ページ付リストは、項目を全画面の画像として表示します。ユーザーは、スワイプすることでリスト内を移動できます。ページカウンターは、リスト内の総ページ数と現在のページを表示します。

ページ付リストは通常、円形デバイスのViewportプロファイルに使用されます。

ページ付リストには次の要素が含まれます(番号はスクリーンショットの数字に対応しています)。

  1. ヘッダー
  2. 背景
  3. 第1テキストと第2テキスト
  4. ページカウンター

良い例

horizontal divider line

レイヤーや背景オーバーレイを使用して、テキストを読みやすくします。

悪い例

horizontal divider line

レイヤーや背景オーバーレイを省略すると、テキストが読みづらくなります。

試してみる

APLドキュメントの作成と編集を参照してください。

開発者向けドキュメント