iPadのためのデザイン – WWDC2020

Session概要

アプリのレイアウトをiPad向けに更新する際のポイント

アプリのナビゲーションをフラット化する

• 画面の一部を更新する時に画面全体を遷移させないようにする
• iPadでは、iPhoneと同じような画面だとスペース領域が多くなるため、スペースを利用して画面遷移数を少なくする
• コンテンツとナビゲーションを同時に見せることのメリットは、画面遷移数の削減だけでなくドラッグ＆ドロップを容易に可能にする
  
  

より多くのコンテンツを表示する

• iPadの画面は大きいため、全体をより多くのコンテンツで埋めるようにする
• ただし、意図的なデザイン選択が必要
  • 実用性と表示密度に対する適切な表示、UIのしやすさを考慮する

より多くのコンテンツを追加する

• iPhone用アプリは小さな画面で表示できることが限られるため、特定の事項にフォーカスする
• iPadは一度に多くの内容を表示可能であるため、モーダルやアクションシートを利用している場合は、意味のあるコンテキストをユーザに提供できているか、他の部分をブロックしていないかを確認する
• UIのコントロールをオーバーレイではなく、同じレイヤーで行うことでより良くなるか確認する
• また、macOS向けにアプリを提供する場合においてもモーダルとオーバーレイを避けることは有効
• 単一の画面に無理やり押し込まないようにする
• 特定のコンテンツにフォーカスさせたり、同じレイヤーで表示させるためのスペースがない場合はモーダルが有効
  
  

特定のコンテンツに深く注意を向けることについて

• Macに比べてiPadは単一のコンテンツに集中する機能がある
• iPad用アプリの操作
  • iPadはタッチ操作優先のデバイスですが、複数の入力方式がサポートされている
    • キーボード
      • Magic Keyboardを利用するユーザ向けにキーボードショートカットを全ての共通のアクションに追加する
      • Mac Catalystサポートする際にも、キーボードショートカットは利用可能なのでサポートしておくと良い\
    • ペンシル
      • スクリブルをサポートする
    • トラックパッド
      • 自動的にサポートされるため、特に気にしなくてよい
• ただし、マルチタッチからサポートするように努め、大きく操作しやすいタップターゲットと高速でなめらかなジェスチャーで構築する
• これらの複数の入力インターフェイスで単一の操作を行えるのはiPad特有である
  
  

アプリケーションを高速に感じさせる方法

• アプリでの操作における反応を速くするのが重要
  • アニメーションやインタラクションの反応が遅いとき、トランジションに時間がかかるときはユーザは不満に感じることがある

SplitView/SideBarNavigationについて

サイドバーの機能

• iPad用に最適化されたアプリのレイアウトを提供する
• モーダル、非モーダルの両方の編集をサポートする
• ドラッグ＆ドロップでマルチウィンドウ、マルチタスク操作が可能
• コンテンツは折り畳んだセクションに整理される
• オーバーレイとして使用できる
• 操作はなめらかなスワイプジェスチャーで、Viewの表示・非表示が容易に可能

サイドバーを追加するための戦略

フラットナビゲーションと階層ナビゲーション

• フラットナビゲーション
  • 同じ重み付けの最上位コンテンツの比較的フラットな構造を使用する
  • 1つか2つはコンテンツ内に深さがあっても、基本的には同じ重み付け
  • このようなアプリは通常タブバーでセクション移動する
• 階層ナビゲーション
  • コンテンツを整理したり、より深いレイヤーへ移動したりする
• 新しいサイドバーはどちらにも効果的である

タブバーを実装しているアプリの場合

• タブバーはアプリの優先度を表しているため、サイドバーの１番上のスペースをタブバー相当にすることを考えれば良い
  • ただし、デバイスの横幅によりCompactになるかRegularとなるかは変わるので、タブバー自体は残しておくのが良い
• 最上位の項目をサイドバーとタブバーで同じにする
  
  

サイドバーに含める要素

• コンテンツをサイドバーに追加するときは、折り畳んだヘッダーの下にネストする
  • これにより正しい階層を最上位の項目とその下のコンテンツの間で維持可能
• 同じコンテンツを選択する方法が2つになっても良い
• サイドバーに含める項目は、ユーザの最も重要なコンテンツへのショートカットと考える
• サイドバーの項目が多くなると、セクションのスクロールと展開が必要になってくるため、コンテンツを追加していきたくなるがアプリ全部を入れたい衝動は抑える
• サイドバーは階層の深くネストされたレベルをブラウズするのに不向きであるため、コンテンツのツリー全体をサイドバーに押し込まないようにする
  • そのような階層の移動はコンテンツエリアを使用する
    
    

サイドバーにおける禁止事項

• サイドバーをiPhoneなどコンパクト幅サイズに使用しないこと
• 同じViewにサイドバーとタブバーを混在させないこと
• 全アプリをサイドバーに入れないこと

サイドバーにおける推奨事項

• プライマリナビゲーションを1番上に配置すること
  • 視認性が高く、主要なセクションへ移動する際にユーザが見る場所
• コンパクト幅レイアウトでは、サイドバーをタブバーにすること
• サイドバーにはアウトライン化されたグリフを使い、タブバーには塗りつぶされたグリフが推奨
• サイドバーにコンテンツを追加する時は、ユーザにとって最も重要なコンテンツから開始すること
  • プライマリナビゲーションの下に配置する
• 編集モードをサポートすること
  • ユーザがニーズに合わせてサイドバーをカスタマイズできるようにする
• ドラッグ＆ドロップのサポートする
  
  

ツールバーのUI

• iPadOS 14から画面サイズの大きいデバイスでは、ツールバーは上に表示されるようになり、画面サイズが小さいデバイスでは引き続き下で表示される
• iPadでのツールバーの重要点
  • iPadOSではツールバーボタンは上をデフォルトにする
    • ボタンの数は1〜3個のツールバーなら大体可能
  • コンパクト幅ではツールバー項目を下にする代替レイアウトを使うこと（上に配置できない場合）