アプリのレイアウトと構造
ナビゲーションの基本
柔軟なモデル
ナビゲーション構造
ユーザーにとってわかりやすいナビゲーション構造を構築することが重要
一般的な方法
階層に配置
子ページ遷移には親を経由
ピアとして配置
どのような順序にも遷移できる
一般的には、階層とピアの組み合わせ
ナビゲーション要素
ユーザーは必要なコンテンツにアクセスすることができる
アプリ内のどの位置にいるかを把握することができる
領域を占有してしまう
適切なナビゲーション要素
ピアツーピア
タブとピボット
ナビゲーションウィンドウ
階層型
ハブ
マスター詳細
システム レベルの機能
システム レベルのナビゲーション機能
"戻る" など
予測可能な方法で、応答
コンテンツの基本
コマンドの基本
ページのレイアウト
画面のサイズとブレークポイント
4 種類の主要なキー幅設計推奨
360、640、1024、1366 epx
ブレークポイント
サイズ
小
640ピクセル以下
タブ:中央
左右余白:12ピクセル
アプリバー:下部
列:1
ナビゲーション:オーバーレイ
中
641~1007ピクセル
タブ:左
左右余白:24ピクセル
アプリバー:上部
列:最大2
ナビゲーション:小片モード
大
1008ピクセル以上
タブ:左
左右余白:24ピクセル
アプリバー:上部
列:最大3
ナビゲーション:固定モード
XAMLを使ったレイアウトの定義
アプリのレイアウトは、ナビゲーションモデルの選択から始まる
XAML フレームワーク
柔軟なレイアウト
レイアウト プロパティとパネル
静的レイアウト
コントロールのピクセル サイズと位置を明示的に指定
柔軟なレイアウト
デバイス上で使用できる表示領域に合わせて縮小、拡大、再配置
レイアウト プロパティ
レイアウトパネル
Canvas,Grid,RelativePanel,StackPanel,VariableSizedWrapGrid
レスポンシブな手法サンプル
アダプティブ レイアウト
AdaptiveTrigger
状態を適用するしきい値 ("ブレークポイント" とも呼ばれます) を簡単に設定できる
カスタマイズされたレイアウト
デバイス ファミリ トリガー
各デバイス ファミリの個々のビューを定義するには、個別の XAML ファイルを使用
各デバイス ファミリに異なる実装を提供するには、個別の XAML とコードを使用
表示状態と状態トリガー
VisualState
要素が特定の状態にあるときに、要素に適用されるプロパティ値を定義
VisualStateManager
指定された条件が満たされたときに適切な VisualState を適用
レイアウトパネル
アプリの UI 要素を配置およびグループ化
パネルの添付プロパティ
子要素がどのように UI に表示される必要があるかについて親パネルに通知
コードから取得または設定するための特別な構文が必要
パネルの境界線
組み込みの境界線のプロパティ
XAML 要素の数を減らし、アプリの UI のパフォーマンスを向上させる
配置、余白、パディング
UWPアプリ設計の概要
UWP アプリの機能
有効ピクセルとスケーリング
UI 要素のサイズを自動的に調整
スケーリング アルゴリズム
体感的なサイズを最適化
視聴距離と画面の密度 (ピクセル/インチ) を考慮
有効ピクセルでデザイン
設計時には、ピクセル密度と実際の画面解像度を無視できる
画面のサイズとブレークポイント
システムによる UI のスケーリングは、4 の倍数単位
ユニバーサル入力とスマート操作
クリックの発生元が実際のマウス クリックであるか、指によるタップであるかどうか区別不要
ユニバーサル コントロールとスタイル
すべての Windows デバイスで適切に動作することが保証
コントロールとパターン
コントロールの追加とイベントの処理
コントロールのスタイル
機能別コントロールインデックス
ユニバーサル スタイル
既定のスタイル セットを自動的に取得
一般的な UWP アプリの構造
アプリの構造をデザインの観点
ナビゲーション要素
コマンド要素
コンテンツ要素
レスポンシブ デザインの手法
位置の変更
サイズ変更
再配置
表示
置換
再構築
UWP Samples on Github