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 模板拼出一個單頁式的網頁 #### 作業範例： * [W2-Landing Page](https://firebasestorage.googleapis.com/v0/b/homework-tools.appspot.com/o/ui-training%2F20215%2FbFECn-W2-Landing%20Page.xd?alt=media&token=054e1047-0695-4b22-9ee5-a2f83af84f5c) #### 需要繳交： - 設計原始檔 - 繳交同時請一併附上你的 Slack 名稱 - 請在上傳前將檔案名稱成：週數-繳交等級-Slack名字（e.g. W2-LV2-王小明） - 使用[作業上傳工具](https://homework-tools.web.app/ui-training.html)產生連結來繳交 #### 繪製前的小提醒： - 除了 Header 跟 Footer 的位置是固定的之外，其他區塊可以自由組合 - 滿版的區塊盡量不要重複使用（頂多與 Footer 合併） - 注意每個區塊之間的間距（盡量統一數值） - 圖片挑選時，要挑選構圖及色調相近的圖片 - 套用真實圖片後，圖片上的文字與物件要注意辨識度 - 圖片跟文字都要注意版權問題 #### 試煉等級： > 作業盡量每週繳交，沒有做到預設的等級也沒關係，盡可能在可使用的時限內做到最好就能達到一定的練習效果 - **Level 1（給初學者）** - 在 Grid-Bootstrap-1920 畫布上使用範例模板拼出一個單頁式網頁 - 至少包含 4 種不同的區塊 - 在需要的物件上套用一個客製化標準色 - 將圖片修正為真實內容（e.g. Unsplash） - （非必做）將文字修正成真實內容 - **Level 2（建議繳交）** - 在 Grid-Bootstrap-1920 畫布上使用範例模板拼出一個單頁式網頁 - 根據提供的範例去照著重新繪製一次自己需要用到的區塊 - 至少包含 5 種以上的區塊 - 在需要的物件上套用一個客製化標準色 - 的圖片與文字修正為真實內容（e.g. Unsplash） - **Level 3（你是怪物ㄅ）** - Level 2 所有條件 - 區塊物件全部自己繪製，可以參考範例來微調或繪製出完全不一樣的樣式 --- ### 作業 2 - 最終作業主題發想（建議完成） > 為最終作業發想一個主題方向 ``` 最終作業要完成一個單頁式的網頁。主題會影響到後續的排版等許多設計面向，會建議同學可以先提出想要做的主題跟一些概略的方向，這邊會再去引導同學找到適合自己的主題 ``` ``` 最終作業每週繳交可以減輕最後的壓力，也可以有更多的討論機會喔 ``` #### 需要繳交： - 最終作業的主題發想，整理成**線上文件**繳交（e.g. HackMD、Dropbox Paper、Google Docs） - 請在上傳前將檔案標題改成：**Final-Topic-Slack名字** #### **任務細節** - 主題：建議從自己有興趣的領域下手 - 目的：這個 Landing Page 的首要目標（e.g. 註冊、試玩） - 簡述：試著用一句簡短的描述介紹這個網頁 - 圖片：預計會想要放的圖片風格，可以從 Unsplash 找兩張放上來 - AIDA（建議完成）：想要練習更多的同學可以試著表列如何運用 AIDA - Awareness 注意：核心理念 - Interest 興趣：點出痛點、引起共鳴、延續需求 - Desire 欲望：提出解法、為什麼你是最好的選擇 - Action 行動：透過 CTA（Call to Action，行動呼籲）達成轉換 #### **範例檔案** * [Final-Topic-王小明](https://hackmd.io/Zfn9Odv9ToOjClyU6n4aSA?view)