---
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）

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

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

#### 需要繳交：

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

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

- 圖片挑選時，建議顏色或畫面不要過於複雜 ~~（如果可以簡單誰想要複雜）~~
- 按鈕等物件的顏色可以取自圖片，使用相近色或是對比色都可以
- 點擊物件後，按住 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>

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

- 繪製時可以試著開啟網格系統摸索看看
- Mac：Control + G
- Windows：Control + Shift + 4
- 研究範例的物件尺寸與對齊方式

</br>

:::warning
### 作業地雷
- 沒有使用足夠辨識度的顏色
- 沒有幫按鈕加上 Hover 效果
- 沒有附註試煉等級與 Discord 名稱
- 沒有照著檔案繳交格式命名

</br>
:::

</br>
---
</br>

## 三、每日任務

### Daily UI 體驗週

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

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

- **什麼是 Daily UI？**
[Daily UI](https://www.dailyui.co/) 源自於羅馬尼亞設計師 Nechita Paul Flavius 的活動，只要填寫自己的信箱即可參與，每日便會收到 UI 題目，堅持完成每一天的挑戰便是我們的任務。

- **我們也要進行長達 100 天的 Daily UI 挑戰嗎？**
為了不影響大家的課程吸收進度，在本次直播班中我們只會進行為期五日的 Daily UI 體驗。不要小看這五天，只要堅持挑戰完這一週你就多了五個作品囉 :D

- **我對 Daily UI 完全沒有頭緒，請問我該怎麼做才好？**
不用擔心哦，此為自由參加的活動，目的在於讓大家提前熟悉 Figma，盡力而為即可哩。另外我們有提供 Dribbble 模板，也有上一屆的[學長姐作品](https://hackmd.io/@hexschool/BJFB1N6DO)可以參考。也可以前往 [Dribbble 搜尋 Daily UI](https://dribbble.com/search/Daily%20UI) 就有很多來自全國各地的設計作品囉 :D

</br>

#### 任務回報流程：

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

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

1. 將完成的作業整理並上傳至 Dribbble
2. 將 Dribbble 連結貼至 Discord 頻道```每日任務回報區```的**當日題目討論串**
3. 助教審核後會留下 Emoji 💯 並將不錯的檔案整理至 [UI 直播班每日任務作品牆](https://hackmd.io/@hexschool/rJKtGFQuY)

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

</br>

#### 任務模板
- Dribbble 上傳的作品尺寸有固定尺寸，建議可以先下載[任務模板](https://firebasestorage.googleapis.com/v0/b/homework-tools.appspot.com/o/ui-training%2F202111%2FhscyE-Dribbble%20template.fig?alt=media&token=dfe1fe17-391f-4e2a-9bee-8541ae9716b4)

</br>

#### 本週題目(11/22-11/26)：

- Button
- Card
- Input
- Subscribe
- Dropdowns