空間ユーザーインターフェイスのためのデザイン

♪ メロウ インストロメンタル ヒップホップ ♪ ♪ Miquel Estany Rodriguezです Lorena Pazminoです Apple Design Teamの所属です 空間ユーザーインターフェイスの デザイン方法についてお伝えします 既存のプラットフォームと一貫性があり 親しみがあるように 視覚言語を構築しました 特定の要素を進化させ イマーシブで空間的な体験に 適用させました Miquel: 最初にUI基盤や デザイン原則について確認します 読みやすく使いやすい アプリのアイコンや インターフェイスのためのものです その次に 重要なコンセプトや ベストプラクティスについて確認し 人間工学的で簡単にターゲットできる レイアウトを実現しました 最後に どのようにして アプリをスクリーンから 空間に持ち込むことができるのかを 全てのシステム要素の確認を通じて お伝えします すでに知っているものもあれば 全く新しいものもあるでしょう それでは まずはUI基盤に関してです このセクションで説明する コアとなるデザイン原則です アプリのアイコンについて ホームビューを親しみがあるものにしつつも その先についても考えました アプリのアイコンを立体化して 空間に存在するように見せました アイコンに視線を向けると拡大します 鏡面ハイライトや影を追加することで この視覚効果を促進し レイヤー間に奥行きを出します 素晴らしいアイコンを作り出すには どうすれば良いでしょうか まず 複数レイヤーを使います 他のプラットフォームでは 視差効果を出すためレイヤーを使います ここでは平面のレイヤーを使うだけで システムが3Dエフェクトを作り出します 全てのアイコンに 最大3つまでレイヤーを持たせることでき バックグラウンドレイヤーと その上にフォアグラウンドレイヤーが2つ 各レイヤーは四角い画像で サイズは 1024 × 1024ピクセル フォアグラウンドレイヤーは両方が透明です バックグラウンドレイヤーは端から端まで 四角い画像としてデザインします そして全てのレイヤーが 円形マスクで切り取られます 最後に レイヤーを合わせると ガラスのレイヤーが 自動で適用され奥行きや 鏡面ハイライト そして影をつけます グラフィックは中心に配置するようにします 端に寄りすぎると 拡大したときに 中心からずれて見えてしまいます 半透明ピクセルの 広範領域は避けましょう 不透明度の少ないレイヤーは 背後の影とブレンドされてしまいます 立体的なアプリアイコンを 簡単に作れることが確認できました 次はマテリアルについてです アプリのアイコンをタップすると さまざまな場所でアプリが立ち上がります 昼間の明るい部屋や 飛行機の中 夜などです 周囲の光の状況に 適応する必要があります 周囲の環境に合わせることで 配置しやすくし どんな距離や光の状況でも 使いやすく見やすくなるよう 新しい視覚言語をデザインしました ガラスのマテリアルです システム定義されている ガラスのウインドウは 物理的な世界の一部のように感じられます ユニークな特性で 周囲の光や バーチャルのコンテンツが見えます さらに鏡面ハイライトや影で 空間での大きさや位置の感覚を強化します UIのキャンバスとしても機能します 軽く感じ 感覚が伝わってきます 軽いマテリアルなので他のアプリのように ウインドウの裏には何かがあるとも感じます 素晴らしい空間体験を提供するには 周囲に気づけることが大事です ウインドウにはソリッドな色を 使わないようにします 不透明なウインドウが多すぎると インターフェイスは重く感じます ガラスは光にダイナミックに反応し 空間に合わせ コントラストや バランスを調整します 昼間から夜に このように変化します iOSやmacOSと違って このプラットフォームには ライトやダークという 明確な外観設定はありません 代わりに 光の前に配置されると ガラスとUIが適応し 背景が自然に暗くなります システム定義された バイブラントなマテリアルは さまざまな場面や光の状態に合わせて アプリをよく見せてくれます 例を見てみましょう まずはガラスウインドウです アプリのセクションを分けたい場合 例えばサイドバーに 暗いマテリアルを使います ボタンのような明るいマテリアルは インタラクティブな要素に注目を集めます 暗いマテリアルを使って 標準コンポーネントのコントラストを 増やすこともできます 入力フィールドなど UI要素を使ったミュージックアプリです テキストのデフォルトは白になっています このようなロックアップを作りたいとき そして明るいボタンを追加したいとき ガラスのマテリアルの上に置くのが お勧めです もっとコントラストが必要なら 暗いセルを背後に置きます 明るいマテリアルを重ねるのは避けましょう 読みやすさに影響しコントラストが減ります 次はタイポグラフィが このプラットフォームに どう適応してきたかです 親しみやすさのため全てのフォントは 全プラットフォームで使える セマンティックな名前にしました ポイントベースの ユニットシステムにしました どの距離からでも読みやすいです 詳しくは "空間デザインの原則"を ご覧ください 読みやすさのために フォントウェイトも 変更しました 詳しく見てみましょう バイブラントなマテリアルに対して テキストのコントラストを向上させるため フォントを少し太くしました 例えば iOSでは 本文のテキストは レギュラーウェイトを使っています ここではミディアムです タイトルにはセミボールドの代わりに ボールドにして読みやすいようにしました 結果的にトラッキングが 少し増えました これまでのフォントスタイルに 新しいフォントを 2つ追加しました 幅の広い編集レイアウトを 活用できます アーケードの特大タイトル1の例です クールですよね ウインドウはサイズをかなり拡大できますが 小さくて細いフォントを カスタマイズしても 読みにくくなります そういう場合には太くするか 読みやすいよう 最適化された書体を使います システムフォントなどです 次はバイブランスについて システム全体で読みやすくするため 最も重要な点です バイブランすは光と色を前に出すことで マテリアルの上に表示される フォアグラウンドのコンテンツを 明るくします このプラットフォームでは 背景が常に変化するので バイブランスはリアルタイムで更新され 文字が常に読めるようにします 例で説明しましょう バイブランスはガラスマテリアル上で 機能します 読みやすくするとともに システムマテリアルを もっとリッチで洗練されたものにします できるだけシステムコンポーネントを 使うようにしてください デフォルトで このバイブランスエフェクトが活用されます バイブランスをなくしてみましょう バイブランスによって読みやすさ マテリアルの見え方が変わります オンとオフを繰り返してみます どう活用できるか考えてみましょう バイブランスを使って テキスト シンボル 塗りつぶしの 階層を示唆することができます 3つのモードがあります: 1次 2次 3次です 1次は標準テキストです 2次は概要や文字 注釈や字幕に使います ガラスマテリアルには さまざまな色があります 背後の色が反映されるためです ガラスの色が似ている場合 ガラスの上のバイブランスは 見えにくいかもしれません 白いテキストやシンボルを使うようにすれば 確実に見えます 色を使いたい場合は バックグラウンドレイヤーや ボタンの色に使います できるだけカスタムカラーよりも システムカラーを使います 読みやすいように調整され ガラス上での色合いや コントラストを保つよう 動的に適応します これらがコアコンポーネントに変更を加えた デザイン原則でした 素材やタイポグラフィ そしてバイブランス これでこのプラットフォームで アプリが見られます Lorenaに説明してもらいます アプリを画面から空間へと移行する上で 簡単にターゲットできる 人間工学的なレイアウトについてです Lorena: Miquel ありがとう 快適だと思える位置に コンテンツを配置する方法についてです そしてターゲットしやすい コンテンツのサイズを 決める方法です 最後に 視線にフォーカスした フィードバックの作成についてです このプラットフォームでは 主に視線や手を使います 心地よさと安全性を 優先にした体験を生み出します デザインのエルゴノミクスを 考える必要があります コンテンツの配置は意識的に行い 目や首が疲れないようにします 例えば首の可動域は 頭を左右に動かす方が 上下に動かすよりも簡単です ユーザーインターフェイスを 人の視野におさめましょう 高すぎたり低すぎたりに気をつけましょう アプリに大きなキャンバスが必要なら 縦長より横長にします 例えばフリーボードでは キャンバスは水平方向へ広がります 最も重要な情報は中心に そうすることで コンテンツが見やすくなります コンテンツ配置の ベストプラクティスを説明しました 次はコンテンツのサイズです 人はそれぞれユニークで 人により目も違います そのため見やすいサイズにします 詳しく見てみましょう インタラクティブ要素は ターゲットエリアを 最低60ポイントの スペースにします 簡単に選択することができます UI要素を小さくもできます 標準的なボタンの 44ポイントだとした場合 十分なスペースを持たせます このボタンを例にとると 最低でも８ポイントが 周辺に必要です そうすることで 60ポイントの ターゲットエリアになります いくつかのボタンを並べるときは 標準のシステムボタンを使います ボタン間隔は最低16ポイントです 次に視覚的に小さい要素を使うときの話です 「閉じる」コントロールなど 28ポイントのミニボタンを使います セクションヘッダのような場所です 小さく見えるかもしれませんが 周囲は60ポイントなので 選択しやすくなっています 別の例を見てみましょう このボタンにはまだ余白があります 隣のテキストは インタラクティブではないからです 大や特大ボタンは 周囲に余白は あまり必要ありません インタラクティブ要素は 最低60ポイントのスペースを 用意するようにしましょう レイアウト要素の サイズについて話をしました 次はフォーカスフィードバックです このプラットフォームの 全てのインタラクティブ要素に 埋め込まれています システムが提供する要素を見ると 微かな明るさやホバーエフェクトを 自動的に表示します ホバーエフェクトで インターフェイスのどの部分が インタラクティブなのか 見るだけでわかります この共有ボタンのように アイテムがアクティブになると フォーカスフィードバックは止まります 意図する要素を見ているという 確かな感覚が得られます そこで指でタップできます レイアウトを作る際に ホバーエフェクトを考慮しましょう たとえばリストやメニューを作る際 各アイテムの間にパディングを設けて ホバーエフェクトが重ならないようにします 4ポイントがお勧めです ロックアップを作るときは 人が視線を向けたときに ホバーエフェクトを表示するよう 形状を作ります こちらの例では画像の下に テキストがあります 各ロックアップは 単一のインタラクティブ要素です カスタム領域を設定し 視線を向けると明るくなるようにします こうすることで全体のエリアが 選択可能な要素だとわかります それぞれの形状の間に 少し余白を設けます それから ネスティングされた要素に 相対的な角丸半径や パディングを設けます 互いに同心円状にします 角丸のサイズを決めるには 簡単な式があります ネスティング要素の角丸半径に 間のパディング そして外枠を足すと 外側の角丸半径がわかります 角丸にするために 連続した角になるようにします システム全体で全要素は ウインドウの中心と角の要素に始まり 互いに同心円状になっています ネスティング要素は互いに同心円状に そうすることで グループを成すものだとわかります レイアウトを作る際の ベストプラクティスでした これから使用するコンポーネントを 詳しく見てみましょう 既存の知識を 空間コンピューティングに 適用していきます まずは入力モデル その後にアプリのコア構造の セットアップについて確認します ウインドウ タブ サイドバーを使います コンテンツの新しい表示方法についても 確認していきます 最後はモダリティについて まずは入力に関してです 人は視線や手 声を使って デバイスとインタラクションします 主にはある程度の距離から要素を見て 指を使いタップします 要素に直接触れて 選択することも可能です さらに キーボードや トラックパッドを追加することで さまざまな入力でインタラクションできます

システムとのインタラクションは 魔法のようなものに感じられます それはつまり各モデルに対する 適切なフィードバックが 必要なことを意味します 全システム要素が それぞれの入力をサポートできるように 構築されているシステム要素を使いましょう 新しい手段でインターフェイスを 素早く作ることできるので アプリをユニークなものにすることに 時間を費やすことができます 入力について もっと詳しく知るには "空間入力のためのデザイン"を ご覧ください 例を見てみましょう iOSを知っているなら この要素は ほとんどわかるでしょう ウインドウ タブバー そしてサイドバーから説明します iOSアプリのコア構造から話をします 不透明マテリアルのウインドウを用意します 全ての要素がおさまるものにします Miquelが言ったようにウインドウは ガラスのマテリアルを持ちます ウインドウバーは下にあり 空間の中でアプリを流動的に動かせます その上にコンテンツを載せます

iPhoneではウインドウの下に メインナビゲーションの タブバーが水平にあります 1回のタップで アプリのトップ部分に 素早くアクセスできます ここではタブバーは垂直で ウインドウの左側 固定された位置に浮いています 邪魔にならないのに アクセスしやすい場所です メインのコンテンツから 目を離さなくても どこにあるかわかります 軽く感じるようにして 6アイテム以上は避けましょう タブバーを見て アイテムをすぐに選択できます もう少し長く見ていると 自動で拡大して 各セクションのラベルを表示します 目をそらすと自動で閉じます そのためコンテンツに集中できます 例えばこのアルバムのように サブナビゲーションが必要な場合 サイドバーはタブバーの横にあります タブの中でどこにあるか すぐにわかります アプリのコア構造に関してでした 新しいプレゼンスタイルである オーナメントについて説明します 写真アプリにはアクセサリ要素の 年 月 日 がトップにあります このプラットフォームは 画面に縛られないので アクセサリはオーナメントとして 下部に配置されています ウインドウの少しだけ前です 階層を作るため奥行きを利用した アクセスしやすいコントロールです オーナメントで ツールバーを表示するのもいいでしょう コンテンツに関連したアクションを 素早く行うことができます アプリに奥行きも加えられます オーナメントは通常 ボタンの集合で ガラスのコンテナの中にあります ボーダーのないボタンを作るのに 適しています この場合 インタラクティブ要素であることは明確で 視線を向けると ホバーエフェクトが得られます 音楽アプリでのオーナメントの使用例です 再生中コントロールは アプリのどこにいても オーナメントとして表示されます これにより音楽をコントロールしながら 次の曲を検索できます オーナメントがウィンドの下端にある際 下端と20ポイント重なるように配置します コンテンツの邪魔にならずに メインウインドウと 統合している感覚が得られます ガラスがコンテンツの色を取り入れるので 美しい見た目です

オーナメントは非表示も可能です 単一のコンテンツに 集中するときだけを推奨します 例えば写真や映画を見るときです このようにタップすると 主となる体験から気が散ることなく 重要なコントロールにアクセスできます さらにオーナメントは拡大し 追加のコンテンツを表示したり 独自のナビゲーション階層を 持つこともできます アプリのどこにオーナメントを 配置するかを考えましょう 柔軟性がありコンテンツの邪魔にならず 奥行きを与えます オーナメントの話をしたので 次はメニューやポップオーバー シートの説明をします iPadではメニューは 呼び出しボタンの最先端に揃えられます メニューを開くとボタンは暗くなります ポップオーバーは呼び出し要素を指し ナビゲーションバーが非アクティブになります このプラットフォームでは メニューやポップオーバーは ウインドウの外へと拡張できます デフォルトでは中心に配置されます コンテンツはいつも ユーザーが見ている場所に現れます 覚えておくべきことは 呼び出しボタンを選択した状態に 変更することです このプラットフォームではボタンは選択時に 白い背景に黒いラベルに変わります どのボタンで ポップオーバーが出るのか 明確にわかります このプラットフォームの一般ルールとして 選択時 以外は 白い背景のボタンを避けるようにしましょう 最後にシートの話です このシステムでシートは モーダルビューとして表示されます アプリの中央に表示されます モーダルは 親ウインドウと同じZ位置となり 親ウインドウが後ろに下がり暗くなります シートが消されるまで 親ビューにインタラクションが及ばないため 集中することができます もう1つシートが必要な場合は セカンダリのモーダルが前に表示され 追加のレイヤーが全てを後ろに押しやります 横から再度見ましょう 全ての要素をZ方向にスタックしているので ネストされたビューでは プッシュナビゲーションを使います モーダル内の プッシュナビゲーションの例です セカンダリビューが「閉じる」の代わりに 「戻る」ボタンを表示します 「閉じる」と「戻る」ボタンが 上端の左にあります システムパターンとして 「閉じる」ボタンは必ず 上端の左に置きましょう Miquel: アプリ構築の基盤と システムコンポーネントの 使い方について確認しました どうやってアプリを特別なものにするのか 豊かな空間体験のため ウインドウ外の空間をどう使うか 例えば写真では ブラウジング体験は従来と同じで イメージ体験の 新しい方法に焦点を当てました 空間キャプチャは過去の瞬間を思い出し コンテンツをイマーシブに体験できる ユニークで特別な方法です アクセスしやすくて親しみがある 直感的なアプリのデザイン方法も 説明しました 周囲に溶け込むマテリアルを使いました 奥行きのある レイヤーを使用したインターフェイスや 見た目の美しさと親しみ 使いやすいコンポーネントが このプラットフォームにはあります 全てのシステムコンポーネントは Appleエコシステムとの一貫性を保ちながら 幅広い入力をサポートするよう デザインされています デザイナーやデベロッパのみなさんは 新しいイマーシブな空間体験を 作ることに集中できます ご視聴ありがとうございました チャオ！ ♪