「如果你也聽說~ 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.募資預購時間到什麼時候? 

這堂課在 2018/11/27 (二) ~ 2019/01/02 (三) 開放課程募資預購,募資期間購課優惠 $1,200 元 。 (01/03 (四) 起將恢復原價 $2,180元)

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

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

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

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

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

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

Q4.這門課可以看多久? 

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

Q5.可以問老師問題嗎?

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

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

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

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

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

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

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

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

當本堂課程募資達標後 10 天,電子發票將會透過 E-mail 方式寄送電子發票給您。

Q10. 我還有其他問題!

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

單元

56

課程總長

307分鐘

課堂測驗

尚無測驗

  • 零、業界設計師聊天室
  • 1 具備UX思維 × Ani 試看 02:13
  • 2 如何轉職 UI 設計師 × Rei 試看 02:16
  • 3 熟悉工具後朝著目標努力練習 × Augus 試看 02:15
  • 一、踏上介面設計師轉職之路
  • 4 關於數位產品設計與開發 試看 03:41
  • 5 談談所謂的 UI/UX 設計 試看 04:17
  • 6 設計專案的團隊組成 試看 03:06
  • 7 UI 介面設計師的角色定位 試看 03:12
  • 8 轉職到UI設計師,需要哪些準備 ? 試看 06:36
  • 二、先別急著畫!進行專案之前的前置準備
  • 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
  • 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 ~ 使用者介面上的視覺設計
  • 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:08
  • 39 質感提升!聊聊中文的網頁雲端字體 Webfont 選擇 試看 03:17
  • 40 默默花很多時間的字體選擇、字重與字級調配 試看 02:55
  • 41 字體的無障礙對比度 試看 02:23
  • 六、成為人見人愛的設計師 ♡(ŐωŐ人)
  • 42 設計稿切圖命名習慣養成 試看 05:13
  • 43 導出標註 spec 設計稿 試看 03:12
  • 44 導出Zeplin 工具進行設計稿交付 試看 02:52
  • 七、完熟收成!製作高擬真原型 Prototype
  • 45 介面設計裏的資訊架構 (IA) 試看 06:31
  • 46 Adobe Xd 內建 Prototype 原型 試看 05:28
  • 47 微動態 Auto-Animate 做動畫 試看 31:58
  • 48 在線上就可以做!Marvel app 介紹 試看 10:26
  • 49 Prototype User Testing 原型測試 試看 05:22
  • 八、轉職之路最終章
  • 50 使用 Eagle 進行靈感蒐集(Moodboard) 試看 07:12
  • 51 製作 UI/UX 專案作品集 — 述說設計脈絡 試看 09:48
  • 52 如何找到好工作與職缺要求釋讀 試看 22:37
  • 53 透過 Daily UI 與 Side Project 累積作品 試看 08:03
  • 九、解鎖課程
  • 54 (100人解鎖)UI設計專案全解析-活動場地租賃平台【課堂練習乙份】 試看  
  • 55 (300人解鎖)UI設計專案全解析-EC電商購物型網站【課堂練習乙份】 試看  
  • 56 (500人解鎖)UI設計專案全解析-多國語系職缺媒合網站【課堂練習乙份】 試看  

開始分享你的學習成果吧!

這裡是專屬於課堂學員及老師可以互動的作業區,學員們可以透過實際操作來複習課程中所學習到的內容,作業完成後只要簡單上傳到平台裡,就能得到更多老師的指點唷!同時,在這裡也可以觀摩其他學員的成果,一起來互相切磋吧!

<%if list.length == 0 %>

尚無作業

老師還沒有出作業唷!

<%else%> <%props list%>

作業<%>~numToZH(~toInt(key) + 1)%>

<%if prop.type == 'image' %> 圖片檔 <%else prop.type == 'pdf' %> picture_as_pdfPDF <%else prop.type == 'youtube' %> Youtube 影片連結 <%else prop.type == 'ppt' %> PowerPoint <%else prop.type == 'sound' %> 錄音檔 <%/if %>

<%:prop.title%>

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

作業觀摩

目前還沒有任何學員上傳作業喔!來當第一個吧~

<%props data%>

<%if prop.type == 'image' %> <%else prop.type == 'pdf' %> picture_as_pdf <%else prop.type == 'youtube' %> <%else prop.type == 'ppt' %> <%else prop.type == 'sound' %> <%/if %> 作業<%>~numToZH(~toInt(key) + 1)%> <%:prop.title%>

<%:~loadTmpl('homework-card', prop.rows)%>
<%/props%>
<%props data%>
<%if prop.type == 'image'%>
<%:~isGif(prop.cover)%>
<%else prop.type == 'pdf' %>
picture_as_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%>

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

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

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

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

尚無公告

老師還沒有發佈公告唷!

<%props data%>

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

<%:prop.title%>

<%:prop.content%>
<%/props%>

回頂端