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

# W1-直播講義

建議邊聽邊紀錄筆記，如果來不及紀錄，先專心聽之後再紀錄

## 一、網頁是由什麼組成的？

### 原子設計（Atomic Design）

- **Atoms 原子**：為網頁構成的基本元素，HTML 的 tags，例如標籤、輸入，或是一個按鈕，也可以為抽象的概念，例如字型、顏色等。
- **Molecules 分子**：由原子所構成的簡單介面元件。
- **Organisms 組織**：相對於分子是更為複雜的組成，由原子及分子所建構。
- **Templates 模板**：以頁面為基礎的架構，將以上元素進行排版。
- **Pages 頁面**：將實際內容（圖片、文章等）套件在特定模板。

</br>

### 原子（Atoms）

- Button 按鈕
- Input 輸入格
- Radio Button 單選按鈕
- Checkbox 複選框
- Links 連結
- Icon 圖示
- [Fontawsome](https://fontawesome.com/icons?d=gallery&p=2)
- [Material Design Icons](https://fonts.google.com/icons)
- Text 文字
- [Google Fonts](https://fonts.google.com/)
- [Adobe Fonts](https://fonts.adobe.com/)
- Color 色彩
- Media 媒體
- [Unsplash](https://unsplash.com/)

</br>

### 分子（**Molecules**）

- 導覽 Navigation
- Navigation Menu 選單列
- Ｍega Menu 巨型選單
- Tab 標籤列
- Vertical Navigation 垂直選單
- Breadcrumbs 頁面路徑
- Accordions 折疊面板
- Tooltips 提示工具
- Card 卡片
- Modal 互動視窗
- Alert 警告訊息
- Data Table 資料表
- Form 表單

</br>
---
</br>

## 二、當週作業

### 註冊登入頁（單頁式＆Modal）

一道光芒乍現，你已經化身為小怪獸，眼前聳立著一道古老的城門。
輕巧的提示音響起，眼前憑空跳出了參加試煉的報名視窗……

> 請依照範例做出一個註冊頁，並使用相同的元素做出兩種版型

#### 需要繳交：

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

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

- 確認有安裝「思源黑體 TW」字型
- 圖片挑選時，建議顏色或畫面不要過於複雜 ~~（如果可以簡單誰想要複雜）~~
- 按鈕等物件的顏色可以取自圖片，使用相近色或是對比色都可以
- 點擊物件後，按住 Alt/Option 就可以檢視該物件跟其他物件的距離

#### 試煉等級：

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

- **Level 1（給初學者）**
- 可以直接使用範例的檔案（LV1-Full page & Modal 畫布）
- 在 Unsplash 找到一張關於「門」的圖片（e.g. blue door）
- 調整以下物件的顏色：登入、Checkbox、按鈕
- 為 Full page 畫布的按鈕加上 Hover 的樣式

- **Level 2（建議繳交）**
- 全部的物件都依照範例重新繪製一模一樣的版型
- Checkbox 等 icon 可以練習從 Material Design Icons 下載
- 在 Unsplash 找到一張關於「門」的圖片（e.g. blue door）
- 調整以下物件的顏色：登入、Checkbox、按鈕
- 客製化 input＆按鈕的樣式
- 將按鈕加上 Hover 的樣式

- **Level 3（你是怪物ㄅ）**
- Level 2 所有條件
- 客製化 Modal（e.g. 改變排版）`→ 先確認自己對於物件對齊邏輯已經很熟練`
- 客製化圖片（e.g. 增加文字、裝飾元素、自己繪製插畫）

</br>

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

- 繪製時可以試著開啟網格系統摸索看看（右側進階工具列 Grid > Layout）
- 研究範例的物件尺寸與對齊方式

</br>

:::warning
### 作業地雷
- 沒有使用足夠辨識度的顏色
- 沒有幫按鈕加上 Hover 效果
- 沒有附註試煉等級
- 沒有照著檔案繳交格式命名
- 沒有繳交「設計原始檔」而繳交成線上標注連結

</br>
:::

</br>
---
</br>

## 三、每日任務

### Daily UI

> 每天完成一個 Daily UI 題目，一週五個

Daily UI 講求的是持續，每天完成一個題目，且沒有正確答案。
想要嘗試有創意的樣式、或是做出目前能力所及最好的程度都是很好的方向。

</br>

#### 任務回報流程：

請同學依照下方步驟回報任務:

> **初次回報請先至 [Dribbble](https://dribbble.com/) 註冊會員**

1. 將完成的作業整理並上傳至 Dribbble
2. 將 Dribbble 連結貼至 Slack 的每日任務回報區
3. 助教審核後會留下 Emoji 💯 並將不錯的檔案整理至 [UI 直播班每日任務作品牆](https://hackmd.io/VyvpcJzzQy6yz8bRucvqLg?view)

Slack 的每日任務回報區與任務細節會在當天才會發布，請將對應的題目回覆在當天的回報區 Thread 裡

</br>

#### 任務模板
- dribbble 上傳的作品尺寸有固定尺寸，建議可以先下載[任務模板](https://firebasestorage.googleapis.com/v0/b/homework-tools.appspot.com/o/ui-training%2F20215%2F37WWX-Daily%20UI%20-%20dribbble%20template.xd?alt=media&token=e26755e4-5af0-4aa7-ad94-02354057c86a)

</br>

#### 本週題目(5/10-5/14)：

- Button
- input
- Dropdown
- 404
- Card