-
iPhone Duoに向けたデザイン
iPhone Duoは初の折りたたみ式iPhoneで、刷新されたiOSを搭載しています。アップデートされたソフトウェアを支えるデザイン原則を理解し、さまざまなポーズの間でコントロールがどのように移動するかを確認しながら、レイアウトを適応させる必要がある箇所とその理由を学びましょう。
関連する章
- 0:00 - Introduction
- 0:28 - Design principles
- 3:42 - Adapting your design
- 5:07 - Positioning controls
- 6:33 - Designing for the outer display
- 7:34 - Designing for the inner display
- 8:36 - Sheet behavior
- 9:28 - Fold avoidance
- 10:01 - Conclusion
リソース
関連ビデオ
Tech Talks
-
このビデオを検索
こんにちは 「Design for iPhone Duo」へようこそ Marcosです そしてVinceです Apple Designチームの デザイナーです このセッションでは iPhone Duoで快適に使える アプリのデザイン方法を紹介します まずは このデバイスの 設計理念について説明します その後 iPhone Duoの 多様な構成において アプリが見栄えよく表示されるよう 適合させる方法を紹介します
iPhone Duoを閉じた状態では コンパクトで 使い慣れた形状となり 手に心地よく収まります 開くと iPhone史上最大かつ 最も没入感のある ディスプレイが現れます お気に入りのアプリや コンテンツを表示するのに 最適なキャンバスでありながら ポケットに収まるサイズです iPhone Duoは さまざまなスタイルで 手に持ったり置いたりできます 本のように半分に 折りたたんで使ったり ノートパソコンのように テーブルの上に置き 内側画面を自分に向けて使ったり エッジで立てかけて 自立させることも可能です
iPhone Duoは高い柔軟性を備え どのような状況でも 好みの方法で楽しめます 体験をお楽しみいただけます 閉じた状態では 画面は 従来のiPhoneよりも 幅が広く 高さが低くなっています 通常は上部や下部に 配置されるボタン類は 縦方向のスペースを最大化し 右手の親指で 操作しやすくするために ディスプレイの右側に移動しています これにより 左側にコンテンツ用の 途切れない領域が生まれ これは従来の画面比率を持つ iPhoneの表示領域に匹敵します 側面の新しいスペースには アプリのコントロールが配置されます これには タブバー ツールバー そしてボタンや新しく 再設計されたステータスバー ライブアクティビティによって 縦方向に拡張する Dynamic Islandなどの ナビゲーションコントロールを含みます この効率的なスペース活用は 内側のディスプレイにも及びます
そこでもコントロールは側面に移動し 縦方向のスペースを最大化しつつ 操作しやすい位置に配置されます
iPhone Duoを本のように 半分に折りたたんで使用すると ディスプレイは中央で自然に湾曲します
その際 コンテンツは自動的に 中央領域から離れます
テキストや画像は 読みやすいよう カーブ部分から離れて配置されます ボタンや操作要素も側面に移動し 操作しやすくなります
このようにして カーブはレイアウトにおける 自然な仕切りとなります
縦向きでも同様です
デバイスが部分的に折りたたまれると 操作要素はディスプレイの 下半分に移動し
デバイスを置いたまま 安定して操作しやすくなります
iPhone Duoでは 2つのアプリを 並べて実行できます 新しいマルチタスク方式です iPhoneのホームジェスチャーに 基づいており スムーズで馴染みやすい操作感です
アプリを横にドラッグするだけで Split Viewを作成できます
この新しい50/50の分割により 画面は独立して動作する2つの領域に
分割されるため 片方の領域で タスクを継続しながら もう片方を簡単に利用できます Split Viewでは 操作ボタンは 外側の端に沿って配置されます アプリが左側にある場合 操作ボタンも画面の左端に移動し 親指で届きやすい位置に保たれ 中央領域から離れます
ピクチャ・イン・ピクチャで 動画を再生している際 画面の上部に固定して 視聴できるようになりました 現在表示中のアプリは 残りの領域に 合わせて縦方向に調整されます さらに 部分的に折りたたむと 動画が画面の半分に拡大されます つまり アプリは動画サイズの変化に 合わせて リアルタイムに 縦方向の表示を調整します Vince iPhone Duoに向けた アプリについて詳しく教えてください 詳しく教えてください もちろんです デザインをどのように適合させるかに ついてお話ししましょう ユーザーはさまざまなポーズで iPhone Duoを使用します アプリは あらゆるポーズにおいて 見栄えがよい必要があります しかし それはポーズごとに カスタムレイアウトを設計する 必要があるという意味ではありません 代わりに 2つのサイズクラスに 注目してください 外側ディスプレイ用の そして内側画面用のです 固定幅やブレークポイント 特定の画面に紐づく メトリクスは避けてください
常にこれらのサイズクラスを ターゲットにしてください レイアウトは レイアウトマージンと 水平セーフエリアインセットを使って 構築してください
これらをすでに使用しているなら 準備は順調です アプリはすでにiPhone Duoに 対応できているはずです 別の考え方として アプリのサイズを自由に変更できるよう 設計すれば 問題なく対応できます さて 先ほど 「ポーズごとに カスタムデザインを行う 必要はない」とお伝えしました ですが 検討する価値のある オプションレイアウトが1つあります iPhone Duoは テーブルに置いて ハンズフリーで操作するのに最適です メディアを画面上部に配置し タップ可能なコントロールは 画面下部の安定した ベース部分に配置します このポーズ用に特別な レイアウトを作る場合は 他のポーズと同じコントロールと 全体の階層構造を必ず 維持するようにしてください
機能を特定のポーズに縛り付けては いけません そのため こうしたレイアウトの多くでは コントロールが側面に配置されます 詳しく教えてもらえますか？ はい 先ほど触れたように 縦方向のスペースを活用できる 新しい仕組みです その仕組みを見てみましょう
iPhone Duoでは コントロールが画面の 側面に配置されており 操作しやすくなっています
水平バーを残しているのは 縦向き 表示時の内側ディスプレイのみです
ここにはコンテンツ用の 十分な縦領域があるためです
留意していただきたいのは アプリのコントロールだけが 側面に移動したわけではない点です これらのコントロールは ライブアクティビティや ステータスバーなど システムの 動的要素とこの縦スペースを 共有することになります スペースが不足している場合 自動的にオーバーフローメニューに 折りたたまれます 対応事項が多く見えるかもしれませんが すでにiPhoneアプリをお持ちなら 既存のコントロールを iPhone Duoに移行するのは簡単で その多くは自動的に処理されます
アプリ上部のツールバーボタンは この縦方向スペースの 上部に配置され
下部のツールバーボタンは iPhone Duoでは下部に移動します また タブバーがある場合は 下部に配置されたままになります ただし いくつかの例外があります すべての要素がサイドに 移動するわけではありません テキストボタンや セグメントコントロールなど 右側スペースに対して 幅が広すぎる項目は iPhone Duoでも ナビゲーションバーにそのまま 配置されるべきです
コントロールがサイドにあることで 多くのレイアウトが非対称になります デザイナーが知っておくべき点は 何でしょうか？ ええ 自社アプリをiPhone Duoに 対応させる過程で 多くのことを学びました コンテンツのスタイルに応じて 非常に効果的なアプローチが いくつかあります
普段は画面全体の中央に コンテンツを配置することに 慣れていることでしょう しかし iPhone Duoでは コントロールに隠れないよう 多くのコンテンツで オフセットが必要になります 水平セーフエリアインセットに 合わせて配置されていれば そのオフセットは 自動的に適用されます ただし 一部のUIについては オフセットなしで 中央揃えにする必要があります これは スクロールしない 没入感のある視覚的インターフェースに 適しています 右側のコントロールによって 操作要素が隠されない限り うまく機能します 両方のアプローチを 組み合わせることも可能です 全幅の背景画像やヘッダーと インセットされた前景コンテンツを スクロール可能にして併用する手法です すべての操作要素が スクロール領域内に収まるようにし 隠れてしまわないよう注意してください これで外側ディスプレイについては 説明しましたが 内側のディスプレイについては どうでしょうか？
良い質問ですね 単に横に引き伸ばしただけの アプリにはしたくないでしょう 最適なアプローチを いくつか紹介します Split Viewは 優れた選択肢の1つです アプリの階層構造を 複数レベルで同時に 表示することが可能です
外側と内側の表示間で 階層構造が変わらないよう 注意してください
機能を開閉のどちらか一方に 限定してはいけません ユーザーは使用中にデバイスを 頻繁に開閉する可能性があるため 開閉を頻繁に行うため 内側でも外側でも予測可能で 一貫した動作が求められます 別の選択肢は 幅の広い内側画面に 合わせたコンテンツの最適化です 最適化する方法です の この例のように 縦に積み重ねたレイアウトを採用し 横のスペースが広がった際に 2列レイアウトに 再配置されるようにできます 再配置させることが可能です タブバーを備えたアプリ向けの 3つ目の選択肢として 内側画面でタブバーを サイドバーとして表示できます
ただし これはすべての アプリに適しているわけではありません アプリの この例のように 情報量の多い アプリで最も効果を発揮します シートにも このデバイス向けに 新しい動作が追加されています 追加されています ポーズに応じて 知っておくべきいくつかの 適合方法があります 外側のディスプレイでは デフォルトでシートのボタンも 側面に移動します しかし 表示内容に適している場合は シート内の縦バーを無効にして コントロールが 移動しないようにすることも可能です これは ツールバーボタンが 1つのみのシートで特に効果的です
このオプションを使用すると シートは前面カメラの 手前で停止し ステータスバーが再配置されます
内側ディスプレイでは 横向き・縦向きを問わず シートは標準の水平バーを使用します
iPhone Duoが部分的に 折りたたまれている場合 シートは折り目に重ならないよう 横にスライドします 実際 他の多くのコンポーネントも 同様の動作をします ボタンが折り目に重なると タップしにくくなるためです そこで 半分折りたたみ時には 操作要素を横にずらす 動作を設計しました この動作は シート アラート メニュー ツールバーなど 多くのシステムコンポーネントに 組み込まれています アプリ内で同様の 折り目回避動作を実現するには 可能な限りこれらの標準パーツを ご利用ください つまり 操作要素を曲面部分から できるだけ遠ざける考え方ですね 遠ざける設計です その通りです スクロール可能なコンテンツは この領域を避ける必要はありません それでは まとめましょう iOSアプリが折りたたみ式iPhoneに 登場するのはこれが初めてです 初めての体験となります アプリは さまざまな画面サイズや ポーズに適合しながら 一貫した 体験を提供できるものであるべきです コントロールを側面に寄せ サイズ変更に対応させるなど この新しいフォームファクターに インターフェースを適合させることで アプリはiPhone Duo上で 真に心地よい体験を実現できるでしょう iPhone Duo向けの デザイン開発はとても刺激的でした 皆様にも楽しんでいただければ幸いです ご視聴ありがとうございました
-
-
- 0:00 - Introduction
Marcos and Vince from the Apple Design team introduce the design principles behind the device and how to design apps that look and feel great across all the various configurations of iPhone Duo.
- 0:28 - Design principles
iPhone Duo can be used, held and sat down in many different poses. Buttons and controls have been moved to the outer edge of the display to maximize vertical space. When folded, content automatically moves away from the center. Split View multitasking and video PiP mean that apps and their controls can appear at different aspect ratios and should support resizability.
- 3:42 - Adapting your design
Don't design a custom layout for each pose, instead focus on two sizes classes: compact and regular. Build your interface using layout margins and safe area insets to avoid having your UI obscured. If you're considering a bespoke layout for a specific pose, make sure functionality and general hierarchy is preserved.
- 5:07 - Positioning controls
On iPhone Duo, you should position your toolbars, tab bars and controls along the side of the device so they're easier to reach. Controls share this vertical space with dynamic elements like live activities and the status bar. If there's not enough room, controls will collapse into an overflow menu. Exceptions to this rule are controls that are too wide to fit in this vertical space.
- 6:33 - Designing for the outer display
On iPhone Duo, most content needs an offset so it isn't hidden behind controls. Safe area inserts provide this functionality automatically. However, Immersive, highly visual interfaces that don't scroll may still benefit from centering on the full display. You can also mix approaches, like using a full-width background image with written content that's inset.
- 7:34 - Designing for the inner display
Take advantage of the wide inner display to show more content. Split views are a great option to surface more of your app hierarchy. You can also rearrange your UI into a two column layout.
- 8:36 - Sheet behavior
On iPhone Duo, sheets adapt in different ways depending on the pose. On the outer display, they can be presented with vertical controls. On the inner display, they use horizontal bars. When the device is folded, sheets slide over to avoid resting in the fold.
- 9:28 - Fold avoidance
Built into system components is a behavior that nudges interactive elements away from the center when iPhone Duo is partially folded. Except for scrollable content, keep interactive elements away from the hinge as much as possible.
- 10:01 - Conclusion
Your app should feel like a single experience that adapts different display sizes and poses. By supporting resizability, your app will feel at home on iPhone Duo.