gunosy material study : what is material design?

Gunosy Material Design Study

@ tyshgcTsuyoshi Higuchi

What is Material Design?マテリアルデザインってなんだろう?2014, Sept. 25


PROFILE

GunosyのUIデザイナー・フロントエンドエンジニアの傍ら、 UX設計なども担当している良くも悪くも10年選手。 Gunosyには2014年7月にジョイン。前職はGunosy初期UI設計をした某社。

樋口　剛　Tsuyoshi Higuchi


Index

1 Material Designの目的…

2 Material Designとは…

3 気になるところのまとめ…


Material Designの目的マルチデバイス時代の進化にあわせ、過去に築かれてきたデザインの原則や理論、技術革新と科学の可能性をベースに、様々なデバイス上でサービスを利用したいユーザーへ共通の操作体験を提供する事が目的。

デバイス・プラットフォームを問わないUXガイドラインが必要


デバイスによって操作・体験が変わる

User

ストレス

現実世界にないモノの動きすぐに認知できないGUIコンポーネント

No Platform Consistency!!

デバイスやプラットフォームの上に生活があるのではなく、

生活の中にデバイスやプラットフォームがある

“

“


物理法則やモノの歴史は無視できない

ユーザーの使い慣れた環境から逸脱すると離脱率は上がる


Material Designとは…


社会的に蓄積されたデザイン理論

フィードバックによる

体験の継続性

Material Design

物理的で自然な形状・動き

Visual Language

Material is the metaphor Bold, graphic, intentional Motion provides meaning


全部話すと長いので、気になる点だけまとめます


Animation

統一されたイージング Swift out

linear は NG! 動きには意味がある

イージングについて知りたい方はこちらがオススメEasing Function 早見表 http://easings.net/

http://material-design.storage.googleapis.com/videos/animation-authentic-motion-authenticMotion_massAndWeight_ex2_large_xhdpi.mp4

http://easings.net/

http://easings.net/ja


Responsive Interaction

タップしても何も変化がない = 適切に処理されたかわかりにくい

ユーザーの行動に対してアニメーションで処理が行われた事を表現する。

http://material-design.storage.googleapis.com/videos/animation-responsive-interation-radialReact-example_large_xhdpi.mp4


UI Color Palette

Material Designは原色をベースに、道路標識や現代建築・スポーツ用のコートなどを参考にし、瞬時に認知できるように設計されている。

カラーはメインカラーとアクセントカラーの組み合わせで構成され、 Web・Android・iOSに対応するためのカラーパレットが用意されている。


Floating Action Button

Material Designの肝ともいうべき Floating Action Button

1 サイズは2通り 2 最も重要なアクションを基本画面に1つ配置

電話アプリの場合

電話するホームへ

3 関連した要素の場合は複数設置可能

再生に関連している

音楽アプリの場合

http://4.bp.blogspot.com/-2UDJrBq_5fk/U-HO66VkK2I/AAAAAAAAA5I/slcUrOuUwQw/s1600/togglefab.gif


Layout and Shadow

Material Designでは紙をメタファーとして扱い、意味（アフォーダンス）を持たせる。

Floating Action ButtonStatus BarBackground

Material（素材）とメタファー（揶揄）でユーザーの脳に対して実世界と同じ刺激を与えて、脳の負担を軽くしいる。


最後に…


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

http://www.gizmodo.jp/2014/07/_android.html


所感


Material Designとは UIデザインやUXアーキテクチャにおける哲学


@ tyshgcTsuyoshi Higuchi

Thank youご清聴ありがとうございました！

http://raindrop.io/collection/215731俺の”Material Designまとめ”リンク

http://twitter.com/tyshgc

http://raindrop.io/collection/215731