WDDメモ メトロスタイルアプリ関連
- メモです。聞き間違えなどがあると思いますので参考までに。
Metroスタイル
- コンテンツに没入できるスタイルにする
- スタイルデザイン
- できるだけ不要なものは省く
- 早くて滑らか
- アニメーションをたくさん使う
- マウスなどの動作に対して反応をする
- きれいなスケーリングと使いやすいスナップ
- スナップは２つまで表示させることができる
- 100％の画面とスナップで表示させるデザインを考える必要がある
- 適切なコントラクトの実装
- タイルの有効活用
- タイルでリアルタイムな情報表示
- いつでもつながっている
- オフラインでも動くようにする
- クラウドとの連携
- メトロの原則に準拠
デザイン
- 基本ナビゲーションがない
- ハブ→スポーク→詳細 という3段階の階層スタイル
- 階層システムの要素：大量のコンテンツ、複数のセクションやカテゴリがある
- フラットシステム：一画面で完結可能（IE10など）、ドキュメント、ゲーム、IMなど
- デザインはシンプル
- デザインガイドが存在するのでそれに従ってある程度同じ動作ができる
- レイアウト：グラデーションはなくして線で堺をつける
- 詰め込みすぎない、余白が大切
画面サイズや方向に応じたデザイン
- 1024/768 最小
- 1366/768 以上が推奨
4つのスタイル
- 4つのスタイルに対応したアプリを作る必要がある
- FullScreenLandscape(全画面)
- Filled(スナップの余分)
- Snapped(スナップ、横幅は320pxに固定される。推奨サイズの画面サイズではないとスナップ表示は不可)
- FullScreenPortrait(縦画面)
考慮点
- スクリーンサイズ
- スナップ、ポートレイトの画面に対応
- ビジュアルなフィードバック
- たとえばマウスの動きに合わせたタイルの動き
- 解像度、→高解像度に対応する
- SVG→ 解像度に依存しない
- ビットマップは100％、140%、…というように低い解像度と高い解像度用の画像を用意する
- グリッドレイアウトが重要
- 方眼紙にアプリを配置するように
- １ユニット 20px×20px
- サブユニット 5px×5px
- 1カラム 80px
チャーム、アプリバー
- アプリバーは、上 or 下に配置、アイコンの追加、変更が可能、色も変更可能
- クリックしてほしいことを意図するような多数のアイコンは
共通化してアプリバーに作る
-
- グローバルコマンドは右側に
- チャーム：検索、共有、設定 etc がある
- 検索方法は、チャームで実現することを考える
- 共有 クリップボードの進化系
- 他のアプリにデータを投げる
- ソースの共有
- オンラインコンテンツへのリンクの共有
- ターゲットの共有
フライアウト
- 一時的に表示、ちょっとしたもの
パンの注意点
- 横と縦の動きを同時に作らないようにする
タイル
- タイルはアイコンではない
- タイルはアイコンではなく、アプリの顔
- 表玄関、最新情報、ミニアプリ、フォトフレーム、リマインダー、News情報、アプリの延長、次の予定
- 一つのアプリでも複数のタイルを作成することができる
- セカンダリタイル
- アプリバーにピン留め
- １×１は必須 ２×１はオプション
- ライブタイルも可能
トースト通知
- WINDOWS PUSH NOTIFICATION SERVICE (WNS) を利用するなど方法がある
セマンティックズーム
- 全体を俯瞰してみる
- ロゴを使う：小さいとき
- 詳細を表示：大きいとき
フォント
- SegoeUI :ウエイト4つ
- 日本語は、メイリオUIになるだろう。ただし、ウェイトが2つしかない。
ライフサイクル
タッチ
- 長押し、タップ、スライド、スワイプで選択、ピンチでズーム、ローテート、縁からアプリバー、チャーム
開発環境
- VS11にはテンプレートがある
- シミュレータを準備している
- 解像度を変更する事ができる
- タッチをシミュレートする事が可能
- ポートレイト表示が可能
- GPSのエミュレートにも対応
Metroスタイルアプリ
- appx という一つのファイル zipファイル形式
- Windows Store からインストール
- マシンではなくユーザに対してライセンスを付与する
- 企業向けの展開方法もある
リンク
- Understanding the Windows 8 silhouette
- アプリのユーザー エクスペリエンスのデザイン
