# 教學目標與流程概覽

* 從零開始完整示範 UI 與 UX 設計流程
* 依序進行 Wireframe、Figma 輕量 Mockup、完整視覺設計
* 全流程約一小時，涵蓋設計思維、介面與體驗
* 目的是讓初學者理解實際專案中的設計步驟

---

# Wireframing
## 什麼是 Wireframing

* 網站與系統功能的視覺藍圖
* 用來描述頁面結構與互動方式
* 不涉及顏色、字體、品牌或內容細節
* 重點在配置與流程，而非美感

## Wireframe 的工具與形式

* 可使用紙筆快速手繪
* 可使用 iPad 搭配繪圖 App
* 可使用第三方 Wireframe 工具
* 不需要 UI 或平面設計背景

## 建立 Sitemap（網站地圖）

* 為整個網站提供方向與結構
* 通常以首頁作為核心節點
* 延伸出關於我們、功能頁、聯絡頁等核心頁面
* 可用箭頭表示頁面之間的關聯

## 從首頁開始設計 Wireframe

* 首頁定義整體視覺與結構風格
* Header 與 Footer 是最重要的共用區塊
* 版面通常以寬版、多欄結構為基礎
* 有利於後續使用 Grid 或前端框架

## Header 與 Hero 區塊設計

* Header 包含 Logo 與導覽選單
* 使用簡單圖形代表 Logo 與選單項目
* Hero 區塊通常是大圖或 Slider
* 可標示左右箭頭與圓點代表輪播

## 首頁主要內容區塊

* 常見為介紹區或行動呼籲區塊
* 包含圖片、標題與簡短說明文字
* 使用方框與線條代表內容結構
* 可加入按鈕作為導流用途

## 區塊分段與重複結構

* 各區塊以水平切分方式排列
* 有利於未來複製到其他頁面
* 視覺上有助於理解內容層次
* Wireframe 階段不需過度精準

## 贊助商或推薦區塊

* 使用標題方塊代表區塊名稱
* 多個小方塊代表 Logo 清單
* 通常依欄位平均排列
* 易於後續增減內容數量

## Footer 區塊規劃

* 常包含 Logo、聯絡表單、網站地圖
* Footer 可用深色或不同樣式區分
* 聯絡表單以輸入框與按鈕表示
* 顯示電話與 Email 等基本資訊

## Wireframe 的標註說明

* 為每個區塊加上文字標籤
* 協助非技術人員理解設計意圖
* 可使用箭頭指向說明元素用途
* 有助於溝通與減少誤解

## 圖片與內容的處理方式

* Wireframe 不需選定實際圖片
* 只需標示圖片用途與位置
* 實際素材可在後期再決定
* 重點在結構而非內容品質

## 完成首頁 Wireframe 的意義

* 已清楚定義整體頁面流程
* 可快速調整區塊順序與配置
* 為後續視覺設計打好基礎
* 可繼續延伸至其他頁面設計

---

## Features Page 設計

* 複製網站的 Header 以保持一致性
* 移除首頁大型 Slider，改為標題區塊
* 使用深色標題表示 H1 元素，之後可主題化
* 以大圖和文字區塊展示產品特色
* 每個 feature 區塊包含標題、描述、可能的圖示或圖像
* 可複製第一個 feature 區塊，並左右互換排列增加趣味性
* 重複複製可完成多個 feature 區塊
* 複製 Footer 並新增小字型的 copyright 區塊

## Contact Us Page 設計

* 複製 Header 與 Footer 以保持一致性
* 標題區塊與 Features Page 類似
* 包含聯絡資訊區塊：電話、Email
* 可加入聯絡表單，包括文字輸入區與送出按鈕
* 可加入地圖區塊，顯示地址並支援點擊取得路線
* 導覽設計：Header 上選單可連結到 Contact Us 頁

## 頁面元件重複使用策略

* Header 與 Footer 可跨頁複製
* Feature 區塊可複製並調整排列位置
* Contact 表單與圖像區塊可重複使用於其他頁面
* 標題區塊可統一樣式，方便主題化

## Mobile Responsive 設計

* 設定手機版頁面寬度較窄，元素單欄排列
* Header 包含 menu 按鈕、互動按鈕與 logo
* 主內容區塊文字在上、圖像在下
* Banner 或 Slider 可縮小或只顯示單一圖像
* 其他區塊如 sponsor、Footer 可調整欄位數與元素大小
* Footer 可包含聯絡表單、網站地圖、logo 與聯絡資訊
* 字體大小與間距適度縮小以適應小螢幕

## 導覽與互動

* 導覽設計需標示 Header 選單與按鈕連結
* 可能在 About Us 或 Footer 添加聯絡按鈕
* 確保不同頁面間的切換清楚且一致

## Wireframe 製作方式

* 可使用紙筆或數位工具（Figma、Adobe XD）
* 重點在於快速呈現頁面架構與元件布局
* 可將 SVG 或其他格式作為展示給客戶的參考
* 簡化頁面元素，先表示結構與主要功能，再後續填入圖文內容

---
# UI Layout
## UI 設計階段概覽

* 從 Wireframe 進階到 UI Prototype
* 使用設計工具（如 Figma、Adobe XD）進行設計
* 不涉及實際顏色、圖片或內容，主要提升專業感與版面精準度
* 目的是建立可以展示給客戶的第二版設計

## Figma 工具介紹與設定

* 可在瀏覽器使用，跨平台且可即時協作
* 基本工具包括：選取工具、縮放工具、框架（Frame）、形狀、文字
* 可以建立不同裝置尺寸的 Canvas，如桌面、手機、平板
* 免費帳號即可使用

## 建立設計 Canvas

* 創建新檔案並命名，如「Free Code Camp Website UI」
* 選擇桌面尺寸 Frame，寬高可設定 1980x1980 px
* 可後續調整高度以適應設計內容

## 使用 Wireframe 作為參考

* 將先前完成的 Wireframe 拖入 Canvas 作為參考
* 包含首頁、功能頁、聯絡頁及行動版
* 將 SVG 或其他圖形置入 Canvas，開始 UI 設計

## 建立 Grid Layout

* 使用 Figma 的 Grid Layout 工具
* 設定為 12 欄 (Bootstrap 常用)、間距 (Gutter) 約 15px
* 可調整欄寬以符合設計需求
* 方便元素對齊及後續排版

## Header 與 Menu 設計

* 建立 Slider 區塊使用方框代表
* Logo 用圓形 + 文字標示
* 導覽選單文字置入對應頁面（Home、About、Features、Contact、Pricing）
* 設定間距（約 80px）與行高對齊
* 使用深色方框表示當前選中頁面

## Slider 設計

* 左右箭頭使用 Font Awesome SVG 圖示
* 調整尺寸及透明度（左 40px、右旋轉箭頭）
* 底部圓點表示滑動位置，主要頁面圓點使用深灰色
* 配置間距約 10px

## Hero 文本設計

* 設置主標題 Hero Title，字體大小 72px，粗體
* 設置副標題 Hero Subtitle，常規字重，透明度約 66%
* 確保與欄位 Grid 對齊
* 形成首頁主要視覺焦點

## 完成首頁 UI 原型

* 包含 Logo、Menu、Slider、Hero Text
* 與 Wireframe 保持一致布局
* 為後續加入顏色、圖片及其他內容做準備
* 可用作客戶展示或進一步視覺設計依據

---

## About Us Section 設計

* 使用欄位設計，左側放圖片，右側放標題、描述與按鈕
* 複製 Hero 區塊並調整背景色為淺灰 (F1 F1 F1)
* 調整標題、描述字型大小與間距，標題約 60px，按鈕文字約 28px
* 按鈕顏色深灰 (##666) 字體白色，文字示例為「Read More」
* 分組所有元素以便管理，命名如 About Us Section、Read Me Button、BG
* 鎖定位置以防誤動

## Sponsors Section 設計

* 複製 About Us 區塊作為基底
* 移除按鈕與描述，僅保留標題與副標題，置中排列
* 將圖片縮小為兩欄寬，並橫向複製形成所有贊助商
* 背景可使用淡色調，保持高度約 100~200px
* 標題與副標題置中對齊
* 調整上下 padding，使區塊不過於擁擠

## Footer 設計

* 複製 Home Page 的基礎區塊作為 Footer
* 背景深色，包含 logo、聯絡表單、網站地圖與聯絡資訊
* 使用欄位布局，第一欄顯示 Contact Us 標題與訊息
* 第二欄為 Site Map，列出網站頁面連結
* 第三欄顯示 logo 與聯絡資訊，包含電話與 Email，搭配 Font Awesome 圖示
* 聯絡表單包含全名、Email、訊息欄位與 Submit 按鈕，按鈕深灰 (##333) 字體白色

## Copyright 區塊

* 位於 Footer 底部，背景深色 (##333)
* 字體大小 24px，置中顯示
* 文字示例：「Copyright 2020 All Rights Reserved Company Name」

## 網頁間距與一致性

* About Us 區塊上下間距調整為 100px
* 保持各區塊間距一致，包括 Header 與 Footer
* 確保欄位設計可延伸至響應式設計，列可在小螢幕折疊成行

## Wireframe 與 UI 對應

* Home Page 使用 Slider 與 Logo、Menu，圖像搭配文字表述
* About Us 區塊遵循欄位網格，方便響應式布局
* Sponsors 區塊顯示六個贊助商圖像，大小適中，欄位可折疊
* Footer 包含 Contact Form、Site Map、Logo 與聯絡資訊，保留擴充空間

---

# Mockup
## 設計前言

* 設計是網站或應用程式開發前最重要的步驟
* 改動後期成本高，因此需要謹慎規劃
* 前面已完成 Wireframe 和小型 UI Prototype

## 參考資源

* 使用先前的 Wireframe 作為基礎
* 已建立首頁、功能頁、聯絡頁及行動版選單
* UI Prototype 提供頁面版面與元素的參考

## 建立品牌與內容

* 以「Enhance UI」網站為例，針對開發者設計
* 將 Logo 拖入 Canvas 並調整大小
* 背景色改為深灰色 (##1e1e1e)
* 標題與副標題文字改為白色提高可讀性

## Header 與背景

* 可以加入背景色或背景圖片
* 拖入背景圖片，放在矩形層下方
* 標題改為「Design for Developers」
* 副標題改為「Learn how to enhance your website」
* 可加入書籍圖片，並使用陰影增加立體感
* 調整 Menu 顏色，與主題保持一致
* 調整 Logo 尺寸與 Menu 對齊

## About Us 區塊

* 使用圖片遮罩 (Mask) 調整版面
* 設置主標題、副標題與描述
* 調整元素間距與尺寸
* 強調重要文字，例如作者名稱
* 調整按鈕顏色與整體主題一致

## Testimonial 區塊

* 原本的贊助商區塊改為使用者評價
* 減少欄位數量，每欄佔四格
* 背景顏色使用藍色，文字顏色為白色
* 評價文字大小設為 18px，透明度 66%
* 對齊欄位並保持整齊間距
* 填入三則示例評價，包括 Traversing Media、Web Dev Simplified、Dev Ed

## Footer 區塊

* 背景色與 Header 主題一致
* 複製 Logo 並放入 Footer
* 保留現有版面與文字內容
* Footer 包含版權資訊，無需額外修改

---

## Mobile 版本設計概述

* 選擇 iPhone 框架作為行動版設計基準
* 將 Desktop 版本的 Hero、About Us、Testimonials 與 Footer 元素複製並縮放適應小螢幕
* 將 Slider 移除或縮小，高度調整，使內容更符合行動裝置比例
* 字型縮小以適應窄版顯示，例如 Hero 標題 48px、描述 24px
* 圖片縮小並置於文字下方，元素置中排列

## Mobile Header 設計

* 複製 Desktop 版本 Logo
* 加入 Hamburger Menu，三條白線，位於左上角
* Header 元素置中並保持一致性

## Mobile About Us Section

* 複製 Desktop 文字與 Read More 按鈕
* 字型大小調整：標題 48px、描述 24px、按鈕文字 18px
* Collapse 寬度，使文字換行並保持左右 Padding
* Read More 按鈕縮小並置中
* 圖片縮小並放置於文字下方，置中對齊

## Mobile Testimonials Section

* 複製 Desktop 版本背景與標題
* 字型調整：標題 48px、副標題 24px，置中
* 保留三個 Testimonials，垂直排列並添加上下 Margin
* 調整人物圖片位置，保持整齊對齊

## Mobile Footer Section

* 複製 Desktop Footer 元素，調整高度以容納所有內容
* 聯絡表單欄位建議全寬
* Site Map 與 Logo 置於下方，文字大小適中
* Email 與電話圖示與文字調整對齊
* Copyright 區塊置於最底部，字型稍小，適應行動版畫面

## Mobile 設計原則

* 保持 Desktop 版本排版與元素一致
* 縮放字型與圖片，使畫面不擁擠
* 元素置中排列，便於單手操作
* 適度增加 Padding 及 Margin，保持視覺舒適
* 注意框架大小變動，避免元素錯位

---

# Terminology
* 線框圖（Wireframe）：網站或應用的低保真設計草圖，用來規劃佈局與功能。
* 使用者介面（UI, User Interface）：用戶與系統互動的視覺與操作介面。
* 使用者體驗（UX, User Experience）：使用者在操作系統或網站時的整體感受與滿意度。
* 主頁（Home Page）：網站的入口頁面，通常展示核心信息與導航。
* 導覽列（Navigation Bar）：網站頂部或側邊的導航選單，用於頁面切換。
* 頁腳（Footer）：網站底部區域，通常包含聯絡資訊、版權訊息或次要連結。
* 標題區（Header）：頁面頂部區域，常含網站標誌與主導航。
* 英雄區（Hero Section）：頁面上方大型展示區，通常包含重要信息或圖片。
* 滑動圖像（Slider Image）：可滑動切換的圖片區塊，展示多個視覺內容。
* 呼叫行動（CTA, Call to Action）：引導使用者執行特定操作的按鈕或鏈結。
* 內容區塊（Content Block）：頁面中用來放置文字、圖片或其他資訊的分區。
* 版面格線（Grid Layout）：設計中用於排列元素的規則化列與欄結構。
* 響應式設計（Responsive Design）：自動調整網站版面以適應不同螢幕尺寸。
* 標題標籤（Heading Tag）：HTML中標示標題的元素，如H1、H2、H3。
* 副標題（Subheading）：次於主標題的文字，用於輔助說明。
* 圖像佔位符（Image Placeholder）：暫時代表圖像的空間，用於設計布局。
* 文本佔位符（Text Placeholder）：暫時代表文字內容的標示，用於設計布局。
* 圖示（Icon）：小型圖形元素，用於增強理解或互動。
* 色塊（Color Block）：用色彩區分內容區域的設計元素。
* 字型大小（Font Size）：文字顯示的尺寸，用於視覺層級與可讀性。
* 字重（Font Weight）：文字粗細，如Regular、Bold等。
* 行高（Line Height）：文字行與行之間的間距，影響閱讀舒適度。
* 字距（Letter Spacing）：文字間距，用於強化視覺效果或可讀性。
* 區塊間距（Margin）：元素外側與其他元素的空間。
* 區塊內距（Padding）：元素內容與邊界之間的空間。
* 元素層級（Z-Index）：決定重疊元素的顯示順序。
* 排版（Typography）：文字排版設計，包括字型、大小與間距。
* 導覽結構（Navigation Structure）：網站頁面與連結的組織方式。
* 網站地圖（Sitemap）：顯示網站頁面層級與連結的結構圖。
* 線條（Divider Line）：用於分隔內容區域的直線或橫線。
* 模組化設計（Modular Design）：將設計拆分為可重複使用的組件。
* 互動標示（Interaction Indicator）：顯示使用者可互動元素的符號或效果。
* 佈局比例（Layout Ratio）：元素間的大小比例關係。
* 對齊（Alignment）：元素在頁面上的水平或垂直排列方式。
* 版面層次（Hierarchy）：設計中元素的重要性與顯眼程度排序。
* 視覺引導（Visual Flow）：引導使用者目光從一個區塊到另一個區塊的設計方式。
* 區域標籤（Section Label）：標示頁面中各區塊內容的文字。
* 區塊複製（Duplicate Section）：快速複製頁面區塊以保持一致性。
* 可點擊區（Clickable Area）：用戶可以點擊互動的頁面區域。
* 按鈕（Button）：用於觸發操作或連結的互動元素。
* 表單（Form）：用於收集使用者輸入資料的區塊。
* 地圖嵌入（Map Embed）：在頁面中加入地圖資訊的設計元素。
* 圖像覆蓋（Overlay）：圖像上的半透明層，用於突出文字或效果。
* 影像比例（Aspect Ratio）：圖像寬高比例，影響顯示方式。
* 行列系統（Column System）：用於排版的分欄系統，如12欄網格。
* 樣式佈局（Style Layout）：元素的視覺呈現方式，包括顏色、形狀與陰影。
* 陰影（Drop Shadow）：元素背後的陰影，用於增加層次感。
* 表格（Table）：用於排列結構化資料的元素。
* 段落（Paragraph）：文字段落區塊。
* 區塊陰影（Block Shadow）：單一區塊的陰影效果，用於區分層次。
* 佈局框架（Layout Frame）：設計工具中用於包含元素的容器。
* 區塊容器（Container）：頁面中用來包裹相關元素的框架。
* 圖像滑動（Carousel）：多張圖像依次輪播的互動元件。
* 側邊欄（Sidebar）：頁面側邊的導航或資訊區域。
* 頁面指示器（Page Indicator）：顯示目前頁面或滑動位置的符號。
* 原型設計（Prototype Design）：建立互動模型以展示產品功能與流程的設計方法
* 線框圖（Wireframe）：用於規劃頁面結構和功能的簡化視覺設計
* 使用者介面（User Interface, UI）：用於與使用者互動的視覺和操作介面
* 使用者體驗（User Experience, UX）：使用者在使用產品過程中的整體感受
* 響應式設計（Responsive Design）：網頁根據不同螢幕尺寸自動調整佈局
* 網格系統（Grid System）：設計中用於排列元素的規則化欄位和行
* 框架（Frame）：設計中用來放置元素的容器或畫布
* 元件（Component）：可重複使用的設計元素或模組
* 對齊（Alignment）：元素在設計中按水平或垂直方向排列的方式
* 間距（Spacing）：元素之間的空白距離
* 填充（Padding）：元素內部與邊界之間的空間
* 邊距（Margin）：元素外部與其他元素之間的距離
* 層級（Layer）：設計中元素的堆疊順序
* 群組（Group）：將多個元素組合成單一單元以便管理
* 區塊（Section）：頁面中用於區分不同內容的容器
* 佈局（Layout）：元素在頁面上的排列和組織方式
* 字型（Typography）：文字設計與排版風格
* 字體大小（Font Size）：文字顯示的高度尺寸
* 字重（Font Weight）：文字的粗細程度
* 字距（Letter Spacing）：文字字元之間的間距
* 行距（Line Height）：文字行與行之間的垂直間距
* 色彩（Color Palette）：設計中使用的顏色集合
* 色碼（Hex Code）：顏色的十六進位表示法
* 透明度（Opacity）：元素的透明程度
* 背景（Background）：元素或區塊的底色或圖案
* 按鈕（Button）：可點擊執行操作的互動元素
* 圖標（Icon）：用於表示功能或內容的圖形符號
* 滑塊（Slider）：用於顯示多個內容的可滑動區塊
* 輪播圖（Carousel）：連續切換顯示圖片或內容的組件
* SVG（Scalable Vector Graphics）：可縮放的向量圖形格式
* 文字標籤（Label）：用於描述或提示元素的文字
* 佈局網格（Column Grid）：以列為單位的設計參考線
* 間隔器（Gutter）：網格列之間的間距
* 框線（Border）：元素邊界的線條
* 圓角（Border Radius）：元素邊角的弧度
* 投影（Shadow）：元素陰影效果增加立體感
* 原型互動（Interaction）：設計中模擬使用者操作的動作
* 鎖定（Lock）：防止元素被移動或修改
* 導覽列（Navigation Bar, Navbar）：網站頂部的選單區域
* 標題（Heading）：頁面主要文字標示
* 副標題（Subtitle）：標題下的補充文字
* 文字占位（Placeholder Text）：輸入欄位的提示文字
* 表單（Form）：收集使用者資料的輸入區塊
* 輸入欄位（Input Field）：供使用者填寫資料的欄位
* 網站地圖（Site Map）：網站頁面結構的概覽
* 版權資訊（Copyright）：內容所有權聲明
* 網頁元件庫（UI Library）：設計中可重複使用的元素集合
* 視覺層次（Visual Hierarchy）：元素重要性和關注度的排列
* 配色方案（Color Scheme）：選擇並搭配設計顏色的策略
* 設計稿（Design Mockup）：接近最終呈現效果的靜態設計
* 實時協作（Real-time Collaboration）：多用戶同時編輯設計的功能
* 錨點（Anchor）：用於定位頁面內特定區域的參考點
* 桌面版設計（Desktop Design）：針對桌面螢幕尺寸優化的網站或應用界面
* 行動版設計（Mobile Design）：針對手機或平板螢幕尺寸的界面設計
* 框架尺寸（Frame Size）：設計畫布的寬高設定
* 複製元素（Copy Elements）：將設計中的元件複製到其他區域
* 背景圖（Background Image）：放置於元素後方的圖片作為裝飾或主題
* 圖層順序（Layer Order）：元素堆疊的先後順序
* 遮罩（Masking）：限制元素可見範圍的技術
* 字體顏色（Font Color）：文字的顏色設定
* 主標題（Main Title）：頁面最重要的標題文字
* 副標題（Subtitle）：主標題下的補充說明文字
* 描述文字（Description Text）：提供額外訊息的文字內容
* 按鈕樣式（Button Style）：按鈕的外觀設計，包括顏色、大小與形狀
* 投影效果（Box Shadow）：元素投影以增加立體感
* 菜單欄（Menu Bar）：網站或應用的導航區域
* 高亮顯示（Highlight）：強調當前選中或重要項目
* 漸層色（Gradient）：顏色從一種逐漸過渡到另一種的效果
* 滑動區塊（Slider Section）：可左右滑動展示內容的區塊
* 圖片占位符（Image Placeholder）：暫時用於顯示圖片位置的元素
* 內容填充（Content Fill）：將文字或圖片填入設計模板
* 評測區塊（Testimonials Section）：展示使用者或客戶評語的區塊
* 對齊方式（Alignment Method）：元素在水平或垂直方向的排列方式
* 字體縮放（Font Scaling）：調整文字大小以符合版面需求
* 元素間距（Element Spacing）：不同設計元素之間的距離
* 版面比例（Layout Ratio）：元素在畫布上所占的相對大小
* 響應式斷點（Responsive Breakpoint）：介面在不同螢幕寬度下的切換點
* 漢堡選單（Hamburger Menu）：行動版常用的隱藏式導航圖示
* 元素縮放（Element Scaling）：調整元素尺寸以適應不同畫面
* 文字換行（Text Wrapping）：長文字自動分行顯示
* 水平置中（Horizontal Centering）：元素在水平方向居中排列
* 垂直置中（Vertical Centering）：元素在垂直方向居中排列
* 元件重用（Component Reuse）：將設計元件應用於多個區域
* 背景色調整（Background Color Adjustment）：修改背景顏色以配合主題
* 版面填充（Layout Padding）：內容與區塊邊界之間的空白距離
* 區塊高度調整（Section Height Adjustment）：調整頁面區塊的垂直尺寸
* 文字不透明度（Text Opacity）：文字的透明度設定
* 圖片縮放（Image Scaling）：調整圖片尺寸以符合版面比例
* 元件分組（Component Grouping）：將多個元素整合為單一組件
* 可視化測量（Visual Measurement）：透過設計工具量測元素尺寸與間距
* 預覽模式（Preview Mode）：查看設計在實際使用場景中的效果
* 內容對齊網格（Content Alignment Grid）：利用網格對齊元素與文字
* 互動設計（Interaction Design）：設計使用者與界面互動的流程
* 圖層鎖定（Layer Locking）：防止元素被意外移動或修改
* 文字選擇（Text Selection）：選取文字以進行編輯或格式化
* 元素置頂（Bring to Front）：將元素置於其他元素之上
* 元素置底（Send to Back）：將元素置於其他元素之下
* 輸入欄位（Input Field）：供使用者輸入資料的界面元素
* 提交按鈕（Submit Button）：表單提交操作的按鈕
* 版權區塊（Copyright Section）：頁面底部的著作權聲明區域
* 設計元件庫（Design Component Library）：存放可重複使用元件的集合
* 文字格式化（Text Formatting）：對文字進行字型、大小、粗細等設定
* 元素位置調整（Element Positioning）：設定元素在頁面上的精確位置
* 模擬頁面（Page Mockup）：接近實際呈現效果的完整設計展示
* 滑動條控制（Slider Control）：操作滑塊或輪播內容的介面元素