---
# System prepended metadata

title: W2-直播講義
tags: [UI 直播班 - 2021 冬季班]

---

---
tags: UI 直播班 - 2021 冬季班
---

# W2-直播講義

## 一、如何讓設計稿更上一層樓？

### C.R.A.P. 設計準則

> C.R.A.P. 是從平面設計延伸出來的設計準則，
運用於介面設計的視覺與動線，達到優化使用者體驗的效果。

- 對比（Contrast）
- 重複（Repetition）
- 對齊（Alignment）
- 相近（Proximity）


</br>

---

</br>


## 二、Landing Page 著陸頁

> 通常是使用者進入網站看到的第一個頁面，
目的是取得轉換率（達成曝光流量或營收目標）

</br>


### 常見區塊（Sections）

> 原子設計裡，這邊可以對應到 Organisms 組織

- 主頁首圖（Hero Header）
- 功能特點（Why us）
- 操作流程（How it works）
- 顧客推薦（Social proof）
- 常見問題（FAQs）
- 價格方案（Pricing）
- 頁底轉換（CTA）
- 頁尾（Footer）

</br>

### AIDA Model

> 如果你想要更系統化地規劃 Landing Page，可以運用 AIDA Model

- Awareness 注意：點出痛點、核心理念
- Interest 興趣：提出解決方案、延續需求
- Desire 欲望：說明為什麼你是最好的選擇
- Action 行動：透過 CTA 達成轉換

</br>

### 常見主題＆轉換目的

#### 主題：

- 產品：實體、虛擬、服務
- 宣傳：活動、工作、廣告

#### 目的：

- 註冊
- 下載
- 訂閱
- 試用
- 購買
- 分享
- 報名
- 聯絡
- ...


</br>

---

</br>


## 三、完稿前必做：線框稿 Wireframe

> 等同原子設計的 Templates 模板

### Wireframe 線框稿

Wireframe 是產品的建構藍圖，以單純的線條或單色色塊去規劃頁面架構

#### 目的

- 定義畫面上的必要元素
- 檢視頁面架構與操作流程
- 減輕完成精稿的工作量

#### 繪製重點

- 不需要過度在意排版，擺放的位置正確即可
- 使用越接近預設樣式的元件
- 盡可能減少使用的顏色（單色系或無色系）
- 使用單一字型，且統一字級
- 使用簡單且正確的 icon
- 圖片簡單標示
- 真實文案越早加上越好

```
平時可以多觀察網頁上的排版，往後在繪製 Wireframe 時會更快
```

#### 繪製流程

```
課堂上面為因應教學的需求，會稍微改變一些 Wireframe 的「正常流程」
```

1. 粗略的 Wireframe：不在意排版，只注重是否將需要的元件都正確擺上 
2. 較精緻的 Wireframe：調整排版並修整元件細節（e.g. 圖片比例、間距、文案）
3. Mockup：加上更多細節樣式（e.g. 顏色、圖片、裝飾）


</br>

---

</br>

## 四、當週作業

### 作業 1 - 用模板排出一個單頁式網頁

```
踏入門後，小怪獸跟著指示來到了試煉的挑高大廳，中央的木桌上放了一個積木組合，
一旁的紙條寫著：成功將所有積木疊起來就能獲得一項魔法……
```

> 請使用提供的 Wireframe 模板完成一個單頁式的網頁


#### 需要繳交：

- 設計檔連結
- 請在繳交前將檔案名稱改成：週數-繳交等級-Discord 暱稱（e.g. W1-LV2-王小明）
- 繳交時請附註試煉等級與 Discord 暱稱
- 繳交時請將連結設定成超連結，並將超連結文案修改成檔案名稱


#### 繪製前的小提醒：

- 圖片跟文字都要注意版權問題
- **每週作業跟最終作業盡量分開練習**，之後每週都會增加最終作業的階段任務，因此每週作業的部分就先好好練習課程的知識就可以了

#### 試煉等級：

> 作業盡量每週繳交，沒有做到預設的等級也沒關係，盡可能在可使用的時限內做到最好就能達到一定的練習效果

- **Level 1（給初學者）**
  - 直接使用「Example / LV1」的設計稿來做下列調整
  - 在需要的物件上套用一個客製化標準色
  - 圖片與文字修正為真實內容（e.g. Unsplash）

- **Level 2（建議繳交）**
  - 在「LV2」的 frame 上重新繪製一遍「Example / LV2」的內容
  - 在需要的物件上套用一個客製化標準色
  - 圖片與文字修正為真實內容（e.g. Unsplash）

- **Level 3（你是怪物ㄅ）**
  - Level 2 所有條件
  - 區塊物件可以參考範例來微調或繪製出完全不一樣的樣式

</br>

#### 如果想要練習更多：

- 試著自己依照範例重新制定網格系統
- 試著調整區塊間距成自己喜歡的數值
- 試著使用簡單的 AIDA 來規劃版面（可以標註在作業旁邊）

</br>

:::warning
### 作業地雷
- 沒有附註試煉等級
- 沒有附註 Discord 名稱
- 沒有照著檔案繳交格式命名

</br>
:::

---

</br>

### 作業 2 - 最終作業主題發想（建議完成）

> 為最終作業發想一個主題方向

```
最終作業要完成一個單頁式的網頁。主題會影響到後續的排版等許多設計面向，
會建議同學可以先提出想要做的主題跟一些概略的方向，這邊會再去引導同學找到適合自己的主題
```

```
最終作業每週繳交可以減輕最後的壓力，也可以有更多的討論機會喔
```

#### 需要繳交：

- 最終作業的主題發想，整理成**線上文件**繳交（e.g. HackMD、Dropbox Paper、Google Docs），並記得開啟瀏覽權限
- 請在上傳前將檔案標題改成：**Final-Topic-Discord 暱稱**


#### **任務細節**

- 主題：建議從自己有興趣的領域下手
- 目的：這個 Landing Page 的首要目標（e.g. 註冊、試玩）
- 簡述：試著用一句簡短的描述介紹這個網頁
- 圖片：預計會想要放的圖片風格，可以從 Unsplash 找兩張放上來
- AIDA（建議完成）：想要練習更多的同學可以試著表列如何運用 AIDA 
    - Awareness 注意：核心理念
    - Interest 興趣：點出痛點、引起共鳴、延續需求
    - Desire 欲望：提出解法、為什麼你是最好的選擇
    - Action 行動：透過 CTA（Call to Action，行動呼籲） 達成轉換

#### **範例檔案**
* [Final-Topic-王小明](https://hackmd.io/Zfn9Odv9ToOjClyU6n4aSA?view)
