iPadOSポインタのデザイン 〜その1〜 – WWDC2020

Sessions
目次

Session概要

iPadアプリにポインタのパワーをもたらす。
Appleのデザインチームがタッチ入力を補完するためのiPadOSポインタをどのようなアプローチでデザインし、ワークフローをさらに効率的で満足のいくものにするためにアプリでポインタインタラクションをどのようにカスタマイズして改良できるかについて。
ポインタの適応型の精度によって、ユーザがそのサイズに関わらずインターフェイス要素をすばやく確実にターゲットにできるようになる仕組みをご覧ください。
また、ポインタエフェクトの選択やポインタ形状の設計の方法、トラックパッドジェスチャーの組み込み、キーボードモディファイアなど、アプリ独自のニーズを補完するためのポインタに関するベストプラクティスについての紹介

https://developer.apple.com/videos/play/wwdc2020/10640/

新しいポインタの設計原則、機能

iPadにポインタが必要な理由

  • 人間工学
    • トラックパッドの機能を追加することで、快適な使用間を提供する
    • 画面をタッチせずにキーボードと同じ平面に手を置くことができるのでテキスト編集が簡単になる
      • テキスト編集は細かい作業が必要となるため、指で選択することが難しいケースがある
    • トラックパッドを使用したインターフェイスを制御する最善策
      • iPadOSでは従来のカーソルだと各アプリが指先の大きさに合わせて設計されているため、高精度のツールで低精度のコントロールを操作することになる
      • カーソルは好きな場所にポインタを正確に動かすことが必要な作業に向いている
    • しかし、マウスやトラックパッドでのカーソルをiPadに適用させるとボタンを押すつもりが押せていなかったりなど直感的なUIとならないケースがある
    • インターフェイス層とポインティング層の2つがあり、各層が相互作用している
      • 従来のポインタはピクセルレベルの精密さで動くので、インターフェイスのどのピクセルにもポインタを置けますが、下層インターフェイスはUIの領域外で構築されているため、正確なピクセル座標は考慮されない
      • そのため、ポインタの精度とアプリが必要とする精度には矛盾がある
    • 上記から、ユーザインタフェースに合致するようにポインタの精度を下げた方がよい
      • ポインタの精度の動的調整である、このコンセプトを適応精度(Adaptive Precision)と呼ぶ


テキスト編集時のポインタ
高精度なポインタ
低精度なインターフェイス

適応精度の機能

  • ポインタは円で始まり、ポインティングシステムが周囲のインターフェイスの精密度を認識していない場合のデフォルト状態です
    • ポインタはボタンの精密度に合わせて調整する
    • ボタンが並んでいる所へポインタを動かすと、ポインタは自動でボタンにスナップし、形の変化は精度の低下を示す
    • ボタン間でポインタを動かすと、ポインタはボタンに合わせて形を変えるので、どのボタンにポインタを合わせているかが明確となる
  • ポインタの反応により、間違ったボタンのクリックを減らす
  • ポインタはエレメントを強調表示しており、カーソルでは対象のUIにかぶらないような設計となっている
  • スナップされたポインタはアプリの全面からボタンのアイコンやラベルの背面に移動するまで、Z軸に沿って移動している
    • ユーザはアイコンのTrueカラーを見ることができ、ポインタが背面にあるアイコンはデザイナーが意図した明るさが保たれている

スナッピングのイメージ
新しいポインタではUIにかぶらない
左側はデザイナーが意図した色が保たれている

ポインタとテキスト間の相互作用

  • テキスト選択時にテキストの上か下の行を誤って選択した経験があるかもしれません
    • 従来のピクセルレベルの精密さで動くポインタでは各ピクセルをクリックすることとなる
    • しかし、テキストは行レベルの精度であるため、クリックしているテキストの特定の行のみを考慮する
    • インターフェイスの精密さの間の不一致が、意図しないテキストを選択する要因となる
  • ポインタをテキスト表示上に動かすと、丸形からI型にポインタの形状が変わり、ポインタを動かすと各行にスナップするのでどこに合わせているかが明確となる
    • ポインティングシステムでは2本の線の間のあいまいな位置にポインタを合わせることはできない

行単位でどこを選択しているか把握可能

ポインタ実装

  • 標準のUIKitコントロールを使用すると、ボタンとテキストの両方の動作を自由に行える

ポインタが裏でどのように機能しているか

  • モデルポインタ
    • ポインタを画面上で動かす際には、2つのポインタが動いており、1つは画面上で見えているが、もう一つは見えない
    • ポインタのカーソルを合わせる項目を判断するために使用される
      • ポインタがボタンの押下領域の端に接近すると、サイズを変えボタンを強調表示する
      • このボタンへのアニメーション効果をスナッピングという
  • ポインタのカーソル位置はドラッグ中は正確な位置となるが、指を離すとポインタは中央に自動配置される
    • これを中央再配置と呼び、トラックパッドに再び指を置いた時に容易にボタンをクリックができる
  • 慣性と磁性
    • 慣性はスクロール、スワイプ時に慣性でポインタを移動させる
    • 磁性は、インターフェイスをスキャンして目的のアイコンを検出し、慣性の移動 + 慣性の移動位置から一定の半径まで円をスキャンして目的のアイコンを特定する
    • 下記の画像だとスワイプした範囲で1番近い目的のエレメントは設定アプリであるため、自動でポインタを移動させる

慣性と磁性による目的エレメントの自動特定
最新情報をチェックしよう！