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 の 正方形のベースライングリッドに揃えています。これは、モバイル、タブレット、デスクトップに適用されます。
コンポーネントに関する詳細情報を参照してください。
Keylines and spacing
Mobile
モバイルレイアウトテンプレートは、画面やさまざまな情報が含まれ、keylinesと画面の端や要素間の間隔が重要です。ここではダウンロードに含まれる画面のサンプルです。
Tablet
タブレットレイアウトテンプレートは14種類のスクリーンを備え、画面の端や要素間でどのようにkeylinesと間隔が作業を示しています。下記のダウンロードファイルに含まれる14の画面のサンプルです。
Desktop
デスクトップレイアウトテンプレートは、4つの異なる画面、四つの異なるウィンドウサイズとそれぞれが含まれており、窓や要素間でどのようにkeylinesと間隔が作業を示しています。ウィンドウサイズに基づいて、keylinesおよび間隔ブロックは、タブレットとモバイルの両方からグリッドルールを継承しています。ここからダウンロードで利用可能な画面のサンプルです。
Ratio keylines
モバイル画面の幅やモバイル、タブレット、デスクトップ上のUI要素の幅に適用されます。
Incremental keylines
インクリメンタルキーラインは、アクションバーの高さと同様に、増分を定義し、大きさと、アプリ内の他の要素の位置を決定するために、その増分の倍数を使用します。
多くの場合、タブレットに、まれに携帯電話に、主にデスクトップに適用されます。増分の数は、ウィンドウサイズに基づいて変化します。
Touch target size
最小のタッチターゲットサイズは 48dp です。レイアウト内のアイコン（24dp）またはアバター（40dp）の間隔時には、このことを覚えておいてください。タッチターゲットが重複しないようにしてください。
平均して、48dpは（ある程度の変動あり）約9ミリメートルの物理的なサイズに変換されます。これはタッチスクリーンオブジェクトに対して推奨されるターゲットのサイズ（7〜10ミリメートル）の範囲内で快適にし、ユーザーが確実にかつ正確に自分の指でそれらをターゲットにすることができるようになります。
少なくとも48dp高くかつ幅広に要素を設計する場合、それを確保することができます：
- ターゲットは関係なく、表示された画面の7ミリメートルの最小推奨ターゲットサイズより小さくなることはありません。
- 全体的な情報密度や他の上のUI要素のtargetability間の良好な妥協を打ちます。
