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 調整成行動版的尺寸 #### 需要繳交： - 設計檔連結 - 請在繳交前將檔案名稱改成：週數-繳交等級-Discord 暱稱（e.g. W1-LV2-王小明） - 繳交時請附註試煉等級與 Discord 暱稱 #### 繪製前的小提醒： - 盡量不要直接縮放一整個群組，建議將每個物件分開調整 - 每次做了調整之後，要再檢查間距、字級等樣式有沒有被影響到 - 保持相同的縮放邏輯（e.g. 圖片比例、間距） - 保持相同的文字層級（e.g. 大標、小標、內文） - 手機版型更注重的是垂直的瀏覽，原本水平排列的區塊會需要較大的調整） #### 試煉等級： > 當週作業盡量每週繳交，沒有做到預設的等級也沒關係，盡量準時繳交才能即時檢視自己的學習成效喔 - **Level 1（給初學者）** - 將 LV1-Wireframe 的內容調整成 Mobile 版型 - **Level 2（建議繳交）** - 將 LV2-Wireframe 的內容調整成 Mobile 版型 - **Level 3（你是怪物ㄅ）** - 將 LV2-Wireframe 的內容調整成 Mobile 跟 Tablet 版型 #### 如果想要練習更多： - 可以試著使用 Material Design 的規範繪製手機版的網格系統 - 可以試著繪製自己現有手機尺寸的網格系統 :::warning ### 作業地雷： - 間距或字級的縮放邏輯不一致 - 調整字級後忘記調整行距 ::: --- ### 作業 2 - 最終作業 Wireframe（線框稿） > 請使用提供的 Wireframe 模組製作最終作業的 Wireframe，需要包含 RWD 響應式設計和 AIDA 行銷漏斗 #### 需要繳交： - 設計檔連結 - 請在繳交前將檔案名稱改成：週數-繳交等級-Discord 暱稱（e.g. W1-LV2-王小明） - 繳交時請附註試煉等級與 Discord 暱稱 #### 繪製前的小提醒： - 建議的響應式尺寸：桌面版（1920×1080），手機版（414×896） - 根據 AIDA 去規劃區塊，可以在設計稿旁標註細節 - 滿版的區塊盡量不要重複使用（頂多與 Footer 合併） - 注意每個區塊之間的間距（盡量統一數值） #### 試煉等級： > 最終作業每週繳交可以減輕最後的壓力，也可以有更多的討論機會喔 - **Level 1（給初學者）** - 完成桌面與手機版的響應式線框稿 - 可以直接使用作業檔案裡面的模板來套用 - 至少包含 4 種不同的區塊 - **Level 2（建議繳交）** - 完成桌面與手機版的響應式線框稿 - 直接開立一個空白的檔案從畫布開始重新建立 - 至少包含 5-6 種不同的區塊 - 如果對於文案已經有一些想法的話也可以先放上去 - 參考課程提供的範例重新繪製（e.g. 網格系統、區塊排版） - **Level 3（你是怪物ㄅ）** - Level 2 所有條件 - 區塊物件可以參考範例來微調或繪製出完全不一樣的樣式 :::warning ### 作業地雷： - 沒有使用單色系色調來繪製 Wireframe - 沒有使用單一字型，且字級樣式過多 - 沒有規劃好間距邏輯或沒有使用八的倍數 - 沒有附註試煉等級 - 沒有附註 Discord 名稱 - 沒有照著檔案繳交格式命名 :::