Try   HackMD

帶你從草稿到完稿 - 時間軸

根據課程錄影|UI 直播班-2021冬季班:W2-直播錄影(上)W2-直播錄影(下)

🎬 簡易版時間軸

W2-直播錄影(上)

​​​​◆ C.R.A.P 設計準則
​​​​00:01:16 對比 Contrast
​​​​00:14:22 重複 Repetition
​​​​00:33:38 對齊 Alignment
​​​​→ 00:33:55 網格系統說明

W2-直播錄影(下)

​​​​00:00 相近 Proximiry
​​​​05:21 原子設計 → 組織Organisms
​​​​10:09 單頁式網站 Landing Page
​​​​13:40 行銷漏斗 AIDA Modael
​​​​32:53 本週作業說明(單頁式網站&最終作業階段一)

🎬 詳細版時間軸

W2-直播錄影(上)

 
- 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:14:316: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 三欄式排版方式

W2-直播錄影(下)

 
◆ 相近 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 )