Button

ボタンは、ユーザーがタッチ、音声、テレビのリモコンでアクションを起こせることを視覚的に伝えるものです。ボタンにはテキストまたはアイコンを使用できますが、同時に両方を使用することはできません。ボタンは、ユーザーがその瞬間に実行できる1つのアクションを簡潔に記述・描写する必要があります。たとえば、ユーザーが複数ステップのレシピスキルを見ている場合、スキルエクスペリエンスでは画面下部に次へボタンと戻るボタンを表示して、ステップ間を移動できるようにします。

Button screen

ボタンの使用方法

ユーザーが音声またはタッチによって実行できるすべてのアクションに対してボタンを提供します。

4種類のテキストボタン

  • contained: ほとんどの場合、ユーザーに取らせたい主要なアクションに使用します。これらのボタンは、背景とは異なる色のレイヤーで塗りつぶされています。
  • outlined: ユーザーが実行できる第2アクションに使用します。これらのボタンは背景色と同じ色で、ボタンのテキストが太線で囲まれます。
  • ingress: 「次へ」、「はい」、「確認」などのアクションに使用します。 これらのボタンはcontainedと同じパターンを使用しますが、色スキーマは異なります。
  • egress: 「戻る」、「いいえ」、「拒否」などのアクションに使用します。 これらのボタンは、本体が透明な枠線のみのパターンを使用します。

Icon Button

アイコンでアクションを表すボタンで、テキストは付随しません。アイコンボタンは、ヘッダーのナビゲーションやメディアの再生・一時停止など、簡単に認識できるアクションに使用します。

抽象的またはわかりにくいアクションの場合は、代わりにテキストボタンを使用します。

アイコンボタンの状態

ベストプラクティス

  • ボタンのテキストは、ユーザーがエクスペリエンスで実行できるアクションを1~3語で簡単に説明します。
  • 画面が見づらくならないよう、ボタンの数を最小限に抑えます。画面上のタッチ対象は、コンテンツに応じて1~4個にします。
  • ボタンは、ユーザーが実行できる主要なアクションを表すものです。エクスペリエンスで可能なすべてのアクションを表示しようとしないでください。
  • 携帯電話、タブレット、そのほかの携帯デバイスのエクスペリエンスの場合、タッチ対象は48dp(密度に依存しないピクセル)以上にしてください。Amazonでは、一定の距離を置いて使用するハブデバイスやそのほかのデバイスでは、68dp以上のタッチ対象を推奨しています。

アクセシビリティ

目の不自由なユーザーがスクリーンリーダーを使用する場合に備えて、各ボタンにはアクセシビリティ対応のラベル(accessibilityLabel)を提供します。このラベルは、ボタンの機能を簡単に説明するものです。画面下部にある戻るボタンと次へボタンの場合、アクセシビリティラベルは次の例のようになります。

試してみる

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

開発者向けドキュメント