UI.UX Design Beginner’s Guide Part 1

後設資料

作者：socialMORE (Social More HK)
發表日：PDF metadata 顯示建立於 2022-03-08；內文由 socialMORE IG 貼文 #86 / #110 / #116 / #137 / #139 等整理而成
頁數：13（A3 橫式）
語言：繁體中文（港式用語，穿插英文 UI / UX 術語）
檔案狀態：原 PDF 啟用 copy restriction，文字層中文編碼異常；本次以 pdftoppm 轉圖後用 Tesseract chi_tra+eng OCR 輔助整理，並以頁面截圖人工校對主題與頁碼。

socialMORE 的 UI/UX 入門上冊，把 UI vs UX 邊界、主流 UI 工具、原子設計、Persona、微互動、空白 / 載入 / tooltip 狀態、留白與無障礙檢核整理成適合新手掃讀的單頁式指南。

#110 你知道 UI 和 UX 的差異嗎？：UI 設計著重介面整體視覺呈現與互動性，例如字體、顏色、字型、標誌與頁面一致性；UX 設計著重以使用者為中心，依使用者習慣安排流程與內容，挖掘並解決產品痛點。
UX 設計流程：搜集資料 → 分析 → 設計（線框圖 / 視覺稿 / 互動原型）→ 測試 → 改良。
2022 主流 UI 設計工具：socialMORE 依 2021 uxtools survey 指出 Figma 已開始拋離 Sketch 與 Adobe XD；本頁也明確說明 UI 工具不是 Photoshop / Illustrator。
#137 UI 設計中的基礎單位：跨設備設計不應直接以 pixel 作為佈局單位；常用 pt（iOS）與 dp（Android）處理不同像素密度，ppi 用來描述顯示設備每英寸像素數。

#116 設計系統的基礎：原子設計理論：Brad Frost 2013 提出的 Atomic Design 被作為設計系統基礎理論，將介面構成拆成原子、分子、組織、模板、頁面五層。
本頁的關鍵不是術語本身，而是「從最小元素開始，逐步建立可擴充且一致的介面系統」。

#86 Persona 攻略與實用工具：人物誌被定義為描繪目標客群 / 目標使用者的方法；製作前需先清楚市場定位，若資源足夠則透過面談或觀察蒐集大量用戶資料。
Persona 的用途：建立同理心、作為新功能或設計改動時的判斷指南。
#139 淺談 UI 設計中的微互動 / 微交互：微互動是使用者觸發任務或功能時產生的小型互動體驗，其四元素為 Trigger、Rules、Feedback、Loops and Modes。
範例包含 IG 雙擊愛心、照片縮放、新留言通知、上傳進度與 Medium 每日推薦。

空白狀態 Empty State：初次使用、無結果 / 無資料、錯誤或異常時的介面，不應只顯示空白；應引導下一步、安撫疑惑，並透過品牌圖像和語氣建立愉悅感。
載入頁面 Loading Page：避免只放靜態 Loading... 字樣；需要告訴使用者系統正在處理，長時間載入應用進度條或百分比，並可加入品牌元素與動畫降低等待焦慮。
留白 Blank Space：留白與負空間同義，是 UI 必然存在的基本元素；可分成宏觀留白與微觀留白，並透過 margin / padding 控制區塊與內容之間的距離。
Tooltips：提示工具框應短、近、非關鍵；重要訊息不應藏在 hover 才出現的提示裡，手機端因沒有 hover 需要額外提示入口。
Persona 線上工具：介紹 HubSpot Make My Persona Tool 作為快速繪製 persona 的入門工具。
無障礙設計入門：整理顏色對比度、觸控目標大小、顏色以外提示與替代文字四個常見檢核；文字與背景至少應符合 WCAG AA 4.5:1 對比度，Material Design 建議觸控目標至少 48 x 48 dp。

tags	來源/pdf, 狀態/草稿, 領域/ux, 領域/視覺設計
aliases	SocialMORE UIUX Beginners Guide Part 1, UI.UX 設計總整合 Part 1, UIUX 設計總整合基礎知識與小技巧