忙しい人向けの Design with iOS pickers, menus and actions: Part 1 - #WWDC20

Design with iOS pickers, menus and actions - WWDC20 - Videos - Apple Developer

・パート1（この記事）
・パート2

冒頭

iOS / iPad で利用可能な新しいコンポーネントを紹介する。

メニュー

どのボタンからでもメニューが利用できるようになった。iOS 13 以前におけるコンテキストメニューのようなもの。

アクションシートは iOS の初期からあったが、画面が大きくなるにつれて欠点も見えてきた。

・背景が暗くなるため、大画面では遷移が重くなる
・ラベルが短くても画面いっぱいに表示される
・iPhone では選択をするために、画面の端から端に指を移動する必要がある

メニューではこれらの問題を解消する。長い文字列や複数行の文字列にも対応している。

コンテキストメニューのように、ラベル・アイコン、タイトル、セパレーターが利用できる。

メニューはドラッグ＆ドロップでも選択できるし、タップで表示させてから選択することもできる。

メニューの範囲外をタップすることでキャンセルできるので、”キャンセル”は不要。

メニューの主な用途としては、曖昧さの回避、ナビゲーション、選択、副次的なオプション、などが挙げられる。

曖昧さの回避

写真アプリの”＋”（追加）がタップされた時に、実際に何を追加するのかを尋ねたり・・・

ノートアプリの”カメラ”がタップされた時に、「どこから追加するか」を尋ねたり・・・

ビデオの”完了”がタップされた時に、「どのように保存するのか」を尋ねたり。これらは曖昧さの回避の良い例。

ナビゲーション

Safari では戻るボタンで履歴の一覧を表示することでナビゲーションとして利用している。Navigation Stack における戻るボタンも同様。

選択

選択の例として、Podcast アプリでは、”ソート”をタップするとメニューが表示されるが、現在のソート条件がチェックマークで確認できる。

副次的なオプション

画面に配置するほど主要なアクションでないものを、メニューから簡単にアクセスできるようにするのは副次的なオプションとしての良い例。

iOS 13 の画面を見ると、多くのアクションが画面に散らばっており、ファイルにアクセスする作業から注意を奪っていた。

メッセージアプリの”編集”でも同様のメニューが見られる。

すべてのアクションを1つのメニューに集約することは推奨しない。実際にボタンをタップするまで、「何ができるのか」がユーザはわからないため。

メッセージアプリにおいて”作成”は主要なアクションであるため、残す決定をした。

ジェスチャーによってメニューが変化する場合もある。Safari ではウィンドウボタンをタップした時、シングルタップでは次のように表示されるが、

ロングタップでは次のようにメニューが表示される。

削除などの破壊的アクションについては、ユーザが誤って選択してしまった場合を考慮して、

アクションシートで確認をすること。ユーザは指を動かす時間・労力が必要になるが、これは誤った削除とのトレードオフとして妥協できる。

メールの”キャンセル”では、メニューの代わりにアクションシートを利用し、誤った削除を防いでいる。

メニューは Mac のものから経験を受けている。曖昧さの回避だったり、

ナビゲーションだったり。

メニューのまとめ

・アクションシートやポップオーバーの代わりに利用できる
・曖昧さの回避、ナビゲーション、選択、副次的なオプションに利用できる
・破壊的なアクションについては、アクションシートなどで確認する

パート2に続く

免責

・本記事は公開情報のみに基づいて作成されています。
・要約（意訳）のみなので、詳細はセッション動画をご確認ください。