Surface Duo デザイン キット (Figma)
Surface Duo Design Kit は、アプリ デザイナーと開発者がデュアルスクリーン ユーザー エクスペリエンスを構築するのに役立つ Figma コミュニティ リソースです。 このキットのコンポーネントは、Surface Duo を Android 上の Microsoft 製品のように感じさせる構成要素です。
- Device Frame - Glacier と Obsidian 色のデバイスアウトラインでスクリーンショットを表示します。
- 安全な領域 - 安全な領域は、コンテンツがアプリ ヘッダー、ナビゲーション バー、タブ、ヒンジを過大にラップしないようにします。
- ペン操作 - ペン 入力の相互作用を設計する方法。
- デザイン パターンとガイドライン - キットの設計パターンは、さまざまなアプリ シナリオに対応したデュアルスクリーン ディスプレイの可能性と、意味のある製品エクスペリエンスのためにすべての要素がどのようにまとめられるかを示しています。
- ビデオとメディアのガイドライン - 折りたたみ可能なユーザー エクスペリエンスにビデオと画像を含める際のヒント。
- 態勢 - デュアルスクリーン デバイスには、さまざまなハードウェアと工業設計のバリエーションがあります。 最近リリースされた Surface Duo および計画されている他のデバイスは、カテゴリの定義を支援するためのものですが、より大きなディスプレイやさまざまなヒンジ デザインを持つ他のデバイスが登場するかもしれません。 アプリを設計するときは、現時点で利用可能な特定のデバイスの仕様に合わせた設計は避ける必要があることに注意してください。
- レイアウト、コントロール、プラグイン - デュアルスクリーン フォーム ファクターを念頭に置いて、使い慣れたコントロールとレイアウトを使用して好きなように設計できることを確認しました。 また、ヒンジなどのデュアルスクリーン アプリの設計時に注意する必要がある詳細や、外出先で設計するためのレイアウトを含める方法についても説明します。
- コンポーネント - 各コンポーネントは、管理と操作が容易になるように、可能な限りフラットになるように構築されています。 一部のコンポーネントには非表示レイヤーがあり、デタッチせずにバリエーションを追加するためにオン/オフを切り替えることができます。
- コンポーネント セット - ナビゲーションやその他のデザイン要素のマスター コンポーネントをグループ化されたセットとして使用します。これは、さまざまなモデル、モード、画面数、および向きを含むバリアントをより適切に整理するのに役立ちます。