根據課程錄影|UI 直播班-2021冬季班:W2-直播錄影(上)、W2-直播錄影(下)
◆ C.R.A.P 設計準則
00:01:16 對比 Contrast
00:14:22 重複 Repetition
00:33:38 對齊 Alignment
→ 00:33:55 網格系統說明
00:00 相近 Proximiry
05:21 原子設計 → 組織Organisms
10:09 單頁式網站 Landing Page
13:40 行銷漏斗 AIDA Modael
32:53 本週作業說明(單頁式網站&最終作業階段一)
-
- C.R.A.P 設計準則
-
◆ 對比 Contrast - (00:01:16 ~ 00:14:22)
◎ AB選擇題
00:01:20 字級
00:02:28 字重
00:03:22 顏色
00:04:28 深淺
→ 只要標題深內文淺就能做出差異
00:06:22 視窗區域
→ 陰影只要加到稍為可辨識的程度就好
00:11:00 排版
◆ 重複 Repetition - (00:14:22 ~ 00:33:38)
◎ AB選擇題
00:14:38 一致性
00:16:19 文字階級
00:17:39 圖片尺寸 (常用比例1:1、4:3、16:9)
00:18:50 按鈕尺寸
00:19:46 區塊內間距
00:21:04 表單間距
00:22:36 盒模型(內→外:content→padding→border→margin)
00:28:17 間距倍數
00:30:46 使用8為倍數,方便設定rem
00:31:55 重複使用的元件→Component
◆ 對齊 Alignment - (00:33:38 ~ 01:23:12)
◎ 00:33:55 網格系統說明
◎ AB選擇題
00:54:10 網格系統對齊方式
00:54:58 內層的物件對齊方式
→ 外層容易對齊在網格系統上時,
內容就不會使用外層所憑依的網格系統對齊。
01:03:14 繪製方式
01:04:21 按鈕對齊方式
01:05:50 間距何時需符合8的倍數?
→ 通常狀況下,垂直間距使用8的倍數決定,水平寬度使用網格系統決定。
01:09:39 標題對齊方式
01:10:40 標題垂直水平置中,那些數值需符合8的倍數?
01:12:34 何時為垂直置中?
01:16:00 全頁對齊方式
01:17:30 背景高度制定方式
01:19:34 導覽列對齊方式
01:21:24 三欄式排版方式
◆ 相近 Proximiry - (00:00 ~ 05:20)
◎ AB選擇題
01:34 區塊區分
03:00 分隔線
→樣式點到為止效果足夠了就不需要再加強,督阿鶴丟賀!
04:10 瀏覽舒適度
- 原子設計 → 組織Organisms - (05:21 ~ 10:08)
05:40 主頁首圖 Header
07:01 頁尾 Footer
07:56 AB選擇題:網頁能只有header跟footer嗎?
09:10 組織Organisms → 模板Templates → 頁面Pages
↓ ↓ ↓
區塊Section → 線框稿Wireframe → 精稿Mockup
- 單頁式網站 Landing Page (10:09 ~ 13:39)
→ 讓潛在客戶達成特定轉換目的
→ 確定主題>決定目的>行銷漏斗 >> 區塊>線稿>精稿
↑______ 前置作業 ______↑
- 行銷漏斗 AIDA Modael (13:40 ~ 32:52)
-
◆ 13:43 何謂行銷漏斗
◆ 注意 Awareness (15:50 ~22:04)
→ 試著用一句話點出你的核心理念
◎ AB選擇題
16:29 更能引起注意的排版
→ 滿版header稱為hero header
17:28 hero header內容表現
20:18 哪個更吸引往下看?
→ 想使用hero header,至少要放置往下的提示,或是畫面上要有顯示能轉換的按鈕。
◆ 興趣 Interest (22:05 ~ 24:30)
◎ AB選擇題
22:10 哪個更吸引人閱讀
→可以不需要急著進入正題,先提出痛點引起共鳴
◆ 慾望 Desire (24:31 ~ 27:40)
→ 開始介紹重點細節,說明為什麼你是最好的選擇
→ 這邊區塊通常會做多 (e.g. 操作流程、獨特優點)
◎ AB選擇題
25:32 哪個更有說服力?
→ 目標已經被吸引進來,要證明自己更有說服力
◆ 行動 Action (27:40~ 32:52)
→ 透過CTA(行動呼籲)元件引導潛在客戶達成轉換目的,根據目的不同來設計
◎ AB選擇題
29:02 哪個CTA是更好的做法?
→ 有時根據情境,給個副選擇或是做更多的解答。
避免使用者不想要就跑了,保留其維持在潛在客戶的機會。
→ 盡量讓畫面上的按鈕或連結等元件,都是以網頁目的為導向或是引導去CTA的區塊。
(別讓目標不小心就跑了)
- 本週作業說明 (32:53 ~ 46:30)
A - 核心理念
I - 點出痛點、引起共鳴、延續需求
D - 提出解法、為什麼我是你最好的選擇
A - 透過CTA(Call to Action,行動呼籲) 達成轉換
◆ 最終作業第一階段 (32:53~ 40:46)
→ 目的:是架設網站的人,希望可以進來這個網頁的人能在這裡達成什麼事情。(轉換目的)
◆ 第二週主線:單頁式網站( 40:47 ~ 46:30 )
#六角學院 #切版直播班 沒想到會二刷,這世界的 Flag 果然立一個倒一個 這次的二刷很明顯感受到熟練度比去年高很多, 去年上完課以後因為其實沒有特別要轉職,只是職業需求想要進修。 但工作內容很少需要我切版,主要還是UI為主,所以擔心是不是都會忘光, 就再次報名 好 M ,還拖了一路上陸陸續續認識的同學一起跳坑不能只有我 M, 為了避免拖到最後一刻還建了欠債表單,但還是拖到最後了😂 死線成就潛力
Sep 14, 2022#UI 設計觀念必修直播班-2021冬 #最終作業 發想 區塊文案 簡易功能樹-初版211216v0
Dec 16, 2021🏅 每日任務挑戰列表 第一週 10/11 ~ 10/22 🚀 每週課程 || 第一週 重新認識 JavaScript 講義與主線 小組共筆 小組討論
Oct 12, 2021切版筆記 === ▌ 待辦任務 每日任務 課程欠債 ▌ 筆記
Aug 26, 2021or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up