--- tags: UI 直播班 - 2021 春季班 --- # ⚡️ 5/11 （二）每日任務 Day 2 ## 本日題目：Input ``` Input 讓使用者可以輸入內容 例如註冊登入的個人資料、訂閱電子報要輸入的 Email... Input 設計的重點在於 讓使用者理解到該欄位是可以操作並輸入文字的、 讓使用者理解要輸入什麼內容、 使用者在輸入的過程中是否仍可以明確知道自己當前輸入的欄位為何 今日來試著設計出符合使用者體驗的 Input 吧！ ``` - **請參考以下元素設計一組『帳號、密碼』的 Input 輸入格** - **任務模板** - 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) --- - 輸入格常見種類 - 填滿 ( 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 連結貼至 Slack 的每日任務回報區 3. 助教審核後會留下 Emoji 💯 並將不錯的檔案整理至 [UI 直播班每日任務作品牆](https://hackmd.io/VyvpcJzzQy6yz8bRucvqLg?view)