Help us understand the problem. What is going on with this article?

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

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アプリや普段利用しているアプリがどうなってるのか見てみると面白いかもしれません。

ostk0069
Swift / Rails Engineer https://www.wantedly.com/users/31623094
https://github.com/takumaosada
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした