---
# 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 模板拼出一個單頁式的網頁


#### 作業範例：

* [W2-Landing Page](https://firebasestorage.googleapis.com/v0/b/homework-tools.appspot.com/o/ui-training%2F20215%2FbFECn-W2-Landing%20Page.xd?alt=media&token=054e1047-0695-4b22-9ee5-a2f83af84f5c)

#### 需要繳交：

- 設計原始檔
- 繳交同時請一併附上你的 Slack 名稱
- 請在上傳前將檔案名稱成：週數-繳交等級-Slack名字（e.g. W2-LV2-王小明）
- 使用[作業上傳工具](https://homework-tools.web.app/ui-training.html)產生連結來繳交


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

- 除了 Header 跟 Footer 的位置是固定的之外，其他區塊可以自由組合
- 滿版的區塊盡量不要重複使用（頂多與 Footer 合併）
- 注意每個區塊之間的間距（盡量統一數值）
- 圖片挑選時，要挑選構圖及色調相近的圖片
- 套用真實圖片後，圖片上的文字與物件要注意辨識度
- 圖片跟文字都要注意版權問題

#### 試煉等級：

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

- **Level 1（給初學者）**
  - 在 Grid-Bootstrap-1920 畫布上使用範例模板拼出一個單頁式網頁
  - 至少包含 4 種不同的區塊
  - 在需要的物件上套用一個客製化標準色
  - 將圖片修正為真實內容（e.g. Unsplash）
  - （非必做）將文字修正成真實內容

- **Level 2（建議繳交）**
    - 在 Grid-Bootstrap-1920 畫布上使用範例模板拼出一個單頁式網頁
    - 根據提供的範例去照著重新繪製一次自己需要用到的區塊
    - 至少包含 5 種以上的區塊
    - 在需要的物件上套用一個客製化標準色
    - 的圖片與文字修正為真實內容（e.g. Unsplash）

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

</br>

---

</br>

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

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

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

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

#### 需要繳交：

- 最終作業的主題發想，整理成**線上文件**繳交（e.g. HackMD、Dropbox Paper、Google Docs）
- 請在上傳前將檔案標題改成：**Final-Topic-Slack名字**


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

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

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

