atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

その7:■..Tile..タイル..たいる..

とりあえず個人的に考えるMetro UIについてまとめてからBlendにはいろうと思います。

MetroなTileデザイン

タイルをぱっとみて蜜葉が思ったのは、モンドリアンデザインに似ているなぁというところ。
垂直と水平の線に、passとfillで出来てる原色なprimitive...数学的で美しいですよね。

WP7のTileもモンドリアンデザインと同じく平面的で、原色に近い色を扱っています。その平面の中にアイコンが抜き色で表示されてますね。

色のベタ塗り以外にも写真が使われていることが多いです。
これはアプリを示すというよりも、中のコンテンツを示しているのではと思いますね。
例えば、PictureハブとかMusicハブのアーティストとか、MeとかPeapleハブもそうですね。

タイルの形状ですが、ホーム画面では、辺の長さが1:1もしくは1:2のタイルがありますね。
アプリケーションで使われているものは、1:1が多い気がします。

また、タイルは基本的にボタンとして扱われているものが多いです。
ボタンといえば立体感を出して、押せる感/押した感を演出するのですが、タイルにはその立体感がありません。これには賛否両論あって、タイルだからWindows Phone 7のボタンとして成り立っている、という意見と、立体感がなければ押せるかどうかわからない=タイルはボタンとしてBad UIだという意見があります。難しい所ですね。


代わりと言ってはなんですが、タイルには、タップ&ホールドするとその位置に合わせて傾く
という特徴があります。
なのでアプリケーションを作るときは、よりタイルらしいUIに仕上げるために取り入れるべきですね。

LiveなTile

Tile UIは生きています。
ではなく、Tile UIは動的な性質をもっていて、Metroデザインの1つにホーム画面を見るだけで情報が確認できるというのがあります。
例えば、Mailの数であったりMusicハブとアーティストのアニメーションであったり。
開発者が使える動的な仕組みとして、バッチとタイルの裏(Mangoではぺろっとめくれる)があります。

天気予報アプリなんかを作るときは是非Live Tile化したいですね。