Material Design まとめ


Material Design とは

イノベーション・テクノロジーや科学の可能性と伝統的な Good Design と呼ばれる原則を融合したデザイン(視覚言語)。

Material Design


Material Design の目的

さまざまなプラットフォームやデバイス・画面サイズにおいて、同様の体験ができるシステムを構築すること。


Material Design の原則


Metaphor

Material Metaphor (物質を例えたもの)はユーザーのシステム・アプリケーションの使い方の理解を手助けします。

例:

・フロッピーディスクのアイコンが"ファイル保存"を表す

・電子書籍ビューアがページめくりをする際に紙をめくるようなアニメーションをする

システム・アプリケーション上のオブジェクト(UI部品)がどのような見た目か(光り方や表面の色、動き)というのは、そのオブジェクトがどのように動き、振る舞い、他のオブジェクトとどのように関連するかを連想させることに大いに影響します。


Bold, graphic, intentional

テキストがメインのデザインでは、グリッド・スペース・テキストサイズ・テキストカラーの使用方法がデザインに大きく影響します。これらの要素は全体で階層構造をつくり、意味を持ちます。使用するテキストカラー・サイズ、意図的にとったスペースはユーザー体験に影響します。


Motion

UI上のオブジェクトの動き(Motion)はユーザーを注目させます。主なユーザー操作はオブジェクトの変更が発生する場所で行われます。UI 上のオブジェクトはユーザー体験が連続するよう振る舞わなければなりません。

ユーザーの注意をひき、連続性を維持するためにオブジェクトの動きには意味のあるもので適切なものであるべきです。ユーザー操作のフィードバックは些細なもの(でもはっきり分かるもの)であり、画面遷移やオブジェクトの変形などは効果的でかつ筋の通ったものであるべきです。


アニメーション


信頼できるアニメーション

ユーザーが「UI 上のオブジェクトが"タッチ/ドラッグできる"と思える」と思えることは、アプリケーションの使い方を理解する上でとても重要です。オブジェクトの動きからユーザーは、「重たい・軽い」「変更できそう・できなさそう」などを感じ取ります。Material Design における Motion は美しいだけでなく、その動きからオブジェクト間の関連や機能・システム側の意図をユーザーに伝えます。


Mass and Weight

現実世界の物体を動かすためには、それを動かすだけの力が必要です。従って、すぐに動かし始めたり、すぐに止めることはできません。アニメーションもその原理に従わない(急に動いたり、急に止まったりすると)とユーザーにとって、意図しない・不快なものになります。

Material Design に Motion にとって最も重要な事は美しさ、単純さを犠牲にすることなく現実世界の法則を維持することです。下記のリンク先に例となるアニメーションが載っています。

Authentic Motion

UI 上のオブジェクトが画面外から入ってくる場合、その速度も意識する必要があります。ユーザーは画面外からオブジェクトが入ってくる時は画面の境界に注目していません。そのため、オブジェクトが画面外から入ってくる時は、速 → 遅 と速度を変え、オブジェクトが画面外へ出て行く際は 遅 → 速 と速度を変えることで物理法則に合わせつつ、ユーザーの注意をひきます。

ただ、これは UI 上のすべてのオブジェクトにいえることではありません。より軽い・小さなオブジェクトをアニメーションさせる場合にはより速く加速させる必要があるかもしれません。 UI 上のさまざまなオブジェクトにどのようなアニメーションをさせるのが適当か検討する必要があります。


Responsive Intraction - レスポンシブ インタラクション

レスポンシブ インタラクションを用いることでユーザーは自身の操作が正しく行われていると感じることができます。オブジェクトが美しく、論理的なレスポンスを返せばユーザーは満足し、場合によってはその操作をするのが好きになります。オブジェクトのレスポンスは意味のあるものでなければなりません。ランダムであったりしてはなりません。適切なレスポンスを行うことで、ユーザーは「こっちを触るとどうなる?こっちは?」とアプリをより深く知りたくなるでしょう。

Material Design ではアプリはユーザー操作に対してレスポンシブです。

・タッチ操作

・音声

・マウス/キーボード

レスポンシブインタラクションはアプリとユーザーとのコミュニケーションをより自然な方法で実現します。

レスポンシブインタラクションの例が下記リンク先に載っています。

Responsive Interacion


参考