Toolbars
hr.icon
ツールバーは画面の下に表示され、現在のビューに関連するアクションを実行するためのボタンを含みます。
デフォルトで、ツールバーは半透明です。
ツールバーの背後にコンテンツが表示されているときのみ背景素材が使用され、最下部までスクロールすると素材が削除されます。
キーボードが画面上にある場合、ツールバーは非表示になります。
https://gyazo.com/148c18b29af6d875881735b6a81af726
https://gyazo.com/29d6b2e0e48f596c365c7d6ac8ded92e
Tips
ツールバーとタブバーは、どちらも画面の下に表示されますが、それぞれ用途が異なります。
ツールバーには、アイテムの作成、アイテムのフィルタリング、コンテンツのマークアップなど、画面に関連する操作を行うためのボタンがあります。
タブバーは、「時計」アプリのアラーム、ストップウォッチ、タイマータブのように、アプリ内の異なる領域間を移動するためのものです。
ツールバーとタブバーは、同じビューに一緒に表示されることはありません。
ツールバーを使って、そのコンテキストで最も実行されうるアクションを表示させることができます。
ツールバーは、頻繁に使用するコマンドを目立たせ、一貫性のある場所に配置することができます。
コンテキストを切り替える必要がある場合は、代わりにTab Barsを使用することを検討してください。 iPadOSアプリでは、頻繁に使用する操作にツールバーの代わりにナビゲーションバーを使用することを検討してください。
iPadの画面の上部にあるボタンは、下部にあるボタンよりも目立ちますし、手が届きやすいこともあります。
3つ以下のボタンを含むツールバーでは、より分かりやすくするために簡潔なタイトルを使用することを検討してください。
たとえば、カレンダーでは、［今日］、［カレンダー］、［受信トレイ］というタイトルを使用します。
タイトルが重ならないように、ボタンとボタンの間に一定のスペースを挿入することができます。
https://gyazo.com/6290fa50e0e9e741cd0486b39a8b5ef7
3つ以上のボタンを持つツールバーでは、スペースを節約するためにSFシンボルを使用することを検討してください。
SF Symbolsは、アプリ内のアクションを表現するために使用できる、カスタマイズ可能な幅広いシンボルを提供します。 ツールバーのボタン用にカスタムグリフを作成する必要がある場合は、以下のサイズを使用して、必要に応じてバランスを調整してください。
table: Target size - Maximum size
Target size Maximum size
24x24 pt (72x72 px @3x) 28x28 pt (84x84 px @3x)
24x24 pt (48x48 px @2x) 28x28 pt (56x56 px @2x)
ツールバーにセグメンティドコントロールの使用は避けてください。
セグメンティドコントロールはコンテキストを切り替えることができますが、ツールバーのアクションは現在のスクリーンに固有です。