在昨天我們了解了 Layout 排版需要具備響應式設計並且保有一致性，像素密度與裝置解析度的換算，各裝置平台的像素特性，在響應式網格排版與斷點間的密切關係，今天我們將繼續完成 Material Design 中 Layout 的間距方法、元件行為、適用密度，就讓我們繼續看下去吧。

Layout

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

Spacing methods 間距方法

使用網格、參考線網格、調整間距寬度，適當的間距能讓排版時更容易分出區塊，調整畫面間的密集度，適當的突顯可以觸摸的目標。

所有裝置介面在佈局 UI 元件時，可開啟參考線網格排列，參考線網格分成 8dp 與 4dp 兩種，元件與按鈕對齊 8dp 參考線網格排版，元件中的 Icons 和文字對齊 4dp 參考線網格排版，元件內的內文置中對齊元件容器尺寸，元件內文不需要與參考線網格對齊，整齊的排列與對齊讓畫面更有秩序與一致性，能讓使用者快速找到目標。

Material 定義了狀態列、應用列表、列表項目高度

1. 狀態列(時間、電源位子)：24dp
2. 應用欄(選單欄)：56dp
3. 列表項(選單項目)：88dp

本圖片截取自 Material Design。

除了設定元件在畫面中的網格與對齊，在排列元件時可以使用參考線對齊多個元件，並且設定組多個元件間距，有了參考線我們可以更準確的定義水平及垂直面的元件排版，在排版時也要注意元件中的元素對齊，元件與元件之間保留間距的好處有很多，除了能區別區塊，也可以讓畫面看起來更容易閱讀。

容器是用來包裹元件的形狀，容器會限制內容的元素大小或是依照容器縮放的長寬比，等比例縮放元素尺寸。在圖片、外觀、螢幕尺寸都使用一致的長寬比例保持排版的一致性，建議的長寬比有 16：9 ; 3：2 ; 4：3 ; 1：1 ; 3：4 ; 2：3 ，在排版區塊設定可以縮放的尺寸，在顯示時填滿螢幕顯示區域。

在響應式設計中圖片自適應顯示空間縮放，必須定義在不同斷點下圖片的顯示及裁切方式，最基本的保持固定比例使用固定比例縮放，也可以在不同段點設定不同比例，或是設定固定的容器寬高讓圖片自動縮放，後面兩種方式會自動裁切圖片長寬，設計完成時需要檢查各斷點的圖片顯示是否符合需求。

接下來設定更細部的元件內元素間距，在排列方式上元件內容會與元件外型垂直水平對齊，元件邊緣到內容邊緣會有一定的間距，Icons 和文字間也需要保留間距提高辨識度。按鈕設計最小尺寸設計為 48 x 48 dp，在尺寸小於 48 x 48 dp 的按鈕區塊也要在周圍保留間距，點擊區塊最小範圍也是 48 x 48 dp ，兩個按鈕之間的間距至少為 8dp ，太小的按鈕不易於點擊，間距太小會導致使用者常常誤觸非主要目標按鈕。

Component behavior 元件行為

每個斷點呈現的畫面依據螢幕尺寸會有不同的排版。

本圖片截取自 Material Design。

Material 描述元素位置的定位術語

本圖片截取自 Material Design - Descriptors。

在響應式設計中畫面寬度可以是固定寬度也可以依照畫面寬度自適應伸縮。固定寬度的畫面會在視窗縮放時保持設定的寬度，在適應不同視窗寬度時需要調整排列方式，來適應不同的視窗尺寸。

在平板尺寸以下的裝置顯示側邊選單，側邊選單顯示方式可以使用擠壓畫面空間的方式顯示，但可能導致畫面變形或被推擠出顯示區域，側邊選單顯示方式也可以覆蓋在原有畫面之上顯示，就不會造成畫面的推移。

在響應式設計中畫面的排版為了因應螢幕尺寸縮放或是裝置類型的不同，在每個斷點中都需要規劃不同的排版，在大螢幕尺寸上能一次顯示的內容相對比小螢幕豐富，而在小螢幕底下我們需要思考減法式設計，呈現最重要的內容，減少可能誤導焦點的區塊。

在任何尺寸的介面設計中，都不建議一次把所有內容塞進畫面，有條理地依照主題及動線規劃與排版，可以增加整個流程的完整度，也能讓用戶輕易的在同一個主題找到自己需要的項目與服務。在手機裝置上需要思考呈現的重點目標是什麼，例如: 側邊選單可以在使用者點擊後才顯示、提醒視窗顯示了標題與內文，內文全文是不是可以選取查看全文之後才顯示。

Material 在這一個章節有非常多的響應式畫面排版範例，我們可以將這些範例應用在不同斷點間的規畫設計上，可以豐富版面的變化讓介面看起來更生動外，也可以增加各個畫面間的易讀性與便利性。

Applying density 適用密度

當畫面具有大量訊息、清單或是表單時，縮小元件間距增加元件間的密度可以在螢幕上顯示更多的內容，除了可以讓使用者快速瀏覽更多內容、增加了列表、表格式的密度，使信息更容易查看和比較。但在具有功能性的畫面上，就不適合將畫面密度增加、間距留白減少，例如: 月曆點選的視窗、警告或提示的彈跳視窗，當元件內容太過緊密，消息的可讀性和獨特性就會受到影響反而不好閱讀。

本圖片截取自 Material Design。

當設計可掃描的內容時，要注意頁面留白和網格密度的空間，內容間隔越密集的內容使用較大的網格以及頁面留白，避免使用太密集的網格，容易導致內容難以區別。

在多個元件排列時，調整相同單元的元件密度，而不是單獨調整元件的密度。在調整密度時 Material 會顯示密度單位，從 0 開始表示元件的預設密度。隨著空間的減小，比例會移動到負數（-1，-2，-3）每個增量代表元件高度減少4dps。

當元件密度增加或減少時，留白和對齊方式會保持一致，元件的內容會影響元件的寬度及高度，但尺寸會跟隨調整縮放。當元件內文有多行同時排列時，內文之間需保留 4dp 留白空間以保留可讀性，並將增加間距的內容對齊元件。

在排版時文字的行高是內文間的距離，行距設定越小行距間的文字就越緊密，行距設定越大行距則越寬，依照不同的字型與內容調整行距，可以保有良好的易閱讀性。

※ 目前只有網頁模式可以支援密度應用元件。

今天我們了解到畫面與網格的關係，元件之間存在必要的留白與間距，元件在響應式裝置可以有不同排版與設計，不同特性的視窗及元件有不同的密度考量，明天讓我們繼續完成 Navigation 導覽列 ，每天一點一點的逐個擊破，找出那些藏在細節中的魔鬼，不要讓大魔王有機會可以捉弄我們，迎向更美好的介面設計吧(握拳)！

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