Metroの新しいUI その2

春日井 良隆 氏　https://twitter.com/#!/ykasugai

その１の続き

---

軽快であれ、滑らかであれ。

• 動きが連続性を醸し出す。
• 動きがMetroに命を吹き込む

---

なぜ、ここで、この演出が必要か？

常に考える。

動きすぎるものほど、うっとおしいものはない。

動きすぎるパワーポイント同様

---

レイアウトについて

横方向と縦方向のスクロールを混在させない。

タッチ操作に最適化したレイアウトを

• 長押し
• タップ
• スライドでドラッグ
• スワイプ
• ピンチ
• ローテート

ターゲットサイズ、タップサイズ

統計では操作する年齢層（熟練度）により操作できる タップサイズに差がある。
おすすめのサイズは７ｍｍ
若者向けのサイトであれば５ｍｍ、年配層向けは９ｍｍ

---

画像解像度

イメージファイルは解像度に依存しないSVGファイルを推奨

ビットマップならば複数解像度用に、100％、140％、180％の3種くらいを用意しておいた方がよい。
→解像度により切り替え

 異なるスクリーンサイズに対応する必要がある。これには２つの解決法がある。

• アダプティブ
  リキッドレイアウト。 画面サイズに応じて比率でコンテンツサイズと位置が変わる。
• 固定
  固定幅、固定高さ。
  テレビのような固定

---

 デザイン

• タイルに情報を入れる。
• コントラクトをうまく使う
• 余計なUIはなくす。
  チャーム、またはアプリバーへ入れる
• タイポグラフィである。