UIデザインへの理解を深めたい
UIデザインをする上で必須となるガイドライン（Human Interface GuidelinesとMaterial Design）を勉強しています。
Material Designはとても詳しく、初心者には分かりやすいと感じたので今回はこれを読んで得たナレッジを整理したいと思います。
環境
Surface（サーフェス）
マテリアルデザインは、サーフェスが表示され、移動方法は品質を表します。それらが3次元でどのように移動するかは、物理的な世界での移動方法に似ています。 オブジェクトは互いに積み重ねたり取り付けたりすることができますが、互いに通過することはできません。オブジェクトは影を落とし、光を反射します。
◉「サーフェス」の注意！
- 深さは1dpよりも暑くしない。
- サーフェスの標高を変更せずに影を表現しない。
- 入力イベントがマテリアルを通過できない。 マテリアルは他のマテリアルを通過できない。
- 複数のマテリアル要素が同時に空間内の同じポイントを占めることはできない。
- マテリアルはガスや液体やゲルのようには動作しない。
- UIの深さを超える方法でマテリアルが曲がったり、折りたたまれたりすることはない。
- 透明なサーフェイスを使用しない。（コンテンツが読みにくい）
プロパティ
深さ
マテリアルのxおよびy寸法はさまざまで（dpで測定）、厚さは均一（1dp）です。
影
さまざまな高さのマテリアルサーフェスが影を落とします。
解像度
マテリアルの解像度は無限大です。
コンテンツ
コンテンツは、マテリアル上で任意の形状と色で表示されます。コンテンツはマテリアルに厚みを加えません。コンテンツの動作はマテリアルに依存も独立もできるが、マテリアルの範囲内に制限されます。
物理的特性
マテリアルはしっかりしています。ユーザー入力とインタラクションはマテリアルを通過できません
変形材料
マテリアルは形を変えたり、不透明度を変更したり、平面に沿ってのみ伸び縮みしたり、UIの深さ内で曲がったり折りたたまれたりします。 マテリアルサーフェスを結合して、単一のマテリアルサーフェスにすることができ、分割後に再結合できます。
動き
マテリアルは、環境内のどこにでも自発的に生成または廃棄できます。任意の軸に沿って移動でき、モーションを調整できます。 通常はユーザーの操作の結果、動きます。
属性
基本素材面
基本的なマテリアルの表面は不透明な白で、厚さは1dpで、影を落とします。
行動
マテリアルサーフェスは特定の方法で動作できます。
・リジッドサーフェス →すべての相互作用を通じて同じサイズのままです。
・伸縮可能なサーフェス →サイズ制限まで1つまたは複数のエッジに沿って拡大または縮小し、その後、剛体サーフェスとして動作します。
・パン可能なサーフェス →マテリアルの表面の寸法は固定したままにすることができますが、コンテンツは表面全体をスクロールまたはパンできます。（Mapなど）
複合表面
サーフェスは、さまざまなタイプの動作を表示する領域に分割できます。
伸縮性のある表面
サーフェスは、垂直方向、水平方向、または両方向に伸ばすことができます。
表面の位置決めと動き（x / y）
サーフェスは、x軸とy軸の固定位置にとどまることができます。または、任意の方向に移動できます。 上部のアプリバーは固定位置に留まりますが、カードコレクションはその後ろで垂直方向にのみスクロールします。 サーフェスは任意の方向に移動できますが、移動は一度に1つの軸に限定できます。 サーフェスは互いに独立して移動することも、その移動が他のサーフェスの移動に影響を与えるか、依存することもあります。
表面の不透明度
マテリアルの表面は、透明、半透明、または不透明にすることができます。
スクリム
スクリムは、表面のコンテンツを目立たなくする目的でマテリアルの表面に適用できる一時的な処理です。これらは、スクリムを受け取る表面から離れて、画面の他の部分にユーザーの注意を向けるのに役立ちます。
標高
あるマテリアルサーフェスの前面から別のマテリアルサーフェスの前面までの距離は、z軸に沿って密度に依存しないピクセル（dps）で測定され、（デフォルトで）を使用して表示されます。
すべてのマテリアルデザインサーフェスとコンポーネントには、標高値があります。
通常、他のサーフェスの前にあるサーフェス：
- より重要なコンテンツが含まれている
- ダイアログなどの注意を集中する
- アプリバーのアクションなど、背後のサーフェスを制御する
◉「標高」の注意！
- サーフェスエッジとオーバーラップの視覚的な手がかりが必要。なければ、存在するサーフェスの数、他のサーフェスより上にあるサーフェス、またはサーフェス間の標高の程度を判断することはできない。
- 影やくすんだ背景（スクリムドバックグラウンド）がない場合、ダイアログボックスと背景を区別するのが困難。
- スタイルのみにシャドウを使用しない。
標高を描く
標高は以下の情報で描きます。
- 表面のエッジ、周囲と表面を対比
- 静止時または移動中のいずれかで、他のサーフェスとオーバーラップします（表面の重なり）
- 他の表面からの距離
表面エッジやオーバーラップの表現方法
- 表面に異なる色を与える
- サーフェスに異なる不透明度を与える
- 影
サーフェス間の標高差の程度は、スクリムドバックグラウンドまたは影を使用して表すことができます。 異なる表面の色は、仰角の程度は示しません。 不透明度は、標高の程度は示しません。
モーション
モーションは、次の方法を使用して仰角を強調できます。
- 影の変化
- オーバーラップの表示
- 押す
- スケーリング
- 視差
光と影
シャドウは、深さ、移動方向、およびサーフェスエッジに関する手がかりを提供します。サーフェスの影は、その標高と他のサーフェスとの関係によって決まります。
マテリアルデザイン環境では、仮想ライトがUIを照らします。 キーライトは、キーシャドウと呼ばれるより鮮明で指向性のあるシャドウを作成します。 アンビエントライトはあらゆる角度から現れ、アンビエントシャドウと呼ばれる拡散したソフトシャドウを作成します。 キーライトとアンビエントライトからの複合シャドウを使う。
影と輪郭の効果
◉「光と影」の注意！
- シャドウはサーフェス間の標高の程度を表すため、製品全体で一貫して使用する必要がある。
- キーライトのみによる影の影や周囲光のみによる影は使用してはいけない。
- 影と輪郭は、要素を識別するユーザーの能力に影響を与える要素の多くの属性の1つにすぎません。要素を識別する機能に影響を与えるその他の属性には、フォントの特性、高さ、色、周囲の要素間のレイアウト、および使用状況が含まれます。
- 影と輪郭を使用すると、ページをスキャンするときにコンポーネントを簡単かつ迅速に見つけることができます。
- コンポーネントの周囲に影または輪郭を使用すると、コンポーネントを操作できるかどうかを判断する能力が向上します
