こんにちは、@desnote_blogです。

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

  • マテリアルデザイン?
    • 2014/06/25 Google I/Oで発表された次世代デザイン。
    • Androidの新しいデザイン言語
    • アイコンやボタンのデザイン、タップやスワイプのユーザー体験が大きく変わる
    • アプリ開発者にもこのガイドラインを順守するよう求めている
    • あらゆるスクリーンサイズに向けてデザイン
    • 誰もが使えて、その人のブランドやアイデンティティやニーズや能力を本当に表現できるデザインシステム
    • 一貫性を求めるために、実世界の基本的な性質をより多くデザインシステムに持ち込む
    • 実世界のものを模倣するのではなく、脳に対して実世界と同じ刺激を与えて、脳の負担を軽くしてやる
    • 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次元のものを表現することはユーザを逆に困惑させている。
      • そのため、フラットデザインが出来上がった。
      • ここでまた、リアルを取り入れることが最適なのだろうか。
      • 中途半端にリアルを表現することが、大きな失敗に繋がらないのだろうか。
  • 資料
  • リニューアル事例

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)