---
# System prepended metadata

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

---

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

# W3-直播講義


## 一、精稿繪製細節

> 原子設計裡，這邊可以對應到 Pages 頁面

- 色彩（[Adobe Color](https://color.adobe.com/zh/create/color-wheel)、[Pigment](https://pigment.shapefactory.co/)）
- icon（[Material Design Icons](https://fonts.google.com/icons?selected=Material+Icons)、[繪製細節](https://material.io/design/iconography/system-icons.html#system-icon-metrics)）
- 字型選擇（[Adobe Font](https://fonts.adobe.com/foundries/font1000)）
- 圖片（[Unsplash](https://unsplash.com/)）


</br>

想要看更多參考範例：[Awwwards](https://www.awwwards.com/websites/single-page/)

</br>

---

</br>


## 二、RWD 響應式網頁設計

> 讓網站根據不同裝置的螢幕解析度去做適合的介面呈現，
減少使用者進行縮放、平移和捲動等操作，達到更好的使用者體驗。

### Breakpoint 中斷點

> 改變排版的解析度寬度

- [StatCounter](https://gs.statcounter.com/screen-resolution-stats/all/taiwan)
- [Bootstrap 5](https://getbootstrap.com/docs/5.0/layout/grid/#grid-options)
- [Material Design](https://material.io/design/layout/responsive-layout-grid.html#breakpoints)

### 響應式網格類型

- 固定網格（Fixed Grid）
- 流動網格（Fluid Grid）
- 混合網格（Hybrid Grid）

### 響應式調整細節

- 版面調整
- 文字階級
- 間距
- 圖片比例
- 省略內容
- 行動版最小點擊範圍
- 行動版沒有 Hover 效果

### 經常出現的小錯誤

- 直接縮放整個區塊 → 字級、間距、對齊方式等邏輯全部跑掉
- 物件縮放後尺寸產生小數點 → 縮放時建議關掉 Responsive Resize
- 間距、文字階級要盡量保持相同
- 間距建議保持八的倍數
- 調整了字級後，忘記調整行高

```
只要有調整了任何內容，都要再重新檢視是否會影響到其他區塊，以及有沒有套用到所有相同邏輯的物件上
```


</br>

---

</br>


## 三、當週作業

### 作業 1 - RWD 練習（非必做，但建議完成）

```
腳下閃起一陣光芒，小怪獸發現自己得到了漂浮物品的魔法！隨著提示音響起，
第二試煉的紙條憑空出現在桌上：若成功用相同數量的積木疊出不同寬度的城堡，
能夠再獲得一個魔法，以及挑戰最終試煉的資格……
```

> 請將範例提供的桌面版 Wireframe 調整成行動版的尺寸

#### 需要繳交：

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

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

- 盡量不要直接縮放一整個群組，建議將每個物件分開調整
- 每次做了調整之後，要再檢查間距、字級等樣式有沒有被影響到
- 保持相同的縮放邏輯（e.g. 圖片比例、間距）
- 保持相同的文字層級（e.g. 大標、小標、內文）
- 手機版型更注重的是垂直的瀏覽，原本水平排列的區塊會需要較大的調整）

#### 試煉等級：

> 當週作業盡量每週繳交，沒有做到預設的等級也沒關係，盡量準時繳交才能即時檢視自己的學習成效喔

- **Level 1（給初學者）**
    - 將 LV1-Wireframe 的內容調整成 Mobile 版型

- **Level 2（建議繳交）**
    - 將 LV2-Wireframe 的內容調整成 Mobile 版型

- **Level 3（你是怪物ㄅ）**
    - 將 LV2-Wireframe 的內容調整成 Mobile 跟 Tablet 版型

</br>

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

- 可以試著使用 Material Design 的規範繪製手機版的網格系統
- 可以試著繪製自己現有手機尺寸的網格系統

</br>

:::warning
### 作業地雷：

- 間距或字級的縮放邏輯不一致
- 調整字級後忘記調整行距

</br>
:::

</br>

---

</br>



### 作業 2 - 最終作業 Wireframe（線框稿）

> 請使用提供的 Wireframe 模組製作最終作業的 Wireframe，
需要包含 RWD 響應式設計和 AIDA 行銷漏斗

#### 需要繳交：

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

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

- 建議的響應式尺寸：桌面版（1920×1080），手機版（414×896）
- 根據 AIDA 去規劃區塊，可以在設計稿旁標註細節
- 滿版的區塊盡量不要重複使用（頂多與 Footer 合併）
- 注意每個區塊之間的間距（盡量統一數值）

#### 試煉等級：

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

- **Level 1（給初學者）**
  - 完成桌面與手機版的響應式線框稿
  - 可以直接使用作業檔案裡面的模板來套用
  - 至少包含 4 種不同的區塊

- **Level 2（建議繳交）**
  - 完成桌面與手機版的響應式線框稿
  - 直接開立一個空白的檔案從畫布開始重新建立
  - 至少包含 5-6 種不同的區塊
  - 如果對於文案已經有一些想法的話也可以先放上去
  - 參考課程提供的範例重新繪製（e.g. 網格系統、區塊排版）

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

</br>

:::warning
### 作業地雷：

- 沒有使用單色系色調來繪製 Wireframe
- 沒有使用單一字型，且字級樣式過多
- 沒有規劃好間距邏輯或沒有使用八的倍數
- 沒有附註試煉等級
- 沒有附註 Discord 名稱
- 沒有照著檔案繳交格式命名

</br>
:::