What's new in iPad app design

ハイライト

iPadOS 16 の Stage Manager、外部ディスプレイ対応、Display Zoom により、iPad アプリはより大きな画面、異なるウィンドウサイズ、複数の入力方法に対応する必要があります。Apple Design Team は、ツールバー、ドキュメントメニュー、編集メニュー、検索と置換、ナビゲーション、検索、テーブル、選択の 8 つのデザイン更新を紹介します。

主要内容

iPad アプリは、拡大した iPhone アプリとして扱われることが多かったです。シンプルな閲覧ではそれでも機能しますが、キーボード、トラックパッド、外部ディスプレイを接続すると問題が露呈します。ツールの入口が深すぎる、ドキュメント操作が分散している、一括選択が使いにくい、検索の位置がわかりにくい、といった課題です。

iPadOS 16 はデザイン目標を「デスクトップ並みの効率を保ちながら、iPad のタッチと直接操作を維持する」方向へ転換しました。Stage Manager、外部ディスプレイ、Display Zoom が利用可能なスペースを広げ、より多くのウィンドウサイズをもたらします。Apple はそれに合わせてシステムレベルの UI パターンを更新しました。

このセッションは 2 つのシナリオで解説します。ドキュメント編集とコンテンツ閲覧です。前者はツールバー、ドキュメントメニュー、編集メニュー、検索と置換に焦点を当て、後者はナビゲーション、検索、テーブル、選択を扱います。

詳細

ツールバー：よく使うワークフローを中央に配置

（01:34）iPadOS 16 の新しいツールバーレイアウトは、タイトルを左側に置き、中央エリアにより多くの操作スペースを確保します。Pages の例では、テーブル、チャート、図形、写真の挿入などの操作がツールバー中央に引き上げられています。

中央エリアはカスタマイズ可能です。ユーザーはボタンの追加、削除、並べ替えができます。システムの推奨：機能が多い場合や、上級機能が全員に必要でない場合はカスタマイズを有効にしてください。ナビゲーションボタンや常に表示が必要な重要な機能は、カスタマイズ可能なエリアに入れないでください。

（03:30）ウィンドウが縮小すると、中央のボタンはオーバーフローメニューに移り、さらに小さくなると leading と trailing エリアのみが残ります。重要なボタンは trailing エリアに配置してください。

ドキュメントメニュー：ドキュメントレベルの操作をタイトルに集約

（04:32）ドキュメントメニューはタイトルエリアにあり、ドキュメントビューアやエディタに適しています。Duplicate、Rename、Move、Export、Print など、ドキュメント全体に影響する操作をここに配置します。Share はコンテンツをアプリ外に送る用途のままです。ドキュメント内部のコンテンツに影響する操作は、ツールバーまたは編集メニューに置きます。

編集メニューと検索と置換

（05:54）編集メニューはタッチとポインタに適応します。タッチ時は横スクロール、ポインタ時はより完全な縦リストを表示します。標準の Cut、Copy、Paste は削除しないでください。カスタム操作は関連するシステム操作の近くに配置します。Notes ではチェックリストとテキスト書式オプションを同じグループにまとめています。

（07:20）Find and Replace はシステムキーボードに統合され、フレーズの部分一致とすべて置換に対応します。ハードウェアキーボード接続時は、アプリ上部にコンパクトな形で表示されます。Apple はオーバーフローメニューとキーボードショートカットの両方でアクセスを提供することを推奨しています。

コンテンツ閲覧：ナビゲーション、検索、複数選択

（08:36）ブラウザスタイルのナビゲーションは、ファイルブラウザやウェブブラウザなど階層が複雑なアプリに適しています。Files は進む/戻るボタンで、サイドバーの異なる位置からのフォルダ間を移動できます。階層がフラットなアプリにはこのパターンは不要です。

（09:45）ナビゲーションバーの右上の検索は、現在の画面のコンテンツをフィルタするのに適し、最近の検索、推奨検索、フィルタ条件を表示できます。検索範囲がアプリ全体の場合は、専用の検索タブを使用してください。

（10:45）バンド選択は自動的に編集モードに入らなくなりました。ポインタユーザーは Command と Shift で複数選択し、右クリックで一括操作を実行できます。タッチユーザーは長押しで同じコンテキストメニューを呼び出せます。リストは Command による複数選択、ドラッグ移動、一括メニューにも対応しています。

重要ポイント

高頻度の操作をツールバー中央に引き上げる：ドキュメント、描画、編集アプリでは「画像を挿入」「チャートを追加」「新しいレイヤー」を中央エリアに配置できます。ウィンドウが縮小したら自動的にオーバーフローメニューに移動させましょう。
ドキュメントタイトルにメニューを追加：アプリが独立したドキュメントを開く場合、Duplicate、Rename、Move、Export、Print をタイトルに集約します。ユーザーはファイルリストに戻る必要がありません。
タッチとポインタの両方の編集に対応：キャンバスオブジェクト、リスト項目、テキストはすべて編集メニューをサポートすべきです。タッチユーザーには横メニュー、ポインタユーザーには完全な縦メニューを表示します。
複雑な階層に進む/戻るを追加：ナレッジベース、ファイル管理、プロジェクト管理アプリは階層間を頻繁に移動します。ブラウザスタイルのナビゲーションは「サイドバーに戻ってもう一度タップする」操作を減らせます。