読者です 読者をやめる 読者になる 読者になる

albatrosary's blog

Azure と Angular と Wercker CI とか

Material Design Advent Calendar 14日目:Layout - Principles

Material Design Advent Calendar

Material Design ガイドにある「Layout - Principles」を紹介します。このエントリーは「Material Design Advent Calendar 2014」12月14日の記事です。

Material Design Advent Calendar 2014 - Adventar

Principles

マテリアルデザインでは、ベースライングリッドと様々なページにまたがって機能する構造グリッドの共通セットのように、プリントデザインの世界から得られた基本的なツールを使用しています。レイアウトは全体で異なる画面サイズを拡張できるように設計されており、UI開発を容易にするのに役立ちますし、最終的にスケーラブルのあるアプリを作成するのに役立ちます。

レイアウトのガイドラインにも一貫性のある外観を持ち、同じ視覚的要素、構造グリッド、プラットフォームや画面サイズ全体で一般的なスペーシングルールに対してルックアンドフィールが得られるようにします。構造的および視覚的な一貫性は、親しみやすさと快適さの高レベルをユーザーに提供し、認識されるものとしてアプリケーションは、ユーザーのための環境を作成します。

レイアウトを詳細に掘り下げる前に、マテリアルがどのように動作し、それがどのような方法で細工されているかのルールを検討してください。

Paper craft

マテリアルデザインでは、アプリケーションによって描画するすべてのピクセルは、ペーパーシート上に存在します。ペーパーシートはフラットな背景色を有し、様々な目的を果たすようなサイズにすることができます。典型的なレイアウトは、複数の用紙で構成されています。

システムは、ペーパーシートの上に存在しない状況やシステムバーなど、要素のピクセルを引いてもよいです。それは、その下にアプリのコンテンツとは別の面に、ディスプレイのガラス裏面に印刷されているものとして、このようなシステム要素として考えると便利です。

Arranging paper

ペーパーシートの2枚の共通なエッジ長を共有する場合、継ぎ目が生成されます。シームによって接合されたシートは一般的に一緒に移動します。

f:id:albatrosary:20141214204946p:plain

手順は、ペーパーシートの重なりのとき2枚作成されます。異なるz軸の位置を有するシートは、典型的には互いに独立して移動します。

f:id:albatrosary:20141214205008p:plain

Paper toolbars

ツールバーには、アクションを提示するために使用されるペーパーストリップが使用されます。アクションは、ツールバーのいずれかの側にクラスタ化します。ナビゲータアクションが右に表示されながら、そのようなドローワーメニューアイコンまたは上矢印などのナビゲーションアクションは、左側に表示されます。

f:id:albatrosary:20141214204904p:plain

ツールバーの左右のアクションは、他のペーパーシートで分割されることはありません。しかし、ツールバーは、そのペーパーシートの全長未満にその幅を制限することができます。

f:id:albatrosary:20141214204841p:plain

ツールバーは、頻繁にツールバーのアクションはに関連するコンテンツを表示するペーパーシートの別のシート上のステップを形成します。ツールバーの下に紙のスクロールシートとしては、エントリーの時点で、ツールバーのクリップには、反対側へ通過するのを防止します。

f:id:albatrosary:20141214204832p:plain

ツールバーは、2枚目のペーパーシートを継ぎとしても、最初に提示されるが、ステップを形成するために持ち上げることができます。クリッピングのこの変形は、waterfallと呼ばれています。

f:id:albatrosary:20141214204821p:plain

f:id:albatrosary:20141214204805p:plain

代わりに、ツールバーは二枚のペーパーシートが一緒に移動すると、画面をオフにプッシュする、その継ぎ目を維持することができます。

f:id:albatrosary:20141214204736p:plain

最後に、それが動くように、第2のシートは、ツールバーをカバーすることができます。

f:id:albatrosary:20141214204715p:plain

ツールバーは、標準的な高さが、携帯電話で 56 dpと、デスクトップ上の 64dp を持っていますが、それらは高さを高くすることができます。場合によって高くアクションは上またはツールバーの一番下のどちらかに固定することができます。

f:id:albatrosary:20141214204647p:plain

ピンになったら、ツールバーは動的に高さを変更することができます。サイズを変更する場合、段階的にスナップします。

f:id:albatrosary:20141214204628p:plain

Floating actions

フローティング·アクションは、ツールバーとは別の紙の円形シートである。

フローティングアクションは、単一の昇格アクションを表します。それはそのステップを作成する論文の内容に関連する場合、フローティングアクションはステップをまたぐことができます。

f:id:albatrosary:20141214204605p:plain

それがその継ぎ目を作成する論文の両方の内容に関連する場合、フローティングアクションは継ぎ目をまたぐことができます。

決して行動のためのアンカーポイントを提供するために、単に装飾的な縫い目を導入しません。

f:id:albatrosary:20141214204551p:plain