# 簡介

* 學會從零開始建立完整網站
* 涵蓋流程：規劃、策略、內容架構、使用者體驗、設計、開發、發布
* 使用 Figma 設計、Webflow 開發
* 適合初學者，無需基礎知識
* 完成後可放入作品集，開始收費接案
* 講師 Ron Sea，20 年設計經驗，5 年教學經驗
* 網頁設計具創意與技術結合，需求穩定，可遠端工作
* 課程目標：建立簡單網站，啟發興趣，後續可進階學習
* 課程分五章，另有免費 5 日課程輔助學習

# 第一章：流程
## 兩種網站設計流程
* 業餘流程：挑現成模板後客製化
* 業餘報價常見 \$500–\$3,000，多數客戶與 AI 工具即可自行完成
* 專業流程：從空白畫布出發，量身設計解決方案
* 專業專案常見 \$50,000–\$100,000 以上，難以被 AI 直接取代

## 為何採用專業流程
* 創造性與樂趣更高，輸出品質與差異化更佳
* 可結合 AI 強化流程，而非被模板侷限
* 客戶價值與可計費幅度顯著提升

## Step 1｜規劃與策略（Planning & Strategy）

* 釐清為何要做網站、受眾是誰、欲達成目標為何、成功判準是什麼
* 與客戶對談並進行研究
* 產出簡報／簡述（brief）作為專案指南針

## Step 2｜結構／UX（Structure / UX）

* 決定網站需要哪些頁面與各頁核心內容
* 製作低保真線框（灰階、無樣式）呈現版面與資訊層級
* 規劃導覽與任務流程，確保易找、易用

## Step 3｜設計／UI（Design / UI）

* 基於線框選定色彩與字體，建立一致視覺語言
* 加入圖片、插畫、圖示以強化情感與清晰度
* 透過敘事與版面節奏傳達訊息，此階段成敗關鍵

## Step 4｜開發（Development）

* 將設計實作為前端介面，兼顧響應式與無障礙
* 實作互動與動態效果

* 可用無程式工具（如 Webflow）視覺化輸出高品質前端

## 模板與專業流程的交集

* 業餘流程有時會加入策略或客製攝影以拉升品質
* 專業流程亦可運用模板或 UI 套件加速，但不犧牲客製化核心
* 理解專業流程對任一做法皆有助益

# 第二章：策略
## 網站策略（Website Strategy）
* 先釐清問題與要設計的對象與目的，再動手設計
* 策略本質：明確「目前位置」與「未來目標」，規劃可行路徑
* 每家公司情境不同，因此網站也必須不同

## 網站類型（五大類）

* 電商網站：線上購物與交易

* 行銷／商業網站：品牌與公司資訊的「線上名片」
* 內容／媒體網站：部落格、雜誌、精選內容等，以閱讀與觀看為主
* 教育網站：課程與知識傳遞，目標是教會使用者


* 作品集網站：展示個人／公司案例與能力的證明

* 網路應用（如 Google／Airbnb／Twitter）屬於 App，複雜度更高，非本課範圍

## 網站目標（舉例）


* 銷售商品或服務
* 建立信任與可信形象
* 產生潛在客戶（Leads）
* 提供價值與教育內容
* 支援招募與徵才

## 策略工作坊（Strategy Session）

* 與客戶討論現況、產品／服務、目標客群、未來願景
* 釐清網站在整體商業策略中的角色
* 推導需涵蓋的內容與訊息，形成可執行方向

## 專案產出：Brief

* 彙整目標、受眾、信息架構、成功指標與限制條件
* 作為後續 UX／UI／開發各階段的指南針

## 案例：Massix（製藥新創）

* 領域：賽洛西賓（迷幻菇有效成分）之醫療用途
* 核心挑戰：大眾易聯想到娛樂用藥與嬉皮文化，需建立醫療專業與可信度
* 公司初期尚無上市產品，網站規模簡潔，以對投資人與合作夥伴建立信任為主

## 參考對齊

* 向客戶蒐集同業可信網站範例
* 對齊「可信度」的視覺與內容調性，避免偏離期待

## 練習任務

* 找到需要網站的對象進行訪談
* 依訪談內容填寫 Brief，為後續設計做準備

## 下一步

* 進入結構與內容階段：決定頁面與資訊配置，製作線框（Wireframes）

# 第三章：結構

* 將策略簡報轉化為結構化內容，幫助訪客達成目標


* 網站由頁面構成，常見頁面：首頁、關於、產品/服務、部落格、聯絡
* 每頁包含多個區塊，類似書章節或簡報投影片

## 常見區塊
* 導覽列：呈現網站架構，包含 Logo
* Hero 區塊：快速傳達網站重點與價值
* 功能區塊：展示產品或服務特色
* CTA（行動呼籲）：引導訪客採取動作
* 客戶回饋區塊：建立信任感
* 價格區塊：清楚說明收費
* 圖庫區塊：展示圖片內容
* 聯絡區塊：提供聯繫方式
* 頁尾區塊：集中網站資訊與法律聲明

## 常見元素


* 文字：標題與段落，傳遞資訊

* 按鈕與連結：引導動作或跳轉


* 圖片與影片：輔助視覺傳達
* 表單：收集訪客輸入

## 網站架構流程

* 第一步：建立網站地圖，規劃所有頁面與區塊

* 第二步：製作線框圖（wireframe），專注於結構與內容，不涉及顏色或圖片

## Massix 專案規劃

* 採用單頁式網站
* 區塊包含：導覽列、Hero、公司使命、產品介紹、合作夥伴 Logo、聯絡區塊、頁尾
* 使用線框圖快速確認所需內容
## 工具與方法

* 初步可用紙筆繪製線框
* 可使用 Releoom AI 自動生成網站地圖與線框，並自動提供文案建議
* 雖工具方便，但建議初學者先思考結構，再利用 AI 協助

## Figma 線框實作

* 在 Figma 建立專案，繪製各區塊框架
* 依需求加入 Logo 區塊、標題文字、段落、圖片佔位符

* 建立 Hero、使命、產品、合作夥伴、聯絡表單、頁尾等區塊
* 線框圖僅用於確認結構與內容，後續可再設計視覺細節

# 第四章：設計

* 網站設計屬於視覺傳達，重在用色彩、字體、影像強化文字訊息
* 設計需具故事性與情境感，而非只處理按鈕與表單

* 以「此選擇傳達了什麼訊息」作為所有設計決策的檢核準則

## 收集靈感與參考

* 由簡報關鍵字出發搜尋例：healthcare、medical、pharmaceutical、psilocybin、magic mushroom、scientific


* 常用平台包含 Behance、Pinterest、Dribbble、Awwwards


* 將截圖與素材整理到 Figma 的 inspiration 頁面
* 納入客戶既有素材與參考網站以比對方向與差異化

## 競爭者分析

* 常見意象包含腦部連結線條與分子結構


* 視覺風格多採醫學感與高信任感的排版與影像

* 色彩趨勢多見藍色系與深綠及帶迷幻感的漸層


* 版面語氣多為乾淨、條理清楚、專業可信

## 建立情緒版（Mood Board）

* 精選少量高關聯影像放入 Figma 的 mood board 頁面
* 使用乾淨背景的專業攝影作為主要視覺語彙
* 以彩虹折射或玻璃質感暗示迷幻領域但保持醫學專業度

## Colors and Fonts

### 色彩規劃

* 以黑白灰作為基底確保資訊層級與可讀性

* 將彩虹漸層作為點綴以承接迷幻主題與創新感
* 與競品配色做區隔以避免相似與混淆
* 影像作為主要色彩來源以維持版面克制感

### 字體規劃

* Inter 作為免費且穩定的內文字體
* Raleway 作為可替代的幾何無襯線候選


* Saffron Grotesque 作為具識別度與專業感的標題字體


* 標題與內文分工以兼顧辨識度與長文可讀性

## 設計決策

* 採用獨特標題字體結合穩健內文字體的組合策略
* 建立黑白灰基底並以少量彩虹元素作為品牌識別點
* 依情緒版統一影像風格與構圖語氣
* 以「專業可信任且具創新感」作為整體視覺方向

## Logo

* 客戶原有 Logo 品質不足，不適合小尺寸使用


* 概念：抽象化大腦與連結，利用細線與橢圓形構成

* 在 Illustrator 中快速建立抽象腦型圖案並匯入 Figma


* 搭配公司名稱 Massix，使用較粗字體，組成縱向排版以適合網站導覽
* 雖然簡單但足以使用，比原始版本更專業可信

## Imagery

* 網站影像來源有三種：客製化素材、現成素材、AI 生成
* 客製化：自製攝影、插畫或 3D，或聘請專業攝影師與插畫師
* 現成素材：購買或免費下載圖庫、插圖、圖示
* AI 生成：透過工具如 MidJourney 製作低成本且具獨特性的影像

## 影像需求與概念

* Hero 區塊影像需具代表性，展現品牌核心特色
* 公司特點：天然來源與 GMP 標準化生產
* 概念一：大量醫療瓶延伸至地平線，帶彩虹光效，暗示標準化生產
* 概念二：產品瓶與自然元素（蘑菇、葉子）結合，帶有彩虹效果

## AI 生成影像過程

* 使用 MidJourney 嘗試多種提示詞組合與變化



* 調整瓶子材質、金屬瓶蓋、彩虹反射等細節

* 反覆迭代獲得乾淨、專業且具彩虹特徵的結果


* 嘗試產品情境照，結合自然元素與潔白背景，平衡自然與醫學專業

## 任務與醫療場景影像

* Mission 區塊：展現病患在醫療監督下接受治療的場景
* 構想：白色乾淨實驗室環境，患者靜躺、眼睛閉合、帶彩虹光效，表現正向體驗
* 生成影像符合需求，乾淨且具專業醫學感

## 自製實驗室攝影

* 與客戶確認需求後，前往實驗室拍攝
* 拍攝內容包含培養皿、蒸餾過程、菇類培養與收成
* 蒐集多張照片與部分影片，用於產品展示區塊
* 適合以圖庫或 Bento Grid 方式呈現多張照片，強化專業感與真實性

## 合作夥伴標誌

* 向客戶索取合作夥伴 Logo 檔案
* 以等距水平排版呈現，多尺寸比例需手動調整視覺平衡
* 群組並置中整段落，維持與版面一致的邊距與對齊

## 聯絡區塊與圖示

* 不加入額外圖片，僅保留表單與「Email Us」連結
* 以圖示強化互動：搜尋免費信封圖示（Iconfinder），選擇 Outline 風格
* 下載或複製 SVG，貼入 Figma，置於圓形或橢圓背景旁的文字連結

# Design and Layout

## 設計頁面建立

* 新增「Design」頁面，複製線框到此以保留前後版本
* 將文字轉外框並與圖形組成 Logo 群組，調整筆劃粗細與比例
* 設定導覽連結（Mission／Product／Contact）為頁內錨點

## 文字樣式規範

* 建立樣式：H1（Saffron）、H2（Saffron）、Subheading（Inter Semibold）、Body（Inter Regular）、Nav Link
* 控制字級、行高、大小寫（標題用 Title Case，連結可全大寫）
* 以樣式全域套用與修改，確保一致性與開發映射

## 版面與卡片化

* 參考情緒版卡片視覺，章節容器使用圓角（約 30px）
* 對齊左／右邊界與區塊間距，使用等距分佈工具維持節奏
* 表單與按鈕採同一圓角語言，按鈕可用大寫文字區隔層級

## 影像置入與裁切

* 將 Hero 與章節圖以貼上方式置入容器，沿用圓角遮罩
* 使用 Crop 調整構圖，避免文字覆蓋人物臉部或關鍵主體
* 圖庫區塊採「Bento」式多圖排列，依內容選擇橫幅或直幅容器

## 色調一致與後製

* 觀察影像冷暖差異，使用 Photoshop 調整色溫與曝光
* 以 Generative Fill 延展畫布，補齊裁切所需留白
* 套用 Cooling Filter、Curves 提升明度與一致的冷調醫療氛圍

## 合作夥伴區塊細節

* 不同長寬比 Logo 以視覺高度對齊，非僅以邊界對齊
* 套用等距分佈並整體置中，為整段落建立群組命名

## 頁尾與色彩點綴

* 於頁尾加入彩虹漸層作為品牌識別點
* 由漸層取樣按鈕色，其他卡片採灰階維持克制
* 以細條漸層分隔線強化區塊層次與節奏

## 檔案與圖層管理

* 依章節群組命名（Hero／Mission／Product／Partners／Contact）
* 保持對齊、間距、基線一致，便於後續開發切版

## 響應式考量

* 主要完成桌面版設計，必要時另建行動版框架調整排版與字級
* 先以桌面規範定義樣式與組件，再於開發階段處理中小斷點

---
# 第五章：開發

## Internet 基礎

* 網域名稱會解析為 IP 位址以定位網站檔案
* 網站檔案通常託管在雲端主機而非個人電腦
* 基本檔案類型：HTML（結構與文字）、CSS（樣式）、JS（互動）、影像/影片

## CMS 與平台選擇

* 客戶需能自行更新內容，需使用 CMS（如 WordPress、Wix、Squarespace、Webflow、Framer）
* WordPress 需自備主機與安裝；其他平台多為主機+CMS 一體化
* 各方案需支付託管/授權費用
* 本專案採用 Webflow 以符合專業流程與開發效率

## 匯出與準備資產

* Logo、圖示以 SVG（向量）匯出以保清晰度與可縮放性
* 圖片以 JPEG 匯出，避免圓角裁切，保留原圖
* Retina 考量以 2x 尺寸輸出
* 收整 Midjourney 生成圖與客戶素材為最終檔案集

## 匯入字體

* 在 Webflow Site Settings → Fonts 載入 Google Fonts（Inter）
* 僅載入實際用到的字重以降低載入成本
* 上傳自購字體（Saffron Grotesque）之多格式 Web 字型以確保跨瀏覽器相容

## 開始建立專案（Webflow）

* 新建空白站點並上傳所有資產至 Assets
* 新增頁面結構與章節容器，按設計稿逐步實作

## 建立導覽列

* 使用預設 Navbar 元件以取得行動版漢堡選單
* 將 SVG Logo 置於 Brand 區，連結首頁
* 編輯導覽連結文字（Mission／Product／Contact）

## Container 與版面寬度

* 建立共用 class「container」設定 max-width（例如 1300px）並置中
* 以 container 控制超寬螢幕下內容寬度，維持可讀性與一致性

## 文字樣式在 Webflow

* 在 Body 設定全站預設字體為 Inter
* 使用語意化 Heading 元件：H1（頁面唯一主標）、H2（區塊標題）
* 套用自訂 class 與字重（含 Subheading、Nav Link 等）

## 版面格線與區塊

* 每個內容段落以 Section 包覆並套用共用 class「section」
* 於 Section 內使用 Container，再用 Quick Stack（兩欄）建立圖文版型
* 建立共用 class（如 TwoColGrid、VerticallyCenteredCell）以重複使用

## 影像樣式

* 建立共用 class（如 RoundImage）設定圓角半徑（例如 30px）
* 以相同樣式套用至 Hero 與內容圖片以維持一致視覺語言

## 間距與盒模型

* 以 margin 控制區塊間距（例如 section 底部 50px）
* 以 padding 控制元素內距（如 Nav Link 左右間距 40px）
* 使用等距分佈與對齊工具維持整齊節奏

## 章節複用與結構管理

* 以群組與命名管理層級（Navbar／Hero／Mission／Product／Partners／Contact）
* 複製 Section 與 Container 結構以快速建立後續區塊並替換內容

## 章節結構與背景圖

* 使用 Div 作為容器（Mission Block），設定固定高度（例如 700px）
* 以容器背景圖呈現大圖，背景尺寸設為 cover，並加入圓角（約 30px）
* 清除格線預設內距以對齊版面邊界

## 內文群組與可讀性

* 以內層 Div（Mission Texts）包覆副標、H2、段落作為文字群組
* 設定最大寬度（約 510px）並置中以提升可讀性
* H2 使用 Saffron、段落使用 Inter，調整行距與段前後距

## 兩欄版與延伸布局

* 以 Quick Stack 建立兩欄版（文字＋圖片）並以共用 class 控制欄距（如 50px）
* 為置中需求建立共用 class（例如 VerticallyCenteredCell）
* 複製兩欄版作為 Product 區塊基底，改為三欄兩列格線，左側圖跨兩列，右側兩圖各一列

## 圖片樣式

* 建立 RoundImage 共用樣式設定圓角
* 針對特定圖加上 Combo class（如 TopLabImage）統一高度（如 290px）與 object-fit: cover

## 合作夥伴區塊

* 區塊外加入全幅漸層分隔線（上、下各 2px），容器內再置中內容
* 標題沿用文字樣式，Logo 設定共用 class（Partner Logo）統一高度（如 90px）與間距
* 依實際比例微調視覺對齊並擴充分組寬度以容納多 Logo

## 聯絡區塊與表單

* 複用兩欄版：左側表單、右側投資者聯絡
* 使用預設 Form Block，欄位以 placeholder 命名（Name／Email／Message）
* 為欄位建立 FormField 樣式（灰底、圓角、內距），整體表單設固定寬度（如 400px）
* 提交按鈕建立 SubmitButton 樣式（品牌色背景、黑字、圓角、加大內距、字重）

## Email 連結與圖示

* 使用 Link Block 建立圓形 Email 按鈕（灰底、極大圓角）置入信封 SVG
* 使用 Flex 盒（Email Block）排列按鈕與文字連結並調整間距
* 設定 mailto 連結與預設主旨（如「Message from website」）

## 內部錨點與導覽

* 為各 Section 設定 ID（mission／product／contact）
* 導覽連結目標設定為對應頁內區段並測試滾動行為

## 頁尾

* 新增 Footer Section，背景設線性彩虹漸層並調整角度（水平）
* 置中文字（版權聲明），上下加入適當內距
* 需要時同步更新分隔線的漸層色以一致品牌語言

## 命名與結構管理

* 為 Section／Container／Grid／Cell／Image／Logo／Form 等建立語義化 class
* 以 Margin 控制區塊間距、Padding 控制元素內距，維持整站一致節奏
* 群組並命名各段（Hero／Mission／Product／Partners／Contact）以利維護與開發

## 響應式概念與流程

* 在較小斷點的樣式變更只會往更小斷點延續，不會影響桌面版決策
* 依序檢視 Tablet、Mobile Landscape、Mobile Portrait 並逐一修正
* 先處理全站共用間距與容器，再微調各區塊細節

## 全站間距與容器

* 在 section class 加入左右內距（如 30px）確保文字不貼邊
* Navbar 非 section 需單獨加左右內距以一致化
* 以 container 控制內容最大寬度，避免超寬螢幕影響可讀性

## 手機選單與導覽

* 使用預設 Navbar 的漢堡選單，為 Menu Button、Nav Menu 建立 class
* 去除灰底，改白底與黑色圖示
* 可加入半透明與 backdrop blur 形成玻璃效果
* Navbar 與首屏之間增加底部外距以拉開層次

## 文字等級縮放

* Tablet：H1 由 50 → 35，H2 由 42 → 30，Subheading 由 16 → 14
* 視需要調整行高與段前後距，保持標題層級對比
* Mobile：若標題每行僅一字或兩字，進一步縮小字級

## Hero／使命區（背景圖上疊字）

* 背景圖定位改為置中，尺寸使用 cover
* 在外層 Div（Mission Block）設定固定高度並加圓角
* 以內層文字包裹 Div 設定最大寬度（如 510px），置中提升可讀性
* Mobile：降低區塊高度，避免文字覆蓋人物臉部

## 產品區（圖文與拼貼）

* Tablet：兩欄改三欄兩列，左圖跨兩列，右側兩張各佔一列
* 調整欄距由 50 → 30，並以 object-fit: cover 保持構圖
* Mobile：縮小 TopLabImage 高度，確保視窗內一次可見更多內容

## 合作夥伴區

* 保留全幅漸層分隔線（上、下各 2px）
* Tablet：減少 Logo 間距以維持單行排列
* Mobile：視寬度改為兩行或多行，必要時縮小 Logo 高度與間距

## 聯絡區與表單

* Tablet：表單寬度由固定值改為自動或 100% 欄寬
* 減少欄位間距與 Email Block 間距以節省垂直空間
* Mobile：H3 改小（如 28），調整按鈕與圖示鏈結尺寸與間距

## 內部錨點與滾動

* 為各區段設定 ID（mission／product／contact）
* 導覽連結指向對應區段，測試平滑滾動與定位準確度

## 發布與網域

* 使用 Webflow 免費子網域測試（專案名.webflow\.io）
* 需上線正式網域時，購買主機方案並在專案中綁定自訂網域
* 上線前再次檢查各斷點版面、影像一致性與互動元件功能

---
# Terminlogy
* 網頁設計流程：從策略、架構、設計到開發與發布的端到端工作步驟與方法論。
* 專案簡報（Brief）：彙整目標、受眾、範疇、成功指標與時程的專案指南文件。
* 目標受眾（Target Audience）：網站欲影響的主要使用者族群與其特徵。
* 商業目標（Business Goals）：網站需支援的企業成果，如獲客、銷售或招募。
* 關鍵績效指標（KPI）：衡量網站是否達成目標的可量化指標。
* 需求探索（Discovery）：透過訪談與研究釐清問題、限制與機會的前期階段。
* 競品分析（Competitive Analysis）：比較同領域網站的策略、體驗與定位以找出差異化。
* 利害關係人訪談（Stakeholder Interview）：與決策者溝通期望、限制與成功定義。
* 使用者研究（User Research）：以調查、訪談或觀察了解使用者需求與行為。
* 角色人物（Persona）：以虛構角色整合代表性使用者的目標與痛點。
* 使用情境（Scenario）：描述特定情境下使用者如何與網站互動達成目標。
* 客戶旅程（Customer Journey）：橫跨接觸點的全流程體驗地圖與情緒變化。
* 內容策略（Content Strategy）：規劃要說什麼、如何說與在哪說，以支持目標。
* 內容稽核（Content Audit）：盤點既有內容品質、缺口與維護優先順序。
* 資訊架構（Information Architecture）：定義資訊分類、標籤與關聯以利尋找。
* 站點地圖（Sitemap）：以階層圖呈現頁面結構與導覽關係。
* 導覽設計（Navigation Design）：規劃導覽列與選單以降低尋路成本。
* 單頁網站（One-page Website）：以單一長頁承載核心訊息與行動。
* 多頁架構（Multi-page Architecture）：以多個頁面分層呈現複雜內容。
* 版面配置（Layout）：決定元素位置、比例與視覺流的空間安排。
* 網格系統（Grid System）：用欄與間距建立一致的版面節奏。
* 視覺層級（Visual Hierarchy）：透過大小、粗細與位置引導閱讀順序。
* 對齊與節奏（Alignment & Rhythm）：保持元素邊界與間距一致以增可讀性。
* 對比與可讀性（Contrast & Readability）：利用明暗與色差提升文字與重點辨識。
* 一致性（Consistency）：跨頁面維持風格與互動規則相同以降低學習成本。
* 可用性（Usability）：網站是否易學、有效率、少錯誤且令人滿意。
* 無障礙（Accessibility, a11y）：確保不同能力者皆可感知與操作內容。
* 響應式設計（Responsive Design）：介面可隨裝置尺寸自適應呈現。
* 斷點（Breakpoints）：定義版面在不同視窗寬度的轉換臨界值。
* 行動優先（Mobile-first）：先為小螢幕設計，再向上擴張至桌機。
* 線框圖（Wireframe）：低保真、專注結構與內容的頁面草圖。
* 低保真原型（Low-fidelity Prototype）：快速驗證流程與佈局的互動雛形。
* 高保真原型（High-fidelity Prototype）：貼近最終視覺與動態的精緻樣機。
* 互動原型（Interactive Prototype）：可點擊操作以測試任務流程的原型。
* 設計系統（Design System）：規範、元件與樣式的可維護設計資產集合。
* 元件庫（Component Library）：可重用的 UI 模組與狀態變化集合。
* UI 套件（UI Kit）：預先設計的樣式與元件集合用於加速設計。
* 字體階層（Typographic Scale）：定義標題與內文字級的比例關係。
* 影像與插圖指導（Imagery & Illustration Guidelines）：規範圖片風格與使用情境。
* 行動呼籲（CTA）：引導使用者下一步行動的視覺與文案組合。
* 表單設計（Form Design）：優化輸入流程、驗證與錯誤提示以提高送出率。
* 信任訊號（Trust Signals）：如徽章、認證、合作夥伴標誌提升可信度。
* 客戶見證（Testimonials）：展示客戶回饋以減少風險感與建立信任。
* 法務頁面（Privacy/Terms）：隱私權與服務條款等必備合規資訊。
* 效能最佳化（Performance Optimization）：壓縮資源、延遲載入以縮短頁面時間。
* 搜尋引擎最佳化（SEO）：以技術與內容提升自然搜尋可見度。
* 轉換率優化（CRO）：以測試與迭代提高完成目標的比例。
* 分析追蹤（Analytics Tracking）：以事件與漏斗量測行為與成效。
* 無程式開發工具（No-code, 例：Webflow）：用視覺介面生成前端程式碼。
* 部署與發布（Deployment & Launch）：連結網域、設定主機並上線監控。
* 網站架構（Website Structure）：網站頁面與內容的組織方式，幫助使用者導航與理解資訊。
* 網站地圖（Sitemap）：用圖表或清單表示網站所有頁面及其層級關係的結構圖。
* 單頁網站（One Pager）：所有內容集中於單一頁面的網站形式。
* 多頁網站（Multi-page Website）：包含多個獨立頁面的網站架構。
* 首頁（Homepage）：網站的入口頁面，通常提供整體概覽與主要導引。
* 關於我們頁（About Page）：提供公司或品牌的背景與故事。
* 服務頁（Services Page）：展示公司提供的產品或服務細節。
* 部落格頁（Blog Page）：用於文章與內容更新的專區。
* 聯絡頁（Contact Page）：提供訪客與網站擁有者聯繫的方式。
* 導航列（Navigation Bar）：幫助使用者快速找到網站主要區塊或頁面的導引工具。
* 導航（Navigation）：整體的導覽體驗與設計，讓使用者了解內容分布。
* 標誌（Logo）：代表品牌識別的圖形符號。
* 首屏區（Hero Section）：頁面開頭最重要的區塊，用於快速傳達核心價值。
* 功能區（Feature Section）：展示產品或服務的特色與優勢。
* 行動呼籲（Call To Action, CTA）：引導使用者採取特定動作的設計元素。
* 客戶見證（Testimonial Section）：展示滿意客戶的評價或推薦。
* 價格區（Pricing Section）：提供產品或服務的價格資訊。
* 圖庫區（Gallery Section）：以圖片或影片展示多樣內容。
* 聯絡區（Contact Section）：包含表單、電話或地址的互動區塊。
* 頁尾（Footer）：位於頁面底部，通常含有法律資訊與導覽。
* 元素（Element）：構成頁面內容的基本單元，如文字、圖片、按鈕。
* 標題（Heading）：用於分層與凸顯資訊的文字元素。
* 段落（Paragraph）：傳達主要內容的文字組塊。
* 按鈕（Button）：用於觸發動作的互動元素。
* 超連結（Link）：導向其他頁面或資源的互動元素。
* 圖片（Image）：用視覺化方式傳達訊息的媒體元素。
* 影片（Video）：動態視覺媒體，用於提升表達效果。
* 表單（Form）：讓使用者輸入並提交資訊的互動介面。
* 線框圖（Wireframe）：低保真度的設計稿，用於規劃頁面結構。
* 低保真設計（Low Fidelity Design）：僅呈現架構而非視覺細節的設計。
* 高保真設計（High Fidelity Design）：包含完整視覺與互動細節的設計。
* 任務流程（User Flow）：描述使用者在網站上的操作路徑。
* 用戶體驗（User Experience, UX）：使用者在網站互動過程中的整體感受。
* 使用者介面（User Interface, UI）：使用者直接接觸的視覺與操作界面。
* 響應式設計（Responsive Design）：確保網站在不同裝置上皆能適應顯示。
* 網頁佈局（Layout）：頁面元素的空間安排方式。
* 對齊（Alignment）：確保元素在版面上的整齊排列。
* 層級（Hierarchy）：透過字體大小或顏色建立資訊的優先順序。
* 白色空間（Whitespace）：設計中留白的區域，用於提升可讀性。
* 元件（Component）：可重複使用的設計模組。
* 圖層（Layer）：設計工具中元素的堆疊順序。
* 文案（Copywriting）：用於網站上的文字撰寫與內容策略。
* 視覺識別（Visual Identity）：品牌在網站中呈現的視覺風格。
* 品牌一致性（Brand Consistency）：確保網站內容符合品牌形象。
* 互動設計（Interaction Design）：規劃使用者與元素的動態交互方式。
* 使用者測試（User Testing）：透過實際用戶檢驗網站結構與體驗。
* 可用性（Usability）：衡量網站是否易於理解與操作。
* 易讀性（Readability）：文字內容是否清晰易於閱讀。
* 資訊架構（Information Architecture）：規劃資訊組織與導覽結構。
* CTA 按鈕（CTA Button）：專門用於引導動作的突出按鈕。
* 任務完成率（Task Completion Rate）：衡量使用者是否能順利達成目標的指標。
* 用戶留存（User Retention）：網站能否持續吸引用戶的能力。
* 線框工具（Wireframe Tool）：用於製作低保真設計的專業軟體。
* Figma：常用於設計線框圖與高保真設計的協作工具。
* 組件庫（Component Library）：設計工具中可快速使用的元件集合。
* 視覺傳達（Visual Communication）：透過顏色、字體、圖像與版面傳遞訊息與情感。
* 平面設計（Graphic Design）：運用圖形與文字元素組合來傳達理念與資訊的設計領域。
* 使用者介面設計（UI Design）：專注於互動元件與視覺呈現的設計階段。
* 故事敘述（Storytelling）：透過設計元素建立情境與情感連結以強化品牌訊息。
* 靈感收集（Inspiration Gathering）：搜尋設計範例以作為風格與方向的參考。
* 參考資料（References）：收集競品或相關設計案例來比較與借鑒。
* 情緒板（Mood Board）：以圖像、色彩與字體組合來呈現設計方向的視覺板。
* 色彩心理學（Color Psychology）：研究顏色對人情緒與認知的影響。
* 色彩搭配（Color Palette）：定義網站主要與輔助色彩組合的規劃。
* 漸層（Gradient）：兩種或多種顏色逐漸過渡的視覺效果。
* 字體學（Typography）：字體樣式與排版的研究與應用。
* 無襯線字體（Sans Serif）：無額外裝飾線條的字體，常用於現代感設計。
* 襯線字體（Serif）：筆劃末端帶裝飾線條的字體，常見於正式或文學感設計。
* 字級（Font Size）：文字的大小設定，用於建立資訊層級。
* 字重（Font Weight）：字體粗細變化，用於強調或營造氛圍。
* 行高（Line Height）：文字行距，影響可讀性與整體視覺平衡。
* 標題字體（Heading Font）：專用於大標題的字體設計。
* 內文字體（Body Font）：專用於段落與長文的字體，需保持高可讀性。
* 字體對比（Font Contrast）：透過不同字體搭配創造視覺張力與層級。
* 免費字體（Free Fonts）：如 Google Fonts，免費使用但常見度高。
* 商用字體（Commercial Fonts）：付費授權的專屬字體，提升獨特性。
* 品牌一致性（Brand Consistency）：確保顏色與字體風格符合品牌形象。
* 競品分析（Competitor Analysis）：檢視同業設計以避免重複並創造差異化。
* 視覺差異化（Visual Differentiation）：讓品牌在設計中與競爭者明顯區隔。
* 高端感（Premium Look）：透過精緻的字體與色彩營造專業與價值感。
* 乾淨設計（Clean Design）：以留白、簡單字體與單純色彩建立專業印象。
* 極簡主義（Minimalism）：去除多餘元素，強調簡潔與核心訊息。
* 象徵圖像（Symbolic Imagery）：使用隱喻或符號來傳達抽象概念。
* 視覺隱喻（Visual Metaphor）：透過圖像暗示更深層的訊息。
* 彩虹概念（Rainbow Concept）：利用彩虹色譜表達多元或超現實效果。
* 折射效果（Refraction Effect）：透過玻璃或光線折射營造專業又具創意的氛圍。
* 品牌攝影（Brand Photography）：專為品牌形象拍攝的照片。
* 乾淨背景攝影（Clean Background Photography）：以單純背景凸顯產品或人物。
* 實驗室場景（Lab Imagery）：使用研究環境照片增強專業與可信度。
* 產品攝影（Product Photography）：展示產品細節與質感的照片。
* 插圖風格（Illustration Style）：決定使用手繪、向量或 3D 插圖來傳遞訊息。
* 圖示設計（Iconography）：以小型符號圖形表示概念與功能。
* 高光澤效果（Glossy Effect）：利用光澤與材質營造精緻感。
* 玻璃質感（Glass Effect）：透明或磨砂效果，常用於現代科技感設計。
* 文字層次（Text Hierarchy）：字體大小與粗細的組合以建立層級。
* 視覺焦點（Visual Focus）：引導使用者目光停留的主要元素。
* 色彩限制（Color Limitation）：控制品牌色使用以保持整體專業感。
* 色彩主導（Color Dominance）：決定由圖片還是設計主色承擔視覺重點。
* 靈感來源平台（Inspiration Platforms）：如 Behance、Dribbble、Pinterest、Awwwards。
* 設計趨勢（Design Trends）：反映市場流行與審美變化的設計方向。
* 參考整理（Reference Curation）：從大量靈感中篩選最適合的風格。
* 設計決策（Design Decision）：根據品牌與策略挑選顏色、字體與影像。
* 品牌語言（Brand Language）：透過設計元素共同傳遞品牌調性與故事。
* 高對比排版（High Contrast Typography）：利用黑白或極端粗細字體營造張力。
* 色彩平衡（Color Balance）：確保彩度與明度搭配協調而不失專業感。
* 字體授權（Font Licensing）：合法購買字體的桌面版與網頁版授權使用。
* 標誌（Logo）：以圖形與文字建立品牌識別的核心符號，需可縮放、易辨識。
* 標誌類型（Logo Types）：常見有字標、字母標、圖像標、抽象標、組合標等分類。
* 字標（Wordmark）：以完整品牌名稱的字體設計作為標誌。
* 字母標（Lettermark/Monogram）：以品牌縮寫字母構成的標誌。
* 圖像標（Pictorial Mark）：用具象圖像（如動物、物件）代表品牌的標誌。
* 抽象標（Abstract Mark）：以幾何或抽象圖形表達品牌概念的標誌。
* 組合標（Combination Mark）：圖像與文字並存的標誌構成。
* 響應式標誌（Responsive Logo）：依情境調整複雜度與比例的多版本標誌。
* 標誌鎖定（Logo Lockup）：標誌圖形與字樣之固定相對位置與間距規範。
* 保留空間（Clear Space）：標誌周圍需留白的最小安全距離。
* 最小尺寸（Minimum Size）：維持辨識度所需的標誌最小呈現尺寸。
* 單色版（Single-color Mark）：僅用一種顏色的標誌版本，利於壓印與限制環境。
* 反白版（Reversed Mark）：在深色背景上以淺色呈現的標誌版本。
* 圖標化（Iconization）：將標誌簡化為可作為 App 圖示或小尺寸使用的版本。
* 網站小圖示（Favicon）：瀏覽器分頁使用的 16–48px 小圖示。
* 幾何構成（Geometric Construction）：以基本幾何形與比例建立標誌結構。
* 光學修正（Optical Adjustment）：為視覺均衡而非數學精準的微調。
* 否定空間（Negative Space）：利用留白形成隱性圖形以增強識別。
* 筆畫粗細（Stroke Weight）：線條厚薄設定，影響小尺寸清晰度。
* 線條一致性（Line Consistency）：各元素線寬與端點風格的統一。
* 向量格式（Vector Format）：如 SVG/AI，無損縮放、利於輸出與開發。
* 位圖格式（Raster Format）：如 PNG/JPG，適用於影像與紋理呈現。
* 品牌字體（Brand Typeface）：標誌與系統字型的選擇與授權。
* 色彩標準（Brand Colors）：主色與輔色之色碼（HEX/RGB/CMYK/Pantone）規範。
* 色彩對比（Color Contrast）：確保標誌在不同背景的辨識與可讀性。
* 跨載具一致性（Cross-platform Consistency）：在網頁、印刷與 App 上保持一致。
* 標誌測試（Logo Testing）：針對尺寸、遠觀、黑白與反相等情境的驗證。
* 視覺母題（Visual Motif）：如「連結/腦網絡/虹彩」等核心圖像概念。
* 品牌識別系統（Visual Identity System）：標誌、色彩、字體與圖像的完整規範。
* 品牌手冊（Brand Guidelines）：定義使用規則與錯誤示例的文件。
* 折射/虹彩效果（Refraction/Iridescence）：以光學效果傳達科學感與獨特性。
* 白色無限空間（White Limbo）：純白無陰影地景的產品/人物拍攝場景。
* 主視覺（Key Visual）：承載核心訊息的代表性視覺素材。
* 英雄圖像（Hero Image）：頁首大圖，用於設定氛圍與傳遞關鍵價值。
* 產品靜物照（Pack Shot/Product Shot）：凸顯產品形體與細節的標準化照片。
* 場景化攝影（Lifestyle/Contextual Photography）：在真實情境中展示產品價值。
* 佈光（Lighting Setup）：如柔光箱、背光、輪廓光以塑形與控氛圍。
* 架景紙/無縫背景（Seamless Backdrop）：避免地平線干擾的連續背景。
* 景深（Depth of Field）：以光圈控制清晰範圍，聚焦視覺重點。
* RAW 後製（RAW Post-processing）：保留高動態範圍以便色彩與曝光調整。
* 色彩校正/分級（Color Correction/Grading）：修正色偏並建立統一風格。
* 合成（Compositing）：多張影像融合以形成完整畫面。
* 遮色片/遮罩（Masking）：精準圈選主體以便替換背景或調色。
* 去背路徑（Clipping Path）：以貝茲曲線建立可重複使用的去背輪廓。
* 版面構圖（Composition）：三分法、引導線與留白以強化視覺敘事。
* 影像授權（Image Licensing）：權利類型如 RF（免版稅）、RM（權利管理）。
* 模特/場地授權（Model/Property Release）：合法使用人物與場地影像的同意。
* AI 影像生成（AI Image Generation）：以文字提示產生自定影像資產。
* 提示工程（Prompt Engineering）：用關鍵詞、風格與參數精確控制輸出。
* 放大與變體（Upscale & Variations）：提升解析度並探索多組合構圖。
* 視覺一致性檢核（Visual Consistency Check）：確保所有圖像與標誌符合同一語言。
* 合作夥伴標誌牆（Partner Logo Wall）：將多個品牌標誌以一致規格與間距排列的展示區塊，用於建立信任與社會背書。
* 圖示一致性（Icon Consistency）：確保所有圖示在筆畫、圓角、透視與細節層級上風格統一。
* SVG 向量圖（SVG Vector）：可無損縮放的矢量圖格式，適合圖示與標誌於各種解析度呈現。
* 描邊風格（Outline Style）：以線條輪廓為主的圖示風格，通常筆畫等寬、無實心填色。
* 描邊權重（Stroke Weight）：圖示或標誌線條的粗細設定，影響小尺寸清晰度與視覺平衡。
* 擴充外框（Outline Stroke）：將字體或筆畫轉為向量外形以避免縮放造成線寬失衡。
* 基線對齊（Baseline Alignment）：使文字與圖形的文字基線對齊，提升視覺穩定度。
* 視覺對齊（Optical Alignment）：依人眼感知微調位置而非數學中心，避免看起來偏移。
* 等距分佈（Distribute Spacing）：在多元素間自動平均間距，維持整齊節奏。
* 對齊格線（Alignment Grid）：以欄與間距建立對齊參考，確保區塊邊界一致。
* 角半徑（Corner Radius）：卡片或按鈕的圓角大小，影響整體氣質與親和度。
* 卡片式版面（Card Layout）：以獨立卡片承載模組內容，利於資訊掃描與重組。
* Bento 佈局（Bento Grid）：以不同尺寸卡片拼接的棋盤式編排，呈現多樣內容。
* 英雄圖（Hero Image）：頁首的大型視覺，傳達主要訊息與情緒基調。
* 子標題樣式（Subheading Style）：次級標題的字級、粗細與大小寫規則，建立層級。
* 文字樣式庫（Text Styles）：在設計工具中預存可重用的字體規格以便全站一致。
* 設計代碼（Design Tokens）：以程式化變數保存顏色、字級、間距等設計決策。
* H1/H2 層級（Heading Hierarchy）：標題的語義與視覺等級，利於可讀性與 SEO。
* 大小寫規則（Case）：句首、標題或全大寫等變化，用以強化層級或語氣。
* 行高（Line Height）：文字行距，影響段落的密度與可讀性。
* 字距（Letter Spacing）：字元間距微調，改善標題觀感與小字清晰度。
* 段落間距（Paragraph Spacing）：段落前後距離，建立閱讀節奏與塊狀分明。
* 內容遮罩（Mask）：以形狀限制影像顯示範圍，實現不破壞素材的裁切。
* 填滿 vs 裁切（Fill vs Crop）：填滿保持比例覆蓋容器；裁切改變可見範圍以最佳構圖。
* 生成式填補（Generative Fill）：以 AI 補齊畫面缺失內容，使圖片可安全擴邊。
* 白平衡（White Balance）：校正光源色偏，確保白色為中性以統一風格。
* 色溫／色調（Temperature/Tint）：以藍—黃、綠—洋紅軸向調整整體冷暖與偏色。
* 曲線調整（Curves Adjustment）：透過曲線控制亮度分佈，精準拉開對比。
* 曝光補償（Exposure Compensation）：整體提亮或壓暗影像，配合場景風格。
* 色彩分級（Color Grading）：系統化調整色相與對比，建立一致的影像語言。
* 色彩一致性（Color Consistency）：跨圖片維持相同冷暖、飽和與對比的外觀。
* 冷／暖濾鏡（Cooling/Warming Filter）：快速調整影像整體色調趨冷或趨暖。
* 高光／陰影（Highlights/Shadows）：分區控制亮部與暗部，保留細節與層次。
* RAW 轉檔（RAW Processing）：於 Camera Raw 先期調整動態範圍與噪點再輸出。
* 解析度降采樣（Downsampling）：降低像素尺寸以優化載入與編輯效能。
* 切圖輸出（Asset Export）：依場景輸出 PNG/SVG/WebP 等，設定倍數與命名。
* 無縫背景（Seamless Background）：去除地平線干擾，保留乾淨產品焦點。
* 白色無限空間（White Limbo）：純白環境與柔光，呈現醫療級潔淨感。
* 視覺分隔線（Visual Divider）：以線條或留白分段內容，強化資訊結構。
* 漸層分隔（Gradient Rule）：以細窄漸層線作為區塊分界，增加精緻度。
* 連結樣式（Link Styling）：以底線、顏色與狀態變化辨識可點擊文字。
* 圖示占位（Icon Placeholder）：預留圖示位置與尺寸比，避免後期位移。
* 版面節奏（Layout Rhythm）：透過一致邊距與模組間距建立閱讀韻律。
* 內容模組化（Modular Content）：將段落做成可重複的設計模組便於維護。
* 群組管理（Layer Grouping）：將相關元素分組命名，便於移動與版本控管。
* 命名規範（Naming Convention）：以可讀前綴與階層命名圖層與資產。
* 可讀性檢核（Readability Check）：檢查字級、行長與對比是否符合易讀標準。
* 品牌一致性檢核（Brand Consistency Check）：審查字體、色彩與影像是否符合品牌準則。
* 輔助說明文字（Helper Text）：表單或互動旁的短註解，降低操作錯誤。
* 表單可用性（Form Usability）：標籤、輸入框與錯誤回饋的設計，提升送出率。
* 圖標授權（Icon Licensing）：明確圖示的免費或付費授權條款與標註義務。
* 網域名稱（Domain Name）：如 example.com 的可讀網址，對應到伺服器的數字位址以便存取網站。
* DNS（域名系統）：將網域名稱解析成 IP 位址的分散式命名服務。
* IP 位址（IP Address）：如 192.0.2.1，用於在網際網路上定位伺服器的數字標識。
* 主機託管（Hosting）：將網站檔案放在遠端伺服器以供公開存取的服務。
* 伺服器（Server）：儲存並傳送網頁、圖片與 API 回應的遠端電腦系統。
* 靜態網站（Static Site）：由固定檔案（HTML/CSS/JS）組成，無需伺服器端運算即可提供內容。
* HTML（超文件標記語言）：定義頁面結構與語意的基礎標記語言。
* CSS（串接樣式表）：控制版面、色彩、字體與動態效果的樣式語言。
* JavaScript：在瀏覽器中執行的指令碼語言，負責互動、資料處理與動畫。
* 資產（Assets）：網站使用的圖片、影片、字型、圖示與其他靜態檔案。
* 向量圖（Vector Graphics）：以路徑與數學計算描述圖形，無論放大縮小皆不失真。
* 點陣圖（Raster Graphics）：以像素組成的影像，放大會失真（常見為 JPG/PNG/WebP）。
* SVG：可程式化與可存取的向量圖格式，適合標誌與圖示。
* PNG：支援透明背景的點陣圖格式，適合介面元素與截圖。
* JPEG/JPG：有損壓縮的點陣圖格式，適合相片與色彩漸層豐富的影像。
* WebP：現代影像格式，較 JPG/PNG 具更佳壓縮比與畫質。
* 視網膜圖（@2x/高 DPI）：輸出為設計尺寸 2 倍的影像以在高像素密度螢幕上保持銳利。
* 網站效能（Performance）：頁面載入速度與互動流暢度，影響體驗與 SEO。
* 檔案最小化（Minification）：移除空白與註解以縮小 CSS/JS/HTML 檔案體積。
* 圖片壓縮（Image Compression）：在可接受畫質下減少影像檔案大小以提升載入速度。
* 內容傳遞網路（CDN）：在全球節點快取與傳送資產，縮短延遲並分散流量。
* 快取（Cache）：將資源暫存於瀏覽器或 CDN，以加速重複載入。
* 延遲載入（Lazy Loading）：延後非首屏資源的載入，以縮短初次渲染時間。
* 無障礙（Accessibility, a11y）：讓所有使用者（含障礙者）皆能感知、操作與理解內容。
* 替代文字（Alt Text）：為圖片提供文字敘述，利於讀屏與 SEO。
* SEO（搜尋引擎最佳化）：透過技術與內容策略提升自然搜尋能見度。
* 語意化標題（H1/H2 等）：用正確標題階層傳達內容結構並助搜尋理解。
* Box Model（盒模型）：元素的內容、內距（padding）、邊框、外距（margin）之計算模型。
* 外距/內距（Margin/Padding）：外距控制元素間距，內距控制內容與邊框距離。
* 最大寬度（Max-width）：限制內容區域的最大寬度，避免大螢幕行長過長。
* 斷點（Breakpoints）：為不同螢幕寬度定義樣式切換的臨界值。
* 響應式網頁設計（RWD）：介面可依裝置尺寸自動調整版面與樣式。
* 網格系統（CSS Grid）：以二維格線配置複雜版面布局的 CSS 版面工具。
* 彈性盒（Flexbox）：一維排列與對齊元素的 CSS 版面工具，適合導航與卡片列。
* 元件化（Components）：可重用的結構/樣式單元，提升維護性與一致性。
* 類別（CSS Class）：為元素賦予命名樣式，便於重用與全站一致管理。
* 全域樣式（Global Styles）：套用於整站的基礎字體、字級、連結等通用規則。
* 網站建置器（Webflow/Framer 類）：以視覺化方式產出前端碼與託管的工具。
* CMS（內容管理系統）：讓非工程角色可在後台建立與編修內容的系統。
* WordPress：最普及的開源 CMS，需自選主機與安裝維護。
* 主題/範本（Theme/Template）：預製設計與模組，用以快速建立頁面。
* 自訂網頁字體（Webfonts）：於網頁載入的字體檔，確保品牌字體一致呈現。
* WOFF/WOFF2：適用於網頁的字體格式，具良好壓縮與瀏覽器相容性。
* 字型權重（Font Weights）：如 400/600/700，控制字體粗細以建立層級。
* 網站導覽列（Navbar）：包含標誌與連結的頂部導覽元件，常具行動版漢堡選單。
* 容器（Container）：限制內容最大寬度並置中的版面容器。
* 圖像裁切與填充（Crop vs Cover/Contain）：控制圖片在容器內的顯示範圍與縮放策略。
* 表單驗證（Form Validation）：在前端/後端檢查輸入合法性並提供錯誤回饋。
* SSL/TLS 憑證（HTTPS）：加密用戶與伺服器之間的傳輸，保障隱私與信任。
* DNS 設定（A/CNAME/AAAA 記錄）：將網域指向主機或服務供應商的技術配置。
* 網頁伺服器（Web Server）：負責儲存與回應網站檔案的遠端電腦系統（如 Nginx、Apache）。
* 網域名稱（Domain Name）：人類可讀的網址識別，透過 DNS 解析到 IP 位址。
* DNS 記錄（A/CNAME/AAAA）：將網域指向主機或服務供應商的設定項。
* IP 位址（IP Address）：如 203.0.113.5，用於在網際網路上定位伺服器。
* 主機託管（Hosting）：供應商在雲端代管網站檔案與服務的方案。
* CDN（內容傳遞網路）：在全球節點快取資產，加速載入並減少延遲。
* HTTPS／SSL/TLS：加密用戶端與伺服器傳輸，提升安全與信任。
* HTML（結構）：定義頁面語意與結構的標記語言。
* CSS（樣式）：控制排版、色彩、字體與動畫的樣式表語言。
* JavaScript（互動）：於瀏覽器執行的指令碼，實作互動與邏輯。
* 靜態資產（Assets）：網站用到的圖片、字型、圖示、影片與檔案。
* SVG（向量圖）：可無損縮放的圖形格式，適合標誌與圖示。
* PNG/JPEG/WebP/AVIF：常見點陣圖格式；WebP/AVIF 具更佳壓縮效率。
* Retina/高 DPI 輸出（@2x）：以兩倍像素匯出影像，確保高密度螢幕清晰。
* Minify（最小化）：移除空白與註解以縮小 JS/CSS/HTML 檔案體積。
* Gzip/Brotli 壓縮：伺服器端壓縮傳輸內容以加速載入。
* HTTP/2 與 HTTP/3：新一代傳輸協定，提供多工與更快的資源載入。
* Cache-Control/ETag：設定瀏覽器與 CDN 快取策略的標頭。
* 延遲載入（Lazy Loading）：延後非首屏影像/資源載入以提升首屏速度。
* 語意化標籤（Semantic Tags）：如 header/main/section，強化可存取與 SEO。
* 標題階層（H1–H6）：反映內容結構，有利閱讀與搜尋理解。
* 替代文字（Alt Text）：為圖片提供文字敘述，利於無障礙與 SEO。
* ARIA 屬性（WAI-ARIA）：輔助科技可讀的無障礙標註（如 aria-label）。
* 表單驗證（Form Validation）：前/後端檢查輸入合法性與錯誤提示。
* 佔位文字（Placeholder）：輸入欄位中的提示文字，不取代表籤。
* 標籤（Label）：描述輸入欄位的文字，提升可用性與可存取性。
* mailto 連結：以 email 超連結協定啟動預設郵件客戶端。
* ID 錨點（Anchor ID）：為區塊設定唯一 ID，供導覽列平滑捲動定位。
* 盒模型（Box Model）：內容、內距（padding）、邊框、外距（margin）的計算方式。
* Flexbox：一維排版工具，適合導覽列與水平/垂直對齊。
* CSS Grid：二維網格排版，適合複雜區塊與卡片佈局。
* 容器（Container/Max-width）：限制內容最大寬度並置中，改善可讀性。
* 斷點（Breakpoints）：針對不同螢幕寬度切換樣式的臨界值。
* 響應式設計（RWD）：讓版面與元件隨裝置尺寸自適應。
* 物件填充（Object-fit: cover）：圖片在固定框內等比裁切以填滿容器。
* 圓角（Border-radius）：設定元件或圖片的角落弧度。
* 堆疊脈絡（Stacking Context）：z-index 與定位影響元素前後層級的機制。
* 位置屬性（Positioning）：static/relative/absolute/fixed/sticky 的定位行為。
* CSS 變數（Custom Properties）：以 --token 定義可重用設計數值（色彩、間距）。
* 設計代碼（Design Tokens）：跨平台共享的顏色、字級、間距等設計變數。
* 類別命名（Class Naming）：如 BEM 規範，提升樣式維護性與可讀性。
* Combo Class（組合類別）：在基礎類別上疊加次要變體樣式。
* 連結區塊（Link Block）：可包覆圖示/圖像的可點擊區塊元素。
* Div（區塊容器）：用於分組內容與建立排版區塊的通用容器。
* 背景圖片屬性（Background-size/position）：控制背景圖覆蓋與對齊方式。
* Open Graph/Meta 標籤：社群預覽與 SEO 相關的頁面中繼資料。
* robots.txt 與 sitemap.xml：告知搜尋引擎抓取規則與站點結構。
* 301 轉址（301 Redirect）：永久導向，保留 SEO 權重至新網址。
* Lighthouse 指標（LCP/CLS/INP）：衡量載入、版面穩定與互動反應的效能指標。
* 內容安全政策（CSP）：限制外部資源來源以降低 XSS 風險。
* CORS（跨來源資源共享）：定義跨網域資源請求的安全規則。
* 部署與發布（Deployment）：將專案建置、上傳至主機並綁定網域的流程。