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

albatrosary's blog

Azure と Angular と Wercker CI とか

Material Design Advent Calendar 15日目:Layout - Metrics & keylines

Material Design Advent Calendar

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

Material Design Advent Calendar 2014 - Adventar

Metrics & keylines

Baseline grids

すべてのコンポーネントは 8dp の正方形のベースライングリッドに揃えています。タイプは 4dp ベースライングリッドに整列します。ツールバーでの図像は 4dp の 正方形のベースライングリッドに揃えています。これは、モバイル、タブレット、デスクトップに適用されます。

コンポーネントに関する詳細情報を参照してください。

f:id:albatrosary:20141215100833p:plain

f:id:albatrosary:20141215100841p:plain

f:id:albatrosary:20141215100848p:plain

f:id:albatrosary:20141215100857p:plain

f:id:albatrosary:20141215100906p:plain

Keylines and spacing

Mobile

モバイルレイアウトテンプレートは、画面やさまざまな情報が含まれ、keylinesと画面の端や要素間の間隔が重要です。ここではダウンロードに含まれる画面のサンプルです。

Mobile Layout Template

f:id:albatrosary:20141215101231p:plain

f:id:albatrosary:20141215101241p:plain

f:id:albatrosary:20141215101253p:plain

f:id:albatrosary:20141215101306p:plain

f:id:albatrosary:20141215101318p:plain

f:id:albatrosary:20141215101328p:plain

f:id:albatrosary:20141215101337p:plain

f:id:albatrosary:20141215101345p:plain

f:id:albatrosary:20141215101355p:plain

f:id:albatrosary:20141215101406p:plain

f:id:albatrosary:20141215101416p:plain

f:id:albatrosary:20141215101426p:plain

f:id:albatrosary:20141215101435p:plain

f:id:albatrosary:20141215101444p:plain

f:id:albatrosary:20141215101452p:plain

Tablet

タブレットレイアウトテンプレートは14種類のスクリーンを備え、画面の端や要素間でどのようにkeylinesと間隔が作業を示しています。下記のダウンロードファイルに含まれる14の画面のサンプルです。

Tablet Layout Template

f:id:albatrosary:20141215101633p:plain

f:id:albatrosary:20141215101647p:plain

f:id:albatrosary:20141215101701p:plain

f:id:albatrosary:20141215101716p:plain

f:id:albatrosary:20141215101729p:plain

f:id:albatrosary:20141215101744p:plain

Desktop

デスクトップレイアウトテンプレートは、4つの異なる画面、四つの異なるウィンドウサイズとそれぞれが含まれており、窓や要素間でどのようにkeylinesと間隔が作業を示しています。ウィンドウサイズに基づいて、keylinesおよび間隔ブロックは、タブレットとモバイルの両方からグリッドルールを継承しています。ここからダウンロードで利用可能な画面のサンプルです。

Desktop Layout Template

f:id:albatrosary:20141215101947p:plain

f:id:albatrosary:20141215102002p:plain

f:id:albatrosary:20141215102012p:plain

f:id:albatrosary:20141215102021p:plain

Ratio keylines

モバイル画面の幅やモバイル、タブレット、デスクトップ上のUI要素の幅に適用されます。

f:id:albatrosary:20141215102125p:plain

f:id:albatrosary:20141215102133p:plain

f:id:albatrosary:20141215102144p:plain

f:id:albatrosary:20141215102153p:plain

Incremental keylines

インクリメンタルキーラインは、アクションバーの高さと同様に、増分を定義し、大きさと、アプリ内の他の要素の位置を決定するために、その増分の倍数を使用します。

多くの場合、タブレットに、まれに携帯電話に、主にデスクトップに適用されます。増分の数は、ウィンドウサイズに基づいて変化します。

f:id:albatrosary:20141215102325p:plain

f:id:albatrosary:20141215102334p:plain

f:id:albatrosary:20141215102343p:plain

f:id:albatrosary:20141215102352p:plain

Touch target size

最小のタッチターゲットサイズは 48dp です。レイアウト内のアイコン(24dp)またはアバター(40dp)の間隔時には、このことを覚えておいてください。タッチターゲットが重複しないようにしてください。

平均して、48dpは(ある程度の変動あり)約9ミリメートルの物理的なサイズに変換されます。これはタッチスクリーンオブジェクトに対して推奨されるターゲットのサイズ(7〜10ミリメートル)の範囲内で快適にし、ユーザーが確実にかつ正確に自分の指でそれらをターゲットにすることができるようになります。

少なくとも48dp高くかつ幅広に要素を設計する場合、それを確保することができます:

  • ターゲットは関係なく、表示された画面の7ミリメートルの最小推奨ターゲットサイズより小さくなることはありません。
  • 全体的な情報密度や他の上のUI要素のtargetability間の良好な妥協を打ちます。

f:id:albatrosary:20141215102534p:plain

f:id:albatrosary:20141215102543p:plain

f:id:albatrosary:20141215102552p:plain

f:id:albatrosary:20141215102600p:plain