UIUX設計實戰,用Figma打造第一個手機App! - 菜鳥救星
文章推薦指數: 80 %
課程採用直播教學,授課內容能與Figma同步更新,若有UIUX實務操作疑問,我也會即時解答,就讓 ... 圖說:實際走過專案設計流程,從需求訪談、wireframe流程、icon風格 ...
探索課程📚
💰如何付款
🤔如何上課
😏常見問答
關於菜鳥🐦
關於菜鳥救星
FB粉絲團
Youtube
Instagram
成為講師
海外購課💵
會員專區⚙️
購物登入
鳥窩(部落格)
加入LINE好友
雲端教室上課☁️
×
菜鳥救星x聯成電腦【雲端直播課】
"符合專案活動"
電腦學員0元免費上課。
📝活動專案內容:
即日起至2021/12/31購買商業視覺設計課程,可直接於聯成學員專區或聯成電腦line官方帳號:@lccnet登記上課。
或憑專業學習券,由分校安排上課。
菜鳥救星保有取消、終止、修改或暫停活動相關內容之權利,如有未盡事宜,悉依本公司相關規定或解釋辦理,並得隨時補充公告
詳細上課方式,請洽原報名分校詢問。
Copyright©【雲端直播課】服務平台由菜鳥救星規劃
菜鳥救星官方Line
│
ID:@rookiesavior
×
雙11學習狂歡節
一年一檔,全站課程$1,111元!
🛒活動時間:11/15,加碼最後一天!
🛒活動說明:
【學習狂歡,聰明花聰明省】
雙11最低價,全站課程$1,111元!錯過今年再等一年,用少少的預算,大大加值自我競爭力,菜鳥變老鳥,技能、興趣一次學會!
全站課程無情下殺,通通只要$1,111元
不限購買次數,買越多省越多
注意事項:
由於直播課程有時效性,如報名時已超過該課程時間,將以提供錄影檔替代。
菜鳥救星保有隨時修改及終止本活動之權利,如有任何變更內容或詳細注意事項將公布於本網頁,恕不另行通知。
想了解更多可加入菜鳥救星官方LINE將有專人為您服務喔!
菜鳥救星官方Line
│
ID:@rookiesavior
UI+UX直播實戰,一起用Figma打造你的第一個手機App!
Figma新手指南|UI/UX設計思維
課程時數18hr
開課日期2022/07/26(二)
上課時間19:00~21:00
優惠價
NT$3,600
NT$3,600
NT$7,200
馬上購買
課程簡介
課程內容
關於師資
常見問題
直播不是錄播:解決在線上學習遇到的缺點
我應該要學Figma嗎?
AppStore有將近200萬個App,軟體好壞高下立判,UI(UserInterface)使用者介面設計價格水漲船高。
Figma為UI設計的新興工具,近年更有許多大型企業導入作為主流UI設計工具,Figma優點眾多,不僅能跨系統操作、完善的協作功能更大幅減少團隊溝通成本、雲端備份讓資料不怕遺失,若你是UI設計新手,Figma是你的不二之選!
強大的協作功能,減少設計交付資訊落差,讓溝通更加順暢(來源)
UI設計師必須掌握設計界潮流,本課程完課將助你打好扎實基礎,不僅是學習Figma工具操作,課中也會分享業界UIUX觀念,讓你能將軟體實際運用到工作中。
隨著課程將手把手指導你,設計屬於自己的第一個手機App介面風格規範!
課程目標:重視溝通技巧的UIUX直播課程
UIUX工作除了設計本領外,著重「溝通」!這次與菜鳥救星合作的課程,除了基礎的操作外,也會教你分析優秀作品模仿設計,讓你能夠不斷提升自我設計力。
更加強實務上的溝通技巧,利用Figma的協作功能,清楚交付設計文件,有效提高效率。
課程採用直播教學,授課內容能與Figma同步更新,若有UIUX實務操作疑問,我也會即時解答,就讓我們一起開始UI設計的第一堂課吧!
分析優秀的設計風格以及元素
學習繪製icon及頁面插畫,提升基礎操作能力
掌握業界實務設計工作流程,以及團隊中各工作的交付技巧
制定合格的設計規範(designguideline),交付清楚明瞭的設計成品給工程師,提升團隊效率
透過UI設計優化產品,將成品Mockup成情境示意圖,有效刺激產品下載率!
圖說:實際走過專案設計流程,從需求訪談、wireframe流程、icon風格繪製、Mockup設計、Prototype原型到App成本情境示意圖,都會引導執行,從實作中加深印象!
圖說:優化產品UI,分析產品優劣,製作美觀設計
學習完後,你能獲得……
從五花八門的設計風格中,找出風格要素,並分析優劣,衍生於自己的產品中
掌握UI設計師的工作流程和細節,學會與前後端溝通的邏輯與注意事項
學會用AutoLayout來解決各種裝置尺寸不同的情況
學習闡述設計風格,應用於產品提案中,說服案主
累積UI設計作品集,取得進入UI領域的門票!
圖說:wireframe線框圖,功能導養設計,規劃最佳UX
課程大綱
07/26(二)第1堂課用Figma打造你的第一個UI介面吧!
學習目標:軟體操作練習單元(一)以現有App為例,實作中學習Figma基礎操作以及認識UI介面設計的入門知識
單元1:UI常用軟體介紹
單元2:操作介面簡介
單元3:新增物件
單元4:物件參數設定
單元5:物件色彩設定
單元6:物件對齊
單元7:文字工具
單元8:物件編輯工具
作業
繪製單一App畫面
07/28(四)第2堂課我的第一套Appicon繪製
學習目標:軟體操作練習單元(二)以常見的icon當作設計學習範例,進而了解icon的設計原則及嘗試應用
單元1:符號的設計原理簡介
單元2:icon在App中的功用說明
單元3:icon風格案例解析
單元4:物件編輯工具介紹-裁切、遮罩、縮放、旋轉
單元5:icon配色規則及套用
作業
icon系列稿繪製及配色練習
08/02(二)第3堂課用Figma繪製向量風插畫吧
學習目標:軟體操作練習單元(三)學會利用插畫讓產品更接近使用者
單元1:插畫風格解析
單元2:鋼筆工具介紹
單元3:遮罩工具介紹
單元4:模仿教學示範
作業
繪製一張插畫
08/04(四)第4堂課介面常用元素介紹
學習目標:熟悉fimga基本工具後,開始實作介面常用的元件,並瞭解元件的操作狀態
單元1:元件狀態介紹
單元2:命名規則介紹
單元3:元件設計實作
作業
完成課堂示範的元件
08/09(二)第5堂課設計風格的模仿與衍伸應用
學習目標:學會分析與建立產品的設計風格
單元1:設計風格解析
單元2:插入圖片及遮罩使用
單元3:學習模仿風格並應用
單元4:利用圖面表現設計理念及風格
作業
繪製三張風格畫面
08/11(四)第6堂課規劃一套完整的app流程
學習目標:學會規劃產品架構
單元1:wireframe、prototype介紹
單元2:介紹app案例並設計操作流程
單元3:UI/UX設計文件介紹
單元4:用figma做出wireframe及prototype
作業
製作一份Prototype
08/16(二)第7堂課如何使用figma管理你的設計文件
學習目標:設計文件交付入門課(一)學會管理設計檔案以及製作AutoLayout
單元1:Figma的component應用
單元2:constraints功能介紹
單元3:autolayout設計準則
單元4:app常用尺寸簡述
作業
完成課堂示範的autolayout範例
08/18(四)第8堂課用Figma與團隊進行有效率的溝通
學習目標:設計文件交付入門課(二)學會制訂規範並交付設計給工程師
單元1:component狀態及巢狀結構
單元2:介紹並製作designguideline
單元3:學習appflow繪製
單元4:檔案命名規範
單元5:切圖規範
作業
設計課堂示範案例的darkmode版本
08/23(二)第9堂課打造自己的設計作品集
學習目標:藉由參考案例,設計出屬於自己的作品集風格
單元1:作品集案例解析
單元2:產品合成方式
單元3:製作情境示意圖
單元4:設計資源分享
單元5:Q&A
作業
完成三張作品圖
誰適合學:非本科系也能會的UIUX課
Figma的線上協作功能,對於快速迭代的工作模式非常適合,無論你擔任什麼角色,都能更順暢且明確地完成溝通工作,近年更躍升為主流設計軟體,是設計人不可或缺的技能,歡迎所有對於UIUX設計有興趣的人一起加入我們!
課程優勢:打造UI+UX+App作品集,提升專業力
這堂課不只是單純的線上課程,我更希望有志同道合的夥伴,能一起在UIUX這條路激發出更多火花。
課程內會依照進度安排作業,大家也有機會觀摩其他人的作品,相互學習,老師也會批改作業,給予建議。
透過扎實的訓練,完課一定能做出高質量的App成品!
由淺入深的設計心法,扎實UI美感設計力。
豐富的業界實務分享,強化UX邏輯溝通力。
講師跨領域產品經驗,手把手打造第一個App。
UI+UX+App作品集,進入UI設計界不是夢想。
講師介紹:五罐老師
超過五年以上的介面設計經驗無論你有沒有接觸過UI設計,我都會用淺顯易懂的設計白話文解釋給你聽,我們課堂上見!
Q&A:學員們常見問題,都可在這邊找到解答
Q1.我沒有設計基礎也可以學習嗎?
可以的,這堂課就是專為設計初學者打造的入門課程,教授Figma軟體的同時,也會教介面設計的基本知識
Q2.課程上完我就能立即從事UI設計工作嗎?
課程中會引導同學走過一次UI設計工作的設計流程,可以拿到設計工作的入門門票,但還需要同學補足自己所缺乏的部分,製作更完整的作品集,才可增加面試時的錄取率喔!
Q3.我是工程師、產品經理、專案經理,也能上這一堂課嗎?
這門課程,除了想從事UI工作的學員之外,也歡迎工作中有需要與UI設計師合作的學員學習。
本課程可幫助同學了解Figma在團隊合作中的功用,並經由認識設計師工作流程,讓溝通更加順暢有效率!
Q4.上課前我需要先準備什麼?
需自備桌機、筆記型電腦,並於上課前申請Figma帳號
Q5.沒有軟體操作基礎可以報名上課嗎?
可以,具備Windows/Mac電腦基本操作即可。
Q6.使用Windows跟Mac作業系統會有差別嗎?
老師主要的教學環境為Mac視窗作業系統,Figma可以跨平台協作,介面相同不受作業系統影響喔!
Q7.軟體需要付費購買才能使用嗎?
Figma官方有提供免費初階方案,只要申請帳號即可使用,上課時的操作使用免費版本就足夠囉!若您個人使用有進階功能的需求再付費使用專業版。
Q8.課堂中要如何提問?
歡迎在課堂上隨時透過Zoom聊天室進行提問,也可以透過助教協助詢問,老師會撥時間於課堂上回答學員問題喔!
Q9.課堂作業的批改方式會如何進行?
老師會於下一次上課前批改學員作業,並給評語,同學可多加利用Figma的協作系統,在上面與老師互動
Q10.作業如果有問題要怎麼辦?要怎麼得到解答?
學員可以透過菜鳥救星官方LINE帳號提出您的問題,菜鳥救星會將問題轉達給老師,老師會視狀況直接回答或於課堂上統一回答喔!
Q11.這門課可以看多久?
每一堂線上直播課程,課後隔天18:00前都有提供直播課程錄影影片,可於線上無限觀看,讓您不怕漏掉任何一個細節,建議課後錄影檔要於下次課前自己重新複習一次,才比較好銜接上新的課程。
*推廣期間免費觀看,依專案不同,觀看期限可能有所調整,菜鳥救星保留修改權益之權利。
Q12.我還有其他問題想詢問?
歡迎至常見問答頁面查詢,或是加入line帳號:@rookiesavior,與我們聯絡喔!
Q13.如何購買課程呢?
點擊「前往報名」的按鈕,完成線上付款,就可以成為真人線上課程的學員囉!
注意事項
收到款項後,若不克參加申請退費,請參閱退費規則。
請於課前先準備好上課環境,本課程非講座,跟著實作才有好的學習成效。
請盡量完成每堂課的課後作業,做作業才能確定自己有吸收上課的內容,老師才能給你回饋。
程式是需要花時間演練的科目,課後一定要多練習做題目,才能把老師教學的內容內化成自己的知識。
菜鳥救星保留調整課程內容、日程與講師之權利。
學員回饋
靜慧.ZHANG
figma爆紅以後,有從網路上尋找學習資源,但繁體中文教學真的比較少,沒辦法學得非常全面。
這次報名菜鳥救星直播課程,除了課綱中的內容,若有額外的提問老師也非常樂於解答,完全不藏私,老師真的非常大方。
design_Jason
從平面設計師轉UI領域,對學習過設計軟體的人來說,FIGMA應該滿好入手的,原本擔心會因為線上軟體,操作上會有些不習慣,看來是我多慮了~有些基礎操作透過老師分享技巧、跟著練習,製作速度真的提升很多,希望之後也可以找到喜歡的UI工作!
NoLa•AShLey0615
課程非常實用,老師分享很多業界的Knowhow,對於基礎軟體操作,也有詳細說明。
非常推薦對UXUX有興趣的設計師,來參加這個課程,CP值真的很高。
Kung
五星好評★★★★★!FIGMA軟體不斷更新,與其看錄影檔,不如選直播式的課程,有推出新功能老師也會即時與我們分享,還能一起討論優缺點跟應用方式,這才是學習中最重要的一環,一起討論一起學習!
陳奕裕
從設計系畢業,出社會才感受到UIUX的重要,所以UI觀念有點是從做中學,這堂課可以說是補足了我概念的缺陷~上課時老師會分享實際案例,也會分享邏輯心法,重點是教完作業老師還會很用心的批改作業,給予建議。
我覺得不只是技術上的提升,在工作中溝通技巧也有所增進,對於實務工作上真的很有幫助。
課程問答區
優惠價
NT$3,600
NT$3,600
馬上購買
×
2020學習到底!
全站課程下殺5折,結帳再減$1212元!
💰活動時間:12/21-12/22
💰活動說明:
【年終獎金,自己賺!】
苦等年終沒下落,雙12投資學習現賺$1212。
掌握關鍵技能,斜槓、升遷、加薪、轉職,明年爽爽賺!
2020學習到底,全站課程下殺5折!
結帳再現折$1212,限當次結帳折抵!
注意事項:
菜鳥救星x聯成電腦【雲端直播課】至2021/12/31止,符合專案,電腦學員0元免費上課,詳細上課方式,請洽原報名分校詢問。
由於直播課程有時效性,如報名時已超過該課程時間,將以提供錄影檔替代。
菜鳥救星保有隨時修改及終止本活動之權利,如有任何變更內容或詳細注意事項將公布於本網頁,恕不另行通知。
想了解更多可點右方LINE圖示,加入菜鳥救星官方LINE將有專人為您服務喔!
菜鳥救星官方Line
│
ID:@rookiesavior
延伸文章資訊
- 1figma wireframe教學-在PTT/MOBILE01上汽車保養配件評價分析
2022figma wireframe教學討論推薦,在PTT/MOBILE01汽車相關資訊,找wireframe怎麼畫,wireframe工具,wireframe範例在YouTube影片與社群(...
- 230天打造品牌特色電商網站Day.4 網站設計及Figma介紹
通常從發想、草稿,到後來線框稿(wireframe)繪製無顏色的介面、 ... 中間是有一個檔案是Figma教你線框稿(wireframe)、原型(prototype)、團隊協作等初步教學,
- 3Wireframe|Prototype|互動式線框圖
使用者介面設計,教學網站,User interface design,UI,中國科大,視傳系. ... Figma中的互動式線框稿(Wireframe & Interactive Prototy...
- 4UIUX設計實戰,用Figma打造第一個手機App! - 菜鳥救星
課程採用直播教學,授課內容能與Figma同步更新,若有UIUX實務操作疑問,我也會即時解答,就讓 ... 圖說:實際走過專案設計流程,從需求訪談、wireframe流程、icon風格 ...
- 5Figma 教學:讓技術開發人員都能輕鬆實作畫面設計 - AppCoda
設定(Settings):定義家裡的每一個地方,以及庫存物品的類別。 demo-app-figma. 線框圖(Wireframe). 設計線框圖是UI/UX 設計過程的第 ...