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

# 11/24（三）每日任務 Day 3

## 本日題目：Input

Input 讓使用者可以輸入內容
例如註冊登入的個人資料、訂閱電子報要輸入的 Email...
Input 設計的重點在於
讓使用者理解到該欄位是可以操作並輸入文字的、
讓使用者理解要輸入什麼內容、
使用者在輸入的過程中是否仍可以明確知道自己當前輸入的欄位為何
今日來試著設計出符合使用者體驗的 Input 吧！

- **請參考以下元素設計一組『帳號、密碼』的 Input 輸入格**
- **任務模板**
- 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)

---

- 輸入格常見種類
- 填滿 ( Filled Text Input )
- 外框 ( Outlined Text Input )
- 底線 ( Underlined Text Input )

- 輸入格基本元素
- 容器 ( Container )
- 輸入文字 ( Input text )
- 標籤文字 ( Label text )
- 提示文字 ( Placeholder )
- 圖標 ( Icon )
- 說明文字 ( Helper text )：常見於表單，如：帳號需中、英文

- 輸入格狀態
- 可用 ( Enable )
- 停用 ( Disable )：無法輸入內容
- 聚焦 ( Focused )：可以提示使用者正在輸入的內容是哪一格
- 啟用 ( Activated )：輸入完畢的情況

---

#### Dribbble 參考連結：

[範例 1](https://dribbble.com/shots/10147426-Inputs-Dropdowns-Countly)

[範例 2](https://dribbble.com/shots/14185533-Figma-UI-kit-React-components-Outlined-input)

[範例 3](https://dribbble.com/shots/14185539-Figma-UI-kit-React-components-Search-input)

#### 也可以加上合適的 Icon 豐富你的設計：
[Material Icons](https://fonts.google.com/icons?selected=Material+Icons)

## 任務回報流程

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

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

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

### 🌟 自我檢核

若助教沒有留下 Emoji 代表你可能是一些地方做錯了或是沒達到低標
因每日任務助教不會提供批改
如果沒有通過的話可以參考下方檢核點自我審查哦

- 參考[助教低標範例](https://www.figma.com/file/8CemR7uK1yXEl66jPPavRf/Daily-UI-Day-3-Input?node-id=0%3A1)
- 未達成題目要求製作「帳號、密碼」的 Input
- 色彩不利閱讀
- 對齊沒有邏輯