網站動線分類架構規劃設計課程

課程目標： 學員將學會如何從 0 到 1 規劃一個「使用者愛用、搜尋引擎看懂、老闆滿意」的網站。

本UIUX課程將拆解企業官網與電商的架構(IA)，優化使用者動線(UX)，並植入高說服力的行銷文案，打造出真正能帶來訂單的網站。

UIUX網站架構規劃課程大綱 

【Module 1】(60 分鐘): 網站的靈魂：UI 與 UX 策略規劃

本單元破除迷思，釐清 UI/UX 的根本差異，並建立「以使用者為中心」的設計思維。

• 09:30 - 09:50 | 為什麼你的網站沒人看？UI/UX 核心解密

  • UI (使用者介面)： 網站的「外表」。它是按鈕、顏色、字體，決定了網站的「美感」與「品牌調性」。

  • UX (使用者體驗)： 網站的「感受」。它是流程、易用性、滿意度，決定了使用者「是否願意」留下來。

  • 專業解析： UI 好 UX 差 (中看不中用) vs. UX 好 UI 差 (好用但不吸引人) vs. 兩者兼具 (高轉換率網站) 的案例。

• 09:50 - 10:10 | 規劃第一步：定義你的「使用者」

  • 你的網站是蓋給「誰」看的？ (B2B 採購、B2C 衝動型消費者...)

  • 實作演練： 帶領學員快速描繪出其網站的 1-2 個核心 Persona。

• 10:10 - 10:30 | 描繪成功藍圖：「使用者旅程地圖 (User Journey Map)」

  • 從「認知、考慮、決策、擁護」四階段，思考使用者在「接觸前、中、後」需要什麼資訊？

  • 關鍵觀念： 網站的每個頁面，都應該是旅程中的一個「關鍵觸點」。

【Module 2】(60 分鐘): 策略抉擇：客製化 vs. 套版 vs. 平台

本單元是專案開始前的第一個決策點。選錯了，後續的 UI/UX 都無法發揮。

• 10:30 - 10:50 | 決策框架：如何選擇你的網站類型？

  • 平台網站 (如 Shopline, 91APP, PChome)：

    • 優勢： 快速上線、金物流完整、內建基本流量、成本固定。

    • 劣勢： 缺乏彈性、設計同質性高、數據綁定、高抽成。

  • 套版網站 (如 WordPress + 付費版型, Wix)：

    • 優勢： 成本中等、上線速度快、有基本設計感、功能可擴充 (外掛)。

    • 劣勢： 彈性受限於版型、外掛易衝突、資安風險。

  • 客製化網站 (如 程式碼全自己來, WP深度客製)：

    • 優勢： 完全符合品牌形象、功能無限擴充、UX/UI 彈性最高、掌握所有數據。

    • 劣勢： 成本高、開發時程長、需專業團隊維護。

• 10:50 - 11:10 | 講師分析：不同「商業目標」下的最佳選擇

  • 情境 1 (目標：快速測試市場的電商)： 建議 -> 平台型

  • 情境 2 (目標：建立專業形象的顧問/工作室)： 建議 -> 套版型

  • 情境 3 (目標：打造長期品牌護城河的企業)： 建議 -> 客製化

• 11:10 - 11:30 | 案例討論 (Case Study)

  • 拆解 1-2 個真實案例，分析他們「為何」選擇此種網站類型，以及這對他們後續的 UX 產生了什麼影響。

11:30 - 11:40 | 休息時間 (10 分鐘)

【Module 3】(75 分鐘): 企業官網架構 (IA) 與動線設計

本單元專注於 B2B 或 B2C 形象官網，目標是「建立信任」與「獲取名單」。

• 11:40 - 12:10 | 打造官網的「信任地圖」：資訊架構 (IA) 設計

  • IA 是什麼？ 網站的「骨架」，也就是你的「網站地圖 (Sitemap)」。

  • 企業官網「黃金 7 頁」：

    1. 首頁 (Homepage)： 企業的門面，所有動線的起點。

    2. 關於我們 (About Us)： 建立信任與品牌故事。

    3. 服務項目/產品介紹 (Services)： 解決方案的核心。

    4. 成功案例/客戶實績 (Portfolio)： 最強的社會佐證。

    5. 知識庫/部落格 (Blog)： 專業度的展現 (SEO 流量入口)。

    6. 聯絡我們 (Contact Us)： 轉換的終點 (表單/電話)。

    7. 常見問題 (FAQ)： 降低客服壓力，解除訪客疑慮。

• 12:10 - 12:40 | 官網動線規劃：引導訪客走向「詢問」

  • 首頁 (Homepage) 的 UX 佈局： 檢視「Above the Fold (首屏)」是否在 5 秒內回答 3 個問題：「你是誰？」「你提供什麼？」「我為什麼要選你？」

  • CTA (Call to Action) 設計： 如何在每個頁面都埋下「下一步行動」的鉤子？(例如：服務頁 -> 成功案例 -> 聯絡我們)

• 12:40 - 12:55 | 案例討論：B2B 官網 vs. B2C 品牌官網的架構差異

12:55 - 13:40 | 午餐休息 (45 分鐘)

【Module 4】(75 分鐘): 電商平台的動線規劃 (The Conversion Funnel)

本單元專注於電商，目標是「降低摩擦」與「提升轉換」。

• 13:40 - 14:10 | 電商的「成交漏斗」：拆解 5 大關鍵頁面 UX

  1. 首頁/活動頁 (Landing)： 快速導流、激發興趣。

  2. 分類/列表頁 (PLP)： 篩選機制、商品比較。

  3. 商品詳情頁 (PDP)： 決策的關鍵！(圖片、規格、評價、文案)。

  4. 購物車頁 (Cart)： 增加客單價 (加價購、免運門檻)。

  5. 結帳頁 (Checkout)： 減少流失 (Guest checkout、金流便利性)。

• 14:10 - 14:40 | 優化 UX：如何降低「購物車放棄率」？

  • 關鍵戰術： 顯示進度條、簡化表單欄位、提供多元支付、明確的運費與到貨時間。

  • 案例分析： 拆解 PChome (功能導向) vs. Apple (體驗導向) 的結帳流程。

• 14:40 - 14:55 | 實作演練：健檢你的電商 PDP (商品頁)

  • 帶領學員使用清單，檢核自己的商品頁是否缺少了關鍵的轉換元素。

14:55 - 15:10 | 休息時間 (15 分鐘)

【Module 5】(60 分鐘): 網站的靈魂：填入「高說服力」行銷文案

本單元是畫龍點睛，教導學員如何用文字驅動架構，讓訪客採取行動。

• 15:10 - 15:30 | 沒人想看你的「功能」，他們只想知道「好處」

  • 文案心法： Features (功能/規格) vs. Benefits (利益/好處)。

  • 實作演練： 「我的產品是 [規格]...」 -> 「這能幫助你 [獲得的好處]...」

• 15:30 - 15:50 | 關鍵頁面的文案設計 (AIDA 模型)

  • 首頁 (Homepage)： 如何用 3 句話抓住注意力 (Attention)？

  • 服務頁 (Service)： 如何用文案激發興趣 (Interest) 與渴望 (Desire)？

  • 聯絡/購買頁 (CTA)： 如何設計「無法抗拒」的行動呼籲 (Action)？

• 15:50 - 16:10 | 案例討論 (Before & After)

  • 展示一個「文案修改前 vs. 修改後」的網站頁面，分析其轉換率為何提升。

【Module 6】(20 分鐘): 總結：啟動你的網站優化藍圖

• 16:10 - 16:20 | 講師總結：網站上線前的「UX/UI 檢查清單」

  • 包含：RWD (響應式設計)、載入速度 (Speed)、瀏覽器相容性、CTA 明確性等。

• 16:20 - 16:30 | 最終 Q&A

•  

網站動線分類架構規劃設計課程