Windows 8 UI/UX デザイン入門 code name Metro
Windows 8アプリケーションのユーザインターフェースデザインについて解説した入門書です。Windows 8は、開発コード「Metro」と呼ばれるユーザインターフェースが採用され、ユーザ画面がこれまでのWindowsから大幅に改変されています。本書ではデベロッパーやデザイナー、一般ユーザを対象に、Metroデザインのキーワードになるタイポグラフィやグリットデザイン、Metroらしさを出すためのコントロールやレイアウトなど、アプリケーションのUI/UXをより魅力的に仕上げるために必要な知識やノウハウを解説しています。Windows 8の考え方や作法が短時間でよくわかります。ユーザが困らないUI/UXとは何かを学びましょう。
【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/3497.html
【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/3497.html
1 Metro
1 1 Metroの由来、そして未来
1.1.1 Metroの生まれについて
1.1.2 Metroが目指すもの
1 2 デザイン要素としてのMetro
1.2.1 Metroらしさ
1.2.2 削ぎ落とす
1.2.3 トコトンこだわる
1.2.4 軽快であれ、滑らかであれ
1 3 デザイン言語としてのMetro
1.3.1 Metroがユーザーに与える期待や戸惑い
1.3.2 プラットフォームの違いによるMetroの方言
2 タイポグラフィ
2 1 タイポグラフィ基礎
2.1.1 タイポグラフィはどこにでも存在する
2.1.2 国際タイポグラフィ様式
2.1.3 Metro UIとタイポグラフィ
2 2 テンプレートとガイドラインから紐解くタイポグラフィ
2.2.1 ガイドラインの違い
2.2.2 Windows Phoneアプリのタイポグラフィのガイドライン
2.2.3 Metroスタイルアプリのタイポグラフィのガイドライン
2 3 Metro UIにつなげるためのタイポグラフィ
2.3.1 ガイドラインを作る
2.3.2 タイトルは短く適切に
2.3.3 そこが機能することをユーザーに明示する
2.3.4 グリッドとマージン
3 グリッドシステムとテンプレート
3 1 グリッドシステム
3.1.1 成り立ち
3 2 Metroにおけるグリッドシステム
3.2.1 ガイドライン
3.2.2 マージンの重要性
3.2.3 タッチターゲット
3 3 テンプレートを読み解く
3.3.1 Grid
3.3.2 Split
3.3.3 パン
3 4 Windows 8の画面構成
3.4.1 情報消費型アプリ
3.4.2 非情報消費型アプリ
3 5 PowerPoint Storyboardingによるプロトタイピング
3.5.1 プロトタイプを作成しよう
3.5.2 PowerPoint Storyboarding
4 アプリケーションの画面の状態
4 1 Windows Phoneにおけるアプリケーションの状態
4.1.1 Windows PhoneのPortraitとLandscape
4 2 Metroスタイルアプリにおけるアプリケーションの状態
4.2.1 MetroスタイルアプリのPortraitとLandscape
4.2.2 FillとSnap
4.2.3 320pxの世界観
4 3 スケーリングとピクセル密度
4.3.1 Windows 8のデバイスごとの画面サイズと解像度
4.3.2 Windwos 8の推奨画面解像度
4.3.3 アダプティブなレイアウト
4.3.4 固定レイアウト
4.3.5 ピクセル密度を考慮する
5 ナビゲーション
5 1 情報の階層
5.1.1 情報の階層化とは
5.1.2 3階層構造
5 2 Windows Phoneでデザインされた階層表現
5.2.1 Panoramaを使った3階層表現
5 3 Metroスタイルアプリでデザインされた階層表現
5.3.1 Gridテンプレートを使った3階層表現
5.3.2 ジェスチャ
5.3.3 Semantic Zoom
5 4 まとめ
6 コントロール
6 1 Metroらしさを醸し出す標準コントロール
6.1.1 OSから学ぶ標準コントロール
6 2 Metroのコントロールと状態の表現
6.2.1 Button
6.2.2 ToggleButton
6.2.3 CheckBox
6.2.4 Slider
6.2.5 ProgressBar
6 3 コントロールをまとめるレイアウトパネル
6.3.1 Grid
6.3.2 StackPanel
6.3.3 Canvas
6.3.4 ListBox
6.3.5 PathListBox
6.3.6 ViewBox
6.3.7 ScrollViewer
6 4 まとめ
7 タイルを使いこなす
7 1 Metroにおけるタイルの有効性
7 2 タイルのデザイン
7.2.1 タイルの種類
7.2.2 ライブタイルとは
7.2.3 セカンダリタイルとは
7 3 タイルのテンプレート
7.3.1 WindowsPhoneのタイル
7.3.2 Windows 8のタイル
7.3.4 正方形タイル
7.3.5 ワイドタイル
7 4 タイルのガイドライン
7.4.1 ライブタイルの禁則事項
7.4.2 セカンダリタイルの禁則事項
7 5 バッジとグリフ
7.5.1 状態を通知する
8 Metroスタイルアプリに独自性を持たせる
8 1 デザインによる独自性
8.1.1 シナリオと長所を考える
8.1.2 Metroのガイドラインにどこまで従うか
8 2 配色とレイアウト
8.2.1 配色
8.2.2 レイアウト
8 3 独自性を出すために
8.3.1 事例紹介
9 実践Expression Blend
9 1 開発環境
9 2 Expression Blendの基本
9.2.1 Expression Blendの構成
9.2.2 プロジェクトを作成する
9.2.3 コントロールの配置
9.2.4 プロパティの変更
9.2.5 バインディング
9.2.6 Storyboard
9.2.7 Style
9.2.8 Visual State Manager
9 3 Windows PhoneアプリケーションのUI開発
9.3.1 Behavior
9.3.2 SampleDataSetを利用する
9.3.3 Color Resourse
9.3.4 Adobe Illustratorと連携する
9 4 MetroスタイルアプリのUI開発
9.4.1 App Barを利用する
9.4.2 日本語向け改変案(ヘッダーフォントサイズの変更)
9.4.3 日本語向け改変案2(マージンの調整)
1 1 Metroの由来、そして未来
1.1.1 Metroの生まれについて
1.1.2 Metroが目指すもの
1 2 デザイン要素としてのMetro
1.2.1 Metroらしさ
1.2.2 削ぎ落とす
1.2.3 トコトンこだわる
1.2.4 軽快であれ、滑らかであれ
1 3 デザイン言語としてのMetro
1.3.1 Metroがユーザーに与える期待や戸惑い
1.3.2 プラットフォームの違いによるMetroの方言
2 タイポグラフィ
2 1 タイポグラフィ基礎
2.1.1 タイポグラフィはどこにでも存在する
2.1.2 国際タイポグラフィ様式
2.1.3 Metro UIとタイポグラフィ
2 2 テンプレートとガイドラインから紐解くタイポグラフィ
2.2.1 ガイドラインの違い
2.2.2 Windows Phoneアプリのタイポグラフィのガイドライン
2.2.3 Metroスタイルアプリのタイポグラフィのガイドライン
2 3 Metro UIにつなげるためのタイポグラフィ
2.3.1 ガイドラインを作る
2.3.2 タイトルは短く適切に
2.3.3 そこが機能することをユーザーに明示する
2.3.4 グリッドとマージン
3 グリッドシステムとテンプレート
3 1 グリッドシステム
3.1.1 成り立ち
3 2 Metroにおけるグリッドシステム
3.2.1 ガイドライン
3.2.2 マージンの重要性
3.2.3 タッチターゲット
3 3 テンプレートを読み解く
3.3.1 Grid
3.3.2 Split
3.3.3 パン
3 4 Windows 8の画面構成
3.4.1 情報消費型アプリ
3.4.2 非情報消費型アプリ
3 5 PowerPoint Storyboardingによるプロトタイピング
3.5.1 プロトタイプを作成しよう
3.5.2 PowerPoint Storyboarding
4 アプリケーションの画面の状態
4 1 Windows Phoneにおけるアプリケーションの状態
4.1.1 Windows PhoneのPortraitとLandscape
4 2 Metroスタイルアプリにおけるアプリケーションの状態
4.2.1 MetroスタイルアプリのPortraitとLandscape
4.2.2 FillとSnap
4.2.3 320pxの世界観
4 3 スケーリングとピクセル密度
4.3.1 Windows 8のデバイスごとの画面サイズと解像度
4.3.2 Windwos 8の推奨画面解像度
4.3.3 アダプティブなレイアウト
4.3.4 固定レイアウト
4.3.5 ピクセル密度を考慮する
5 ナビゲーション
5 1 情報の階層
5.1.1 情報の階層化とは
5.1.2 3階層構造
5 2 Windows Phoneでデザインされた階層表現
5.2.1 Panoramaを使った3階層表現
5 3 Metroスタイルアプリでデザインされた階層表現
5.3.1 Gridテンプレートを使った3階層表現
5.3.2 ジェスチャ
5.3.3 Semantic Zoom
5 4 まとめ
6 コントロール
6 1 Metroらしさを醸し出す標準コントロール
6.1.1 OSから学ぶ標準コントロール
6 2 Metroのコントロールと状態の表現
6.2.1 Button
6.2.2 ToggleButton
6.2.3 CheckBox
6.2.4 Slider
6.2.5 ProgressBar
6 3 コントロールをまとめるレイアウトパネル
6.3.1 Grid
6.3.2 StackPanel
6.3.3 Canvas
6.3.4 ListBox
6.3.5 PathListBox
6.3.6 ViewBox
6.3.7 ScrollViewer
6 4 まとめ
7 タイルを使いこなす
7 1 Metroにおけるタイルの有効性
7 2 タイルのデザイン
7.2.1 タイルの種類
7.2.2 ライブタイルとは
7.2.3 セカンダリタイルとは
7 3 タイルのテンプレート
7.3.1 WindowsPhoneのタイル
7.3.2 Windows 8のタイル
7.3.4 正方形タイル
7.3.5 ワイドタイル
7 4 タイルのガイドライン
7.4.1 ライブタイルの禁則事項
7.4.2 セカンダリタイルの禁則事項
7 5 バッジとグリフ
7.5.1 状態を通知する
8 Metroスタイルアプリに独自性を持たせる
8 1 デザインによる独自性
8.1.1 シナリオと長所を考える
8.1.2 Metroのガイドラインにどこまで従うか
8 2 配色とレイアウト
8.2.1 配色
8.2.2 レイアウト
8 3 独自性を出すために
8.3.1 事例紹介
9 実践Expression Blend
9 1 開発環境
9 2 Expression Blendの基本
9.2.1 Expression Blendの構成
9.2.2 プロジェクトを作成する
9.2.3 コントロールの配置
9.2.4 プロパティの変更
9.2.5 バインディング
9.2.6 Storyboard
9.2.7 Style
9.2.8 Visual State Manager
9 3 Windows PhoneアプリケーションのUI開発
9.3.1 Behavior
9.3.2 SampleDataSetを利用する
9.3.3 Color Resourse
9.3.4 Adobe Illustratorと連携する
9 4 MetroスタイルアプリのUI開発
9.4.1 App Barを利用する
9.4.2 日本語向け改変案(ヘッダーフォントサイズの変更)
9.4.3 日本語向け改変案2(マージンの調整)