「如果你也聽說~ 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 快捷鍵盤,所有特製內容會贈送給每位參與的學員。

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 (二) ~ 2018/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 頁面看看,或是透過 聯絡我們 與我們聯繫!

單元

60

預計總長

300分鐘

預計測驗

5

  • 一、踏上介面設計師轉職之路
  • 1 數位產品開發的技能圖 試看  
  • 2 轉職到UI設計需要哪些準備 試看  
  • 3 關於數位產品設計與開發 試看  
  • 4 談談所謂的精實產品(Lean UX)開發 試看  
  • 5 UI 介面設計師的角色定位 試看  
  • 二、先別急著畫!進行專案之前的前置準備
  • 6 團隊協作的分工與執行時間軸 試看  
  • 7 分析客戶(主管)需求與風格判斷 試看  
  • 8 前期專案爬梳與素材彙整 試看  
  • 9 用 Moodboard 搜集風格靈感 試看  
  • 10 導讀 Google Material Design 設計規範 試看  
  • 三、躺著輕鬆入門 Adobe Xd
  • 11 5分鐘上手 Adobe Xd 試看  
  • 12 規劃線框草稿 Wireframe 試看  
  • 13 解析常見的內容段落配置 試看  
  • 14 Grid System 與 layout 配置 試看  
  • 15 採用一頁式 Landing Page 設計 試看  
  • 16 元件化設計 — 儲存 Assets 與 Symbol 運用 試看  
  • 17 Header 主選單的常見設計手法 試看  
  • 18 太多張圖就放照片輪播 Slider 試看  
  • 19 形狀圓角的使用時機 試看  
  • 20 使用鋼筆工具繪製 icon 與瞭解貝茲曲線 試看  
  • 21 善用 Xd 特殊功能 Repeat Grid 製作 Blog 貼文 試看  
  • 22 Footer 的用途與常見設計手法 試看  
  • 四、美美Der ~ 使用者介面上的視覺設計
  • 23 照片素材選用與後製 試看  
  • 24 插圖素材蒐集與重鑄 試看  
  • 25 介面設計上的漸層繪製與配色技巧 試看  
  • 26 別怕字壓圖!實用的3個設計訣竅 試看  
  • 27 遠看朦朧美的高斯模糊 試看  
  • 28 不會雷的11道陰影設定技巧 試看  
  • 29 成功養套殺的按鈕設計 試看  
  • 30 套版技巧是基本,用不用看你 試看  
  • 31 五種客戶(主管)常丟來的 Reference 拆解 試看  
  • 32 淺談粗野主義與簡約風格 試看  
  • 33 2019年網頁設計趨勢 試看  
  • 34 通靈客戶(主管)需求的翻譯蒟蒻 試看  
  • 五、魔鬼藏在細節裡!內容文字資訊的處理
  • 35 介面設計裏的資訊架構 (IA) 試看  
  • 36 高下立判!字的段落間距、行距排版最佳分配 試看  
  • 37 默默花很多時間的字體選擇、字重與字級調配 試看  
  • 38 質感提升!聊聊中文的網頁雲端字體 Webfont 選擇 試看  
  • 39 又不是金庸,做設計請字不要太多~ 試看  
  • 六、成為人見人愛的設計師 ♡(ŐωŐ人)
  • 40 進行設計稿標註與開發者協作觀念 試看  
  • 41 訂做專案設計 Syle Guide 試看  
  • 42 如何在 Adobe Xd 裏製作 RWD 響應式設計 試看  
  • 43 設計稿切圖命名習慣養成 試看  
  • 44 導出Zeplin 工具進行設計稿交付 試看  
  • 45 瞭解基本網頁程式構成與其限制 試看  
  • 46 Adobe Xd 實用外掛 Plugin 推薦 試看  
  • 七、完熟收成!製作高擬真原型 Prototype
  • 47 Adobe Xd 內建 Prototype 簡介【課堂練習乙份】 試看  
  • 48 微互動效果模擬之必要 試看  
  • 49 在線上就可以做!Marvel app 介紹 試看  
  • 50 屢獲國際大獎的 ProtoPie 原型製作 試看  
  • 51 運用 Adobe AE 與 Lottie 製作動態元素【課堂練習乙份】 試看  
  • 52 製作設計感 Mockup 試看  
  • 八、轉職之路最終章
  • 53 如何找到好工作與職缺要求釋讀 試看  
  • 54 透過 Daily UI 與 Side Project 累積作品 試看  
  • 55 設計社群參與及乾貨爬梳強化自己 試看  
  • 56 未來介面設計師的各種可能性 試看  
  • 57 遠端設計接案、合約報價與業界執行流程 試看  
  • 九、解鎖課程
  • 58 (100人解鎖)UI設計專案全解析-活動場地租賃平台【課堂練習乙份】 試看  
  • 59 (300人解鎖)UI設計專案全解析-EC電商購物型網站【課堂練習乙份】 試看  
  • 60 (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'%>
<%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%>

回頂端