W1-直播講義

--- tags: UI 直播班 - 2021 冬季班 --- # W1-直播講義 ``` 建議邊聽邊紀錄筆記，如果來不及紀錄，先專心聽之後再紀錄 ``` ## 一、網頁是由什麼組成的？ ### 原子設計（Atomic Design） - **Atoms 原子**：為網頁構成的基本元素，HTML 的 tags，例如標籤、輸入，或是一個按鈕，也可以為抽象的概念，例如字型、顏色等。 - **Molecules 分子**：由原子所構成的簡單介面元件。 - **Organisms 組織**：相對於分子是更為複雜的組成，由原子及分子所建構。 - **Templates 模板**：以頁面為基礎的架構，將以上元素進行排版。 - **Pages 頁面**：將實際內容（圖片、文章等）套件在特定模板。 ### 原子（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/) ### 分子（**Molecules**） - 導覽 Navigation - Navigation Menu 選單列 - Ｍega Menu 巨型選單 - Tab 標籤列 - Vertical Navigation 垂直選單 - Breadcrumbs 頁面路徑 - Accordions 折疊面板 - Tooltips 提示工具 - Card 卡片 - Modal 互動視窗 - Alert 警告訊息 - Data Table 資料表 - Form 表單 --- ## 二、當週作業 ### 註冊登入頁（單頁式＆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. 增加文字、裝飾元素、自己繪製插畫） #### 如果想要練習更多： - 繪製時可以試著開啟網格系統摸索看看 - Mac：Control + G - Windows：Control + Shift + 4 - 研究範例的物件尺寸與對齊方式 :::warning ### 作業地雷 - 沒有使用足夠辨識度的顏色 - 沒有幫按鈕加上 Hover 效果 - 沒有附註試煉等級與 Discord 名稱 - 沒有照著檔案繳交格式命名 ::: --- ## 三、每日任務 ### 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 #### 任務回報流程：請同學依照下方步驟回報任務: > **初次回報請先至 [Dribbble](https://dribbble.com/) 註冊會員** 1. 將完成的作業整理並上傳至 Dribbble 2. 將 Dribbble 連結貼至 Discord 頻道```每日任務回報區```的**當日題目討論串** 3. 助教審核後會留下 Emoji 💯 並將不錯的檔案整理至 [UI 直播班每日任務作品牆](https://hackmd.io/@hexschool/rJKtGFQuY) ``` Discord 的每日任務回報區與任務細節會在當天才會發布，請將對應的題目回覆在當天的討論串裡 ``` #### 任務模板 - 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) #### 本週題目(11/22-11/26)： - Button - Card - Input - Subscribe - Dropdowns