LoginSignup
5

More than 3 years have passed since last update.

Human Interface GuidelineにおけるModalのUIBarButtonItemの規則

Posted at

iOS13になってから標準でmodalがiOSアプリ内でも使えるようになり、色々なアプリでmodalをみるようになったと思います。今回は凄いニッチな話ですが、UINavigationControllerで表示したmodalのUIBarButtonItemの命名規則についてまとめていきます。

想定する読者

  • アプリ開発をしているUIデザイナー
  • iOSエンジニア
  • Human Interface Guidelinesを勉強したい人

この記事のゴール

この記事を読んだ人・書いた僕自身が今後理由なくしてmodalのUIBarButtonItemの実装でHIGに従ってないアプリを作成しないこと

そもそもmodalとは

Human Interface Guidelinesによると

Modality is a design technique that presents content in a temporary mode that’s separate from the user's previous current context and requires an explicit action to exit. Presenting content modally can:

Help people focus on a self-contained task or set of closely related options
Ensure that people receive and, if necessary, act on critical information

日本語訳すると

modalとはユーザーにとって、前のコンテキストとは別の一時的な状態でコンテンツを提示するデザイン手法であり、終了するには明示的なアクションが必要なものである。モーダルは

  • 自己完結型のタスクまたは強い関連のある一連のタスクにユーザーが集中できるようにする
  • 人々が重要な情報を受け取り、必要に応じて行動する

ものである。

つまり、簡潔に言うとモーダルは

  • タスクを行うためのもの
  • タスクを完了するか、放棄することで閉じるもの

であることがわかります。

サンプル画像

いくつかAppleが出しているiOSアプリのnavigationBarのスクショを掲載します。
ファイル名
ファイル名
ファイル名
ファイル名
ファイル名
ファイル名

サンプル画像を見てわかること

キャンセルボタンと完了を表すボタンのみ

どの画面にもキャンセルまたは完了(を意味するボタン)がついています。

完了と同じ意味なら「完了」でなくていい

完了の他にも「追加」「投稿」など完了の意味を内包していれば完了を使わなくても良さそうなのが読み取れます。

アイコンは使っていない

僕は✖️のアイコンとかも使用すると勝手に思ってたんですが、Appleのアプリには存在しなさそうな雰囲気を感じます。
また、完了に似た「閉じる」のような文言も使ってないようです。

キャンセルはfontWeightがregular

タスクを完了することが目的なのでタスクを完了せず離脱する場合はregularみたいです。

完了を表すボタンはfontWeightがbold

逆に完了する場合はboldを使うのが推奨されるみたいです。

コードベースで見てみる

Documentでもこれまでの話と同じことがより簡潔に述べれられています。(この部分はmodalだけの話ではないです)
)スクリーンショット 2020-02-16 23.47.16.png

なのでこれを実行すると下の画像のようにdone(完了とか)では勝手にboldになるし、plain(キャンセルとか)ではregularになります。
スクリーンショット 2020-02-16 23.49.35.png

自分の作成してるiOSアプリや普段利用しているアプリがどうなってるのか見てみると面白いかもしれません。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5