Material Design ガイドにある「Layout - Principles」を紹介します。このエントリーは「Material Design Advent Calendar 2014」12月14日の記事です。
Material Design Advent Calendar 2014 - Adventar
Principles
マテリアルデザインでは、ベースライングリッドと様々なページにまたがって機能する構造グリッドの共通セットのように、プリントデザインの世界から得られた基本的なツールを使用しています。レイアウトは全体で異なる画面サイズを拡張できるように設計されており、UI開発を容易にするのに役立ちますし、最終的にスケーラブルのあるアプリを作成するのに役立ちます。
レイアウトのガイドラインにも一貫性のある外観を持ち、同じ視覚的要素、構造グリッド、プラットフォームや画面サイズ全体で一般的なスペーシングルールに対してルックアンドフィールが得られるようにします。構造的および視覚的な一貫性は、親しみやすさと快適さの高レベルをユーザーに提供し、認識されるものとしてアプリケーションは、ユーザーのための環境を作成します。
レイアウトを詳細に掘り下げる前に、マテリアルがどのように動作し、それがどのような方法で細工されているかのルールを検討してください。
Paper craft
マテリアルデザインでは、アプリケーションによって描画するすべてのピクセルは、ペーパーシート上に存在します。ペーパーシートはフラットな背景色を有し、様々な目的を果たすようなサイズにすることができます。典型的なレイアウトは、複数の用紙で構成されています。
システムは、ペーパーシートの上に存在しない状況やシステムバーなど、要素のピクセルを引いてもよいです。それは、その下にアプリのコンテンツとは別の面に、ディスプレイのガラス裏面に印刷されているものとして、このようなシステム要素として考えると便利です。
Arranging paper
ペーパーシートの2枚の共通なエッジ長を共有する場合、継ぎ目が生成されます。シームによって接合されたシートは一般的に一緒に移動します。
手順は、ペーパーシートの重なりのとき2枚作成されます。異なるz軸の位置を有するシートは、典型的には互いに独立して移動します。
Paper toolbars
ツールバーには、アクションを提示するために使用されるペーパーストリップが使用されます。アクションは、ツールバーのいずれかの側にクラスタ化します。ナビゲータアクションが右に表示されながら、そのようなドローワーメニューアイコンまたは上矢印などのナビゲーションアクションは、左側に表示されます。
ツールバーの左右のアクションは、他のペーパーシートで分割されることはありません。しかし、ツールバーは、そのペーパーシートの全長未満にその幅を制限することができます。
ツールバーは、頻繁にツールバーのアクションはに関連するコンテンツを表示するペーパーシートの別のシート上のステップを形成します。ツールバーの下に紙のスクロールシートとしては、エントリーの時点で、ツールバーのクリップには、反対側へ通過するのを防止します。
ツールバーは、2枚目のペーパーシートを継ぎとしても、最初に提示されるが、ステップを形成するために持ち上げることができます。クリッピングのこの変形は、waterfallと呼ばれています。
代わりに、ツールバーは二枚のペーパーシートが一緒に移動すると、画面をオフにプッシュする、その継ぎ目を維持することができます。
最後に、それが動くように、第2のシートは、ツールバーをカバーすることができます。
ツールバーは、標準的な高さが、携帯電話で 56 dpと、デスクトップ上の 64dp を持っていますが、それらは高さを高くすることができます。場合によって高くアクションは上またはツールバーの一番下のどちらかに固定することができます。
ピンになったら、ツールバーは動的に高さを変更することができます。サイズを変更する場合、段階的にスナップします。
Floating actions
フローティング·アクションは、ツールバーとは別の紙の円形シートである。
フローティングアクションは、単一の昇格アクションを表します。それはそのステップを作成する論文の内容に関連する場合、フローティングアクションはステップをまたぐことができます。
それがその継ぎ目を作成する論文の両方の内容に関連する場合、フローティングアクションは継ぎ目をまたぐことができます。
決して行動のためのアンカーポイントを提供するために、単に装飾的な縫い目を導入しません。
