Gunosy Material Design Study
@ tyshgcTsuyoshi Higuchi
What is Material Design?マテリアルデザインってなんだろう?2014, Sept. 25
Gunosy Material Design Study
PROFILE
GunosyのUIデザイナー・フロントエンドエンジニアの傍ら、 UX設計なども担当している良くも悪くも10年選手。 Gunosyには2014年7月にジョイン。 前職はGunosy初期UI設計をした某社。
樋口 剛 Tsuyoshi Higuchi
Gunosy Material Design Study
Index
1 Material Designの目的…
2 Material Designとは…
3 気になるところのまとめ…
Gunosy Material Design Study
Material Designの目的マルチデバイス時代の進化にあわせ、過去に築かれてきたデザインの原則や理論、技術革新と科学の可能性をベースに、 様々なデバイス上でサービスを利用したいユーザーへ共通の操作体験を提供する事が目的。
デバイス・プラットフォームを問わないUXガイドラインが必要
Gunosy Material Design Study
デバイスによって操作・体験が変わる
User
ストレス
現実世界にないモノの動きすぐに認知できないGUIコンポーネント
No Platform Consistency!!
デバイスやプラットフォームの上に 生活があるのではなく、
生活の中にデバイスやプラットフォームがある
“
“
Gunosy Material Design Study
物理法則やモノの歴史は 無視できない
ユーザーの使い慣れた環境から逸脱すると離脱率は上がる
Gunosy Material Design Study
Material Designとは…
Gunosy Material Design Study
社会的に 蓄積された デザイン理論
フィードバック による
体験の継続性
Material Design
物理的で 自然な 形状・動き
Visual Language
Material is the metaphor Bold, graphic, intentional Motion provides meaning
Gunosy Material Design Study
全部話すと長いので、 気になる点だけまとめます
Gunosy Material Design Study
Animation
統一されたイージング Swift out
linear は NG! 動きには意味がある
イージングについて知りたい方はこちらがオススメEasing Function 早見表 http://easings.net/
Gunosy Material Design Study
Responsive Interaction
タップしても何も変化がない = 適切に処理されたかわかりにくい
ユーザーの行動に対して アニメーションで 処理が行われた事を表現する。
Gunosy Material Design Study
UI Color Palette
Material Designは原色をベースに、 道路標識や現代建築・スポーツ用のコートなどを参考にし、瞬時に認知できるように設計されている。
カラーはメインカラーとアクセント カラーの組み合わせで構成され、 Web・Android・iOSに対応するためのカラーパレットが用意されている。
Gunosy Material Design Study
Floating Action Button
Material Designの肝ともいうべき Floating Action Button
1 サイズは2通り 2 最も重要なアクションを基本画面に1つ配置
電話アプリの場合
電話する ホームへ
3 関連した要素の場合は 複数設置可能
再生に関連している
音楽アプリの場合
Gunosy Material Design Study
Layout and Shadow
Material Designでは紙を メタファーとして扱い、 意味(アフォーダンス)を 持たせる。
Floating Action ButtonStatus BarBackground
Material(素材)とメタファー(揶揄)でユーザーの脳に対して 実世界と同じ刺激を与えて、脳の負担を軽くしいる。
Gunosy Material Design Study
最後に…
Gunosy Material Design Study
So when we talk about the physics of things, we're not trying to copy the real world. We're trying to make it natural for your brain, for you mind, while still unleashing this thing that software can do which is be this totally mutable, transformable, truly magical type of experience. So that's kind of the line that we're trying to dance on.
僕らはリアルな物理を使うとはいってますが、 リアル世界をコピーしようとは考えていません。 ただ、脳や心にとって自然なものを作ろうとしているだけです。ソフトウェアの可能性を開いて、変化のある本当にマジカルな体験を作っていく、僕らはそんなラインの上でダンスしようとしています。
引用元:マテリアル・デザインって何? Androidデザイン責任者にインタヴュー Brent Rose-Gizmodo US 翻訳 miho
マティアス・デュアルテ氏 Matias Duarte
Gunosy Material Design Study
所感
Gunosy Material Design Study
Material Designとは UIデザインやUXアーキテクチャにおける哲学
Gunosy Material Design Study
@ tyshgcTsuyoshi Higuchi
Thank youご清聴ありがとうございました!
http://raindrop.io/collection/215731俺の”Material Designまとめ”リンク