iOS Picker、 Menu、アクションを使ったデザイン – WWDC2020

Sessions
目次

Session概要

見栄えが良くユーザーが必要な情報に直接すばやく移動できるiPhoneやiPadのアプリを作成しましょう。アクションや設定にすばやくアクセスできるようアプリにメニューを組み込む方法を確認し、アプリでそれらをいつどこで使用すべきかを学びましょう。ここでは、さらに新しいDate PickerおよびColor Pickerコントロールを紹介し、それらをアプリに組み込む方法についても紹介します https://developer.apple.com/videos/play/wwdc2020/10205/

iOS 14に追加された3つの新しいコンポーネント

  1. Menu
  2. Date and time picker
  3. Color picker

新しいUIコンポーネント

Menu

  • iOS 14ではどのボタンからでもMenuを表示できるようになった
    • Menuはアクションシートとポップオーバーの代替として使用できる機能
  • これらのMenuを追加した理由
    • 前提
      • iOS 13ではMenuはiPhoneのアクションシート、またはiPadのポップオーバーを使用して表示されていた
      • これらのコンポーネントは iOSの最初のバージョンからあり、非常に多くの機能がある
      • しかし、iPhoneの画面が大きくなり、iPadアプリがよりリッチで高密度になるにつれてアクションシートとポップオーバーにはいくつかの欠点が現れ始めた
    • 問題
      • アクションシートを表示すると画面は暗くなり、特にiPadのような大きい画面では画面の切り替えが重くなる
      • アクションシート内のラベルは非常に短いことが多いが、リスト内のアクションにおける領域は非常に大きい
      • 特にiPhoneでは、アクションを選択したりキャンセルしたりするためだけに指を画面の反対側まで動かさなければならないことがよくあります
    • 問題へのアプローチ
      • iOS 14の新しいMenuは上記の問題の多くを解決する
      • タップした場所のすぐ隣にMenuが表示されるため、アクションを選択するのに必要な指の動きがはるかに少なくなる
      • トランジションは非常に高速で軽く、短くなるがスムーズとなる
      • また、背景を暗くしないので画面にそれほど変化がない
      • Menuの項目は小さくて簡潔だが、簡単にタップでき、複数行をサポートしているため長い文字列でも表示可能
      • MenuではMenu以外の領域をタップすることで、Menuをキャンセルすることが可能であるため、キャンセルするためのオプションを追加する必要がない
  • MenuはiOSおよびiPad OSで利用可能なアクセシビリティ設定に準拠している
    • VoiceOverコントラストを上げることやMotionを減らすさらに大きな文字の表示など
  • Menuの一般的な使用例
    • 曖昧性解消
    • ナビゲーション
    • 選択
    • セカンダリ・オプションの表示

Menuのサンプル
アクションシートでの問題
Menuのデザイン
Menuにキャンセルのアクションは含めない

曖昧性解消

  • Menuは適切なタイミングで、ユーザーに具体的なアクションを示すのに役立つ

具体的なアクションをユーザに示す

ナビゲーション

  • 遷移先のリストの提供
    • 過去の画面アクセスしたリストを表示して、遷移対象を選択することで複数回遷移することを防ぐ

過去の遷移先リストを表示する

選択

  • 選択済みのリストを表示して、現在の状態を可視化する

Menuで現在の状態を可視化する

セカンダリ・アクションの収集

  • アクションをMenuに集約させることで、Viewに多くのアクションを散在させず、注目させたいコンテンツに注意を引くことができる

Menuにアクションを集約させることで画面内のアクションを散在させない

注意点

  • Menuに画面内のアクションを全て集約させるのではなく、プライマリ・アクションはMenuから出して画面内で何ができるかを明確にする
    • そのため、プライマリ・アクションとセカンダリ・アクションを見極め画面内に表示するアクションを選択して設計することが重要となる
  • Menu内におけるセカンダリ・アクションに破壊的アクション（例えば、何かを削除するような操作）を含める場合は十分な確認機能が必要となる
    • Menuでのアクションから確認操作をする場合に、iPhoneではアクションシートを、iPadではポップオーバーの使用が推奨される

プライマリ・アクションをMenuに含めている
プライマリ・アクションはMenuに含めない
破壊的アクションの確認はアクションシートで行う

Date and time picker

  • 日付・時刻の表示の改善
    • 日・週・月の表示が改善され、日時の変更操作もしやすくなった
  • 日付または時刻の設定をホイールを使用せずタッチ、鉛筆、キーボード、カーソルなどで簡単に選択可能
  • Viewにインラインで表示できる場合に非常にうまく機能する。ただし、常にうまく機能するわけではないため、iOS 14ではこれらのpickerを表示するcompactという新しい方法がある
    • UIKitにcompactモードでDate pickerを要求すると下記の画像のようなボタンが表示され、タップするとViewの上にモーダル表示される
    • Date picker, time pickerも同様に動作する
    • compact pickerはpickerをインラインで表示すること難しい場合に最適な手法
  • iPadとMacの両方で同じ情報が表示されるためアプリを簡単に変換可能

以前のDatePicker
新しいDatePicker
新しいDatePickerを使用したサンプル
モーダル表示時

Color Picker

  • iOS 14から4つの方法でColor Pickerを選択可能
    • グリッド
    • スペクトル
    • RGB値の入力
    • 画面からの色の選択
      • 左上隅のピペットをタップすると、拡大鏡が表示される
  • アプリ間で共有される色のパレットを保持し、iPadとMacの間でアプリを一致させるのに役立つ

グリッド、スペクトル、RGB値からの選択
画面からの色の選択
最新情報をチェックしよう！