Google Developer Summit Tokyo Memo

MaterialDesign.md

マテリアルデザインの概要

Author: Mr. Ryosuke Matsuuchi

Project Kennedy

Base Concept: WebのUIを統合しよう もともとGoogleのプロダクトは沢山あり、UIが様々。発散していた。 GmailをとってもPC(Web), スマホ(Web), スマホ(Native)だけでもかなりUIが違った。

Android Designガイドライン

Material Design

Material Designはネイティブアプリのみではない。 Material Designの肝をがんがん列挙していきます。

Tangible Surfaces

手触りのある表現

• Z方向への配慮

  • 影は視覚的な装飾ではなく階層の構造を伝えるための表現である.

• リップル効果, translaction-z 触ったことのFeedBack.

• CardView

  • カード型のUIがトレンドとなっている.
  • 画面サイズの変化に合わせやすい(列数でスケールできる)
  • 通知、コンテンツ両方に利用可能

• もう一つのトレンドEdge to Edge Design.

  • マージンや装飾を極力排除する
  • コンテンツファースト

• Whiteframe素材 細部を無視して全体の奥行や構造を組み立てできるツール

Print Like

Font (一番重要)

size, weight, pitch, space, opacity この構造だけで枠線も不要になる.論理を伝えられる

Bold Clolor

ブランドに合わせたカラーを大胆に使う. Primary color + Accent Color

Color Density

文字が多いときにユーザーは文字を理解しないと行けない。色が邪魔をしては行けない. 写真 + プライマリーカラーでアプリへの没入感、そのアプリを利用している間隔を強 める。

Dynamic Color

Immersive Contextual Imagery

没入感. 枠線が細い、 マージン、装飾をしない時代.先ほども挙げたEdge to Edge

Floatin Action Button

Meaningful Motion

視覚的な装飾としてではなく、連続性の表現で Revealアニメーション

Interpolator

直線的ではないアニメーションカーブ.

RecyclerView

リスト表示、グリッド表示

Toolbar

スクロールしたら消えるとか

Addoptive

webならポリマー polimer

Google Design.

Google Javpan Developer Blog

Google Design

責任者インタビュー

Backward Compativility対応(下位互換)

無理はしないでください

Graceful downgrade.

徐々にサポートを打ち切っていくという考え方.