W2-直播講義

--- tags: UI 直播班 - 2021 冬季班 --- # W2-直播講義 ## 一、如何讓設計稿更上一層樓？ ### C.R.A.P. 設計準則 > C.R.A.P. 是從平面設計延伸出來的設計準則，運用於介面設計的視覺與動線，達到優化使用者體驗的效果。 - 對比（Contrast） - 重複（Repetition） - 對齊（Alignment） - 相近（Proximity） --- ## 二、Landing Page 著陸頁 > 通常是使用者進入網站看到的第一個頁面，目的是取得轉換率（達成曝光流量或營收目標） ### 常見區塊（Sections） > 原子設計裡，這邊可以對應到 Organisms 組織 - 主頁首圖（Hero Header） - 功能特點（Why us） - 操作流程（How it works） - 顧客推薦（Social proof） - 常見問題（FAQs） - 價格方案（Pricing） - 頁底轉換（CTA） - 頁尾（Footer） ### AIDA Model > 如果你想要更系統化地規劃 Landing Page，可以運用 AIDA Model - Awareness 注意：點出痛點、核心理念 - Interest 興趣：提出解決方案、延續需求 - Desire 欲望：說明為什麼你是最好的選擇 - Action 行動：透過 CTA 達成轉換 ### 常見主題＆轉換目的 #### 主題： - 產品：實體、虛擬、服務 - 宣傳：活動、工作、廣告 #### 目的： - 註冊 - 下載 - 訂閱 - 試用 - 購買 - 分享 - 報名 - 聯絡 - ... --- ## 三、完稿前必做：線框稿 Wireframe > 等同原子設計的 Templates 模板 ### Wireframe 線框稿 Wireframe 是產品的建構藍圖，以單純的線條或單色色塊去規劃頁面架構 #### 目的 - 定義畫面上的必要元素 - 檢視頁面架構與操作流程 - 減輕完成精稿的工作量 #### 繪製重點 - 不需要過度在意排版，擺放的位置正確即可 - 使用越接近預設樣式的元件 - 盡可能減少使用的顏色（單色系或無色系） - 使用單一字型，且統一字級 - 使用簡單且正確的 icon - 圖片簡單標示 - 真實文案越早加上越好 ``` 平時可以多觀察網頁上的排版，往後在繪製 Wireframe 時會更快 ``` #### 繪製流程 ``` 課堂上面為因應教學的需求，會稍微改變一些 Wireframe 的「正常流程」 ``` 1. 粗略的 Wireframe：不在意排版，只注重是否將需要的元件都正確擺上 2. 較精緻的 Wireframe：調整排版並修整元件細節（e.g. 圖片比例、間距、文案） 3. Mockup：加上更多細節樣式（e.g. 顏色、圖片、裝飾） --- ## 四、當週作業 ### 作業 1 - 用模板排出一個單頁式網頁 ``` 踏入門後，小怪獸跟著指示來到了試煉的挑高大廳，中央的木桌上放了一個積木組合，一旁的紙條寫著：成功將所有積木疊起來就能獲得一項魔法…… ``` > 請使用提供的 Wireframe 模板完成一個單頁式的網頁 #### 需要繳交： - 設計檔連結 - 請在繳交前將檔案名稱改成：週數-繳交等級-Discord 暱稱（e.g. W1-LV2-王小明） - 繳交時請附註試煉等級與 Discord 暱稱 - 繳交時請將連結設定成超連結，並將超連結文案修改成檔案名稱 #### 繪製前的小提醒： - 圖片跟文字都要注意版權問題 - **每週作業跟最終作業盡量分開練習**，之後每週都會增加最終作業的階段任務，因此每週作業的部分就先好好練習課程的知識就可以了 #### 試煉等級： > 作業盡量每週繳交，沒有做到預設的等級也沒關係，盡可能在可使用的時限內做到最好就能達到一定的練習效果 - **Level 1（給初學者）** - 直接使用「Example / LV1」的設計稿來做下列調整 - 在需要的物件上套用一個客製化標準色 - 圖片與文字修正為真實內容（e.g. Unsplash） - **Level 2（建議繳交）** - 在「LV2」的 frame 上重新繪製一遍「Example / LV2」的內容 - 在需要的物件上套用一個客製化標準色 - 圖片與文字修正為真實內容（e.g. Unsplash） - **Level 3（你是怪物ㄅ）** - Level 2 所有條件 - 區塊物件可以參考範例來微調或繪製出完全不一樣的樣式 #### 如果想要練習更多： - 試著自己依照範例重新制定網格系統 - 試著調整區塊間距成自己喜歡的數值 - 試著使用簡單的 AIDA 來規劃版面（可以標註在作業旁邊） :::warning ### 作業地雷 - 沒有附註試煉等級 - 沒有附註 Discord 名稱 - 沒有照著檔案繳交格式命名 ::: --- ### 作業 2 - 最終作業主題發想（建議完成） > 為最終作業發想一個主題方向 ``` 最終作業要完成一個單頁式的網頁。主題會影響到後續的排版等許多設計面向，會建議同學可以先提出想要做的主題跟一些概略的方向，這邊會再去引導同學找到適合自己的主題 ``` ``` 最終作業每週繳交可以減輕最後的壓力，也可以有更多的討論機會喔 ``` #### 需要繳交： - 最終作業的主題發想，整理成**線上文件**繳交（e.g. HackMD、Dropbox Paper、Google Docs），並記得開啟瀏覽權限 - 請在上傳前將檔案標題改成：**Final-Topic-Discord 暱稱** #### **任務細節** - 主題：建議從自己有興趣的領域下手 - 目的：這個 Landing Page 的首要目標（e.g. 註冊、試玩） - 簡述：試著用一句簡短的描述介紹這個網頁 - 圖片：預計會想要放的圖片風格，可以從 Unsplash 找兩張放上來 - AIDA（建議完成）：想要練習更多的同學可以試著表列如何運用 AIDA - Awareness 注意：核心理念 - Interest 興趣：點出痛點、引起共鳴、延續需求 - Desire 欲望：提出解法、為什麼你是最好的選擇 - Action 行動：透過 CTA（Call to Action，行動呼籲）達成轉換 #### **範例檔案** * [Final-Topic-王小明](https://hackmd.io/Zfn9Odv9ToOjClyU6n4aSA?view)