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

トラックパッドサポートをアプリに追加する際に使用するポインタの効果

• iPadOSのポインタを相互作用のあるエレメントの上に合わせるとポインタの外観と動作の両方そして、相互作用のあるエレメントが1つとなり、目的としている項目に焦点が当たります
  • このポインタの統合とコンテンツをポインタ効果と呼ぶ
  • これはコンテキストとコンテンツの種類に基づいて変形する
• iPadOSには3つのポインタ効果があり、アプリ内で相互作用のあるエレメントに焦点を当てることが可能です
• ポインタサポートをアプリに追加する際は提供される効果の1つを使うか、アプリに合わせてカスタムするか、希望であれば完全に新しいものを設計することもできる
• 下記に効果の種類を示す

強調表示の効果

• 背景のない小さなアイコンに使用される
  • Barボタンやタブバーなどにはデフォルトの効果となる
• アイコン上に合わせると、ポインタはその背後に移動して明るい色となりアイコンの背景となる
• アイコンを選択すると、そのコンテンツは穏やかな視差効果のポインタと一緒に拡大される
• ポインタの動きに連動した明るい色の効果は、強調表示されたオブジェクトの上に追加される
• クリックすると、3層が縮小されオブジェクトの中心に移動します
  
  

リフト効果

• 背景が既にある中規模のエレメントに使用されることが多く、ポインタがエレメントに変わり、コンテンツを隠すことなく強調表示する
• iPadでは、アプリアイコンやコントロールセンターのモジュールで利用されている
• ポインタはアイコンに近づくとその背後に隠れるため、拡大して影を追加するとオブジェクトが浮き上がって見え項目の色が周囲に馴染み背後にある背景を照らします
• これらは異なる層で、選択したエレメントの上部や下部に追加される
  • Specular：反射性のある強調表示がエレメントを照らすために追加される
  • Element：エレメント自体が拡大され、その色は周囲となじみ覆う
  • Radiosity：ライト効果をラジオシティと呼ぶ
  • Shadow：影がエレメントの下に投影され、エレメントが画面上に浮かんで見える効果をつくる
• 反射性のライトは選択したオブジェクトを強調表示するが2つ目の目的がある
  • ライトに位置は下にあるポインタの実際の位置を示している
  • 反射性のライトはポインタの位置を示しジェスチャーと画面上の動きを紐付ける
  • ライトの強さはオブジェクトのサイズにも基づいており、ポインタの位置が見づらい大きなエレメントの場合は大きく明るくなり、そうした効果が不要な小さいオブジェクトの小さくなるか見えなくなる
    • この処理はシステム側で自動で行われる
      
      

ホバー効果

• ポインタが大きなオブジェクトの形状に変わると適切に動作しない場合に使用される効果
• ポインタをこの効果を使っているオブジェクトに置いた場合、オブジェクトはその外観を変化させ、焦点が当てられたことを示す
• そのカーソルはデフォルトの形を維持し、オブジェクトの上で可視化される
• カスタマイズ可能で、オブジェクトの拡大縮小やそれを浮かび上がらせる影のほか、オブジェクトに追加された色を使え、3つの任意の組み合わせることも可能
  
  

アプリに合った最善の効果の選び方と使用方法について

• ポインタ効果を選択する主なルールとして、最初は自動効果を試してみる
  • 自動効果を使用する際のシステムはオブジェクトタイプとロケーションやオブジェクトサイズ、そして形などのルールを組み合わせ最適な効果を判断する
• 自動効果は、相互作用のあるエレメントに対してUIPointerEffectを割り当てる際にautomaticを選択するだけで良い
• 下記のケースだと、強調表示効果を使うと、周囲にある他のボタンと外観に一貫性が見られるようになるため
• オブジェクトのサイズを設計する際も一貫性に気を配る
  
  

• 下記の例では3つのボタンが並んでいますが、強調表示の背景サイズは統一されていない
• ポインタを合わせた際、非統一性があると見栄えが悪くなるため、同じグループのオブジェクトには確実にサイズに一貫性を持たせるようにする
  • ツールバーサイズのボタンに関しては、37ポイントの高さの使用が推奨される
• ただし、効果の一貫性は常に正しい選択ではなく、例えばセグメント化されたアイコン用のポインタの動作に関してはAppleは複数の効果が適用される方がよりよいと判断した
  • 一般的に、四角いオブジェクトの周囲には強調表示効果を使わない方が無難
    
    

オブジェクトの押下領域

• オブジェクトの押下領域は、ポインタの効果を有効化する領域を判断するので、確実に適切なサイズにする必要がある
  • 押下領域が狭すぎるとユーザがエレメントを操作する際にかなり正確に操作しなくてはならないと感じてしまう
  • 一方でエレメントの押下領域が広すぎると、エレメントからポインタを離す時ユーザっが多大な労力を費やすことになる
• ベゼルのあるエレメントの周囲には約12ポイントのpaddingを追加し、ベゼルがないエレメントの周囲には約24ポイントのpaddingを追加する
• 押下領域を拡大すれば、タッチスクリーンを使用する際のアプリの使用感も快適となる
• 押下領域を定義する際の一般的な課題は、オブジェクト間に隙間が残ること
  • そのため、オブジェクト間で押下領域を拡大し、その間に隙間が残らないようにするとポインタがオブジェクト間でうまく機能する
• リフト効果を用いる際によく発生する問題は周囲の拡大された影です
  • アプリは拡大したサイズのオブジェクト向けに設計されていないため、周囲の他のUIエレメントによって影がクリップされる場合がある
  • 影を適切に表示されるために、リフト効果を適用するオブジェクトは必ず周囲の層の上に配置する
    
    

アプリでポインタ効果をカスタマイズし組み合わせる方法

• 強調表示効果とリフト効果を使う際、オブジェクトのサイズや角の丸みを指定することができる
  • オブジェクトが円形であるか、角の丸みが8ポイントではない場合、正確な丸みを提供することが重要
• ホバー効果を使う時は、オブジェクトを拡大するか強調表示されている場合は影をつける
  • 拡大縮小効果と影の両方をオンまたはオフにできるため、アプリのデザインに合った適切な組み合わせを選択可能
  • しかし、オブジェクトを拡大しない場合は影の仕様は推奨しない
  • ホバーと組み合わせ可能な他の効果は着色で、拡大しなくても強調させることが可能
• ホバー効果を使用する際はポインタの形状もカスタムできる