はじめに
これでいよいよ最終パートです。
今回はiOSのUIKitが提供するUIについてがメインです。
コントロール
ボタン
ボタンは、アプリ固有のアクションを開始し、カスタマイズ可能な背景があり、タイトルまたはアイコンを含めることができます。
システムには、ほとんどの使用例に対応する定義済みのボタンスタイルが多数用意されています。
完全にカスタムボタンをデザインすることもできます。
タイトルには動詞を使用する
アクション固有のタイトルは、ボタンがインタラクティブであることを示し、タップすると何が起こるかを示しています。
タイトルにはtitle-case(font)を使用します。
記事、調整語彙、4文字以下の前置詞を除くすべての単語を大文字にします。
タイトルは短く
テキストが長すぎると、インターフェースが混雑し、小さい画面では切り捨てられる場合があります。
必要な場合にのみ、境界線または背景を追加する
デフォルトでは、システムボタンには境界線や背景がありません。
ただし、一部のコンテンツ領域では、双方向性を示すために境界線または背景が必要です。
電話アプリでは、ボーダー付きの数字キーが電話をかけるという従来のモデルを強化し、[通話]ボタンの背景は、簡単にヒットできる目を引くターゲットを提供します。
※これはナビゲーションバーなどに当てはまりますが、コンテンツ内のボタンは影をつけたり押し感の分かるボタンが良いと思います。
カラーウェルズ
タップすると、カラーウェルにシステム提供のカラーピッカーが表示されます。
ユーザーはカラーピッカーを使用して、テキスト、図形、マーキングツール、およびその他の要素の色を選択できます。
開発者向けガイダンスについては、UIColorWellおよびUIColorPickerViewControllerを参照してください。
iPadメインなので割愛
コンテキストメニュー
iOS 13以降では、コンテキストメニューを使用して、インターフェイスを煩雑にすることなく、
画面上のアイテムに関連する追加機能にアクセスできます。
コンテキストメニューは、ピークとポップに似ていますが、2つの重要な違いがあります。
-
コンテキストメニューは、iOS 13以降を実行しているすべてのデバイスで使用できます。
Peek and Popは、3D Touchをサポートするデバイスでのみ使用できます。 -
コンテキストメニューには、コンテキストに関連するコマンドがすぐに表示されます。
ピークとポップでは、コマンドを表示するために上にスワイプする必要があります。
コンテキストメニューを表示するには、システム定義のタッチアンドホールドジェスチャーまたは3Dタッチを使用できます。
コンテキストメニューの利用に一貫性を持たせる
一部の場所ではアイテムのコンテキストメニューを提供し、他の場所では提供しない場合
機能をどこで使用できるかがユーザーは分からずに、アプリに問題があると思われる場合があります。
コンテキストメニューの各コマンドにグリフを含める
グリフ（画像でいう機能をイメージしたアイコン）はコマンドの意味を強調し、人々がその機能を即座に理解できるようにします。
MenuEdit
ユーザーは、テキストフィールド、テキストビュー、Webビュー、またはイメージビューの要素を押し続けるかダブルタップして、
コンテンツを選択し、コピーや貼り付けなどの編集オプションを表示できます。
割愛します。
詳細は
https://developer.apple.com/design/human-interface-guidelines/ios/controls/edit-menus/
UIMenuController
ラベル
ラベルは、画面上のインターフェイス要素を説明するか、短いメッセージを提供します。
ラベルを編集することはできませんが、ラベルの内容をコピーできる場合があります。
ラベルを読みやすく
ラベルには、プレーンテキストまたはスタイル付きテキストを含めることができます。
ラベルのスタイルを調整したり、カスタムフォントを使用したりする場合は、読みやすさを犠牲にしないでください。
ユーザーがデバイスでテキストサイズを変更してもラベルが適切に表示されるように、ダイナミックタイプを採用することをお勧めします。
※全般的に言えますが、ここで述べられていることは全年齢の全世界のiOSユーザーを想定していて、
AppleとしてのUI/UX向上の指針なのでもちろんプロダクトごとに良いものは違います。
ページコントロール
割愛します
ピッカー
ピッカーは、ユーザーが選択できる個別の値の1つ以上のスクロール可能なリストを表示できます。
iOS 14以降では、日付ピッカーは、カレンダービューでの日付の選択や、テンキーを使用した日付と時刻の入力など、
値を選択する追加の方法をサポートしています（ガイダンスについては、日付ピッカーを参照してください）。
どちらのタイプのピッカーでも、単一またはマルチパートの値を選択することにより、人々が情報を簡単に入力できるようにします。
ピッカーを使用して、中程度のリストに向いている
選択肢のかなり短いリストを表示する必要がある場合は、ピッカーの代わりにプルダウンメニューの使用を検討してください。
ピッカーを使用すると、多くの項目をすばやく簡単にスクロールできますが、項目の短いリストに視覚的な重みが追加されることがあります。
一方、非常に大きなアイテムのセットを提示する必要がある場合は、リストまたはテーブルの使用を検討してください。
リストとテーブルは高さを調整でき、テーブルにはインデックスを含めることができます。
予測可能で論理的に順序付けられた値
スクロール可能なリストが固定されている場合、ピッカーの多くの値が非表示になることがあります。
国のアルファベット順リストなど、ユーザーが非表示の値を予測できるようにして、アイテム間をすばやく移動できるようにするのが最適です。
画面を切り替えてピッカーを表示しない
ピッカーは、編集中のフィールドの下または近くにコンテキストで表示するとうまく機能します。
ピッカーは通常、画面の下部またはポップオーバーに表示されます。
開発者向けガイダンスについては、UIPickerViewを参照してください。
日付ピッカー
日付ピッカーは、タッチ、キーボード、またはポインティングデバイスを使用して、
特定の日付、時刻、またはその両方を選択するための効率的なインターフェイスです。
次のいずれかのスタイルで日付ピッカーを表示できます。
- インライン—リストやテーブル行などの小さなスペースに収まり、展開して編集ビューを表示する編集可能なフィールド
- コンパクト—展開してモーダルコンテキストで編集ビューを表示するラベル
- ホイール—従来のスクロールホイールのセット
自動スタイルを選択して、システムが現在のプラットフォームと日付ピッカーモードを使用して適切な表示スタイルを決定することもできます。
■インラインピッカー
日付ピッカーには4つのモードがあり、それぞれに選択可能な値の異なるセットが表示されます。
- 日付。月、日、年を表示します。
- 時間。時間、分、および（オプションで）AM / PM指定を表示します。
- 日時。日付、時間、分、および（オプションで）AM / PM指定を表示します。
- カウントダウンタイマー。最大23時間59分までの時間と分を表示します。このモードはコンパクトスタイルでは使用できません。
日付ピッカーに表示される正確な値とその順序は、ユーザーのロケールによって異なります。
スペースが限られている場合は、コンパクトな日付ピッカーを検討
折りたたむと、コンパクトスタイルには、アプリのアクセントカラーで現在の値を示すボタンが表示されます。
ボタンをタップすると、日付ピッカーがモーダルビューに展開され、
使い慣れたカレンダースタイルのエディターと時間ピッカーにアクセスできます。
モーダルビュー内では、日付と時刻を複数回編集してから、ビューの外側をタップして選択を確認できます。
分を指定する場合は、粒度を低くする
デフォルトでは、分リストには60個の値（0〜59）が含まれています。
60分に均等に分割される限り、オプションで分間隔を増やすことができます。
たとえば、15分間隔（0、15、30、および45）が必要になる場合があります。
開発者向けガイダンスについては、UIDatePickerを参照してください。
進捗インジケーター
アプリがコンテンツをロードしたり、長時間のデータ処理操作を実行したりするのを待つ静的な画面を見つめている人を置かないでください。
アクティビティインジケーターとプログレスバーを使用して、アプリが停止していないことをユーザーに知らせ、待機時間を知らせます。
ロードも参照してください。
活動指標
複雑なデータの読み込みや同期などの定量化できないタスクが実行されている間、アクティビティインジケーターが回転します。
タスクが完了すると消えます。
アクティビティインジケータは非インタラクティブです。
※iOS標準のものもありますが、基本的には独自でViewをカスタムしてデザイナーさんのものに合わせるか
ライブラリで色々出ているのでそちらを使います。
タスクが完了するのを待つ間に役立つ情報を提供する
追加のコンテキストを提供するために、アクティビティインジケーターの上にラベルを含めます。
ロードや認証などのあいまいな用語は、通常は値を追加しないため、避けてください。
プログレスバー
進行状況バーには、左から右へと進むトラックが含まれており、期間がわかっているタスクの進行状況を示します。
プログレスバーは非インタラクティブですが、対応する操作をキャンセルするためのボタンが付いていることがよくあります。
ナビゲーションバーとツールバーのトラックの未入力部分を非表示に
デフォルトでは、プログレスバーのトラックには、塗りつぶされた部分と塗りつぶされていない部分の両方が含まれます。
ページの読み込みを示すなどのナビゲーションバーまたはツールバーで使用する場合、
進行状況バーを構成して、トラックの埋められていない部分を非表示にする必要があります。
アプリに合わせてプログレスバーの外観をカスタマイズする
プログレスバーの外観は、アプリのデザインに合わせて調整できます。
たとえば、トラックと塗りつぶしの両方にカスタムティントまたはイメージを指定できます。
プルダウンメニュー
iOS 14以降では、ボタンにプルダウンメニューを表示して、ユーザーが選択できる項目またはアクションを一覧表示できます。
プルダウンメニュー（または単にメニュー）を使用して、ボタンのアクションに直接関連するアイテムを提供したり、
現在のコンテキストで役立つアクションのリストを提供したりできます。
メニューには、アクションシート、コンテキストメニュー、ポップオーバーに比べていくつかの利点があります。
例えば
- メニューが表示されるボタンのすぐ近くにメニューが開くので、メニューの項目と実行しているアクションの関係をすぐに理解できます。
- メニューには、アクションのリストに加えて、ユーザーが主要なアクションに影響を与えるために使用できる選択を提供できます。
- メニューはすばやくアニメーション表示され、表示されたときに画面を暗くすることがないため、移行と全体的なエクスペリエンスの両方に軽量感があります。
開発者向けガイダンスについては、UIMenuを参照してください。
すべてのアクションをメニューに配置しない
メニューを使用すると、インターフェースを煩雑にすることなくさまざまなアイテムを提供できますが、
すべてのアクションをメニューに配置することは、ユーザーが何かをするために少なくとも2回タップする必要があることを意味します。
メインインターフェイスに最も重要なアクションを配置し続け、メニューを使用して補足アイテムを提供します。
たとえば、新しいメッセージの作成は、人々がメッセージで行う最も一般的なアクションであるため、
[作成]ボタンはメインインターフェイスで目立つように機能しています。
ユーザーに便利な編集オプションのセットを提供するために、
メッセージはメインインターフェイスにオプションを表示する代わりに、[編集]ボタンにメニューを添付します。
セパレータを使用して、関連するメニュー項目を視覚的にグループ化する
視覚的なグループを作成すると、ユーザーがメニューをすばやくスキャンできるようになります。
たとえば、ファイルアプリの[その他]メニューでは、区切り記号を使用して、
コンテンツに影響を与えるアクションと表示や並べ替えに関連するアイテムを区別できるようにしています。
メニューで4つ以上のグループを使用すると、解析が困難に見える場合があります。
意味がある場合は、メニュータイトルを表示
アクションを実行するためにボタンをタップするとメニューが即座に表示されるため、
ほとんどの場合、人々はメニューのアイテムのコンテキストを理解します。
必要に応じて、メニューの上部に表示する簡潔なタイトルを指定できます。
コンテンツコントロールの更新
リフレッシュコントロールは手動で開始され、次の自動コンテンツ更新の発生を待たずに、
通常はテーブルビューでコンテンツをすぐに再読み込みします。
更新コントロールは特殊なタイプのアクティビティインジケーターであり、
デフォルトでは非表示になっており、再読み込みするビューを下にドラッグすると表示されます。
自動コンテンツ更新を実行
人々はすぐにコンテンツの更新をトリガーできることを高く評価していますが、
自動更新が定期的に行われることも期待しています。
すべての更新を開始する責任をユーザーに与えないでください。
付加価値がある場合にのみ、短いタイトルを入力してください
オプションで、更新コントロールにタイトルを含めることができます。
コントロールのアニメーションがコンテンツの読み込みを示しているため、ほとんどの場合、これは不要です。
タイトルを含めた場合、それを使用して更新を実行する方法を説明しないでください。
代わりに、更新されるコンテンツに関する価値のある情報を提供します。
たとえば、ポッドキャストの更新コントロールでは、タイトルを使用して、ポッドキャストの最後の更新がいつ行われたかをユーザーに知らせます。
開発者向けガイダンスについては、UIRefreshControlを参照してください。
セグメントコントロール
セグメントコントロールは、2つ以上のセグメントの線形セットであり、それぞれが相互に排他的なボタンとして機能します。
コントロール内では、すべてのセグメントの幅が同じです。
ボタンと同様に、セグメントにはテキストや画像を含めることができます。
セグメントコントロールは、さまざまなビューを表示するためによく使用されます。
使いやすさを向上させるために、セグメントの数を制限する
幅の広いセグメントほどタップが簡単です。
iPhoneでは、セグメントコントロールは5つ以下のセグメントを持つ必要があります。
セグメントコンテンツのサイズを一定に保つ
すべてのセグメントの幅が等しくないと見栄えがよくありません。
セグメントコントロールでテキストと画像を同時に使わない
個々のセグメントにはテキストまたは画像を含めることができますが、2つを1つのコントロールに混在させると、
インターフェースが切断されて混乱する可能性があります。
スライダー
スライダーは、コントロール付きの水平トラックであり、指でスライドして、
メディアの再生中の画面の明るさのレベルや位置などの最小値と最大値の間を移動できます。
スライダーの値が変化すると、最小値とつまみの間のトラック部分が色で塗りつぶされます。
スライダーは、最小値と最大値の意味を示す左と右のアイコンをオプションで表示できます。
開発者向けガイダンスについては、 UISliderを参照してください。
ステッパー
ステッパーは、増分値を増減するために使用される2セグメントコントロールです。
デフォルトでは、ステッパーの1つのセグメントにプラス記号が表示され、もう1つのセグメントにマイナス記号が表示されます。
これらのシンボルは、必要に応じてカスタムイメージに置き換えることができます。
ステッパーの影響を受ける値を明確にします。
ステッパー自体には値が表示されないため、ステッパーを使用するときに変更する値をユーザーに知らせてください。
大きな値の変更が予想される場合は、ステッパーを使用しない
ステッパーは、数回のタップを必要とする小さな変更を加えるのに適しています。
たとえば、印刷画面では、ステッパーを使用して部数を設定することは理にかなっています。
これは、この設定をあまり変更しないためです。
一方、妥当なページ範囲でも多くのタップが必要になるため、ステッパーを使用してページ範囲を選択することは意味がありません。
開発者向けガイダンスについては、UIStepperを参照してください。
スイッチ
スイッチは、2つの相互に排他的な状態（オンとオフ）を視覚的に切り替えます。
アプリのスタイルに合わせてスイッチに色を付けることを検討する
アプリで問題なく機能する場合は、スイッチの色をオンとオフの状態で変更できます。
テーブルの行でのみスイッチを使用する
スイッチは、オンとオフを切り替えることができる設定のリストなどのテーブルで使用するためのものです。
ツールバーまたはナビゲーションバーで同様の機能が必要な場合は、代わりにボタンを使用し、状態を伝える2つの異なるアイコンを利用します。
スイッチの値を説明するラベルを追加しない
スイッチはオンまたはオフです。これらの状態を説明するラベルを提供することは冗長であり、インターフェースが煩雑になります。
テキストフィールド
テキストフィールドは、高さが1行の固定高さのフィールドで、多くの場合、角が丸められており、
ユーザーがタップするとキーボードが自動的に表示されます。
テキストフィールドを使用して、メールアドレスなどの少量の情報をリクエストします。
必要に応じて、セキュリティで保護されたテキストフィールドを使用
アプリがパスワードなどの機密データを要求する場合は、常に安全なテキストフィールドを使用してください。
画像とボタンを使用して、テキストフィールドに明確さと機能を提供する
テキストフィールドの左側または右側にカスタム画像を表示したり、ブックマークボタンなどのシステム提供のボタンを追加したりできます。通常、テキストフィールドの左端を使用してフィールドの目的を示し、右端を使用してブックマークなどの追加機能の存在を示します。
開発者向けガイダンスについては、UITextFieldを参照してください。
キーボード
適切なキーボードタイプを表示します。iOSはいくつかの異なるキーボードタイプを提供し、
それぞれが異なるタイプの入力を容易にするように設計されています。
データ入力を効率化するには、テキストフィールドの編集時に表示されるキーボードが、
フィールドのコンテンツのタイプに適している必要があります。
使用可能なキーボードタイプの完全なリストについては、UIKeyboardTypeの一定のUITextInputTraitsを。
■メールキーボード
■電話キーボード
関連するガイダンスについては、「カスタムキーボード」を参照してください。
カスタムキーボード
標準キーボードを置き換えるキーボード拡張を作成することにより、カスタムキーボードを提供できます。
ユーザーが[設定]でカスタムキーボードを有効にすると、
セキュリティで保護されたテキストフィールドと電話番号フィールドを編集する場合を除いて、アプリ内のテキスト入力にそれを使用できます。
ユーザーは複数のカスタムキーボードを有効にして、いつでも切り替えることができます。
カスタムキーボードが本当に必要かどうかを確認
カスタムキーボードは、テキストを入力する新しい方法やiOSでサポートされていない言語で入力する機能など、
システム全体に固有のキーボード機能を公開する場合に適しています。
アプリ内でのみ使用できるカスタムキーボードを提供する場合は、代わりにカスタム入力ビューを作成することを検討してください。
カスタム入力ビュー
カスタム入力ビューは、標準キーボードをカスタムキーボードに置き換えますが、システム全体ではなく、アプリ内のみです。カスタム入力ビューを使用して、独自の効率的なデータ入力方法を提供します。たとえば、数値は、スプレッドシートの編集中に数値を入力するためのカスタム入力ビューを実装します。
開発者向けガイダンスについては、カスタムキーボードの作成を参照してください。
入力中に標準のキーボードクリック音が鳴る
入力ビューでカスタムコントロールをタップすると、標準サウンドが生成されます。
このサウンドは、表示されているカスタム入力ビューでのみ使用でき、
ユーザーは[設定]> [サウンド]でシステム全体のサウンドを無効にできることに注意してください。
開発者向けガイダンスについては、UIDeviceのplayInputClickメソッドを参照してください。
システム機能
評価とレビュー
評価とレビューは、アプリを試してみるかどうかを検討する際に、情報に基づいた決定を行うのに役立ちます。
肯定的な評価とレビューは、アプリのダウンロードが増えることを意味します。
顧客からのフィードバックにより、実際の使用状況についての洞察が得られ、将来の開発作業に役立ちます。
優れた全体的なエクスペリエンスを提供することは、肯定的な評価とレビューを促進するための最良の方法ですが、
適切なタイミングでフィードバックを求めることも重要です。
アプリを評価するようユーザーに求めるときは、これらの考慮事項に留意してください。
ユーザーがアプリへのエンゲージメントを示した後にのみ、評価を求める
たとえば、ゲームレベルや生産性タスクの完了時にユーザーにプロンプトを表示します。
初回起動時またはオンボーディング中に評価を要求しないでください。意見を述べるのに十分な時間を見込んでください。
特に時間に敏感な、またはストレスの多いタスクを実行しているときはユーザーを邪魔しない
評価リクエストが最も意味のある論理的な一時停止または停止ポイントを探します。
害虫にならないで
評価のプロンプトが繰り返されるとイライラするだけでなく、ユーザーのアプリに対する意見に悪影響を与えることさえあります。
レーティングリクエストの間隔は少なくとも1〜2週間とし、
ユーザーがアプリでさらにエンゲージメントを示した後にのみプロンプトを表示します。
システムは、プロンプトの表示を365日の期間内にアプリごとに3回まで自動的に制限します。
最後に
長々と書いてきましたが、これで終わりになります。
色々調べている中で、参考になった言葉がありまして、
- 開発で大事なことはプラットフォームを知ることで、そのためにUIガイドラインを読む。
です。
これを知ってからiOSというプラットフォームを知るためにも
Human Interface Guidelinesを読むことが大事なのだと思っています。