画面を構成するコンポーネントを把握する [iOS編]

画面をデザインする際、OS側で用意されているコンポーネントの名称や利用目的を理解しておくと、検討からプレゼンテーションなどでの進行がスムーズになります。今回はiOSのコンポーネントについて、一部ですが紹介します。

Navigation Bars （ナビゲーションバー）

ナビゲーションバーは、画面の上部に配置されるコンポーネントです。画面の名称を表示したり、前の画面に戻るためのボタンを表示したり、表示している画面に関するアクションを起こすためのボタン（編集や追加など様々）が表示される重要なコンポーネントです。Androidでも同様の名称のコンポーネントがありますが、コンポーネントの内容が異なります。Androidの場合、内容的にはアプリバー（アクションバー）がiOSのナビゲーションバーと同じになっています。

Toolbars（ツールバー）

ツールバーは、画面下部に表示されるコンポーネントです。表示している画面や、画面内のコンテンツに関連するアクション（共有など様々）を行うボタンなどが表示されます。ツールバーは、スクロールすると消えたり現れたりする場合（例：Safariアプリ）もあれば、固定で表示されている場合もあります。表示形式はアイコンだけではなく、配置される要素が3つ以下であれば、テキストボタンを用いることもガイドラインで推奨されています。

Steppers （ステッパー）

ステッパーは、数値の変更を補助するコンポーネントです。印刷の部数変更のように数値変更の差が小さい範囲での利用には向いていますが、大きな数値の変更には向いていません。ステッパー自体には値が表示されないため、上記画像のように変更した値を別途表示する必要があります。デフォルトでは、”+”と”－”が表示されていますが、画像パーツを用いて変更することも可能のようです。

Action Sheets（アクションシート）

アクションシートは、表示されている画面に関連するアクションの選択肢が２つ以上ある画面や、削除などの破壊的なアクションに適用します。削除などの破壊的なアクションでアラートを使用することがありますが、最近のiOSではアクションシートでの表示が主流のように思えます。削除などの破壊的なアクション以外の場合は、次に説明するプルダウンメニューを用いることもあります。

Pull-Down Menus （プルダウンメニュー）

iOS14以降では、アクションシートで表示されていたような内容をプルダウンメニューで表示されることが増えました。プルダウンメニューは、ボタンを押すことでボタンに関連するアクションを呼び出すことができます。アクションシートと比較すると、押したボタン付近に表示されるので、表示された選択肢との関係性が分かりやすく、画面の連続性もプルダウンメニューの方が良いです。

今回紹介したコンポーネント以外にも、まだまだ多くのコンポーネントが存在しています。また、OSが更新されると今まで推奨されていたコンポーネントが非推奨になる場合もあるので、Appleが提供するガイドラインを定期的にチェックして最新の状態を把握しておきましょう。
参考に、上述のコンポーネントについて記載されているページをリンクしておきます。リンクしたページには、上述のコンポーネント以外についても記載されているので、チェックしてみてください。

Human Interface Guidelines

https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/