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

iOS 14で変わるピッカーと、新しく登場したカラーピッカー

WWDC 2020のDesign with iOS pickers, menus and actionsを見たのでメモです。

※ここに出てくるスクリーンショットは、全て上記の動画のものです。

概要

iPhoneやiPadのアプリでiOS 14から使えるようになった3つのコンポーネントについての紹介。
スクリーンショット 2020-06-25 7.52.35.png

Menu

iOS 13まで

iPhoneはアクションシート、iPadの場合はポップオーバーを使ってメニューを表示していた。最近はiPhoneの画面が大きくなったりiPadの画面が高密度になってきたので、次のような欠点が見えてくるようになってきた。

  • 背景が暗くなり、重苦しさがあった
  • アクション名が短くても、シートは大きくなってしまう
  • アクション内容が制限されている
  • ボタンの位置とアクションシートの位置が離れることがあるので指の移動量が多くなることがある

iOS 14 ~

どのボタンからもメニューを表示できるようになった。
スクリーンショット 2020-06-25 7.58.45.png
ボタンをタップしたらすぐそばにメニューが表示される。複数行にも対応してるし、選択やナビゲーションの用途にも使える。
スクリーンショット 2020-06-25 8.05.37.png
表示はコンテキストメニューとよく似ている。各アクションの左側にラベルがあり、右側にはアイコンがついている。アイコンはSF Symbolかカスタム画像を入れることができる。タイトルを追加することも、セパレータを追加することもできる。
スクリーンショット 2020-06-25 8.10.37.png

項目の選択とキャンセル

普通にタップして選択することもできるし、メニューが仕込まれたボタンをタップ、そのまま指を離さず、出てきたメニューの選択したい項目まで指をスライド、指を離してもボタンが選択されたことになる(動画の2:50-3:00くらいを見るといい)。メニューを消すにはメニュー外をタップすれば良い。そのため、キャンセルボタンを用意する必要はない。

特徴

新しいメニューには次のような特徴がある。

曖昧さを解消できる

メニューは選択の曖昧さを解消するのに役立つ。例えば写真アプリでは「+」という追加ボタンがある。これをタップすると具体的に何を追加したいかを尋ねるメニューが出現する。
スクリーンショット 2020-06-25 8.24.02.png
スクリーンショット 2020-06-25 8.24.16.png

ナビゲーションにもなる

メニューはナビゲーションにも使える。例えばSafariでは戻るボタンを長押しするとそのセッションで以前訪れたサイトのリストが表示される。
スクリーンショット 2020-06-25 8.28.29.png

選択ができる

「もっと見る」ボタンもアクションメニューを表示させるうってつけの例。Fileアプリを例に取ると、iOS 13だとアクションがバラバラに配置されていたが、iOS 14だと一つにまとめられる。とはいえ、何でもかんでも「もっと見る」の中に隠すのは推奨してない。メインアクションとサブアクションをしっかり切り分けて考えて配置する必要がある。
スクリーンショット 2020-06-25 8.34.03.png

セカンダリオプションが表示できる

Safariの場合、普通に右上のボタンをタップするとこうなるが…
スクリーンショット 2020-06-25 8.39.42.png
長押しすると関連メニューが出てくるようになっている。
スクリーンショット 2020-06-25 8.40.25.png

破壊的なアクションの扱い

リマインダーアプリで削除を行う場合の例。破壊的なアクションは慎重に確認させるべきものなので、削除の確認アクションはメニューとは別の場所にあるべき。
スクリーンショット 2020-06-25 8.43.04.png
スクリーンショット 2020-06-25 8.45.48.png
これは新メニュー内に限らず、他の破壊的なアクションボタンの場合でも同様。
スクリーンショット 2020-06-25 8.48.18.png

日付ピッカー

iOS 13までの日付、時間ピッカーはこのようなデザインだった。複数のホイールを動かさなければならなかった。
スクリーンショット 2020-06-25 8.53.20.png
iOS 14からはこのようなデザインになる。
スクリーンショット 2020-06-25 8.54.51.png
左右にスライドさせるだけで簡単に月を移動できる。年月の部分をタップするとホイールで選択することもできる。
スクリーンショット 2020-06-25 8.56.44.png
時間は自分で入力することになる。
スクリーンショット 2020-06-25 8.58.26.png
リマインダーの例のようにピッカーをインラインで表示できれば効果的だが、必ずしもそうできない場合もある。その場合はコンパクトモードを使う。UIKitに日付ピッカーをリクエストするとこのようなボタンが表示される。
スクリーンショット 2020-06-25 14.13.19.png
ボタンをタップすると日付ピッカーが表示される。ピッカーの外側をタップすると決定になる。
スクリーンショット 2020-06-25 14.13.58.png

カラーピッカー

iOS 14では新しくカラーピッカーが導入されている。グリッド、スペクトル、RGBから色を選ぶことができる。
スクリーンショット 2020-06-25 14.25.07.png
左上のピペットを使えば拡大鏡が出てくるので、例えば写真から色を選ぶこともできる。
スクリーンショット 2020-06-25 14.26.48.png
また、どのアプリからでもアクセスできるパレットに色を保存することもできる。
スクリーンショット 2020-06-25 14.28.08.png

akatsuki174
iOS→Androidエンジニアになりました。それなりに使える言語はSwift, Objective-C, Kotlin, Java。 UX, データ分析, グロースハック, デザイン, 自然言語処理にも興味あり。 1分野に固まらず、いろんな分野のことについて書いていこうと思います。
techtrain
プロのエンジニアを目指すU30(30歳以下)の方に現役エンジニアにメンタリングもらえるコミュニティです。
https://techbowl.co.jp/techtrain/
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
ユーザーは見つかりませんでした