この記事では、アプリのコンテンツの設計に役立つ実用的なヒントと例をいくつか紹介します。Windows の間隔の根拠、型ランプを使用して階層、リストとグリッド、コントロールをグループ化する方法について説明します。
間隔とグリッド
一貫したサイズの間隔と余白を使用すると、エクスペリエンスが個別のコンポーネントにグループ化されます。 これらの値は丸い角のロジックにマップされ、一緒にまとまりのある使用可能なレイアウトを作成するのに役立ちます。
ボタン間の 8epx
ボタンとフライアウトの間の 8epx
コントロールとヘッダーの間の 8epx
コントロールとラベルの間に 12epx
コンテンツ領域間の 12epx
サーフェステキストとエッジテキストの間に16epx
テキスト + 階層
このタイプ ランプ (リンク) は、アプリ内で階層を伝えるのに役立つさまざまなサイズを提供するように設計されています。
タイトル、サブタイトル、本文を 12epx 間隔で使用します。
制限された UI 空間でタイトルを区別する場合は、テキスト ブロック間のスペースを追加せずにタイトルに対して Body Strong を使用します。
コマンド ボタンなど、テキストが必要な非常に狭いスペースにはキャプション サイズを使用します。
リストとグリッド
作成できるさまざまなリスト スタイルとグリッド スタイルがあります。 Windows で使用されるさまざまなコンポジションを次に示します。
複数行のリストの場合は、タイプ ランプの Body と Caption、および 32epx アイコンを使用します。
セクション ヘッダーには Body Strong を使用します。
グリッド項目にアイコンまたは人物画像要素を使用する場合は、中央揃えのキャプション テキストを使用します。
リストにテキストを含む大きなグラフィカル要素が含まれている場合は、プライマリ テキストに本文スタイルを使用し、画像に左揃えで配置します。
コントロールの使用
一般的な構成でコントロールを相互に関連付ける方法の例をいくつか示します。
リスト スタイルと共通コントロールでエキスパンダー コントロール (リンク) を使用する方法を示す例。 コントロールはエクスパンダー ボタンとの間に 16epx の間隔を空けて右揃えにしてください。
この例では、エキスパンダー内に配置したときのコントロールの配置を示します。 コントロールのインデントを 48epx にします。
GitHub で Microsoft と共同作業する
このコンテンツのソースは GitHub にあります。そこで、issue や pull request を作成および確認することもできます。 詳細については、共同作成者ガイドを参照してください。
Windows developer