[WWDC23] 空間でのUIデザイン講演 翻訳＆まとめ
こんにちはKeijiroh（@keijirohn）です。
WWDC 2023でApple Vision Proが発表されました。
Design for spatial user interfacesという、空間コンピューティングのUIデザインについての講演を翻訳＆まとめます。
講演してくれたのは、AppleデザインチームのLorena Pazmino (@lorepazmino)とMiquel Estany Rodoriguez (@the_berd)のお二人です。
イントロ
LorenaとMiquelがお届けします。
この講演では、空間コンピューティングでのUIのデザイン方法についてをお話します。
これまでのプラットフォームと一貫した皆さんが慣れているビジュアルデザインを作りました。さらに空間コンピューティングに合うように進化させた要素もあります。
UI foundations
初めにわかりやすくて使いやすい、アプリアイコンとインタフェースについてお話します。
アプリアイコン
アプリアイコンは３次元で現実空間に馴染む様に作ります。
ユーザーが見ると少し拡大され、表示します。システムがハイライトと影でレイヤー間の僅かなDepthを使うビジュアルエフェクトにします。
アイコンには、複数のレイヤーを用います。
他のプラットフォームでは、レイヤーはパララックス（視差）を作るのに使われていますが、私達のシステムでは最大３つの２次元レイヤーを作ることで自動的に３Dのエフェクトを作成します。
３つのレイヤーとは、Background layer、２つのForeground layerです。
それぞれ1024x1024 pixelの正方形の画像となっています。Foreground layerは背景は透明にします。
その後システムにて、円に切り抜かれ、最終的にDepth、影、ハイライトが付与され、アイコンになります。グラフィックは真ん中に表示するようにしましょう。もしグラフィックを端の方まで作ると、拡大された時にはみ出してしまうかもしれません。
またビジュアルに透明はあまり使わないようにしましょう。影とまざってしまいます。
マテリアル
次にマテリアルです。
アイコンをタップすると、様々な空間でアプリが起動します。明るい部屋の中や、狭い部屋、飛行機内、夜など、ユーザーの様々な空間に応じてアプリはライティングを調整します。
アプリはユーザーの周りのわかりやすい場所に配置され、どんな距離でも簡単に使え、どんな明るさでも見えやすくしなければなりません。
私達はGlass Materialというビジュアルランゲージをデザインしました。システムはグラスウィンドウを用い、現実空間の一部として感じられます。現実空間のものや光に応じて、薄く透けて見えます。
ハイライトと影を用いることで、ユーザーは空間の中の位置とサイズを理解します。
このキャンバスにUIを載せることで、軽く、現実空間にあるような印象を与えます。このマテリアルを用いることで、ウィンドウの後ろに他のアプリや人がいることが理解できます。
空間内でのよいエクスペリエンスを与えるために、周りの空間に注意が行くようにし、ウィンドウで空間を隠さないようにしましょう。透明でないウィンドウを使うと、重く、圧迫した印象を与えます。
グラスマテリアルを使うことで、部屋の明るさが変わっても動的にコントラストやカラーバランスを変更でき、空間の一部のように感じられます。
iOSやMacOSと違い、空間コンピューティングでは明るさ調整やダークモードはありませんが、周囲の環境に応じて自然と空間に馴染む色合いになります。
システム的にマテリアル色を変えること、それ自体が機能的に意味をもたせることができます。
例えば、サイドバーに暗いマテリアルを用います。また明るいマテリアルをボタンの様に注意を引くために使います。検索窓には暗いマテリアルを用いることで、周りのコンポーネントと違いをつけられます。
ボタンには明るいマテリアルを用いることで注意をひけます。
さらにコントラストをつけるには、暗いマテリアルをセルの背後につけましょう。
逆に明るいマテリアルをつけると、可読性が下がり、コントラスト差がでないので避けましょう。
タイポグラフィ
全てのプラットフォームで同じフォントを使いますが、空間コンピューティングに合わせて、どの距離でも可読性を高めるため、調整しました。
詳細は、"Principles of spatial design"をご覧ください。
空間コンピューティングで可読性を高めるため、iOSではBodyにRegularを使っているところを空間コンピューティングではMedium、TitleではSemiboldをBoldにします。
またウィンドウを拡大、縮小しても可読性を保つために、Boldや可読性の高いフォントを使う様にしましょう。
鮮やかさ
Vibrancy (鮮やかさ)も可読性を高めるための重要な要素です。後ろにあるものに応じて、ウィンドウ上にあるライトやカラーを調整します。空間コンピューティングでは、後ろにあるものは常に変化し続けるので、可読性を高めるため、リアルタイムでVibrancyを調整します。
後ろのコンテンツに応じてウィンドウのグラスマテリアルのVibrancyを調整することで、可読性を高め、洗練された印象を与えます。システムコンポーネントをできるだけ使いましょう。システムコンポーネントでは、デフォルトでVirancyエフェクトを使っています。
PrimaryのテキストにはVibrancyを使わず、SecondaryのテキストにVibrancyマテリアルを使うことで、ユーザーの理解を高めます。
カラー
グラスウィンドウに使っているカラーとその上のコンテンツのカラーが似たような色になると見づらくなります。テキストや記号に白を使うことで、それを避けられます。
もし白以外の色を使いたい場合は、バックグラウンドに使うか、ボタンに使うようにしましょう。出来るだけ可読性を高めるように調整されているシステムカラーを使うようにしましょう。
レイアウト
エルゴノミクス的に、また簡単にターゲット出来るように作られたレイアウトについてお話します。
人間工学
ユーザーが快適にコンテンツを楽しめるように、コンテンツを配置する位置についてお話します。
私達のシステムでは、主に眼と手を使います。大事な事は、ユーザーの身体的な快適さと安全をまもることです。首と眼の疲労を防ぐ位置にコンテンツを配置することが重要です。
上下に首を動かすより、左右に首を動かす方が簡単です。UIはField of Viewの中に入れ、高すぎたり低すぎたりする位置に配置するのは避けましょう。
大きなキャンバスを用いる際は、縦長より横長のキャンバスにしましょう。
重要なコンテンツは真ん中に配置することで、ユーザーは快適にみることができます。
サイズ
次にコンテンツのサイズについてです。適切なサイズにすることでターゲットしやすくなります。各ユーザーの眼は少しずつ違いがあるので、簡単に眼でターゲット出来るようにデザインします。
ユーザーが簡単に眼で選択できるように、各要素のサイズはこのように設定します。スペースも考慮しましょう。
閉じるボタンのように、28ptで小さくてもその周りに60ptの選択できるスペースがあるので、ユーザーは問題なく選択することが出来ます。
隣のテキストが、インタラクティブな要素出ない場合は、間をあける必要はありません。
また大きいボタンを使う場合は、スペースを開ける必要はありません。
全ての選択できる要素は、最低60 ptのスペースを取るようにしましょう。
ポインティング時のフィードバック
Focus Feedbackについてお話します。
ユーザーが眼でコンポーネントを見た時、少し光るビジュアルエフェクトかホバーエフェクトをつけます。
選択できるコンポーネントを見た時は、ユーザーが何を見ているか理解出来るように、ホバーイフェクトをつけます。
選択できないコンポーネントは、ホバーエフェクトをつけないことで、選択出来ないことを理解します。
メニューリストで使う時は、それぞれのアイテム間に4ptのスペースをあけます。
画像とテキストのセットが要素になる時は、それぞれの要素の範囲を決め、その範囲上でホバーエフェクトをつけることで、その範囲が１つの選択範囲と理解することが出来ます。
角丸にし、内側の角の半径とパディングを足すと外側の角の半径になるようにします。同心円になるように設定します。
ウィンドウとエレメントでも同様に同心円になるように要素の角を設定します。それにより、要素と要素や、要素とウィンドウがそれぞれ繋がっているように感じます。
画面から空間へ
最期に、これまで作られてきたアプリをスクリーン上から空間上に持ってくるかをお話します。
最初にインプットモデルの概要をお話し、アプリの中心となるウィンドウ、タブバー、サイドバーについてお話します。その後、新しい表現方法として、オーナメンツについてお話し、最後に、メニューやポップオーバー、シートなどのようなモダリティについてお話します。
入力
ユーザーは、眼、手、声を使ってインタラクションします。エレメントを見て、指でタップすることで選択します。主には離れた距離で操作します
直接操作することも可能です。
またTrack Padやキーボードを接続して操作することも可能です。
それぞれのインプットをサポートした、各コンポーネントを用意しています。それぞれ適切なフィードバックを返すように作っています。システムコンポーネントを使うことで、素早くアプリを開発し、アプリ自体の開発に力を入れられます。
詳細は、"Design for spatial input"をご覧ください。
ウィンドウ、タブバー、サイドバー
これまでのiOSなど他のプラットフォームで見慣れている、Window、Tab bar、Side barについて説明します。
iOSでは、白のキャンバス上に、全てのコンポーネンツを乗せていました。
新しい空間コンピューティングのシステムでは、グラスマテリアルのウィンドウが空間上に表示されており、コンテンツがその上に乗っています。
iOSでは、タブバーコントローラーは画面の下に水平に配置されています。
空間コンピューティングでは、タブバーは垂直にウィンドウの左側に配置されています。メインコンテンツが表示されているウィンドウ外でアクセスしやすい位置です。
タブバーを軽い印象にしたいので、６つ以上のコンテンツを配置するのは避けましょう。
タブバーの要素を少しの間見つめると、タブバーが拡張されラベルが表示されます。目線を外すと、自動的にタブバーが縮小されラベルが非表示となります。
サイドバーはウィンドウの端に表示することで、ユーザーは現在どのタブにいるのかすぐに理解できます。
オーナメント
新しい表現方法の、オーナメントについて説明します。
これまでは、上部真ん中にアクセサリを配置していました。
空間コンピューティングでは、アクセサリは下部、少し手前側に表示します。ヒエラルキー構造を使い、ユーザーは簡単にアクセスすることができます。
ツールバーを表示するのには、オーナメントが最適です。コンテンツに関連のあるツールを提示します。
オーナメントは、ボタンのセットでグラスマテリアルで囲まれています。なのでボーダレスのボタンを使いましょう。このケースでは、各ボタンがインタラクティブなボタンというのは自明です。またホバーエフェクトをつけます。
20pt重なった状態で表示するようにしましょう。これによりメインウィンドウの一部と感じることができるかつ、メインコンテンツを邪魔しない位置です。グラスマテリアルを使っているので、メインコンテンツが少し透けて見えるのもとてもきれいです。
例えば映画を観ている時にタップすると、コンテンツを邪魔することなくすぐに映画をコントロールするオーナメントが表示されます。
オーナメントは拡張することも可能で、追加情報をのせることも可能です。
オーナメントはメインコンテンツを邪魔することなく、情報を提示することが可能ですので、あなたのアプリでも最大限活用しましょう。
メニュー、ポップアップ、シート
Menus、Popovers、Sheetsについて説明します。
iPadではボタンを押すと、メニューが提示されます。メニューが提示されると、ボタンは少し暗くなります。
ポップアップは指定するボタンを指しており、ナビゲーションバーは非選択状態になっています。
空間コンピューティングでは、メニューやポップアップは、ウィンドウ外で提示されます。デフォルトで各ボタンの真ん中になるように配置されており、ユーザーが見ている箇所で表示されます。
選択されているボタンは、白背景と黒ラベルで表示することで、どのボタンが選択されているかわかりすくします。iPadの時のような矢印無しで提示できます。
白背景ボタンは、選択状態でのみ使用するようにしましょう。
シートは、モーダルビューで表示されます。アプリの中央で表示され、表示される時は親ウィンドウと同じ前後関係で表示します。シートに集中できるかつ、シートが消えるまで親ウィンドウは少し暗くし操作が出来ないようにします。
さらにシートをシートの上に表示する場合は、同様に、親シートを後ろに押し下げ、少し暗くし、その手前側に表示します。
最初のシート表示後、ウィンドウそのままで二番目のシートを同じウィンドウで提示することも可能です。その際は閉じるボタンではなく、戻るボタンにします。
閉じるボタンは、上部左側に配置するようにしましょう。
最後に
これらのシステムモデルを使うことで、開発中はアプリ内の体験に集中することができます。
この記事が気に入ったらサポートをしてみませんか？