UWPアプリ設計のまとめ、リンク
1.1 ナビゲーションの基本
1.1.1 柔軟なモデル
1.1.1.1 ナビゲーション構造
1.1.1.1.1 ユーザーにとってわかりやすいナビゲーション構造を構築することが重要
1.1.1.1.2 一般的な方法
1.1.1.1.2.1 階層に配置
1.1.1.1.2.1.1 子ページ遷移には親を経由
1.1.1.1.2.2 ピアとして配置
1.1.1.1.2.2.1 どのような順序にも遷移できる
1.1.1.1.2.3 一般的には、階層とピアの組み合わせ
1.1.1.2 ナビゲーション要素
1.1.1.2.1 ユーザーは必要なコンテンツにアクセスすることができる
1.1.1.2.2 アプリ内のどの位置にいるかを把握することができる
1.1.1.2.3 領域を占有してしまう
1.1.1.2.4 適切なナビゲーション要素
1.1.1.2.4.1 ピアツーピア
1.1.1.2.4.1.1 タブとピボット
1.1.1.2.4.1.2 ナビゲーションウィンドウ
1.1.1.2.4.2 階層型
1.1.1.2.4.2.1 ハブ
1.1.1.2.4.2.2 マスター詳細
1.1.1.3 システム レベルの機能
1.1.1.3.1 システム レベルのナビゲーション機能
1.1.1.3.1.1 “戻る” など
1.1.1.3.1.2 予測可能な方法で、応答
1.2 コンテンツの基本
1.3 コマンドの基本
1.4 ページのレイアウト
1.4.1 画面のサイズとブレークポイント
1.4.1.1 4 種類の主要なキー幅設計推奨
1.4.1.1.1 360、640、1024、1366 epx
1.4.1.1.2 ブレークポイント
1.4.1.2 サイズ
1.4.1.2.1 小
1.4.1.2.1.1 640ピクセル以下
1.4.1.2.1.2 タブ:中央
1.4.1.2.1.3 左右余白:12ピクセル
1.4.1.2.1.4 アプリバー:下部
1.4.1.2.1.5 列:1
1.4.1.2.1.6 ナビゲーション:オーバーレイ
1.4.1.2.2 中
1.4.1.2.2.1 641～1007ピクセル
1.4.1.2.2.2 タブ:左
1.4.1.2.2.3 左右余白:24ピクセル
1.4.1.2.2.4 アプリバー:上部
1.4.1.2.2.5 列:最大2
1.4.1.2.2.6 ナビゲーション:小片モード
1.4.1.2.3 大
1.4.1.2.3.1 1008ピクセル以上
1.4.1.2.3.2 タブ:左
1.4.1.2.3.3 左右余白:24ピクセル
1.4.1.2.3.4 アプリバー:上部
1.4.1.2.3.5 列:最大3
1.4.1.2.3.6 ナビゲーション:固定モード
1.4.2 XAMLを使ったレイアウトの定義
1.4.2.1 アプリのレイアウトは、ナビゲーションモデルの選択から始まる
1.4.2.2 XAML フレームワーク
1.4.2.2.1 柔軟なレイアウト
1.4.2.2.1.1 レイアウト プロパティとパネル
1.4.2.2.1.1.1 静的レイアウト
1.4.2.2.1.1.1.1 コントロールのピクセル サイズと位置を明示的に指定
1.4.2.2.1.1.2 柔軟なレイアウト
1.4.2.2.1.1.2.1 デバイス上で使用できる表示領域に合わせて縮小、拡大、再配置
1.4.2.2.1.1.3 レイアウト プロパティ
1.4.2.2.1.1.4 レイアウトパネル
1.4.2.2.1.1.4.1 Canvas,Grid,RelativePanel,StackPanel,VariableSizedWrapGrid
1.4.2.2.1.1.5 レスポンシブな手法サンプル
1.4.2.2.2 アダプティブ レイアウト
1.4.2.2.2.1 AdaptiveTrigger
1.4.2.2.2.1.1 状態を適用するしきい値 (“ブレークポイント” とも呼ばれます) を簡単に設定できる
1.4.2.2.3 カスタマイズされたレイアウト
1.4.2.2.3.1 デバイス ファミリ トリガー
1.4.2.2.3.1.1 各デバイス ファミリの個々のビューを定義するには、個別の XAML ファイルを使用
1.4.2.2.3.1.2 各デバイス ファミリに異なる実装を提供するには、個別の XAML とコードを使用
1.4.2.2.4 表示状態と状態トリガー
1.4.2.2.4.1 VisualState
1.4.2.2.4.1.1 要素が特定の状態にあるときに、要素に適用されるプロパティ値を定義
1.4.2.2.4.2 VisualStateManager
1.4.2.2.4.2.1 指定された条件が満たされたときに適切な VisualState を適用
1.4.3 レイアウトパネル
1.4.3.1 アプリの UI 要素を配置およびグループ化
1.4.3.2 パネルの添付プロパティ
1.4.3.2.1 子要素がどのように UI に表示される必要があるかについて親パネルに通知
1.4.3.2.2 コードから取得または設定するための特別な構文が必要
1.4.3.3 パネルの境界線
1.4.3.3.1 組み込みの境界線のプロパティ
1.4.3.3.1.1 XAML 要素の数を減らし、アプリの UI のパフォーマンスを向上させる
1.4.4 配置、余白、パディング
2.1 UWP アプリの機能
2.1.1 有効ピクセルとスケーリング
2.1.1.1 UI 要素のサイズを自動的に調整
2.1.1.2 スケーリング アルゴリズム
2.1.1.3 体感的なサイズを最適化
2.1.1.3.1 視聴距離と画面の密度 (ピクセル/インチ) を考慮
2.1.1.4 有効ピクセルでデザイン
2.1.1.4.1 設計時には、ピクセル密度と実際の画面解像度を無視できる
2.1.1.4.2 画面のサイズとブレークポイント
2.1.1.4.3 システムによる UI のスケーリングは、4 の倍数単位
2.1.2 ユニバーサル入力とスマート操作
2.1.2.1 クリックの発生元が実際のマウス クリックであるか、指によるタップであるかどうか区別不要
2.1.3 ユニバーサル コントロールとスタイル
2.1.3.1 すべての Windows デバイスで適切に動作することが保証
2.1.3.2 コントロールとパターン
2.1.3.2.1 コントロールの追加とイベントの処理
2.1.3.2.2 コントロールのスタイル
2.1.3.2.3 機能別コントロールインデックス
2.1.4 ユニバーサル スタイル
2.1.4.1 既定のスタイル セットを自動的に取得
2.2 一般的な UWP アプリの構造
2.2.1 アプリの構造をデザインの観点
2.2.1.1 ナビゲーション要素
2.2.1.2 コマンド要素
2.2.1.3 コンテンツ要素
2.3 レスポンシブ デザインの手法
2.3.1 位置の変更
2.3.2 サイズ変更
2.3.3 再配置
2.3.4 表示
2.3.5 置換
2.3.6 再構築
