"Developer Camp"【デザイン編】 Metroスタイル デザインについて
-
yukio_saitoh
- 2219
- 0
- 0
- 1
-
- いいね！1
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
Metro Style Design について。 Windows 8 からはメトロデザイン UI と デスクトップ UI は区別。両者の切り替えは Windows キーで行う。また Apple 社と異なる新リリース概念として OS とスマホのバージョンを合わせる。 #metro
2012-06-15 09:37:30
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
Visual Studio を使ってもらうのが主目的ではなく、メトロデザインで世界各国の交通デザインと同様に基本簡略化したグラフィックでわかりやすい文字、視覚的に訴求しやすい色使い（黄色と黒という反対色は議論の因りあり）でもって UI 構成要素とする。 #metro
2012-06-15 09:38:50
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
infographic インフォグラフィック。情報＋図版。 MSFT → http://t.co/vo86oQKk 最近、skype でもインフォグラフィックを取り組んでいる。１日に skype 接続している総ユーザの利用時間は３億時間！ #metro
2012-06-15 09:40:29
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
俗にインフォグラフィックと呼ばれる例として、京都カプセルホテルに 9h (nine hours) http://t.co/hYLcDuuT スタイリッシュとに構成されており、infographic の総大成である。男性、女性のファシリティ情報など館内思考されている。 #metro
2012-06-15 09:43:31
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
Immersive （いまーしぶ）没入した、没入できる、どっぷりつかった、実体験のように感じる。 // メトロ向けサービスやデザインをなさる方はイマーシブして欲しい。どんな UI であるのか、ユーザが没頭できるのか考えてほしいとな。 #metro
2012-06-15 09:45:03
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
いかにユーザがメトロアプリに没頭できるか。イマーシブデザイン＝メトロデザイン＝インフォグラフィック。 #metro
2012-06-15 09:45:35
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
「そぎ落とす」 コンテンツが最優先。コンテンツに必要ないものは削ぎ落とす。 その前に、レイアウト、インタラクション、ナビゲーション。振る舞い、遷移（ユーザ誘導）の予備思慮が必要。 #metro
2012-06-15 09:46:50
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
「レイアウト」カリっとした（クリスピー感、サクサク感）グラフィックでスッキリした表現に、グループ化や階層化を線とボックスで表現しない、通勤ラッシュの車内のように詰め込み過ぎない（余白が大事） // グリッドデザインなダッシュボード開発経験持ちには意識改革必須だ。 #metro
2012-06-15 09:48:42
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
例：アイテムの検索ボタン、リフレッシュ、画面の切り替えなどはメトロデザインに好ましくない。これまでは線と箱であった。 // 今後はグリッド（補助線）を使用してスッキリとした余白を持つ UI へデザイン最優先であること。 #metro
2012-06-15 09:50:30
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
例：株価やレート等の金融情報配信は、数値を全面表示するのではなく、情報はボトム部へ。その上に選別してニュースストリングをティッカーに。画面の大多数は NYSE 取引所の写真のような感じ。 #metro
2012-06-15 09:51:49
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
// Wii ニュースみたいなデザインになっていくのか。 ふむ。そして、横方向のスライドが基本操作になるので、iPad 向けアプリのように横情報のチラ見せなどをメトロにも採用するといいかも。 #metro
2012-06-15 09:52:59
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
レイアウトに対し余白を敢えてデザインする。 // GPU 性能が高いので１画面に詰め込むのは、もう相応しくないのか。 また視覚的訴求が大事なので、可能な限りアイコン化すること。 #metro
2012-06-15 09:54:08
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
「インタラクション」振る舞い。 Content Before Chrome // ここでの Chrome は Google の Webブラウザではなく、クロムメッキのこと。メッキに相当するものは外しましょう。 メッキ＝余計なもの。 #metro
2012-06-15 09:55:27
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
画面上のエッジがインタラクションに必要。例、サイトに矢印デザインが元から配置されていることがある。しかしタッチはマウス誘導は不要になるので、メトロデザインでは矢印表示は不要である。 #metro
2012-06-15 09:56:58
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
視覚的に鬱陶しいデザイン。アプリケーションコマンド（アプリワード、アプリバー）へ格納することで全体的にスッキリした印象をユーザへ提供できる。 #metro
2012-06-15 09:58:26
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
エッジ（縁）をうまく使うデザイン。 // 昔のポイントキャスト UI を思い出す。今思えば、フィード配信でメトロ UI で、しかもインフォグラフィックだったなと。 ActiveDesktop は残念な感じしか覚えてないが、Windows 8 で改善しそう。 #metro
2012-06-15 10:00:18
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
複数のアプリ間で共有したい情報やコマンドをチャームへ格納し、アプリバーを活用する例など。 #metro
2012-06-15 10:01:18
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
アプリバーは下と上を指す。検索と共有とデバイスと設定はチャーム領域に。アプリバーとチャームを活用してメール作成をシンプルに操作可能。 // ユーザにとって共通化された操作である。 #metro
2012-06-15 10:05:44
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
ナビゲージョン / 行ったほうがいい場所ではなく今いる場所を指し示す。ハブとスポークのポジショニング。 // ドラクエのマップは使いにくいけど、もっと良い感じのナビが欲しいよね。 #metro
2012-06-15 10:10:18
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
タイポグラフィのオススメ定義（by MSFT)：補足 9pt, 本文 11pt, 小見出し 20pt, 見出し 42pt #metro
2012-06-15 10:12:13
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
メイリオ と Meiryo UI は違う。 // 欧文フォントと和文フォントで表現が違う。 #metro
2012-06-15 10:12:47
斉藤之雄 / 社会福祉士 😺🗯
@yukio_saitoh
// Metro デベロッパーで Bing! ると、地下鉄開発が出てくる。。。。 どういうこっちゃｗｗｗｗｗ #metro
2012-06-15 10:15:35