プルダウンボタン
プルダウンボタンには、ボタンの目的に直接関連するアイテムまたはアクションのメニューが表示されます。
人々がプルダウンボタンのメニューで項目を選択すると、メニューが閉じ、アプリが選択されたアクションを実行します。
ベストプラクティス
プルダウンボタンを使用して、ボタンのアクションに直接関連するコマンドまたは項目を表示します。 このメニューを使用すると、人々がボタンのターゲットを明確にしたり、インターフェイスに追加のボタンを必要とせずに、その動作をカスタマイズしたりできます。例えば:
コマンドではない、相互に排他的な選択肢のリストを提供する必要がある場合は、代わりに ポップアップボタン を使用します。
ビューのすべてのアクションを 1 つのプルダウンボタンに入れることは避けてください。 ビューの主要なアクションは簡単に見つけられる必要があるため、プルダウンボタンでそれらを隠したくありません。プルダウンボタンにあまりにも多くのアクションを配置すると、集中力が低下し、人々が何かを行うために少なくとも 2 回タップしなければなりません。
メニューの長さと使いやすさのバランスをとります。 人々はメニューを表示する前にプルダウンボタンを操作する必要があるため、少なくとも 3 つの項目をリストすることが、操作に価値があると感じられます。1 つか 2 つの項目のみをリストする必要がある場合は、アクションを有効にするボタンや選択を提示するトグルまたはスイッチなど、代替コンポーネントを使用してそれらを提示することを検討してください。対照的に、プルダウンボタンのメニューにリストする項目が多すぎると、特定の項目を見つけるのに時間がかかるため、人々の作業が遅くなる可能性があります。
意味を追加する場合にのみ、簡潔なメニュータイトルを表示します。 一般に、プルダウンボタンのコンテンツは、説明的なメニュー項目と組み合わせて、人々が必要とするすべてのコンテキストを提供するため、メニュータイトルは不要になります。
プルダウンボタンのメニュー項目が破壊的であることを人々に知らせ、意図を確認するように依頼して下さい。 メニューは赤いテキストを使用して、潜在的に破壊的であると識別したアクションを強調表示します。人々が破壊的なアクションを選択すると、システムは アクションシート (iOS) または ポップオーバー (iPadOS) を表示し、選択内容を確認するかアクションをキャンセルできます。アクションシートはメニューとは別の場所に表示され、意図的に閉じる必要があるため、人々が誤ってデータを失うことを防ぐことができます。
値を提供する場合は、メニュー項目にインターフェイスアイコンを含めます。 項目の意味を明確にする必要がある場合は、そのラベルの後に インターフェイスアイコン またはイメージを表示できます。この目的で SF シンボル を使用すると、慣れ親しんだ体験を提供しながら、シンボルがすべての縮尺でテキストと整列したままになるようにできます。
プラットフォームの考慮事項
macOS に関する追加の考慮事項はありません。tvOS または watchOS ではサポートされていません。
iOS、iPadOS
注意
ボタン上で特定のジェスチャを実行して、人々がプルダウンメニューを表示できるようにもできます。たとえば、iOS 14 以降では、Safari は [タブ] ボタンのタッチアンドホールド・ジェスチャに応答して、[新しいタブ] や [すべてのタブを閉じる] などのタブ関連のアクションのメニューを表示します。
メインインターフェイスで目立たせる必要のない項目を表示するには、[More(もっと)] プルダウンボタンを使用することを検討してください。 [もっと] ボタンは、スペースが限られている場合にさまざまな項目を提供するのに役立ちますが、見つけやすさを妨げる可能性もあります。人々は通常、[もっと] ボタンが現在のコンテキストに関連する追加機能を提供することを理解していますが、省略記号アイコンは必ずしもその内容を予測するのに役立ちません。効果的な [もっと] ボタンをデザインするには、そのサイズの利便性と見つけやすさへの影響を比較検討して、あなたのアプリで機能するバランスを見つけます。ellipsis.circle SF シンボルを使用して [もっと] ボタンを作成します。
Files では、[もっと] プルダウンボタンを使用して、コンテンツの表示と並べ替えのオプションに加えて、フォルダーの追加や文書のスキャンなどのアクションを提供します。
リソース
関連
MenuPickerStyle — SwiftUI (MenuPickerStyle)
showsMenuAsPrimaryAction — UIKit (showsMenuAsPrimaryAction)
pullsDown — AppKit (pullsDown)
ビデオ
UIKit ボタンシステム
との出会い
WWDC21
変更記録
2022 年 9月 14日 | 有用なメニューの長さを設計するための洗練されたガイダンス。 |