UI 設計入門:畫出有程式邏輯的設計稿
4.3 (4 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
24 students enrolled

UI 設計入門:畫出有程式邏輯的設計稿

這門課程將會帶你完整跑過一次設計流程,從設計準則、常用版型、元件繪製觀念到與工程師協作,並將理論導入實作,完成自己的作品。
Bestseller
4.3 (4 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
24 students enrolled
Price: $64.99
30-Day Money-Back Guarantee
This course includes
  • 4.5 hours on-demand video
  • 16 articles
  • 7 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • 了解 UI 介面設計師的工作範疇
  • 掌握 UI 介面設計的實務知識
  • 如何繪製有程式邏輯的設計稿
  • 設計屬於自己的電商網站作品
Requirements
  • 最好需要會操作任一套介面繪圖軟體(e.g. Adobe XD)
Description

這門線上課程將會帶你完整跑過一次設計流程,讓你了解在每個流程當中需要產出什麼樣的文件或內容。課程還會提供常見的排版版型,並且運用一些設計準則讓排版更加靈活。此外更透過原子設計與 Google Material Design 等設計規範來介紹 UI 元件的正確繪製觀念,並會對應程式碼的撰寫方式,讓你繪製出有程式邏輯的設計稿,與工程師的協作更加流暢。這門線上課程最後還規劃了一個電商網站的最終作業,讓你不用擔心只學到理論卻沒有實作作品!

Who this course is for:
  • 對 UI 設計有興趣
  • 想要轉職成為 UI 介面設計師
  • 想要複習基礎知識的 UI 介面設計師
Course content
Expand all 74 lectures 04:49:35
+ 介紹
3 lectures 01:33
六角學院線上學員社團
00:32
免費作業上傳空間
00:15
+ 基本概念
4 lectures 26:19
開發流程與設計思考
07:03
介面設計相關的設計師
09:00
初學者必看的設計規範
07:30
+ 設計流程①:IA➝Logic flow➝Wireframe
5 lectures 23:15
設計流程簡介
02:21
IA 資訊架構
05:32
Functional Map 功能地圖
05:14
Logic Flow 操作邏輯流程
05:02
Wireframe 線框稿
05:06
+ 從原子設計學習介面的常見元件
10 lectures 45:28
States 物件狀態
05:30
Input 輸入格
07:36
Radio Buttons & Checkbox 單選按鈕與複選框
02:15
Links 連結
02:06
Icon 圖示
05:40
Text 文字
08:47
Color 色彩
04:20
設計師常會忽略的通用設計(Accessibility)
03:27
【小練習】挑選達到 AA 級的色彩
00:04
+ 原子設計第二階段:分子
10 lectures 35:05
Navigation 導覽元件
06:43
Accordions 折疊面板
01:44
Tooltips 提示工具
01:53
Card 卡片
03:45
Modal 互動視窗
02:52
Alert 警告訊息
02:21
Data Table 資料表
02:37
Form 表單
08:43
C.R.A.P. 四個幫助你優化介面的設計準則
04:00
【章節作業】換你試試看:優化表單設計
00:27
+ 原子設計第三階段:組織
3 lectures 17:24
Header 頁首
05:25
Footer 頁尾
05:12
運用常見的介面版型排出好設計
06:47
+ 原子設計第四階段:模板
5 lectures 26:02
Templates 模板
06:01
如何做出高轉換的著陸頁(Landing Page)
05:42
行動版的介面優化:響應式排版(RWD)
06:27
透過頁面的六種狀態提升使用者體驗
07:47
【章節作業】透過模板排出一個響應式登陸頁
00:05
+ 原子設計第五階段:頁面
3 lectures 15:35
Pages 頁面
08:06
教你打造最流行的深色模式(Dark Theme)
07:27
【小練習】套用深色模式
00:02
+ 與工程師協作的必要文件
4 lectures 11:22
一定要做設計規範嗎?
04:44
【免費資源】Wireframe UI Kit
00:09
切圖命名與格式
04:55
Spec 設計標注檔
01:34