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

ポインタ効果における注意点と重要点

• ポインタをカスタムしない時はスナッピングを有効化しないようにする
• 極力、磁力効果を使用するようにする
• ポインタの効果には一貫性をもたせ、オブジェクトの形を設計する
• 快適な使用感を実現するためにオブジェクトの押下領域を広げる
• リフト効果を使う時は正確なサイズと角の丸みを使うことを心がける
• ホバー効果を使う時はオブジェクトの拡大縮小、シャドウ、着色を有効にすることができる
  
  

ポインタの外観

ポインタの素材

ポインタの背景色

• iPadOSのポインタにはスムーズに背景色に順応する素材があり、ユーザの邪魔をすることなくいつでも視覚的なコントラストを提供する
• 背景色が変わるとポインタの色も変化する
• この素材は背景を不明瞭にすることなくコントラストを維持する
• iPadでトラックパッドを使用する際にポインタでインタラクションの領域を示すようにしたから
• また、ポインタ自体に過剰に焦点が置かれコンテンツに集中できないという状況が起きないようにしている
• しかし、ポインタは必要な時に意図を表示するべきで、例えば、ボタンの上では形の変更だけでなく、色も明るくなりラベルの読みやすさが向上する
  • クリックすると円が縮小され、ダークカラーになりクリック操作に対して満足のいく反応が返される
    
    

ポインタの形状

• 形状はタッチを示す円で、サイズはタッチベースのUIエレメントに関連する
• 形状変化
  • 円から角丸長方形
  • 円からI型などの垂直線
  • 線にも変化する
  • 円から任意の形状への変形
    • 機能や精密度が変わった時にユーザに通知することができる
    • 例えば、ポインタを十字型にしてより高い精度で領域を示すことができる
    • また、ドラッグの動きの方向を知らせる三角形のペアに変形することもできる
• Commandキーを押したままにするとポインタの機能が変更される
• UIPointerShape APIで変形させる

// ポインタを変形させるAPI

// Rectangle
UIPointerShape.roundedRect(CGRect, radius: CGFloat)

// Arbitrary
UIPointerShape.path(UIBezierPath)

カスタムポインタの設計方法

• ポインタは常に変形するという特性を覚えておく必要がある
• カスタム形状はシンプルで簡単に理解できるもの にする
  • ユーザはポインタによって現在のコンテキストで取るべき動作を理解するため
  • Keynoteでは、ユーザがドラッグし選択肢を選ぶための方向を示している
• 可能な限りSolid Shapeを使用する
  • Solid Shapeは読みやすさを維持し、線だけの形状は読みにくさの原因となる
  • Solid Shapeの使用が難しい場合は太い線を使用し、線の太さは視覚的ウェイトの維持に十分な太さであるようにする
  • 線が細すぎるとポインタを見つけるのが難しくなる
• デフォルトのポインタと似たようなサイズを使用する
  • ポインタはデフォルトの状態からカスタムした状態に変形できるためカスタムポインタが小さすぎる場合は見失い、大きい場合もコンテンツが見づらくなり邪魔となる
• アンカーポイントを使用してカスタムポインタを設計する際は、アンカーポイントと合わせる
  • カスタムした形が円形、単純な幾何学的な形状または対象形状である場合、相互作用のポイントを形状の中心として見るのが自然
  • 形が方向または特定の領域を指す場合、その意図した領域にアンカーポイントをあわせる必要がある
    

カスタムポインタの設計時の注意点

• カスタムポインタに標準のポインタ動作を適用する
  • カスタムナビゲーションバーのボタンで、標準の強調表示効果が使われていない場合、不具合と思うユーザがいる
• 似たようなポインタには似たような機能を適用する
• 不要なカスタムポインタは作らない

ポインタのインタラクション

• ポインタにより精度を上げる
  • インターフェイスのより小さなUI要素に迅速なインタラクト機能を追加できる
  • アプリのレイアウトの更新や密度の増加、ポインタのみで機能する機能の導入は避け、ポインタの精度を活用しアプリをより迅速かつ直感的に使えるようにする
• 優れた視覚的反応とスナッピング動作のポインタ効果が使える隣接制御があるアプリの領域を考える
• 画面上のポインタの存在は意図の優れた指標として機能する
  • そのため、以前はタップが必要だったインタラクションを加速化できる
• ポインティングデバイスは専用のジェスチャーやスクロールホイールでスクロールできるので、アプリはクリックとドラッグに即座に反応し瞬時にドラッグ＆ドロップや、ドラッグ＆セレクトなどを実装可能
• セカンダリクリック
  • トラックパッドで2本指でクリック、マウスの2つ目のボタンを押す、コントロールキーを長押ししてクリックして特定の動作を高速なインタラクションとして実行する
  • UIのどこで適用させるかを検討する必要がある