課程組合優惠

<%:data.pce_name%>

[包含 <%:data.courses.length%> 堂課程]

<%for data.courses%>

<%/for%>

組合優惠 <%:~currency(data.bundle_price,'NT')%>

額外省下 <%:~currency(data.discount,'NT')%>

優惠活動

課程介紹

「如果你也聽說～ UI/UX到底是什麼呢？」

UI (User Interface) 是設計「使用者直接接觸與使用」的介面，包含視覺配置、內容排版等，跟平面設計最大的差別是具備要可以被操作，並藉由互動產生良好的 UX (User Experience)體驗。而UX (User Experience) 是設計使用者整體操作的感受，從整體流程規劃到資訊架構編制，就像是規劃一場完美的求婚：「她(使用者)說好，就好。」
這門課程的目標是讓你成為一名略懂 UX 觀念的 UI 設計師，是在開發團隊中佔有地位且業界渴求的人設啊！

「Adobe Xd」是⋯⋯

Adobe 軍團最新推出的 UI/UX設計工具，徹底整合以往僅用 Illustrator、Photoshop 的設計流程，你可以在 Ai 畫好插圖後複製貼上到 Xd，也可以直接打開 .ps 檔案，更酷的是日漸強大的 Adobe Xd 現在還可以將設計稿直輸到 After Effects 做動態介面設計。

除此之外，支援全球設計師通用的原型設計軟體 ProtoPie、標註協作工具 Zeplin等，使用擴充外掛更可搭配 Google Sheet、Microsoft Teams及 Slack 等生產力工具，提升團隊協作效力。

漫談成為UI設計師，你必須知道的事

由於工作關係，接觸到許多想轉職進入 UI/UX產業的同學，熱心的 Riven 雖然都能慢慢回答，但總覺得少了個系統性的解答，因此撰寫了「介面設計師轉職之路」的文章，細數職場 UI 設計師所需要點的技能途徑，並附上相當多的參考乾貨，這篇文章吸引到相當多的迴響，也間接成為這門課程開立的契機。

學習成果｜網站專案的UI設計

這堂課裡，Riven將會帶你一步步規劃、設計出一份「品牌形象網站」的介面設計開始，完整分享專案設計過程與可利用資源，若募資人數達標則再開放三種延伸的進階網站專案類型，從中學習業界的設計流程與思考方式。

並且，除了這幾次練習專案中的作品，也能習得在開發團隊中的定位、協作技巧，我們會協助你找到 Side Project 練習機會，並且提供學員商業接案與職缺媒合的資源，從線上學習到下線轉職虛實連貫。

更完整的課綱資訊在這裡：https://www.yottau.com.tw/course/intro/722#chapters

Riven 在 Medium 上常撰寫 UI/UX介面設計相關文章，僅限定平台 Premium會員閱讀，凡購買本課程的學員們將會收到無料觀看的連結通知，持續透過中文且整理過的資訊，學習精進。

為了提高學習效率，Riven 會在課程上製作簡單易懂的教學懶人包，像是設計可以幫助記憶快捷鍵的 Adobe Xd 快捷鍵盤，所有特製內容會贈送給每位參與的學員。

還在走傳統的瀑布流的開發流程嗎？結合精實UX的設計方法與敏捷式開發，從零開始示範數個設計專案，帶給你最新的業界設計流程。

2018年10月至12月，Riven 與 Adobe 台灣官方合作，以每週一次的互動聊天直播方式，推廣 Adobe Xd 這項神器給更多人認識，邀請大家一同加入討論。

2018年，Riven 發起「Daily UI 100天練習生」挑戰計畫，累積參與人數已經超過 500名。對於想要入門做 UI/UX 設計的朋友來說，每日挑戰是一個很好的練習方式，不僅快速累積作品集，更能考驗你是否有踏入產業的決心與毅力。

為了能更有效地凝聚中文 Adobe Xd 使用者社群，Riven 創立了「Adobe Xd 練功坊」社團，嘗試建起完全新手友善的環境，讓大家可以在這裡自由發文及交流，目前正以每週超過 100人加入的速度快速成長中！

常見問題

Q1.上課前需具備的程度/能力：

本次課程會使用的軟體為Adobe Experience Design (Adobe Xd)，歡迎沒有基礎的同學於課程內跟著老師的教學，從基本常用工具開始熟悉！（若有 Adobe Illustrator 、 Photoshop等繪圖軟體操作經驗將加速軟體學習！）

Adobe Xd 官方免費載點

Q2.募資預購時間到什麼時候？

此課程預購期已結束，課程已經上線囉！

Q3.這門課什麼時候開始上課？

若募資成功後，我們預計將分三階段上架課程！

第一批上架：2019/01/30 (三)

第二批上架：2019/03/13 (三)

第三批上架：2019/03/27 (三)

實際開課日若有調整，將會在「課程公告區」提醒大家！

Q4.這門課可以看多久？

開課後，即可使用電腦、手機及平板登入上線上課，不用受到上課時間及地點的限制，皆可無限次數重複觀看課程內容。

Q5.可以問老師問題嗎？

當然！歡迎到「購課問答」詢問；當學習遇到問題時，也歡迎到「課程討論區」與老師同學一同互動。

Q6.我要如何購買課程呢？

非常的簡單！點擊「立即購買」的字樣，就可以成為本堂線上課程的其中一位學員！

Q7.目前有哪些付款方式呢？

YOTTA 目前提供線上刷卡、ATM 轉帳及超商付款三種付款方式。

Q8.為什麼我已經付款了，訂單狀態仍顯示未付款？

金流處理時間需等候5-15分鐘，待金流完成入帳後，系統中訂單狀態將會從「未付款」轉變顯示為「已付款」。

Q9.請問什麼時候會收到發票？

購買課程完成繳費後，電子發票會在收到銀行端入帳通知後三天內開立，並透過您註冊的 E-mail 寄送給您。

Q10.我還有其他問題！

歡迎至常見問答 FAQ 頁面看看，或是透過聯絡我們與我們聯繫！

0
學員 0 人
永久觀看
10 章節
64 單元
7 小時
2 分鐘 422 分鐘
38 份
教材 38 教材
1 份
作業 1 作業

已上架 64 單元

零、業界設計師聊天室

3 單元・0 小時 6 分鐘
1 具備UX思維 × Ani 試看 02:13
2 如何轉職 UI 設計師 × Rei 試看 02:16
3 熟悉工具後朝著目標努力練習 × Augus 試看 02:15
一、踏上介面設計師轉職之路

5 單元・0 小時 20 分鐘
4 關於數位產品設計與開發 03:41
5 談談所謂的 UI/UX 設計 04:17
6 設計專案的團隊組成 03:06
7 UI 介面設計師的角色定位 03:12
8 轉職到UI設計師，需要哪些準備？ 06:36
二、先別急著畫！進行專案之前的前置準備

6 單元・0 小時 10 分鐘
9 團隊協作的分工與執行時間軸 01:10
10 專案設計流程 (1) UX前置研究作業 01:48
11 專案設計流程 (2) 更適合設計師的流程圖 01:56
12 專案設計流程 (3) 用線框稿接續設計 01:17
13 專案設計流程 (4) UI設計到製作原型 02:35
14 專案設計流程 (5) 設計稿交付與標註 01:22
三、躺著輕鬆入門 Adobe Xd

13 單元・1 小時 28 分鐘
15 6分鐘上手 Adobe Xd 試看 06:11
16 Adobe Xd 軟體介面教學 06:08
17 規劃線框草稿 Wireframe 02:20
18 實作線框草稿 Wireframe (1) 11:17
19 實作線框草稿 Wireframe (2) 18:55
20 實作線框草稿 Wireframe (3) 11:48
21 使用者瀏覽網頁的3種路徑 05:56
22 Header 主選單的常見設計手法 03:06
23 Hero Banner 搭配全螢幕大圖 02:29
24 神奇圓角所傳達的介面設計語言 09:37
25 練習和諧地使用圓角 03:14
26 Z字動線與 1/2 排法 06:52
27 熟記 Adobe Xd 快捷鍵盤 01:04
四、美美Der ~ 使用者介面上的視覺設計

11 單元・0 小時 53 分鐘
28 圖片置入與剪裁遮色片 02:02
29 遠看朦朧美的高斯模糊 01:49
30 基礎漸層練習(1)黑白 03:34
31 基礎漸層練習(2)多色 08:19
32 介面設計上的配色技巧(1)色彩 04:12
33 介面設計上的配色技巧(2) 漸層 04:59
34 運用漸層繪製插圖(1) 背景 07:05
35 運用漸層繪製插圖(2) icon 08:13
36 插圖素材蒐集與重鑄 03:29
37 別怕字壓圖！實用的3個設計訣竅 03:11
38 介面設計上的通用設計法則 06:07
五、魔鬼藏在細節裡！內容文字資訊的處理

5 單元・0 小時 24 分鐘
39 高下立判！字的段落間距、行距排版最佳分配 06:08
40 質感提升！聊聊中文的網頁雲端字體 Webfont 選擇 03:17
41 默默花很多時間的字體選擇、字重與字級調配 02:55
42 字體的無障礙對比度 02:23
43 匯入 Google 試算表真實資料到 Adobe Xd 10:14
六、成為人見人愛的設計師 ♡(ŐωŐ人)

4 單元・0 小時 16 分鐘
44 設計稿切圖命名習慣養成 05:13
45 導出標註 spec 設計稿 03:12
46 導出Zeplin 工具進行設計稿交付 02:52
47 設計師們都該懂的版本控制 05:38
七、完熟收成！製作高擬真原型 Prototype

7 單元・1 小時 29 分鐘
48 介面設計裏的資訊架構 (IA) 06:31
49 Adobe Xd 內建 Prototype 原型 05:28
50 微動態 Auto-Animate 做動畫 31:58
51 在線上就可以做！Marvel app 介紹 10:26
52 Prototype User Testing 原型測試 05:22
53 從 Adobe Xd 轉到 Ae 做動態介面設計 14:22
54 屢獲國際大獎的 ProtoPie 原型製作 14:58
八、轉職之路最終章

7 單元・1 小時 2 分鐘
55 使用 Eagle 進行靈感蒐集(Moodboard) 07:12
56 製作 UI/UX 專案作品集 — 述說設計脈絡 09:48
57 如何找到好工作與職缺要求釋讀 22:37
58 透過 Daily UI 與 Side Project 累積作品 08:03
59 合成看起來很厲害的 UI Mockup 04:06
60 設計師的 Medium 閱讀與寫作 05:58
61 參加實體設計社群活動 05:04
九、解鎖課程

3 單元・0 小時 48 分鐘
62 「課堂練習」UI 設計專案－活動場地租賃平台（無字幕） 05:37
63 「課堂練習」UI 設計專案－EC電商購物型網站（無字幕） 38:54
64 「課堂練習」UI 設計專案－多國語系職缺媒合網站（無字幕） 04:05

作業觀摩

<%if data.rows.length > 0 %>

<%props data.rows%>

作業 <%>~toInt(key) + 1%> <%:prop.title%>

<%if prop.rows.length > 0 %>

<%:~loadTmpl('homework-card2', prop.rows)%>

<%/if%>

<%if prop.rows.length > 0 && prop.total_page > 1%>

<%/if%>

<%/props%>

<%if data.total_page > 1%>

<%/if%> <%else%>

目前沒有出作業唷！

<%/if%>

<%if data.rows.length > 0 %> <%props data.rows%>

作業 <%>~toInt(key) + 1 + ~toInt(prop.pageNow)%> <%:prop.title%>

<%if prop.rows.length > 0 %>

<%:~loadTmpl('homework-card2', prop.rows)%>

<%/if%>

<%if prop.rows.length > 0 && prop.total_page > 1%>

<%/if%>

<%/props%> <%/if%>

<%props data%>

<%if prop.type == 'image'%><%if prop.cover %>

<%:~isGif(prop.cover)%>

<%else%>

<%/if%><%else prop.type == 'pdf' %>

<%else prop.type == 'youtube' %>

<%else prop.type == 'ppt' %>

<%else prop.type == 'sound' %>

<%/if%>

<%if prop.visible == 1 %><%/if %>

<%:~formatDate(prop.create, 'YYYY-MM-DD')%>

<%:prop.title%>

<%:prop.user%>

<%if prop.isAuthor == true %>刪除編輯<%/if %>

<%:prop.comment_count%> 則討論

<%/props%>

<%props data%>

<%:prop.user%>

<%if prop.visible == 1 %><%/if %>

<%if prop.type == 'image'%><%if prop.cover %>

<%:~isGif(prop.cover)%>

<%else%>

<%/if%><%else prop.type == 'pdf' %>

<%else prop.type == 'youtube' %>

<%else prop.type == 'ppt' %>

<%else prop.type == 'sound' %>

<%/if%>

<%:~formatDate(prop.create, 'YYYY-MM-DD')%>

<%:prop.title%>

<%if prop.isAuthor == true %>刪除編輯<%/if %>

<%:prop.comment_count%> 則討論

<%/props%>

錄音 <%:~numToZH(sort + 1)%>

來關注最新的課程資訊吧！

這裡是專屬課程的公告區，老師將在此發佈與課程相關的重要資訊，你可以查看所有與課程有關的最新公告。

目前沒有任何公告唷

<%props data%>

<%:~formatDate(prop.publishDate, 'YYYY/MM/DD')%>

<%:prop.title%>

<%if ~root.isStudent === false && ~root.isTeacher === false && prop.permission === 'private' %>

本篇公告內容僅限定購課學員閱讀唷！

<%else%> <%:prop.content%> <%/if%>

<%/props%> <%if total_page > page + 1%>

<%/if%>

課程類別

Adobe Xd設計實務｜成為UI設計師的8項核心技能

優惠活動

課程介紹

常見問題

Q1.上課前需具備的程度/能力：

Q2.募資預購時間到什麼時候？

Q3.這門課什麼時候開始上課？

Q4.這門課可以看多久？

Q5.可以問老師問題嗎？

Q6.我要如何購買課程呢？

Q7.目前有哪些付款方式呢？

Q8.為什麼我已經付款了，訂單狀態仍顯示未付款？

Q9.請問什麼時候會收到發票？

Q10.我還有其他問題！

作業觀摩

來關注最新的課程資訊吧！

<%:~formatDate(prop.publishDate, 'YYYY/MM/DD')%>

<%:prop.title%>