バナー

hero

概要

バナーは、特別なアプリ エクスペリエンス、新機能、重要なメッセージを紹介するのに役立ちます。機能的には標準の行と似ていますが、バナーはカスタマイズ可能な背景の塗りつぶしによって視覚的に目立つように表示され、周囲のコンテンツとは常に視覚的に区別されます。


構成

バナー アイテムは一目でわかるように設計されており、4 つのコンポーネントが含まれています。そのうち 2 つは必須です。

  • 先頭の画像またはアイコン(必須)
  • メインのテキスト: タイトルとサブテキスト(必須)
  • サブテキスト(省略可)
  • 末尾の画像またはアイコン(省略可)
hero

1. リード画像

2. メインテキスト

3. セカンダリ テキスト(省略可)

4. 末尾の要素(省略可)


UX の要件

すべてのアプリで安全で一貫したエクスペリエンスを確保するため、次の設計要件に準拠してください。

要件レベル

コンテンツ

必須

セクションごとに 1 つのバナーのみを表示します。バナーは、他のコンポーネント タイプを含まない専用のセクションに配置します。

すべきである

カスタムの背景の塗りつぶし、ボタンのアクセント カラー、独自の角丸半径を適用して、バナーを標準のコンテンツ行から分離します。

すべきである

バナー セクションを隣接して配置することは避けてください。視覚的な存在感を維持するためです。