Turn what you know into an opportunity and reach millions around the world.

Your cart is empty.

從 Adobe XD 入門網頁設計

取得學習 UI 介面設計的敲門磚！

Highest Rated

Created byRiven 林育正

Last updated 7/2018

Chinese (Traditional)

What you'll learn

習得基礎電腦繪圖，並可以自己繪製 icon、圖像等
練習自己做一套網頁的 Wireframe 線框稿
知道怎麼運用數位工具，找到適合專案的圖庫、字體、插圖⋯，等等
快速上手 Adobe XD 軟體操作
學習過程中有問題隨時討論
實際設計一套網頁的 Prototype 設計稿原型並可進行互動
取得 UI/UX設計的入門磚！

Course content

5 sections • 36 lectures • 3h 27m total length

Adobe XD 介紹8:55
Adobe XD 課程概要6:19
關於我與章節介紹
這是一門會根據使用者回饋而迭代的線上課程1:04
這個影片是在我們 Monospace共同工作空間拍攝。

哈囉，我是Riven
「從 Adobe XD 入門網頁設計」是一門新手友善的線上課程，透過 XD 讓大家取得 UI/UX 的入門磚。

我們會從基本的軟體操作開始，並透過實際製作一套 Wireframe 線框稿，更了解網頁的規劃過程；
最後則是手把手地帶領大家做出原型 Prototype，是個可互動的高還原度擬真原型。

阿對了，這門課是終生授權，任何人可以重複觀看，除此之外，這也是一堂 "會呼吸的" 線上課程，
也就是會針對使用者、你們的意見回饋，進行迭代去新增額外的課程內容。
還有Adobe 官方啊，如果對XD有新的功能發布，我也會整理之後重新上傳到這裡讓大家觀看。
時不時地還會收到新的專案實際操作影片通知，直接讓大家瞭解一般業界的設計工作流程。
產品開發歷史、一般開發流程(瀑布流)與精實開發流程16:04

Artboard 畫布介紹3:18
萬事起頭難，讓我們鼓起勇氣打開XD 進行我們的第一步：創建新檔與新增Artboard(畫布)
形狀、大小與縮放2:31
在Adobe XD 裡面建置基本形狀與調整其大小。
顏色與 Assets運用7:09
幫物件上色、設定漸層與基本 Assets運用。
高手都用快捷鍵！3:05
鋼筆與貝茲曲線4:27
施放文字與 Character Assets1:20
XD的特殊功能：Repeat Gird2:18
置入 Illustrator/Sketch與外部圖片、高斯模糊效果2:56
案例練習 -- Social icon4:32
來畫一隻小叮噹吧！從塗鴉開始2:00
大魔王：小叮噹登場

【規劃 Wireframe 線框稿】前導1:07
如何使用 Wireframe Kit7:06
製作Menu選單線框稿以及 Symbol的基本運用10:54
放置預設圖以及假文假字 Lorem ipsum4:03
製作部落格(Blog) 區塊線框稿、Repeat Grid的基本運用7:17
聊聊 Webfont 網頁字體5:51
科普Noto Sans CJK TC 思源黑
專案實作 -- 會員註冊流程《使用者登入畫面》8:12
專案實作 -- 會員註冊流程《個人資料填寫》9:38
專案實作 -- 會員註冊流程《方案選擇》4:06
專案實作 -- 會員註冊流程《付款方式》0:42
專案實作 -- 會員註冊流程《互動模型》5:28
作業 -- 製作 Wireframe 線框稿5:28
任意自訂的主題 Wireframe 導出Link，並貼到這支影片的問與答討論區。

Requirements

具備 Windows 10 的PC電腦或 MacBook
願意隨時發問討論及積極學習的心態
完全沒基礎也可以看得懂，新手友善！

Description

初學者友善！跟著這門線上課程練習，你將很快的上手軟體工具、了解設計概念並嘗試創作作品。講者將帶領你繞過那些自學的冤枉路，用有效率且系統化的方法學習，取得 UI/UX設計的敲門磚。

每一位參與的學員都將進入課後交流的臉書社團，任何問題都可以在上面進行討論，當然，你也可以透過線上問答取得我們的協助 :)

並且，這是一堂會根據使用者(學員) 的反饋持續迭代的課程，若對於目前的內容有任何想法，可以隨時跟我說，將進行內容的追加；不定期的新增專案示範，讓大家可以持續加溫學習熱度。

同時，也會根據Adobe XD官方釋出的改版、與最新功能進行影片整理新增上來，購買一次，終生學習。

--

設計界佔有一席之地的的軟體公司Adobe 在2018年 5/16 日宣佈推出Adobe XD CC起步方案(Adobe XD CC Stater Plan)，免費提供全面整合的UX／UI設計平台。

Adobe XD成為目前唯一結合設計、建立原型功能與提供工業級效能的跨平台體驗設計平台，且能夠整合設計師的現有工作流程及Photoshop CC和Illustrator CC等工具。

【從 Adobe XD 入門網頁設計】課程大綱

第一章節「UI/UX設計概論」：讓我們先來了解為什麼要做 UI/UX設計，從數位產品的開發歷史到現在一般的網頁設計架設有哪些不同之處。

第二章節「Adobe XD入門工作坊」：還沒有用過 Illustrator 、 Sketch 的同學可以在這裡對介面設計軟體有基礎認識。

第三章節「規劃 Wireframe 線框稿」：運用入門技巧來實際進行線框稿 (Wireframe) 的製作，並在其中帶到設計實務上需要注意的項目。

第四章節「製作 Prototyping 原型」：到了這裡你可以製作真正 UI 設計稿畫面，並同樣透過專案的方式，理解商業專案中可能會遇到的挑戰。

完成之後邀請你一起在我們的社群中一塊挑戰 Daily UI Challenge，透過每天不同的題目練習，持續精進自己的UI設計能力。

Who this course is for:

對 UI/UX 設計領域有興趣，想了解更多。
文組生、非相關科系想了解數位產品設計產業。
先前因為沒有 Macbook 而差點放棄 UI Design 的你。
沒時間慢慢爬文學習 Adobe XD。
懶得自己摸索新介面設計軟體。
想學習如何進行網頁設計。