今天我們進入到 Material Design 中 Layout 排版的部分，排版涵蓋的範圍較廣，我們會分成兩天來介紹排版，今天會先了解排版、像素密度、響應式網格排版三個部分，讓我們繼續看下去吧。

Layout

• Understanding layout 了解排版
• Pixel density 像素密度
• Responsive layout grid 響應式網格排版
• Spacing methods 間距方法
• Component behavior 元件行為
• Applying density 適用密度

Understanding layout 了解排版

排版通過使用統一的元件和間距，來促進跨平台、環境、螢幕尺寸的一致性。通過一致性的元件設計和直覺式的排版，在使用網格、參考線和留白時應保持一致。排版具有響應式 RWD 設計，它們對使用者設備和畫面元素輸入做出回饋。

本圖片截取自 Material Design。

Material 排版在視覺上是平衡式的設計。測量與應用都使用 8dp 網格對齊，該網格對齊整體排版又對齊間距。畫面中較小的元件（例如圖標和符號）可以與 4dp 網格對齊。設計物件及間距時可使用 4dp 的倍數來設計尺寸。

Material 響應式排版網格是元件和元素放置的主要指南。網格可適應螢幕尺寸和方向，確保各個排版之間的一致性。

Pixel density 像素密度

螢幕像素密度和分辨率因平台而異。高密度的螢幕每英寸的像素多於低密度螢幕，如果相同 40px 的 UI 元素在低密度螢幕上顯得較大，而在高密度螢幕上則較小。解析度越低的螢幕能顯示的像素越少，反之解析度越高的螢幕能顯示的像素越多。

本圖片截取自 Material Design。

計算螢幕密度的公式

螢幕密度 = 螢幕寬度 px（或高度）/ 螢幕寬度 inch（或高度）

與密度無關的像素為 dp（又稱 "dip"）， Material 使用與密度無關的 dp 是可縮放的靈活單位，可在任何螢幕上顯示均一尺寸的元件。它們提供了一種靈活的方式來適應跨平台的設計。

Android 的像素密度
開發 Android 應用程式時，具有不同密度的螢幕請使用 dp 在任何螢幕上顯示同一尺寸的元件。dp 等於螢幕上密度為 160 的一個物理像素。

計算 dp 公式： dp =（像素寬度* 160）/ 螢幕密度

sp（可縮放像素）的功能與 dp（密度無關像素）相同，用於字體上 1sp = 1dp。 sp 和 dp 之間的主要差別在 sp 保留了用戶文字尺寸的設定，用於較大的文字尺寸時，使用者看到文字尺寸會大於 dp。

IOS 的像素密度
iOS 使用邏輯分辨率確定密度，該邏輯分辨率以 dp 為單位。

通過邏輯分辨率，以原始比例縮放 pixels 再投射到設備上（以像素為單位）。例如: 為 iPhone X 設計 375 x 812 分辨率。輸出後會顯示 1125 x 2436 像素解析度。

iOS 設計時請使用點（pts）。

• Apple iOS 顯示器一覽表

本圖片截取自 iOS Device Compatibility Reference。

• PaintCode iPhone分辨率指南

本圖片截取自 The Ultimate Guide To iPhone Resolutions。

了解裝置尺寸及縮放倍率在設計上是很重要的概念，針對目標客戶常用的裝置尺寸著手設計並且兼顧手持裝置的相容性，保有畫面的一致性，避免跨裝置使用時，用戶需要重新學習操作使用，讓既有用戶可以依照過往的使用經驗去操作，畫面的一致性不僅維持品牌形象，也易於用戶使用。

網頁的像素密度
在不同解析度螢幕顯示網頁時，使用設備的邏輯分辨率，依據不同解析度的設備縮放分辨率。

在設計網頁時請將 dp 替換為 px（像素）。

Responsive layout grid 響應式網格排版

Material 網格由三個元素組成，分別是：

1. 欄
2. 欄與欄的間距
3. 頁面邊距

本圖片截取自 Material Design。

欄寬採用百分比為單位，輕鬆適應各種螢幕尺寸，依照螢幕的斷點範圍(預定螢幕大小範圍)設定欄數，360dp 顯示 4 欄，600dp 顯示 8 欄，在每個畫面左右都會保留頁面邊緣留白，留白的寬度定義為固定數值，斷點為 360dp 時使用 16dp 邊距留白，斷點為 600dp 使用 24dp 的邊距留白。除了預設間距及留白，也可以自定義間距及頁面留白，讓排版設計更靈活，最容易閱讀的內文長度是每行 40-60 個字母。

在特定的螢幕尺寸設計不同的斷點，排版會依據斷點進行調整適合的尺寸及方向，根據響應式排版。使用 4 欄、 8 欄和 12 欄網格的排版可用於不同的螢幕、設備和方向。每個斷點分別有不同的欄數、欄與欄的間距和頁面邊距。

本圖片截取自 Material Design - Breakpoint system。

IOS 裝置斷點

本圖片截取自 Material Design - iOS breakpoints。

網格中的欄寬可以分為自適應縮放欄寬及固定欄寬兩種，再縮放視窗時依據斷點的尺寸更動欄寬。

UI 介面中由應用欄位、側拉式選單、內容區組成，這些區域在不同設備間應保持內容的一致，同時能適應不同螢幕及斷點，在設計界面時應規劃哪些區塊是要永遠不被內容物遮蔽及推移，哪些區塊可以在命令後隨時顯示的區域，可以依照需求顯示或消失，而這些區塊出現時會不會壓縮到網格系統空間。

在設計介面時，可以先運用不同大小的白色色塊排版，可以快速的修改及觀看不同裝置的排版畫面，也能更快速的溝通畫面排版。

今天我們了解到 Layout 排版需要具備響應式設計並且保持一致性，像素密度與裝置解析度的換算，各裝置平台的像素特性，在響應式網格排版與斷點間的密切關係，明天讓我們繼續完成 Layout 排版 中剩下的章節，每天一點一點的逐個擊破，找出那些藏在細節中的魔鬼，不要讓大魔王有機會可以捉弄我們，迎向更美好的介面設計吧(握拳)！

如果您喜歡這篇文章或是這篇文章有幫助到您，歡迎按讚鼓勵，我們明天見囉~