iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 4
1
自我挑戰組

UI / UX 設計白皮書 - Material Design 導讀系列 第 4

UI / UX 設計白皮書 / Material Design 導讀_Day04 Layout 排版

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


Layout

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)/ 螢幕密度

螢幕物理寬度 螢幕密度 螢幕寬度(單位 px) 螢幕寬度(單位 DPS)
1.5 英寸 120 180 像素 240 dp
1.5 英寸 160 240 像素 240 dp
1.5 英寸 240 360 像素 240 dp

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

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

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

iOS 設計時請使用點(pts)。

本圖片截取自 iOS Device Compatibility Reference。

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

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

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

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

Responsive layout grid 響應式網格排版

Material 網格由三個元素組成,分別是:

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

本圖片截取自 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 排版 中剩下的章節,每天一點一點的逐個擊破,找出那些藏在細節中的魔鬼,不要讓大魔王有機會可以捉弄我們,迎向更美好的介面設計吧(握拳)!

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


上一篇
UI / UX 設計白皮書 / Material Design 導讀_Day03 Environment 環境
下一篇
UI / UX 設計白皮書 / Material Design 導讀_Day05 Layout 排版
系列文
UI / UX 設計白皮書 - Material Design 導讀30

尚未有邦友留言

立即登入留言