Buttons
原文：https://developer.apple.com/design/human-interface-guidelines/ios/controls/buttons/
hr.icon
このシステムでは、幅広いカスタマイズをサポートするさまざまなボタンスタイルが用意されており、組み込みのインタラクションステート、アクセシビリティのサポート、外観の適合性も提供されています。
さらに、トグル、ポップアップ、プルダウンなど、システムで定義されたいくつかのボタンタイプがあり、さまざまな特定のユースケースをサポートします。
開発者向けのガイダンスとしては、UIButton(UIKit)とButton(SwiftUI)を参照してください。
System Buttons
システムでは、4つのボタンスタイルが定義されており、それぞれ3つのサイズで利用できます。
それぞれのスタイルは、視覚的に目立つレベルが異なり、アプリ内でアクションの階層を伝えるのに役立ちます。
https://gyazo.com/d8b90f143536c57ead9077d6a1a00638
システムボタンは、スタイルとサイズを自由に組み合わせて設定することができます。
デフォルトでは、システムボタンは、サイズに応じたコーナー半径とアプリの色合いを使用します。
必要に応じて、コンテンツのレイアウトやアクティビティインジケータの有無を制御する属性に加えて、ボタンの構成でこれらの属性を変更することができます。
開発者向けのガイダンスは、UIButton.Configurationを参照してください。
ボタンが何をするものなのか、すぐに理解できるようなボタンコンテンツを作成してください。
ボタンの目的を伝えるために、グリフ（またはアイコン）、タイトル、またはその両方を使用することができます。
グリフがボタンに適している場合は、既存またはカスタマイズされたSFシンボルの使用を検討してください。（ガイダンスについては、 SF Symbolsを参照してください）
テキストを使用する場合は、ボタンの機能を簡潔に説明する短いタイトルを作成してください。
例えば、ショッピングカートに商品を追加するボタンには、"Add to Cart "というタイトルを付けます。
便利な詳細情報を提供する場合は、サブタイトルを入れます。
ボタンには、タイトルの下にサブタイトルを表示することができます。
サブタイトルは、タイトルよりも文字サイズが小さいため、ボタンの動作に関連する二次的な情報を伝えるのに適しています。
例えば、「カートに入れる」ボタンに、カートに入っている商品の数を表示する場合に、サブタイトルを使用することができます。
ボタンが何をするのかを説明するためにサブタイトルを使用することは避けてください。
ボタンの包含されたビュー、タイトル、およびイメージは、人々がそのアクションを理解するために必要なすべての情報を提供する必要があります。
瞬時に完了しないアクションでフィードバックを提供する必要がある場合は、ボタンにアクティビティインジケータを表示するように設定します。
ボタンの中にアクティビティインジケータを表示することで、UIのスペースを節約しつつ、遅延の理由を明確に伝えることができます。
何が起こっているのかを明確にするために、アクティビティインジケータと一緒に別のラベルを表示するようにボタンを設定することもできます。
例えば、アクティビティインジケータが表示されている間は、「チェックアウト」というラベルが「チェックアウト中...」に変わります。
設定されたボタンがタップされた後に遅延が発生すると、システムはオリジナルまたは代替のラベルの横にアクティビティインジケータを表示し、ボタンの画像がある場合はそれを隠します。
開発者向けのガイダンスとしては、showActivityIndicatorを参照してください。
https://gyazo.com/0c176c01ce57a2637c4040bbebd901ba
塗りつぶしボタンは、ビューの中で最も可能性の高いアクションに使用します。
塗りつぶしのスタイルは、最も視覚的に目立つので、人々が最も必要としているアクションを素早く特定するのに役立ちます。
同時に、ビューの中であまり多くの塗りつぶしボタンを使わないようにしましょう。
塗りつぶしボタンが多すぎると、人は選択する前に複数の可能性のある選択肢を比較しなければならないため、認知的な負荷が高まります。
複数の選択肢の中で優先される選択肢を視覚的に区別するためには、サイズではなくスタイルを使用します。
同じサイズのボタンを使って2つ以上の選択肢を提供することで、その選択肢が一貫した選択肢であることを示します。
複数の選択肢の中で好みのものや最も可能性の高いものを強調したい場合は、その選択肢にはより目立つボタンスタイルを使用し、残りの選択肢にはより目立たないスタイルを使用します。
https://gyazo.com/7c89efc8f5ba1f5805820385f93cf17a
システムボタンは、アプリ内でのボタンの意味を特定する役割を持つこともできます。
ボタンは以下の役割のいずれかを持つことができます。
Normal（通常）
特定の意味はありません。
Primary（プライマリ）
このボタンはデフォルトのボタンであり、人々が最も選択する可能性の高いボタンです。
Cancel（キャンセル）
ボタンは、現在のアクションをキャンセルします。
Destructive（破壊的）
このボタンは、データを破壊する可能性のあるアクションを実行します。
ボタンの役割は、設定した外観に追加の効果を与えることができます。
たとえば、プライマリボタンのタイトルは太字で表示されますが、破壊的なボタンは赤色で表示されます。
開発者向けのガイダンスとしては、UIButton.Role(UIKit)とrole(SwiftUI)を参照してください。
人々が最も選択する可能性のあるボタンに、主な役割を割り当てます。
プライマリボタンはReturnキーに反応するべきで、人々が素早く選択を確認することを容易にします。
さらに、ボタンがシート、編集ビュー、またはアラートなどの一時的なビューにある場合、プライマリロールを割り当てることで、人々がReturnを選択したときにビューを自動的に閉じることができます。
破壊的なアクションを実行するボタンには、たとえそのアクションが最も可能性の高い選択肢であっても、プライマリロールを割り当てないでください。
プライマリボタンは視覚的に目立つため、人々は最初に読まずにプライマリボタンを選択することがあります。
非破壊的なボタンにプライマリロールを割り当てることで、人々がコンテンツを失わないようにします。
Toggle Buttons
トグルボタンとは、システムボタンの一種で、オンとオフ、表示と非表示など、相反する状態を切り替えるボタンです。
状態を区別するために、トグルボタンは2つの異なるビジュアルスタイルを使用します。
例えば、カレンダーでは、月表示でその日のイベントを表示／非表示するトグルボタンに、2種類の背景を使用しています。
https://gyazo.com/14765c4a219a67175c9dad9b2c4f361d
https://gyazo.com/3b5497daae4b4c8a774b4db106a4ebe6
注意
トグルボタンはスイッチに似た機能を持っていますが、トグルボタンはリストやテーブルの行以外でも使用することができ、その目的を説明するラベルを用意する必要はありません。
開発者向けのガイダンスとしては、changesSelectionAsPrimaryActionを参照してください。
コンテンツやビューの状態を管理するためにトグルボタンを使用します。
人々は、トグルボタンを使用して何かの状態を変更するだけでなく、ボタンが現在の選択を示すことも期待しています。
状態の管理以外のアクションを可能にする必要がある場合は、システムボタンや、ポップアップボタンやプルダウンボタンなど、他の特定のタイプのボタンを使用してください。
トグルボタンの状態を伝えるのに、色だけに頼るのは避けてください。
デフォルトでは、トグルボタンはアプリのティントカラーでオンを表し、異なる値のカラー（またはグレー）でオフを表します。
トグルボタンをカスタマイズする場合は、誰もがボタンの状態の違いを視覚的に認識できるようにしてください。
例えば、コントラストの高い色の値を使用するだけでなく、背景の形状を追加したり、ボタンの内容を変えたりするなど、視覚的な変化を加えるとよいでしょう。
Pop-Up Buttons
ポップアップボタンとは、システムボタンの一種で、互いに排他的なメニューを表示することができるボタンのことです。
ユーザーがポップアップボタンのメニューからアイテムを選択すると、メニューが閉じ、ボタンは現在の選択内容を示すようにコンテンツを更新することができる。
https://gyazo.com/7f8f8b6e383b467fd1b32650e50b60c6
開発者向けのガイダンスとしては、changesSelectionAsPrimaryActionおよびshowsMenuAsPrimaryActionを参照してください。
ポップアップボタンを使って、お互いに排他的な選択肢や状態のフラットリストを提示します。
ポップアップボタンは、コンテンツや周囲のビューに影響する選択をする際に役立ちます。
アクションのリストを提示したり、複数のアイテムを選択させたり、サブメニューを提供する必要がある場合は、代わりにプルダウンボタンを使用してください。
便利なデフォルト選択を表示する。
閉じたポップアップボタンは、常に現在の選択項目を表示しますが、ユーザーがまだ選択していない場合は、指定したデフォルトの項目を表示します。
可能な限り、ほとんどの人が欲しいと思うようなアイテムをデフォルトの選択項目として設定してください。
スペースが限られていて、常にすべての選択肢を表示する必要がない場合は、ポップアップボタンの使用を検討してください。
セグメンティドコントロールも、互いに排他的な選択肢を表示しますが、常にすべての項目を表示するため、一般的にはポップアップボタンよりもスペースが必要です。
Pull-Down Buttons
プルダウンボタンは、システムボタンの一種であり、ボタンの目的に直接関連するアイテムやアクションのメニューを表示することができる。
プルダウンボタンのメニューでアイテムを選択すると、メニューが閉じて、アプリが選択したアクションを実行します。
また、項目を選択せずに画面上の他の場所をタップしてメニューを閉じることもできます。
プルダウンボタンは、ポップアップボタンとは異なり、どのメニューを選択しても同じ内容が表示されます。
https://gyazo.com/7364d825fb8b4b9a6a326b76d94f3a82
注意
ボタンに対して特定のジェスチャーを行うことで、プルダウンメニューを表示させることもできます。
例えば、iOS 14以降のSafariでは、「タブ」ボタンをタッチ＆ホールドするジェスチャーに反応して、「新しいタブ」や「すべてのタブを閉じる」など、タブに関連するアクションのメニューが表示されます。
開発者向けのガイダンスは、 showsMenuAsPrimaryActionを参照してください。
プルダウンボタンを使用して、ボタンのアクションに直接関連するアイテムを提示します。
メニューを使えば、ボタンの対象を明確にしたり、動作をカスタマイズしたりすることができ、インターフェースにボタンを追加する必要はありません。例えば、
追加ボタンには、追加したいアイテムを指定するためのメニューを表示することができます。
ソートボタンは、メニューを使って、ソートする属性を選択することができます。
戻る」ボタンは、前の場所を開くのではなく、特定の場所を選んで戻ることができます。
ビューのすべてのアクションを1つのプルダウンボタンに入れないようにしましょう。
ビューの主要なアクションは簡単に見つけられる必要があるので、プルダウンボタンの中に隠すことはできません。
あまりにも多くのアクションをプルダウンボタンに入れると、集中力が低下し、何かをするために最低でも2回タップしなければならないことになります。
メインインターフェイスで目立つ必要のないアイテムを表示するには、「もっと見る」プルダウンボタンの使用を検討してください。
「More」ボタンは、スペースが限られている場所でさまざまなアイテムを提供するのに役立ちますが、発見性を妨げることもあります。
人々は、Moreボタンが現在のコンテキストに関連する追加機能を提供することを一般的に理解していますが、省略記号グリフはその内容を予測するのに役立ちません。
効果的なMoreボタンをデザインするには、サイズの利便性と発見性への影響を比較して、アプリに適したバランスを見つけてください。
ellipsis.circleシンボルを使用して「もっと見る」ボタンを作成します（シンボルについて詳しくはSF Symbolsをご覧ください）。
https://gyazo.com/fcb953ae6b33b1d979982a25ba50d7c4
プルダウンボタンのメニュー項目が破壊的であることを伝え、その意図を確認してもらいます。
メニューでは、破壊的な可能性があると判断したアクションを赤文字で表示します。
ユーザーが破壊的なアクションを選択すると、システムはアクションシート（iOS）またはポップオーバー（iPadOS）を表示し、ユーザーが選択を確認したり、アクションをキャンセルしたりできるようにします。
アクションシートは、メニューとは別の場所に表示され、意図的に取り消す必要があるため、誤ってデータを失うことを防ぐことができます。
プルダウンボタンのメニューでは、セパレーターを使って関連するアイテムを視覚的にグループ化します。
視覚的なグループ分けをすることで、メニューをより早く見てもらうことができます。
例えば、「Files」アプリの「More」ボタンでは、コンテンツに影響を与える操作と、表示やソートに関連する項目を区別するためにセパレータを使用しています。
1つのメニューに3つ以上のグループを使用すると、解析が困難になる可能性があります。
メニューアイテムにグリフを含めるのは、それが価値をもたらす場合です。
ある項目の意味を明確にする必要がある場合、そのタイトルの後にグリフや画像を表示することができます。
SFシンボルを使用することで、どのようなスケールでもシンボルがテキストと整列していることを確認しながら、親しみやすい体験を提供することができます。
簡潔なメニュータイトルが意味を持つ場合は、それを表示します。
一般的には、プルダウンボタンのコンテンツと説明的なメニューアイテムを組み合わせれば、人々が必要とするすべてのコンテキストを提供することができるので、メニュータイトルは不要です。
メインメニューをよりわかりやすく、使いやすくするために、サブメニューの使用を検討してください。
サブメニューとは、ユーザーが選択したときにメニューが表示されるメニューアイテムのことです。サブメニューを選択すると、サブメニューが閉じて、メインメニューが表示されます。
関連性の高いアイテムをサブメニューにまとめることで、メインメニューを短くし、スキャンしやすくすることができますが、アイテムにアクセスするための新たな操作が必要になります。
サブメニューを使用する必要がある場合は、その項目を明確に示すタイトルやグリフを付けて、何が含まれているかを知るためにサブメニューを開く必要がないようにしてください。
https://gyazo.com/ed54116a6d91169d15477e037c01a30b
https://gyazo.com/ea012689435830280834f5426e64935c
Close Buttons
閉じるボタンは、その親ビューを閉じます。
閉じるボタンは、シートやコレクション内の独立したビューの最上部に表示されます。
https://gyazo.com/138976c290b31bc17299c7bc3303f3b5
https://gyazo.com/9452a6ed6fa33f60f6a6f7bd616447e0
開発者向けのガイダンスとしては、UIButton.ButtonType.closeを参照してください。
ビューの中では、閉じるボタンか完了ボタンのどちらかを提供してください（両方は提供しないでください）。
閉じるボタンと完了ボタンはどちらもビューを削除しますが、それらは反対の動作ではないので、両方を提供すると混乱を招くことになります。
一般的に、ビューに変更を加えることができる場合は、完了ボタンを使用してください。
このシナリオでは、ビューを閉じるときに変更内容を明示的に破棄するために、キャンセルボタンを追加するとよいでしょう。
閉じるボタンは、変更を保存または破棄したことを示すものではありませんので、人々が編集できないビューや、人々がビューのセットから削除できるビューではうまく機能します。
https://gyazo.com/3c2db717299734a03ac9726a64374821
https://gyazo.com/d7d5fb5b82ee23b9760e911aa708f7fb
閉じるボタンを用意するのは、ビューに、ビューを閉じるための反対のアクションが含まれていない場合のみです。
例えば、cancelとdoneのような相反するアクションがあるシートでは、閉じるボタンを追加しても、それがビューのコンテンツにどのような影響を与えるのかが明確ではないため、混乱を招きます。
Common Button Types
人々は、いくつかの特定のボタンタイプを即座に認識します。
それは、これらのボタンがシステム全体で一貫した動作をするからです。
例えば、情報ボタンは、常に現在のコンテキストやビューに関連する詳細を表示します。
人々が知っている一般的なボタンに似たボタンを作成した場合、そのボタンが人々の期待通りに動作することを確認してください。
例えば、plus.circle SFシンボルを使用したボタンを作成した場合、人々はこのボタンが現在のビューにアイテムを追加することを期待します。
同様に、ボタンにinfo.circleシンボルを使用すると、そのボタンが情報ボタンであることがわかります。
リストやテーブルの行では、行の内容に関する詳細情報を表示する場合にのみ、情報ボタンを使用します。
情報ボタンは、リストの行に表示される場合は詳細表示ボタンと呼ばれますが、階層化されたテーブルやリストのナビゲーションを可能にするものではありません。
リストやテーブルの行の子画面を表示させる必要がある場合は、ディスクロージャーインジケータのアクセサリコントロールを使用してください。
disclosureIndicator(display:options:) (list) または disclosureIndicator(table)を参照してください。
https://gyazo.com/29c4b5488e205bdbc320541ce88c6dab
https://gyazo.com/e766339eb10d51bf43755befcb72c469
<-- Web Views
--> Color Wells