Designed for iPad

ハイライト

Apple は、iPadOS 14 の iPad アプリの中核となるデザイン パターンとして、サイドバー、オーバーレイ サイドバー、3 列レイアウト、トップ ツールバー、およびマルチ入力コラボレーションを挙げています。これにより、アプリは全画面ジャンプやモーダル オクルージョンを軽減し、ドラッグ アンド ドロップ、キーボード、トラックパッド、Apple Pencil がそれぞれの役割を果たせるようになります。

主要内容

iPad アプリによくある問題は、iPhone の単一画面プロセスを拡大してしまうことです。写真 iPadOS 13 でアルバムを選択すると、画面全体が切り替わり、右側に多くの空白スペースが残ります。ホームでの部屋の選択はタブとポップオーバーの後ろに隠れています。カレンダーでカレンダーを選択すると、イベント リストもブロックされます。ユーザーは大きな画面を持ちますが、小さな画面と同じようにページに出入りするために前後に移動する必要があります。

iPadOS 14 のデザインの方向性は、ナビゲーション、コンテンツ、コンテキストを同時に表示できるようにすることです。写真ではサイドバーを使用して、アルバムの入り口を左側に、写真のコンテンツを右側に配置します。ホームではサイドバーを使用してルームに簡単にアクセスできるようにし、ドラッグ アンド ドロップで直接並べ替えることができます。 Mail は新しいサイドバーの動作を使用して、最大の iPad Pro だけでなくすべての iPad に 3 列レイアウトを導入します。

この一連のアイデアは、モーダル インターフェイスの使用方法も変えます。ファイルは名前変更をリストに戻すので、ユーザーは同じフォルダー内の他の名前を参照できます。カレンダーはカレンダーのスイッチをイベントと同じレベルまで上げ、表示を切り替えると右側の結果が即座に変わります。 iPad の大画面は、コンテンツを拡大するためだけでなく、進行中の作業を保存するためにも使用されます。

入力方法もまた分水嶺です。セッションでは、まずマルチタッチを完了してから、キーボード、トラックパッド、Apple Pencil を追加する必要があります。標準コントロールは多くのシステム機能を自動的に取得しますが、カスタム コントロールはポインタとスクリブルを完了する必要があります。さらに重要なのは、iPad ではコマンドとクリック、オプションとドラッグ、鉛筆とタッチ パネルなどの組み合わせ入力が可能であり、これらの操作を iPhone や Mac にコピーするのは困難です。

詳細

サイドバーを使用して全画面表示のジャンプを減らす

(02:46) Session の最初の提案は、フラット化ナビゲーションです。 iPad の画面が十分に広い場合、全画面プッシュするとスペースが無駄になり、ユーザーが現在いる場所を見失うことがよくあります。写真が全画面アルバムからサイドバーに切り替わると、アルバムの入り口、写真のコンテンツ、およびドラッグ アンド ドロップ ターゲットが同時に存在できます。

従来の流れ:
アルバムを選択 -> 画面全体がアルバム内容に切り替わる -> 戻ってから別の場所を選び直す

iPadOS 14 の流れ:
左側の sidebar にアルバム、メディアタイプ、グループを残す -> 右側に写真内容を表示する -> ドラッグ時にはターゲットがすでに見えている

キーポイント:

• 左側のナビゲーションと右側のコンテンツが同時に表示されるため、ユーザーは最初に現在のコンテンツから離れる必要はありません。
• ドラッグアンドドロップの対象はドラッグ開始時にすでに表示されており、操作経路が短くなります。
• macOS はオクルージョンベースのインターフェイスへの依存度が低いため、このタイプのレイアウトは Mac Catalyst にも適しています。

(15:42) iPadOS 14 のサイドバーは、単純な左側のリストではありません。編集モード、ドラッグ アンド ドロップ、折りたたみ可能なセクション、オーバーレイ プレゼンテーション、スワイプ ジェスチャをサポートします。写真のサイドバーはオーバーレイに折りたたむことができます。スペースが不十分な場合、ポートレートおよび分割ビューでは自動的にオーバーレイが使用されます。

sidebar の構造:
上部: primary navigation、例: Photos、Albums、For You
下部: ユーザー作成またはよく使う内容、例: albums、playlists、mailboxes
グループ: collapsible sections で階層を保つ
編集: show、hide、reorder、drag-and-drop をサポートする
スペース不足: sidebar は overlay として表示され、コンテンツ領域を優先して残す

キーポイント:

• 上部の領域はタブ バーに相当する役割を果たし、アプリへの最も重要な入り口です。
• ユーザーが作成したコンテンツは、プライマリ ナビゲーションに適切に収まり、折りたたみ可能なヘッダーで編成されます。
• サイドバーは、完全なディープ ツリーをホストするのには適していません。ディープ ブラウジングはコンテンツ領域に任せる必要があります。
• コンパクトな幅と iPhone では、引き続きタブ バーまたは標準のテーブル行を使用する必要があります。

コンテンツの密度とコンテキストを画面に戻す

(05:05) Files の例は、大きな画面には単に大きなアイコン以上のものが必要であることを示しています。 iPadOS 14 では、ファイルでは画面上の約 3 倍の数のアイテムが、小さいながらも読みやすくクリック可能なアイコンで表示されます。この変更の目的は、スクロールと検索のコストを削減することです。

リストまたはグリッドのチェック:
テキストは引き続き読めるか
タッチターゲットは引き続きタップしやすいか
同一画面の項目数によってスクロールが減っているか
ユーザーはより速く比較、選択、ドラッグアンドドロップできるか

キーポイント:

• 濃度調整は、まず可読性とタッチの目標を満たしている必要があります。
• ファイル、写真、タスク、プロジェクト ライブラリなどのオブジェクト コレクションは、高密度の恩恵を受けることがよくあります。
• 密度が増加すると、より多くのターゲットが画面上に残るため、ドラッグ アンド ドロップやバッチ選択がよりスムーズになります。

(06:15) セッションは、不必要なオクルージョンの削減を繰り返し強調してきました。リスト内のファイルの名前は変更でき、ユーザーは同じフォルダー内の他のファイル名を確認することもできます。カレンダーは、カレンダーの切り替えをイベント リストと同じレベルに移動し、ユーザーはカレンダーを切り替えるときに右側に結果をすぐに確認できます。

modal sheet または popover に出会ったとき:
まず、それが出所のコンテキストを提供しているかを確認する
次に、ユーザーが参照する必要のある内容を遮っていないかを確認する
答えが遮りに寄るなら、inline editing、side panel、または同階層のコントロールを検討する

キーポイント:

• ポップオーバーの矢印は、ソースを説明している場合にのみ価値があります。
• インライン編集により、ユーザーはファイル名、日付、現在のリストのステータスなどの参照情報を保持できます。
• iPhone のコンパクトな画面は依然としてモーダル フォーカスに適しています。 iPad の通常の幅は、同じレベルの制御に適しています。

複数の入力に独自の位置を持たせる

(10:46) iPad は依然としてタッチファーストデバイスですが、キーボード、トラックパッド、ペンシルはすべて最高級のサポートを受ける必要があります。標準のテキスト入力コントロールは自動的に Scribble を取得します。システム コントロールはすでに多くのトラックパッド動作をサポートしています。カスタム コントロールは、システムが単独ではそのセマンティクスを理解できないため、追加のチェックが必要です。

入力サポートの順序:
Multi-Touch: 主要経路。すべての核心操作はタッチで完了できるようにする
Keyboard: よく使う操作にショートカットを追加する
Trackpad: まずシステムコントロールの既定動作を使い、その後 custom controls を処理する
Apple Pencil: 標準テキストコントロールは Scribble を自動サポートする。カスタムテキスト体験は個別に対応する

キーポイント:

• キーボード ショートカットはタッチ ユーザーを煩わせませんが、ヘビー ユーザーの効率を大幅に向上させます。
• Mac Catalyst は多くのキーボード ショートカットの利点を継承します。
• 標準コントロールは、ポインタと Scribble への低コストのエントリ ポイントです。
• カスタム コントロール、特にカスタム入力ボックスとキャンバスは個別にテストする必要があります。

(12:31) 入力を組み合わせることにより、iPad のようなインタラクションがさらに可能になります。 Safari では、Command キーを押しながらクリックして新しいタブを開き、Option キーを押しながらクリックしてファイルをダウンロードします。セッションでは Loom も披露しました。左手はタッチ ダイヤルを使用してアニメーション フレームを切り替え、右手は鉛筆を使用して現在のフレームを描画します。

組み合わせ入力の設計:
Command + tap: 開く、展開する、または代替経路に入る
Option + drag: 項目をコピーする
Shift + tap: 複数選択する
Touch + Pencil: 片手でツールまたはフレームを制御し、もう片方の手で精密に描画する

キーポイント:

• 修飾キーはタッチ、トラックパッドなどの入力で機能する必要があります。
• 鉛筆はすべての UI 操作を担当する必要はありません。タッチはコンテキストの切り替えとツールの制御を担当できます。
• 組み合わせた入力は、アニメーション、描画、ドキュメント編集、ファイル管理、プロのクリエイティブ アプリに適しています。

応答性は割り込み可能なマイクロインタラクションから生まれます

(14:13) セッションは、iPadOS 14 のドロップダウン メニューの応答性を示しています。メニューが表示されている間、ユーザーはすでに目的の項目までスライドできます。メニューの外でスクロールが開始されると、システムはメニューを閉じ、同時にその下にあるコンテンツをスクロールします。アニメーションはユーザーをロックアウトしてはなりません。

応答性チェック:
アニメーション中も入力を受け付けられるか
メニュー外のスクロールでコンテンツを引き続き動かせるか
ユーザーは遷移の終了を待たないと次の操作を実行できないのか
キャンセル、選択、スクロールを 1 回のジェスチャにまとめられるか

キーポイント:

• マイクロインタラクションの目標は、アニメーションが終了するのを待つのではなく、アプリがユーザーのアクションを維持できるようにすることです。
• オクルージョン コントロールが表示された場合でも、どのジェスチャがそれらと競合しないかを考える必要があります。
• アニメーションは方向感覚を保持できますが、後続の操作をブロックすることはできません。

ツールバーは iPad のサイズに応じて変更する必要があります

(26:50) iPadOS 14 では、多くのツールバー項目が上部に移動されます。 1 ～ 3 個のボタンがあるツールバーの場合、多くの場合、上部のナビゲーション バーは大きな画面での使用に適しています。幅がコンパクトな場合はボタンが下に戻ります。

toolbar レイアウト:
Regular width: 主要な action は上部に置くことを優先する
1 から 3 個のボタン: よくある候補。top placement を試せる
Compact width: 水平方向のスペースが足りない場合、ボタンを下部に戻す

キーポイント:

• 上部のボタンを使用すると、下部の空のツールバーが占める画面を縮小できます。 ・同じアプリでも通常幅とコンパクト幅の2種類の配置方法を用意する必要があります。
• ツールバーの位置の変更は、デバイス モデルだけで判断するのではなく、サイズ クラスに制限する必要があります。

重要ポイント

• ライブラリ アプリをサイドバー エントリに変更: 手順: プロジェクト、フォト アルバム、ノートブック、プレイリスト、またはルーム エントリを通常の幅のサイドバーに配置します。 実行する価値がある理由: セッション内の写真、ホーム、音楽、ファイルはすべてサイドバーを使用してナビゲーション パスを短縮します。 開始方法: まず、元のタブ バーの最上位項目をサイドバーの最上部に配置し、次にユーザーが頻繁に使用するリストを折りたたみ可能なグループに配置します。

• ファイルとコンテンツのリストにインライン編集を追加: 内容: 名前変更、フィルタリングの切り替え、表示設定の調整などをリストまたはコンテンツの横に配置します。 実行する価値がある理由: ファイルとカレンダーのサンプルは両方ともオクルージョンを軽減し、ユーザーが参照用に周囲のコンテンツを保持できるようにします。 開始方法: 既存のモーダル シートとポップオーバーの棚卸しを行い、単純なフォームまたはスイッチのみを含むインターフェイスを優先的に置き換えます。

• クリエイティブ アプリ向けの Design Pencil とタッチの両手プロセス: 作業内容: Pencil を使用して描画、注釈、または書き込みを行い、タッチを使用してフレーム、ツール、レイヤー、またはタイムラインを切り替えます。 実行する価値がある理由: Loom のデモンストレーションは、2 つの入力が並列である場合、クリエイティブなプロセスでのモード切り替えが大幅に少なくなるということを示しています。 開始方法: 作成時に最も頻繁に行われる 2 つのアクションをリストし、正確なアクションを Pencil に渡し、コンテキストの切り替えを指で簡単に行えるようにします。

• キーボードとトラックパッドで高頻度のアクションを完了します: 内容: 新規作成、閉じる、選択、コピー、ダウンロード、詳細を開くなどのアクションにショートカット キーまたは修飾子の組み合わせを追加します。 これを行う価値がある理由: Session は、一般的な操作にキーボード ショートカットを提供することを明確に推奨しています。コマンド タップ、オプション ドラッグ、および Shift タップはすべて、大画面の効率を向上させることができます。 開始方法: メニュー コマンドとバッチ選択から始めて、それらがタッチ、キーボード、トラックパッドで動作することを確認します。

• レギュラーとコンパクトのレイアウト チェック リストを作成します: やるべきこと: サイドバー、ツールバー、3 列レイアウト、オーバーレイ サイドバー、タブ バーのサイズ切り替えテストのセットを作成します。 実行する価値がある理由: セッションでポートレート、分​​割ビュー、コンパクト幅を繰り返し表示すると、サイドバーとツールバーの表示が変わります。 開始方法: ナビゲーション構造を変更するたびに、メインの入り口が通常の幅、ポートレート、分​​割ビュー、iPhone ビューで一貫しているかどうかを確認します。

関連セッション

• iPad 用のビルド — ローカル設計原則を UIKit の複数列レイアウト、サイドバー、リスト、ローモーダル ナビゲーションの実装に適用します。
• UICollectionView のリスト — UICollectionView リストの外観を使用してサイドバーと最新のリストを作成する方法を説明します。
• iPadOS ポインター用にビルド — iPad ポインターのボタン、カスタム ビュー、領域、およびアニメーション調整を処理します。
• iPad 用 Scribble について — Apple Pencil の手書き入力が標準のテキスト コントロールやカスタム テキスト エクスペリエンスにどのように適応するかについて詳しく説明します。
• アプリでハードウェア キーボードをサポート — iPad および Mac Catalyst アプリにショートカット キー、修飾キー、キーボード イベントのサポートを追加します。