Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA CompTIA Security+ Amazon AWS Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Design Design Thinking User Interface

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

這門課程將會帶你完整跑過一次設計流程,從設計準則、常用版型、元件繪製觀念到與工程師協作,並將理論導入實作,完成自己的作品。
Bestseller
Rating: 4.3 out of 54.3 (13 ratings)
47 students
Created by 卡斯伯 六角學院, 吳俊儀 JUNIOR, 廖洧杰 liao, 六角助教 六角學院, 六角 學院
Last updated 11/2020
Traditional Chinese
30-Day Money-Back Guarantee

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

14 sections • 78 lectures • 4h 51m total length

  • 六角學院線上學員社團
    00:32
  • Preview00:46
  • 免費作業上傳空間
    00:15

  • Preview02:46
  • 開發流程與設計思考
    07:03
  • 介面設計相關的設計師
    09:00
  • 初學者必看的設計規範
    07:30

  • 設計流程簡介
    02:21
  • IA 資訊架構
    05:32
  • Functional Map 功能地圖
    05:14
  • Logic Flow 操作邏輯流程
    05:02
  • Wireframe 線框稿
    05:06

  • Grid System 網格系統
    03:46
  • Preview02:11

  • Preview05:43
  • 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:08

  • 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

  • Header 頁首
    05:25
  • Footer 頁尾
    05:12
  • 運用常見的介面版型排出好設計
    06:47

  • Templates 模板
    06:01
  • 如何做出高轉換的著陸頁(Landing Page)
    05:42
  • 行動版的介面優化:響應式排版(RWD)
    06:27
  • 透過頁面的六種狀態提升使用者體驗
    07:47
  • 【章節作業】透過模板排出一個響應式登陸頁
    00:39

  • Pages 頁面
    08:06
  • 教你打造最流行的深色模式(Dark Theme)
    07:27
  • 【小練習】套用深色模式
    00:02

  • 一定要做設計規範嗎?
    04:44
  • 【免費資源】Wireframe UI Kit
    00:09
  • 切圖命名與格式
    04:55
  • Spec 設計標注檔
    01:34

Instructors

卡斯伯 六角學院
前端設計師、前端工程師
卡斯伯 六角學院
  • 4.6 Instructor Rating
  • 11,275 Reviews
  • 22,468 Students
  • 20 Courses

大家好,我是王志誠 (Casper),是由設計師轉為前端工程師,專長是視覺設計與前端整合、前端技術教育訓練、前端自動化,常用的工具、技術有 Sketch、Sass、Angular.js、Node.js、Gulp 等主流前端技術。

目前是高雄前端社群的核心成員,高雄前端社群除了會有中型的交流會、Workshop以外,還會舉辦 CSS 讀書會(每月1~2次),如果對 前端、CSS 有興趣,歡迎追蹤 FB / 高雄前端社群,將可以看到我們的活動。

吳俊儀 JUNIOR
設計師@六角學院
吳俊儀 JUNIOR
  • 4.6 Instructor Rating
  • 185 Reviews
  • 765 Students
  • 2 Courses

嗨大家好,我是俊儀。畢業於台科設計,是極熊設計工作室的共同創辦人,現在則是六角學院的設計師。

擅長向量插畫、標準字設計、企業識別等平面設計相關技能。加入六角學院之後,也將專長拓展到了網頁設計。除了熟悉 Adobe Illustrator、Adobe XD 等繪圖軟體,也會使用如 Bootstrap 4 等網頁框架。雙棲於設計與前端兩個領域,希望能透過不同的觀點,去詮釋理想的網頁設計。

廖洧杰 liao
前端工程師
廖洧杰 liao
  • 4.6 Instructor Rating
  • 11,275 Reviews
  • 22,468 Students
  • 20 Courses

你好,我是六角學院的校長,洧杰。

我是熱愛分享與交流的前端工程師,目前專注於兼容桌面/移動網頁前端開發,期間已協助數百位平面設計師,網頁設計師導入標準網頁設計。


如果你有意成為網頁設計師,前端工程師,歡迎參考我們的課程,我們是六角學院,希望能帶領您進入程式領域,線上帶您學到會 :D

 

六角助教 六角學院
六角學院助教
六角助教 六角學院
  • 4.7 Instructor Rating
  • 10,377 Reviews
  • 22,427 Students
  • 18 Courses

六角學院 是一所線上程式開發學習單位,目前已累積超過 15,000 名學員,讓更多人藉由線上學習在職涯規劃上有更多的選擇是我們的使命是,如果您贊同我們的理念,歡迎加入六角。

我們將深入了解您想發展的領域,每位實習生我們都會量身打造專屬於您的舞台,並讓您實際瞭解公司營運 Know how。

六角 學院
Udemy 台灣合作夥伴
六角 學院
  • 4.6 Instructor Rating
  • 11,275 Reviews
  • 22,467 Students
  • 20 Courses

一次付費,終身複習 
隨著時代更新的線上數位教材
透過國際知名 Udemy 線上教育平台 
我們致力於優化程式教育的流程

我們承諾以下事項:

  • 一次付費,課程內容沒有期限
  • 課程內容更新,無需額外付費
  • 價格調整,已付費者不受影響
  • Udemy、Mail、Facebook 等各頻道發問一定會得到回答
  • 30 天內無條件退款


  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.