Googleマテリアルデザインってなに

今や当たり前の存在となってマテリアルデザイン。
まとめ書きです。

• マテリアルデザイン？
  • 2014/06/25 Google I/Oで発表された次世代デザイン。
  • Androidの新しいデザイン言語
  • アイコンやボタンのデザイン、タップやスワイプのユーザー体験が大きく変わる
  • アプリ開発者にもこのガイドラインを順守するよう求めている
  • あらゆるスクリーンサイズに向けてデザイン
  • 誰もが使えて、その人のブランドやアイデンティティやニーズや能力を本当に表現できるデザインシステム
  • 一貫性を求めるために、実世界の基本的な性質をより多くデザインシステムに持ち込む
  • 実世界のものを模倣するのではなく、脳に対して実世界と同じ刺激を与えて、脳の負担を軽くしてやる
  • 動画：http://youtu.be/Q8TXgCzxEnw
  • Google製品のマテリアルデザイン化は加速している
• 「Android 5.0 Lollipop」
  • 2014年10月15日「Android 5.0 Lollipop」を発表
  • Android 5.0ではMaterial Designを採用
  • Lollipopの2つの目的
    • 1つは、スマートウォッチからTVまであらゆるスクリーンサイズのGoogle製品に共通のUIをもたらす新しいデザインガイドラインへのシフト
      • 1人が複数のデバイスを使いこなす時代への対応
    • 常に持ち歩くモノとしてスマートフォンやタブレットをより使いやすくすること
      • 素早くチェックできて対応できる通知機能
      • 安全かつ簡単に解除できるパスコードロック
• 基本方針
  • Material Designは、紙とインクの古典的なデザインから着想を得て、最新テクノロジーを利用し、どんなデバイスでも使いやすく、統一感のあるユーザー体験を提供するためのデザイン
  • 小さな時計の画面からテレビの大画面、自動車のダッシュボードまで、あらゆるフォームファクターで統一感のある使いやすいユーザー体験を提供すること。
• どんなデザイン？
  • 4つのポイント
    • 手触りのある表面
    • 印刷物デザインの応用
    • 修飾ではなく、意味を伝える
    • 画面サイズの変化に適応
  • こうとも言っている
    • インタフェースが直感的ですっきり
    • 情報の階層構造がわかりやすい
    • 配置、目的、ともに必然である。アニメーションも意図や関連性を持っている。
  • 3次元性にあり、各要素は影や奥行きによって立体的に表現され、リアルな質感を
  • 普段のように物質を見たり触っている感覚で、ディスプレイ上のものも直感的に、その場にあるように利用出来るようにするのが目的
  • ボールを上に投げたとき、ボールは減速しながら上昇し、頂上地点で一瞬浮遊し、加速しながら落ちて放物線を描きます。
  • 「誰もが使えて、その人のブランドやアイデンティティやニーズや能力を本当に表現できるデザインシステム」
  • 「脳に対して実世界と同じ刺激を与えて、脳の負担を軽くしてやる」
  • マテリアルは物理的なもので、ユーザーを補助して、階層を作ったり、アフォーダンス（何らかの機能の目印）となったりするもの
  • 「僕らの周りの世界と連続的で、同じ物理的性質や同じ動きにしたい」
    • 押すと滑って、最初は勢いがあって、最後は止まる。
    • 物を落とせば加速する。
  • リアルなアニメーションをスムースに動かすには圧倒的な処理能力が必要。
  • リアルをシミュレートする必要はない
  • 大胆な色使い、効果的な余白、意味のあるモーションなどでユーザーを視覚的にガイドし、自然で継続的な操作性を実現
• デザインガイドライン
  • dpを意識する
  • paper
    • 常に1dpの厚さ
    • 影は高さに比例する
  • animation
    • なぜか様々な形態に変形できる
    • OK
      • 形が変わる
      • 伸び縮み
      • 融合、分離、回転
    • NG
      • 貫通、折りたたむ、めくるのはNG
    • タッチすると波紋で明確に知らせる
• フラットデザインとの違い
  • Appleは現実のオブジェクトを模倣することをiOS7でやめた
  • Googleは同じフラットデザイン化でも、Androidは現実のオブジェクトを取り入れている
  • ウィンドウや各パーツのレイヤー構造がしっかりしている
    • 現実では起きない動きをしない
• iOSでは？
  • GoogleはiOSアプリもマテリアルデザインを適応してきている
  • アニメーションなどは、自力で作るか、どこかのライブラリを使うか
• 疑問
  • リアルなデザインは失敗し、2次元で3次元のものを表現することはユーザを逆に困惑させている。
    • そのため、フラットデザインが出来上がった。
    • ここでまた、リアルを取り入れることが最適なのだろうか。
    • 中途半端にリアルを表現することが、大きな失敗に繋がらないのだろうか。
• 資料
  • google
    • ガイドライン
      • https://www.google.com/design/spec/material-design/introduction.html
  • 外部
    • 設計思想
      • http://fladdict.net/blog/2015/05/material-design.html
    • ギャラリー
      • http://www.materialup.com/
    • マテリアルカラー
      • http://www.materialui.co/colors
• リニューアル事例
  • フリル
    • http://www.slideshare.net/yuki930/ss-47398513
  • マネーフォワード
    • https://moneyforward.com/engineers_blog/2014/12/05/android_material_design/