Entries

よくわかるマテリアルデザインの設計コンセプト

iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。

以下、自分の理解をまとめたメモ。



紙とインク
マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。



ペーパーの特徴

バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。

ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。

現実とことなり、このペーパーは自由に伸縮することができる。

マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねたりして構成する。




インクの特徴
画面上に存在する色のついたドットは、インクのメタファーとなる。画面上の全ての色は、ペーパーにインクがのった状態と考える。同様にあらゆる文字や模様や写真、ビデオなども、ペーパーの上に印刷されたインクとして解釈する。

現実のインクと違い、このインクは自由に色が変更できる。ビデオはリアルタイムに更新され続けるインクと解釈される。



厚みについて
マテリアルデザインは厚みの概念を持つ。デバイス前面のガラスとデバイスの背面の間に、複数の紙が重ねられていると解釈して画面を設計する。

ペーパー自体も厚みを持ち、複数のペーパーを重ねた場合には影が生まれる。影の濃さは、下にあるペーパーとの重なり具合によって変動する。

すべてのペーパーは、デバイスのガラスと背面の間に挟まっているため、重ねたり多少の浮き上がることはできる。ただし、ページフリップのようなZ方向への回転は、発生しない。ペーパーがZ方向に回転をするとガラスに衝突してしまうためである。





指とペーパーのインタラクション
ユーザーが画面をタッチするとき、それはペーパーをタッチすることになる。ペーパーは物理的な存在なので、指がペーパーを貫通することはない。マテリアルデザインでのインタクションの表現は複数ある。

まずはペーパーと指のインタクション。指がガラスにタッチした瞬間に、ペーパーが軽く浮き上がって指を迎え入れる動き。視覚的にはタッチの瞬間にボタンが拡大されるのは、この考え方による。

もう1つは、インクと指のインタラクション。指がレスポンシブなインクにタッチした瞬間、インクは液状化する。これにより波紋のようなエフェクトや円形マスクの画面遷移が発生する。




ペーパーやインク移動と変形
ペーパーはXYZの全方向に移動可能であり、また自由にリサイズできる。縦と横の比率も変形可能である。(ただし、立体方向への回転は、ガラスと衝突するので行われない)。

ペーパーの変形アニメーションでは、縦方向と横方向の速度にずれがあり、アスペクト比を壊しながら変形する。

これはアスペクト比を保ったまま拡大した場合、ペーパーが拡大されたのか、それともペーパーが手前に浮かび上がったのか区別がつかない為である。

拡大と浮上を区別するため、ペーパーの変形では、縦横をずらして拡大するか、縦横の比率をキープして拡大するかが重要となる。

ペーパーはダイナミックに矩形から円形に変形したり、1枚のペーパーが分割されることもある。ペーパーの出現には基本的にアニメーションをともなう。

インクはペーパーの上に印刷されているが、必ずしもペーパー上に固定されているわけではない。インクはペーパーの上を自由に移動、変形できる。例えばペーパーの拡大したとき、あわせてインクが拡大してもよいし、独立してサイズを保ってもよい。

ペーパーは半物理的な存在である場合、アニメーションの開始終了時には加減速が発生する。線形移動をしてはならない。



ペーパーとレイアウト
ペーパーのレイアウトには、「つなぎ目(Seam)」と「段差(Step)」の2種類の考え方がある。

2枚のペーパーが並んでいる場合、そこにはつなぎ目が発生する(1dpのライン)。2枚のペーパーが重なっている場合、そこには段差が発生しシャドーが生まれる。

2枚のペーパーが繋がっている場合、片方を動かせばもう片方も動く(テーブルビューなど)。2枚のペーパーが重なっている場合、2つの動きは基本的に独立している。(スクロールバーとツールバー)。



境界線上にあるボタン
マテリアルデザインにはフローティング・アクション・ボタンという特殊なボタン型ペーパーがある。FABボタンは、一般的に2枚のペーパーの境界上に配置された円形のボタンである。

FABボタンが2つのペーパーのつなぎ目に置かれている場合、そのボタンは2枚のペーパーどちらにも属する。このような場合、ペーパーがスクロールすれば、FABはつなぎ目上にのっかって連動してスクロールする。

FABボタンが段差の上にあった場合、そのボタンは上側の紙に属する。上側のペーパーの移動やスクロールに追随し、下側のペーパーの動きには影響をうけない。

FABボタンが境界線上にない場合、そのボタンは単一のペーパーに属して動くか、あらゆるペーパーに属さず浮遊している(ドロップシャドーの高度が異なる)。