---
tags: UI 直播班 - 2021 冬季班、金翅鐵爪鷲🔱
---

# 帶你從草稿到完稿 - 時間軸

根據課程錄影｜UI 直播班-2021冬季班：[W2-直播錄影（上）](https://courses.hexschool.com/courses/a207aa1/lectures/35590591)、[W2-直播錄影（下）](https://courses.hexschool.com/courses/a207aa1/lectures/35590593)

## 🎬 簡易版時間軸
#### W2-直播錄影（上）
◆ C.R.A.P 設計準則
00:01:16 對比 Contrast
00:14:22 重複 Repetition
00:33:38 對齊 Alignment
→ 00:33:55 網格系統說明

#### W2-直播錄影（下）
00:00 相近 Proximiry
05:21 原子設計 → 組織Organisms
10:09 單頁式網站 Landing Page
13:40 行銷漏斗 AIDA Modael
32:53 本週作業說明(單頁式網站&最終作業階段一)

－
## 🎬 詳細版時間軸

#### W2-直播錄影（上）

 
- C.R.A.P 設計準則
-
◆ 對比 Contrast - (00:01:16 ~ 00:14:22)
　◎ AB選擇題 
    00:01:20 字級
    00:02:28 字重
    00:03:22 顏色
    00:04:28 深淺
    　→ 只要標題深內文淺就能做出差異
    00:06:22 視窗區域
    　→ 陰影只要加到稍為可辨識的程度就好
    00:11:00 排版

◆ 重複 Repetition - (00:14:22 ~ 00:33:38)
　◎ AB選擇題
    00:14:38 一致性
    00:16:19 文字階級
    00:17:39 圖片尺寸 (常用比例1:1、4:3、16:9)
    00:18:50 按鈕尺寸
    00:19:46 區塊內間距
    00:21:04 表單間距
    00:22:36 盒模型(內→外：content→padding→border→margin)
    00:28:17 間距倍數
    00:30:46 使用8為倍數，方便設定rem
    00:31:55 重複使用的元件→Component

◆ 對齊 Alignment - (00:33:38 ~ 01:23:12)
　◎ 00:33:55 網格系統說明
　◎ AB選擇題
    00:54:10 網格系統對齊方式
    00:54:58 內層的物件對齊方式
    　→ 外層容易對齊在網格系統上時，
    　　內容就不會使用外層所憑依的網格系統對齊。
    01:03:14 繪製方式
    01:04:21 按鈕對齊方式
    01:05:50 間距何時需符合8的倍數?
    　→ 通常狀況下，垂直間距使用8的倍數決定，水平寬度使用網格系統決定。
    01:09:39 標題對齊方式
    01:10:40 標題垂直水平置中，那些數值需符合8的倍數?
    01:12:34 何時為垂直置中?
    01:16:00 全頁對齊方式
    01:17:30 背景高度制定方式
    01:19:34 導覽列對齊方式
    01:21:24 三欄式排版方式

#### W2-直播錄影（下）

 
◆ 相近 Proximiry - (00:00 ~ 05:20)
　◎ AB選擇題
    01:34 區塊區分
    03:00 分隔線
    　→樣式點到為止效果足夠了就不需要再加強，督阿鶴丟賀!
    04:10 瀏覽舒適度

- 原子設計 → 組織Organisms - (05:21 ~ 10:08)
    05:40 主頁首圖 Header
    07:01 頁尾 Footer
    07:56 AB選擇題：網頁能只有header跟footer嗎?
    09:10 組織Organisms → 模板Templates → 頁面Pages
                        ↓　↓　↓
        　區塊Section → 線框稿Wireframe → 精稿Mockup
    
- 單頁式網站 Landing Page (10:09 ~ 13:39)
    → 讓潛在客戶達成特定轉換目的
    → 確定主題>決定目的>行銷漏斗 >> 區塊>線稿>精稿
    　↑______ 前置作業 ______↑
  
- 行銷漏斗 AIDA Modael (13:40 ~ 32:52)
-
◆ 13:43 何謂行銷漏斗

◆ 注意 Awareness (15:50 ~22:04)
　→ 試著用一句話點出你的核心理念
　◎ AB選擇題
    16:29 更能引起注意的排版
    　→ 滿版header稱為hero header
    17:28 hero header內容表現
    20:18 哪個更吸引往下看?
    　→ 想使用hero header，至少要放置往下的提示，或是畫面上要有顯示能轉換的按鈕。
    
◆ 興趣 Interest (22:05 ~ 24:30)
　◎ AB選擇題
    22:10 哪個更吸引人閱讀
    　→可以不需要急著進入正題，先提出痛點引起共鳴

◆ 慾望 Desire (24:31 ~ 27:40)
    → 開始介紹重點細節，說明為什麼你是最好的選擇
    → 這邊區塊通常會做多 (e.g. 操作流程、獨特優點)
　◎ AB選擇題
    25:32  哪個更有說服力?
    　→ 目標已經被吸引進來，要證明自己更有說服力
     
◆ 行動 Action (27:40~ 32:52)
    　→ 透過CTA(行動呼籲)元件引導潛在客戶達成轉換目的，根據目的不同來設計
　◎ AB選擇題
    29:02 哪個CTA是更好的做法?
    　→ 有時根據情境，給個副選擇或是做更多的解答。
    　　避免使用者不想要就跑了，保留其維持在潛在客戶的機會。
    　→ 盡量讓畫面上的按鈕或連結等元件，都是以網頁目的為導向或是引導去CTA的區塊。
    　　(別讓目標不小心就跑了)
      
- 本週作業說明 (32:53 ~ 46:30)

Ａ - 核心理念
Ｉ - 點出痛點、引起共鳴、延續需求
Ｄ - 提出解法、為什麼我是你最好的選擇
Ａ - 透過CTA(Call to Action，行動呼籲) 達成轉換

◆ 最終作業第一階段 (32:53~ 40:46)
  → 目的：是架設網站的人，希望可以進來這個網頁的人能在這裡達成什麼事情。(轉換目的)

◆ 第二週主線：單頁式網站( 40:47 ~ 46:30 )