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 Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Meditation Personal Transformation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native 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 Google Analytics
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Modeling Data Analysis Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing 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 Tools Adobe XD

Adobe XD:網頁設計真容易

學會使用 Adobe XD 繪製屬於自己的網頁設計稿
Rating: 4.7 out of 54.7 (169 ratings)
730 students
Created by 卡斯伯 六角學院, 吳俊儀 JUNIOR, 廖洧杰 liao, 六角 學院, 六角助教 六角學院
Last updated 11/2020
Traditional Chinese
30-Day Money-Back Guarantee

What you'll learn

  • 認識 Adobe XD 這套軟體,並學會基本操作
  • 能夠使用 Adobe XD 完成一個網頁設計稿
  • 了解如何繪製網頁設計稿的基本概念

Requirements

  • Adobe XD CC
  • 作業系統最低需求:Windows 10 Version 1703 / macOS X v10.12 以上

Description

Adobe Experience Design(Adobe XD)是一套專門設計給 UI 介面設計的繪圖軟體。不僅與 Adobe 其他軟體的相容性高(Ai、Ps、Ae),只透過 Adobe XD 就能完成設計、原型、溝通等多項工作,更有免費版本可以使用;絕對是入門網頁設計專業軟體的第一選擇!

本課程共分成六個單元,將一步步帶領學員從操作到實作,進而體會 Adobe XD 這套軟體的強大之處,也會搭配隨堂練習來溫習各個章節學到的知識。此外,還會講解設計上的基本知識以及實務心法,儘管從來沒有接觸過設計,也能獨自規劃出一份邏輯滿分的網頁設計稿。現在,就開始一起學習 Adobe XD 吧!

Who this course is for:

  • 有繪製網頁設計稿需求,卻不會使用專業軟體
  • 想要學習如何使用 Adobe XD 來繪製網頁設計稿

Course content

7 sections • 69 lectures • 4h 40m total length

  • 六角學院線上學員社團
    00:32
  • Preview03:07
  • Adobe XD 安裝流程
    00:28
  • Preview01:59
  • 將 Adobe XD 更換成中文介面
    00:28
  • 免費作業上傳空間
    00:16
  • Adobe XD 繁中詞彙與熱鍵表
    00:08
  • Preview00:15

  • Preview03:15
  • RGB 與 CMYK
    02:25
  • 解析度
    02:28
  • 網頁設計與平面設計的差異
    04:23
  • 字體介紹:襯線、無襯線
    06:34

  • Preview06:15
  • 【小提醒】別忘了課後小練習
    00:14
  • Artboard:畫布工具
    04:11
  • Appearance:物件外觀樣式
    08:45
  • Polygon:多邊形工具
    02:30
  • 操作技巧與控制鍵
    09:17
  • Pen:鋼筆工具與貝茲曲線
    08:13
  • Text:文字工具
    07:03
  • Group & Layer:群組與圖層
    09:51
  • Align & Boolean:對齊與布林運算
    06:17
  • Stack & Padding:堆疊與內間距
    04:47
  • Import & Mask:圖片匯入與遮色片
    09:54
  • Blend Mode:色彩混合模式
    01:56
  • Cloud Document:雲端檔案
    02:21
  • 【章節作業】使用 Adobe XD 小試身手
    04:46
  • 【小提醒】章節作業繳交
    00:20

  • Preview08:17
  • 在 Adobe XD 上使用格線系統
    06:12
  • 使用格線設計響應式網頁
    04:14
  • Repeat Grid - 格線化複製
    06:09
  • 設定屬於網頁的規範:資產庫介紹
    13:52
  • 官方資源運用
    05:57
  • 外部連結的圖樣
    06:00
  • 使用現成的圖示資源
    02:59
  • Adobe XD 插件介紹
    02:25
  • 【章節作業】製作你的設計規範
    01:14
  • 章節作業說明
    00:17

  • PNG、JPG 與 SVG 的運用
    05:28
  • 【小提醒】別忘了課後小練習
    00:09
  • Export:圖片匯出設定
    05:26
  • Design Specs:設計標注檔
    05:41
  • Share:匯出模式
    02:47
  • Prototype:原型設計(上)
    07:31
  • Prototype:原型設計(中)
    05:28
  • Prototype:原型設計(下)
    05:01
  • Scroll Groups:滾動群組
    03:05
  • Design Review:線上原型互動連結
    03:09
  • 【章節作業】匯出你的設計稿
    01:20
  • 【小提醒】章節作業繳交
    00:26

  • 章節介紹
    00:09
  • Preview08:43
  • 字體的運用概念
    04:47
  • Preview05:09
  • Preview05:09
  • Preview04:16

  • 本章節目標說明
    00:37
  • 課程範例說明
    00:35
  • 透過 User Story、網站地圖、單色稿規劃設計方向
    10:34
  • User Story 撰寫示範
    07:07
  • 段落作業:User Story 及 網站地圖
    00:47
  • 選出一個主色,並找出延伸色彩
    03:59
  • 段落作業:單色稿
    07:29
  • 單色稿設計細節說明
    00:38
  • 章節最終作業:完稿設計
    03:17
  • 完稿作業
    00:29
  • 接下來還可以做什麼:向全世界展示你的個人作品!
    00:45

Instructors

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

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

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

吳俊儀 JUNIOR
設計師@六角學院
吳俊儀 JUNIOR
  • 4.5 Instructor Rating
  • 182 Reviews
  • 760 Students
  • 2 Courses

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

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

廖洧杰 liao
前端工程師
廖洧杰 liao
  • 4.7 Instructor Rating
  • 11,215 Reviews
  • 22,351 Students
  • 20 Courses

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

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


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

 

六角 學院
Udemy 台灣合作夥伴
六角 學院
  • 4.7 Instructor Rating
  • 11,215 Reviews
  • 22,350 Students
  • 20 Courses

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

我們承諾以下事項:

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


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

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

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

  • 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.