自動播放
自動完成
上一堂課程
完成並繼續課程
724307
UI 設計入門：畫出有程式邏輯的設計稿
介紹
六角學院線上學員社團
課程介紹 (0:46)
免費作業上傳空間
Apple M1 觀看公告
基本概念
先來聊聊什麼是 UI 設計 (2:46)
開發流程與設計思考 (7:03)
介面設計相關設計師 (9:00)
初學者必看的設計規範 (7:30)
設計流程①：IA➝Logic flow➝Wireframe
設計流程簡介 (2:21)
IA 資訊架構 (5:32)
Functional Map 功能地圖 (5:14)
Logic Flow 操作邏輯流程 (5:02)
Wireframe 線框稿 (5:06)
設計流程②：設計精稿與標註文件
Grid System 網格系統 (3:46)
Atomic Design 原子設計 (2:11)
從原子設計學習介面的常見元件
Buttons 按鈕 (5:43)
States 物件狀態 (5:30)
Input 輸入格 (7:36)
Radio Buttons & Checkbox 單選按鈕與複選框 (2:15)
Links 連結 (2:06)
Icon 圖示 (5:40)
Text 文字 (8:46)
Color 色彩 (4:20)
設計師常會忽略的通用設計（Accessibility） (3:27)
【小練習】挑選達到 AA 級的色彩
原子設計第二階段：分子
Navigation 導覽元件 (6:43)
Accordions 折疊面板 (1:44)
Tooltips 提示工具 (1:53)
Card 卡片 (3:45)
Modal 互動視窗 (2:52)
Alert 警告訊息 (2:21)
Data Table 資料表 (2:37)
Form 表單 (8:43)
C.R.A.P. 四個幫助你優化介面的設計準則 (4:00)
【章節作業】換你試試看：優化表單設計
原子設計第三階段：組織
Header 頁首 (5:25)
Footer 頁尾 (5:12)
運用常見的介面版型排出好設計 (6:47)
原子設計第四階段：模板
Templates 模板 (6:01)
如何做出高轉換的著陸頁（Landing Page） (5:42)
行動版的介面優化：響應式排版（RWD） (6:27)
透過頁面的六種狀態提升使用者體驗 (7:47)
【章節作業】透過模板排出一個響應式登陸頁
原子設計第五階段：頁面
Pages 頁面 (8:06)
教你打造最流行的深色模式（Dark Theme） (7:27)
【小練習】套用深色模式
與工程師協作的必要文件
一定要做設計規範嗎？ (4:44)
【免費資源】Wireframe UI Kit
切圖命名與格式 (4:55)
Spec 設計標注檔 (1:34)
設計流程③：Prototype 高擬真原型製作
原型設計的種類與技巧 (6:54)
【章節作業】製作你的第一份設計精稿-1 (3:46)
【章節作業】製作你的第一份設計精稿-2
情境模擬：工程師現身說法（feat. 六角學院校長洧杰）
Ｑ1：繪製的設計稿被說功能太難做不出來 (6:00)
Ｑ2：如何協助設計師提供可執行的設計稿 (6:46)
Ｑ3：如何跟工程師溝通有互動效果的介面 (8:59)
Ｑ4：工程師對間距等設計細節不太在意 (7:44)
Ｑ5：設計師需要學前端技術嗎？ (8:21)
Ｑ6：專案協作上的常見問題 (4:32)
實戰演練：電商網站設計專案
【小提醒】最終作業的設計細節
電商網站的設計細節 (9:21)
【小練習】主題發想
步驟 ①：User Story Mapping 使用者故事對照 (2:10)
【小練習】撰寫使用者故事對照
步驟 ②：Flow Chart 流程圖 (1:13)
【小練習】新增功能流程
步驟 ③：UI Flow 介面流程圖 (1:15)
【階段作業】接續完成 UI Flow
步驟 ④：Wireframe 線框稿 (1:31)
【階段作業】繪製響應式線框稿
步驟 ⑤：Mockup 設計精稿 (1:31)
【階段作業】完成設計精稿
步驟 ⑥：Prototype 原型設計 (0:55)
【階段作業】製作高擬真原型
步驟 ⑦：Bēhance 作品整理技巧 (6:05)
【最終作業】透過 Bēhance 展示你的作品
前往職場：設計師面試技巧
【小提醒】共筆文件
設計師這樣面試就對了 (上)
設計師這樣面試就對了 (下)
Form 表單
課程內容未解鎖
如果您已經購買此課程，
請您重新登入後再查看
.
購買本課程