Metroの新しいUI その１

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

Metroデザインとは？

• カリッとしたグラフィック
• 軽快であれ、滑らかであれ

---

 カリッとしたグラフィック

カリッとは何か？

• Contents Before Chrome
• グループ化や階層を線とBOXで表現しない
• 詰め込みすぎない
• 余白をうまく使う
• コンテンツになじませる
• ナビゲーション&グリッド

---

Contents Before Chrome

Chrome ≠ Google chrome

• コマンドをコンテンツになじませる。
• Metroスタイルは崩さずそのまま使ってほしい
• デザインから何を減らすか？何を削るか？
• ボタンはデザインに必要ない。→アプリバーへ移す（隠す）

 

---

ナビゲーション

行くべき場所を示すではなく、今いる場所を指す。
ハブ＆スポーク

---

グリッド

コンテンツをキリリと並べる。

コンテンツの配置方法は最少単位を５ピクセル単位として、以下の単位とする。

• 5px × 5px = 1SubUnit
• 4SubUnit  × 4Sub-Unit = 1Unit(20px)
• 4Unit  × 4Unit = 1Column (80px)

具体的な配置例は以下のガイドラインに書いてある。

http://msdn.microsoft.com/ja-jp/library/windows/apps/hh872191.aspx

代表的なものを抜き出す。

---

ページのヘッダー

• 高さ：5Unit（上に100px余白）
• 左マージン：6Unit（120ｐｘの余白）
• フォント：SegoeUI で20ピクセル

 コンテンツ領域

• 高さ：7Unit（上に140px余白）
• 左マージン：6Unit（120ｐｘの余白）
• 下マージン：指定なし

縦方向余白（Horizontal）

• アイコンとコンテンツ間：1Unit (2sub-unit（10px）)
• タイル間：2unit(40px)
• 大きいアイテムと小さいアイテムの間隔：1Unit (2sub-unit（10px）)

縦方向余白(Vertical)

• タイル間：1Unit（20px）
• アイコンxの間隔は2sub-unit（10px）

グループ間余白

 

• グループ間：4-unit（80px）

---

 フォントサイズ

英語フォント：Segoe UI
日本語フォント：メイリオUI

• 見出し：42pt
• 小見出し：20pt
• 本文：11pt
• 補足：9pt

日本語フォントについてはいまいち」みたいな事を言ってた。今後もっといいフォントが標準になる？

 

---

 その２へ続く

---

 

リンク

http://msdn.microsoft.com/ja-jp/windows/apps/br229516

Metro スタイル アプリの概要
http://msdn.microsoft.com/ja-jp/library/windows/apps/br211386.aspx

Metro スタイル アプリの計画
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465427.aspx

アプリのユーザー エクスペリエンスのデザイン
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh779072.aspx