UI基本設計規範v2.9
在開始一個UI設計專案之前，最容易被忽略的往往不是創意，而是規範。
UI設計規範(Design Guidelines)能讓不同設計師、前端工程師及後續維護人員都能在一致的原則下協作。
從版面、色彩、字體、按鈕、間距等面向，了解建立UI基本設計規範的重點，讓介面設計更統一、更具專業感。
UI設計單位 | 版本與尺寸
-
【重點一】產品在iOS/Android二個平台都上架時，設計師常以iOS版本製作為主
-
【重點二】不同裝置使用了不同的單位來表示尺寸
- 網頁單位：像素、px(Pixels)
- iOS單位：點、pt(Points)
- Android單位：密度、dp(Density-independent Pixels)
-
【重點三】切圖則分開輸出不同倍數版本
- 網頁匯出：@1x
- iOS匯出：@1x、@2x、@3x
- Android匯出：MDPI、HDPI、xHDPI、xxHDPI、xxxHDPI
UI設計單位 | 圖像解析度
像素尺寸依螢幕解析度不同而有所不同。
在電腦螢幕中，通常1pt＝1/72 英吋 = 0.3528 mm
在72dpi下，(72/72=1)，則1pt=1px。
在144dpi下，(72/144=2)，則1pt=2px。
UI設計單位 | 圖像倍數
UI設計單位 | 尺寸換算
UI設計規範 | 元件尺寸
【重點一】APP元件尺寸常以「8倍數」像素規則設計，有利於開發人員以8倍數增量。
Button height: 36dp
為什麼要使用 8pt 系統？
像素整除性高，易於計算與對齊
- • 8 可以被 2、4 整除，也能輕鬆倍增成 16、24、32、40、48...
- • 設計師在排版或設定間距時，不需要煩惱複雜的小數點或不對齊問題。
在多數螢幕與裝置中，8 是個「整除性」極高的數字：
跨裝置與螢幕密度更容易對齊
- • 8px × 2 = 16px(2x螢幕)
- • 8px × 3 = 24px(3x螢幕)
現代介面需適配不同解析度(如 1x、2x、3x Retina 螢幕)， 以 8px 為基準時，所有元素在不同密度螢幕下都能「剛好整除」，避免出現模糊、偏移或像素錯位的問題。 例如：
不會出現 7.5px 這種導致渲染不清晰的半像素。
與主流設計系統相容性高
- Google 的 Material Design、Apple 的 iOS HIG、以及許多 UI Framework(如 Ant Design、Bootstrap 5)
都採用以 8 為基準的 spacing scale。 - 使用這個系統可以輕鬆沿用現有組件或設計資源，團隊協作成本更低。
建立視覺節奏與一致性
- • 小間距(4、8px)用於文字與按鈕內距；
- • 中間距(16、24px)用於模組之間；
- • 大間距(32、40px 以上)用於區塊或段落分隔。
8pt 系統讓間距形成一種「節奏感」，視覺上更有秩序：
這樣的層級有助於使用者在閱讀介面時，自然感受到層次與分組。
UI 間距規範表(Spacing Guideline)
| 元件類型 | 間距位置 | 建議值(px) | 補充說明 |
|---|---|---|---|
| 整體版面(Layout) | 區塊與區塊間距 | 32 / 40 / 48 | 大型留白區，建立層次感與閱讀節奏 |
| 頁首與主內容間距 | 64 | 提供舒適的視覺起點 | |
| 區塊內邊距(section padding) | 24 / 32 | 常見於版面容器的上下邊界 | |
| 卡片(Card) | 內距(Padding) | 16 / 24 | 主要文字內容與邊框距離 |
| 卡片間距(Card Gap) | 16 / 24 | 多卡片並排時保持一致間距 | |
| 按鈕(Button) | 內距(Padding) | 水平 16 / 垂直 8 | 維持可點擊面積與視覺平衡 |
| Icon 與文字距離 | 4 / 8 | 小畫面時可縮為 4px | |
| 按鈕與其他元件間距 | 16 | 與表單欄位或段落間保持距離 | |
| 表單(Form) | 標籤與輸入框距離 | 4 / 8 | 視介面密度調整 |
| 欄位與欄位間距 | 16 / 24 | 同組欄位保持一致留白 | |
| 表單區塊與按鈕距離 | 24 / 32 | 結尾行動按鈕與內容分離 | |
| 文字(Typography) | 標題與內文距離 | 8 / 16 | 視層級而定，H1 通常 24px |
| 段落與段落間距 | 16 / 24 | 保持閱讀節奏 | |
| 清單項目(List Item)間距 | 8 / 12 | 避免項目過於擁擠 | |
| 圖片(Image / Banner) | 圖片與文字間距 | 16 / 24 | 維持焦點區塊呼吸感 |
| 縮圖(Thumbnail)間距 | 8 / 16 | 視排列密度調整 | |
| 彈出視窗(Modal / Tooltip) | Modal 內邊距 | 24 / 32 | 保持主要內容清晰可視 |
| 元件內部微距離 | 4 / 8 | 用於標題、按鈕或提示文字之間 | |
| 頁腳(Footer) | 區塊內邊距 | 24 / 32 | 維持與上方內容區一致的留白 |
| 版權資訊與底部距離 | 8 / 16 | 細節排版微調 |
【重點二】「可觸控區域(Touch Target)」規範
可點擊元件至少 44 x 44 dp為佳。點擊元件間距至少 8 dp以上。
指針目標
指標目標類似於觸控目標，但適用於滑鼠或觸控筆等運動追蹤指標裝置。建議將指針目標的尺寸至少設定為 44 x 44 dp。
Avatar: 40dp
Icon: 24dp
Touch target on both: 48dp
為什麼按鈕要至少 44px × 44px / 48px × 48px？
符合人體工學：手指的平均觸控面積
- • Apple 的 Human Interface Guidelines(HIG) 規定最小可點擊區域為 44×44pt。
- • Google 的 Material Design 則建議 48×48dp 作為最小觸控區域。
人的手指不像滑鼠游標那麼精準。
研究顯示，一般成年人的食指指腹接觸螢幕時，
覆蓋範圍大約為 8–10mm(實際約44–48px)。
提升可用性與操作容錯率
- • 降低誤觸率(特別是在行動裝置上)。
- • 增加使用者的操作信心。
- • 讓手指、拇指在單手操作時更容易點擊目標。
可觸控區域大一點，可以：
這在使用者走路、移動中操作手機時尤其關鍵。
改善無障礙體驗(Accessibility)
- 對於手部動作不靈活的使用者(例如長者或有障礙者)，過小的按鈕會導致操作困難。
- 44px / 48px 的尺寸不只是方便，而是無障礙設計(A11y)的一部分。
視覺層次與操作區域分離
- 有時候按鈕的「視覺大小」不一定等於「實際可點擊區域」。
- 例如 icon button 看起來只有 24px，但仍需在外層加上 padding 讓實際點擊範圍達到 44px 以上。
跨平台一致性與開發標準化
由於 Apple 與 Google 都訂下了這樣的觸控基準，設計師若遵守 44/48 規範，能確保：
- • 各平台(iOS / Android / Web)操作手感一致。
- • 前端開發可直接套用統一規格(如 min-width: 44px; min-height: 44px;)。
可點擊區域規範(Touch Target Guideline)
| 平台 | 建議最小可點擊區域 | 單位 | 出處 |
|---|---|---|---|
| iOS | 44 × 44 | pt | Apple HIG |
| Android | 48 × 48 | dp | Google Material Design |
| Web(通用) | 44–48 | px | WCAG / 常見實務 |
【重點三】圓角規範(Corner Radius Guideline)
「圓角(Corner Radius)」直接影響整體視覺語彙與品牌調性，也會影響互動回饋的一致性。
在 UI 設計中，圓角的設計不只是裝飾，而是反映產品性格與整體一致性的關鍵元素。不同的圓角曲率會帶來不同的感受與互動印象，例如柔和、專業、科技感或友善感。
為什麼需要統一圓角？
建立一致的品牌視覺語言
- 不同模組若使用不一樣的圓角半徑，會讓畫面顯得雜亂。統一的圓角能讓整體界面更協調，產生「同一產品家族」的感覺。
強化使用者熟悉度與操作預期
- 按鈕、輸入框、卡片等元件圓角一致，能幫助使用者快速辨認可互動區域，提升操作直覺性。
配合平台設計規範(Design System)
- • iOS Human Interface Guidelines：傾向柔和圓角
(多採 8pt、12pt、16pt) - • Material Design：預設使用 4pt Grid 系統，常見圓角為 4、8、12、16px
UI 圓角規範表(Corner Radius Guideline)
| 元件類型 | 建議圓角值(px) | 補充說明 |
|---|---|---|
| 按鈕(Button) | 8 / 12 | 兼顧柔和與穩定感；過圓會降低專業感 |
| 輸入框(Input Field) | 4 / 8 | 較小的圓角維持清晰結構 |
| 卡片(Card) | 12 / 16 | 增加層次與深度，視覺上更柔和 |
| 對話框(Modal / Pop-up) | 16 / 24 | 提升沉浸感與現代感 |
| 圖示按鈕(Icon Button / FAB) | 50%(完全圓形) | 用於浮動操作按鈕或強調主動作 |
圓角與間距
外圓角 ≈ 內圓角 * 1.25 ~ 2倍。
APP內部元件的圓角間距，常以內部圓角的75%規則設計。
內圓角 + 間距 = 外圓角
外圓角 - 間距 = 內圓角
【重點四】圖片體積與比例規範(Image Size & Weight Guideline)
良好的圖片優化能縮短載入時間、減少伺服器壓力、提升體驗流暢度。設計師與前端開發人員應在專案初期就建立圖片體積標準，避免後期效能問題。
影像格式選用建議表(Image Format Guideline)
| 格式 | 適用情境 | 優點 | 注意事項 |
|---|---|---|---|
| JPG | 照片、背景 | 壓縮高、支援廣 | 不適合透明圖 |
| PNG | ICON、Logo、透明底圖 | 無損畫質、透明背景 | 檔案偏大 |
| SVG | ICON、UI圖示 | 向量化、體積小、無失真 | 不適合複雜照片 |
| WebP / AVIF | 通用型、高品質壓縮 | 較新格式、壓縮率高 | 需考慮瀏覽器支援度 |
| HEIF / HEIC | App端影像(iOS/Android) | 優異壓縮比 | Web 不完全支援 |
為什麼要控制圖片體積？
效能優化
(Performance)
- 過大的圖片會拖慢載入速度，尤其在行動網路環境下更明顯。
SEO 友善
(Search Optimization)
- Google 會評估頁面載入速度作為排名依據。
節省流量與儲存成本
- 對使用者與後端伺服器皆有實際效益。
圖片體積與格式建議表(Image Optimization Guideline)
| 平台 | 建議圖片體積上限 | 常見格式 | 最佳化重點 |
|---|---|---|---|
| Web(網站) | 一般圖 ≤ 200KB； 大型橫幅 ≤ 500KB |
JPG / WebP / AVIF / SVG(圖示) | WebP、AVIF 壓縮率高，推薦取代 JPG |
| App(行動應用) | 單張 ≤ 300KB(列表圖)；背景圖 ≤ 1MB | PNG / WebP / HEIF | 高 DPI 螢幕需多尺寸資源，避免單一原圖放大縮小 |
➤ 建議制定標準：小圖 ≤ 150KB; 中圖 ≤ 300KB; 大圖 ≤ 500KB; Retina / App 專用圖可略放寬，但應壓縮後再上傳。
圖像比例與裁切規範(Image Ratio Guideline)
圖像比例是 UI 設計中維持整體視覺一致性的重要元素。良好的比例規範能確保圖片在不同裝置與版面上都能保持焦點正確、不被拉伸或變形，進而建立穩定的品牌視覺節奏。
為什麼要統一圖像比例？
維持介面一致性
- 若每張圖片比例不一，畫面節奏會破壞版面整體感，特別在列表、卡片、Banner 模組中尤為明顯。
確保焦點構圖正確
- 不同比例會改變構圖重心，統一規格能避免人像被切頭、產品被截斷等問題。
利於自動裁切與響應式設計
- 預先定義比例可讓開發端更容易設定 object-fit: cover; 或 aspect-ratio 等屬性，節省人力調整。
圖片比例與尺寸建議表(Image Ratio & Size Guideline)
| 使用情境 | 推薦比例 | 尺寸範例(px) | 備註 |
|---|---|---|---|
| Hero Banner(首頁主視覺) | 16:9 / 21:9 | 1920×1080 / 1920×820 | 寬幅橫圖，保留主要文字區 |
| 次要橫幅(活動、模組封面) | 4:3 / 3:2 | 1200×900 / 1500×1000 | 適合置中構圖與產品視覺 |
| 卡片封面(作品集 / 商品) | 1:1 | 600×600 / 800×800 | 最穩定、通用比例 |
| 部落格縮圖 / 新聞封面 | 3:2 / 4:3 | 900×600 / 1200×900 | 與內容圖比例一致 |
| App 首頁橫圖 / Banner | 16:9 / 2:1 | 1080×540 / 1200×600 | 適合滑動橫幅(carousel) |
| 人像 / 圖像展示 | 3:4 / 2:3 | 900×1200 / 1000×1500 | 適合直式版面(如 App 或 IG) |
| 頭像 / Icon | 1:1(圓形) | 256×256 / 512×512 | 建議預留安全邊距 10% |
建立一致又高效的系統規範
設計規範最終目標都是在視覺與效能之間取得平衡。 統一的規範不僅能讓整體介面更乾淨、有秩序，也能大幅減少設計與開發間的誤差。 當每一張圖都遵循既定比例、適當壓縮、保留焦點與一致的風格時，整個產品就能呈現出專業、穩定且具有品牌一致性的視覺體驗。