W3-直播講義

--- tags: UI 直播班 - 2021 春季班 --- # W3-直播講義 ## 一、精稿繪製細節 > 原子設計裡，這邊可以對應到 Pages 頁面 - 色彩（[Adobe Color](https://color.adobe.com/zh/create/color-wheel)、[Pigment](https://pigment.shapefactory.co/)） - icon（[Material Design Icons](https://fonts.google.com/icons?selected=Material+Icons)、[繪製細節](https://material.io/design/iconography/system-icons.html#system-icon-metrics)） - 字型選擇（[Adobe Font](https://fonts.adobe.com/foundries/font1000)） - 圖片（[Unsplash](https://unsplash.com/)） 想要看更多參考範例：[Awwwards](https://www.awwwards.com/websites/single-page/) --- ## 二、RWD 響應式網頁設計 > 讓網站根據不同裝置的螢幕解析度去做適合的介面呈現，減少使用者進行縮放、平移和捲動等操作，達到更好的使用者體驗。 ### Breakpoint 中斷點 > 改變排版的解析度寬度 - [StatCounter](https://gs.statcounter.com/screen-resolution-stats/all/taiwan) - [Bootstrap 5](https://getbootstrap.com/docs/5.0/layout/grid/#grid-options) - [Material Design](https://material.io/design/layout/responsive-layout-grid.html#breakpoints) ### 響應式網格類型 - 固定網格（Fixed Grid） - 流動網格（Fluid Grid） - 混合網格（Hybrid Grid） ### 響應式調整細節 - 版面調整 - 文字階級 - 間距 - 圖片比例 - 省略內容 - 行動版最小點擊範圍 - 行動版沒有 Hover 效果 ### 經常出現的小錯誤 - 直接縮放整個區塊 → 字級、間距、對齊方式等邏輯全部跑掉 - 物件縮放後尺寸產生小數點 → 縮放時建議關掉 Responsive Resize - 間距、文字階級要盡量保持相同 - 間距建議保持八的倍數 - 調整了字級後，忘記調整行高 ``` 只要有調整了任何內容，都要再重新檢視是否會影響到其他區塊，以及有沒有套用到所有相同邏輯的物件上 ``` --- ## 三、當週作業 ### 作業 1 - RWD 練習（非必做，但建議完成） ``` 腳下閃起一陣光芒，小怪獸發現自己得到了漂浮物品的魔法！隨著提示音響起，第二試煉的紙條憑空出現在桌上：若成功用相同數量的積木疊出不同寬度的城堡，能夠再獲得一個魔法，以及挑戰最終試煉的資格…… ``` > 請將範例提供的桌面版 Wireframe 調整成行動版的尺寸 #### 需要繳交： - 設計原始檔 - 請在上傳前將檔案名稱成：週數-繳交等級-Slack名字（e.g. W3-LV2-王小明） - 使用[作業上傳工具](https://homework-tools.web.app/ui-training.html)產生連結來繳交 #### 繪製前的小提醒： - 縮放之前建議關閉 Responsive Resize - 盡量不要直接縮放一整個群組，建議將每個物件分開調整 - 每次做了調整之後，要再檢查間距、字級等樣式有沒有被影響到 - 保持相同的縮放邏輯（e.g. 圖片比例、間距） - 保持相同的文字層級（e.g. 大標、小標、內文） - 手機版型更注重的是垂直的瀏覽，原本水平排列的區塊會有較大的調整 #### 試煉等級： > 當週作業盡量每週繳交，沒有做到預設的等級也沒關係，盡量準時繳交才能即時檢視自己的學習成效喔 - **Level 1（給初學者）** - 將 LV1-Wireframe 的內容調整成 Mobile 版型 - **Level 2（建議繳交）** - 將 LV2-Wireframe 的內容調整成 Mobile 版型 - **Level 3（你是怪物ㄅ）** - 將 LV2-Wireframe 的內容調整成 Mobile 跟 Tablet 版型 #### 如果想要練習更多： - 可以試著使用 Material Design 的規範繪製手機版的網格系統 - 可以試著繪製自己現有手機尺寸的網格系統 #### 作業地雷： - 物件尺寸產生小數點 - 忘記關掉 Responsive Resize 就縮放物件 - 間距或字級的縮放邏輯不一致 - 調整字級後忘記調整行距 --- ### 作業 2 - 最終作業 Wireframe（線框稿） > 請使用提供的 Wireframe 模組製作最終作業的 Wireframe，需要包含 RWD 響應式設計和 AIDA 行銷漏斗 #### 需要繳交： - 設計原始檔 - 請在上傳前將檔案名稱成：Final-Wireframe-Slack名字 - 使用[作業上傳工具](https://homework-tools.web.app/ui-training.html)產生連結來繳交 - **附上最終作業主題的線上文件** #### 繪製前的小提醒： - 建議的響應式尺寸：桌面版（1920×1080），手機版（414×896） - 根據 AIDA 去規劃區塊，可以在設計稿旁標註細節 - 滿版的區塊盡量不要重複使用（頂多與 Footer 合併） - 注意每個區塊之間的間距（盡量統一數值） #### 試煉等級： > 最終作業每週繳交可以減輕最後的壓力，也可以有更多的討論機會喔 - **Level 1（給初學者）** - 完成桌面與手機版的響應式線框稿 - 至少包含 4 種不同的區塊 - 可以使用第二週提供的模板來套用 - **Level 2（建議繳交）** - 完成桌面與手機版的響應式線框稿 - 直接開立一個空白的檔案從畫布開始重新建立 - 至少包含 5-6 種不同的區塊 - 如果對於文案已經有一些想法的話也可以先放上去 - 參考課程提供的範例重新繪製（e.g. 網格系統、區塊排版） - **Level 3（你是怪物ㄅ）** - Level 2 所有條件 - 全部自己繪製，可以參考範例來微調或繪製出完全不一樣的樣式 #### 作業地雷： - 沒有使用單色系色調來繪製 Wireframe - 沒有使用單一字型，且字級樣式過多 - 沒有規劃好間距邏輯或沒有使用八的倍數 --- ## 四、每日任務 ### Daily UI > 每天完成一個 Daily UI 題目，一週五個 ``` Daily UI 講求的是持續，每天完成一個題目，且沒有正確答案。想要嘗試有創意的樣式、或是做出目前能力所及最好的程度都是很好的方向。 ``` #### 任務回報流程：請同學依照下方步驟回報任務: > **初次回報請先至 [Dribbble](https://dribbble.com/) 註冊會員** 1. 將完成的作業整理並上傳至 Dribbble 2. 將 Dribbble 連結貼至 Slack 的每日任務回報區 3. 助教審核後會留下 Emoji 💯 並將不錯的檔案整理至 [UI 直播班每日任務作品牆](https://hackmd.io/VyvpcJzzQy6yz8bRucvqLg?view) ``` Slack 的每日任務回報區與任務細節會在當天才會發布，請將對應的題目回覆在當天的回報區 Thread 裡 ``` #### 任務模板 - 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) #### 本週題目(5/24-5/28)： - 將 5/18 的 Header 調整成 RWD - 將 5/19 的 Footer 調整成 RWD - 將 5/14 的三欄式 Card 調整成 RWD - Shopping Cart - empty state