產品設計實戰:用Figma打造絕佳UI/UX

描述

關於課程
課程時長14 小時 39 分鐘
單元數6 章節 59 單元
課程總人數4,173 位同學
作業數9 份作業
沒有期限、不限觀看次數,完成課程還有完課證明!
你可以學到
認真學習完這堂課程所有單元,並且完成作業之後,你將會學習到:
▶︎ 了解基礎介面設計 (UI Design) 與使用者體驗設計 (UX Design) 的知識。
▶︎ 了解業界產品開發流程、團隊合作流程以及 UI/UX 設計師的工作細節。
▶︎ 熟悉 Figma 核心操作技巧與常用快捷鍵,有能力依據團隊需求快速且有效率的製作介面。
▶︎ 熟悉 Figma 進階技巧,像是管理元件、共享樣式等等,不只能提高工作溝通效率,並且做出可擴展、一致性高且好維護的設計系統。
▶︎ 利用 Figma 做出可供使用者及團隊測試的原型,並且能夠根據反饋隨時調整設計。
▶︎ 了解如何建立基礎設計美感與原則,有能力做出符合規範、直覺、美觀好閱讀的介面。
▶︎ 從概念發想到實際操作,從 0 到 1 完成兩個產品 (App&Web) 的核心功能設計與原型製作。
▶︎ 建立正確的學習心態與工作觀念,在未來的設計路上都能掌握學習原則,持續自我精進成長。
▶︎ 了解如何準備與設計面試與求職作品集,讓自己在其他競爭者中脫穎而出。


課程詳情

產品設計實戰:用 Figma 打造絕佳 UI/UX 產品體驗

你想要學習 UI/UX 設計嗎?想知道如何打造好看又好用的產品嗎?一起來學習使用 Figma 這個火紅全球的介面設計工具,並學習將 UX 設計思維帶入你的設計中,做出令人驚艷的設計

作品吧!這門課程中,你將會掌握扎實的 UI 設計技巧與 UX 設計思維,並建立正確的設計觀念與學習心態。

並且,透過課程中的作業練習與專案實作,你將會累積理論與實務兼具的的設

計經驗,加上課程結束後的持續練習,你將有機會成為軟硬實力兼具的產品

(UX/UI) 設計師,拿到進入業界的第一把鑰匙!

想要設計出一個好看又好用的產品,需要有成熟的 UX 設計
思維以及靈活的 UI 設計方法來達成

身為一名產品 (UI/UX) 設計師,我們常常會需要去解決複雜且抽象的問題。

要能夠將從使用者研究或數據中得到的洞察轉換成真實的設計解法,

往往需要大量的設計經驗、對產品的知識、對使用者的理解才能達成。

而熟悉介面工具的使用以及 UX/UI 設計方法是幫助我們通往解決方法道路的第一步。

在數位產品設計的世界裡,常常是需要團隊合作的,我們需要清楚知道用什麼

樣的介面設計模式來解決什麼樣的問題、如何有效的向團隊溝通你的解決方案

,而這堂課程就是要帶你掌握產品 (UI/UX) 設計師所需要具備的軟硬知識!

Figma 是什麼呢?為什麼要選擇 Figma?

它的優勢跟未來在哪裡?

Figma 是一個跨時代的 UI 設計的工具,特色是所有的設計檔案都會儲存在雲

端,並且能夠用網頁瀏覽器讓多人即時協作、編輯同一份設計檔案。

這解決了長期以來設計流程在溝通與檔案管理上面的一些缺陷,讓設計師

可以更專注在用設計解決問題。

而這兩年 Figma 在 Sketch 之外也有擁有非常高的聲量,可以參考

國外平台 2019 年對於 UI 設計工具的調查,Figma 已經在這兩年衝至整體

第二名,未來也將會持續看漲,而因它基於瀏覽器並跨平台的特性,

在 Window 上更是穩居第一名的寶座,相信不久後 Figma 將成為全球

主流的介面設計工具。

關於 Figma 的特色與優勢
  1. 網頁瀏覽器就能用:所有的設計檔案都會即時儲存在雲端,完全不需要擔心有沒有存到檔案。這也代表就是不管在哪裡,只要能連上網路就能
  2. 打開檔案,當然也就跨裝置與平台 (Mac/Window) 都能使用,甚至用
  3. iPad 也能操作,不管你用什麼電腦通通沒問題,就像是設計界的 Google Docs 一樣!
  4. 即時協作與同步編輯:擁有線上即時多人協作的功能,讓設計的溝通交流與檔案分享變得超級簡單,再也不需要互傳檔案了!
  5. 雲端共享連結:每個設計檔案 (甚至小至畫板、元件) 都能產生共享連結,並且可以設定共享權限,要和團隊分享與討論設計毫不費力!
  6. 廣大的社群與插件生態系:Figma 擁有強大的線上社群與插件,讓你可以找到許多有用的輔助工具與設計資源 (也可以複製其他設計師的檔案來練習),加快自己的設計效率!
  7. 新手友善,免費就能用到飽:Figma 對新手很友善,免費方案就能體驗到飽!免費方案就能擁有 3 個專案加上一個協作者共同編輯,可以不需要花錢就充分探索這個軟體的主要功能。
  8. 國際大公司都在用:許多國際一流公司像是 Uber, Twitter, Airbnb, Google, Spotify, Dropbox 等等都已經因為 Figma 強大的協作功能而將主要設計工具轉換至 Figma,所以可以預見的是學會 Figma 將很有機會成為下一個 UI/UX 設計師需具備的標準能力。
  9. 前有未有的流暢設計流程:設計是一個需要不斷溝通討論、持續打磨細節的過程,Figma 將所有工作流程從設計、溝通、協作、原型、工程交付都整合在一個工具中,大大提升了設計師和團隊成員的工作效率。
  10. 對未來的超前部署:我們看到遠端工作的趨勢逐年提升,近年來越來越多公司開始開放遠端工作的機會,我們相信在未來遠端協作會變成一種主流,而 Figma 線上即時的協作優勢就會變成一個很棒的武器,學會它,也代表你可以更快融入主流公司工作流程中。
如果有上過我前一堂的同學就會知道,其實我以前是以使用 Sketch 為主,如果想知道為什麼我開始轉換到 Figma ,我也寫過一篇關於我為什麼從 Sketch 轉換到 Figma 的文章,歡迎參考看看!

這邊也分享一些 Figma 的相關的網站與文章給大家參考:

這門課程將著重在觀念與實務並進,總共規劃有 6 大章節、超過 70 個單元及預計 10 個小時以上的課程內容,幫助你完整吸收 UI/UX 產品設計師所需具備的知識與能力。(看完整課綱)
章節 1 | 產品設計的核心觀念:UX 設計思維與產品開發流程 (8個單元)

這個章節的重點會帶大家了解 UI/UX 設計的核心觀念、介紹常見的產品開發流程與

UI/UX 設計師的工作內容,也會介紹關於設計上需要了解的設計原則、設計模式以及常見的設計元件等等,幫助你之後在設計執行時能有一定的脈絡可循,不會陷入不知道如何開始設計的狀態。

最後則會帶大家熟悉 UX 設計會使用到的工具像是流程圖與線框圖,並建立起 UI 設計的基礎美感,之後也會透過課程中的實作練習工具與專案來慢慢補強這裡所提到的所有觀念。

⚡️ 單元 1-4:UI/UX 核心基礎觀念、產品開發流程、產品 (UI/UX) 設計師工作內容與流程
⚡️ 單元 5-7:設計原則與設計規範、設計系統與常見設計元件介紹、設計美感基礎
⚡️ 單元 8:UX 設計工具基礎:使用者故事、線框稿、流程圖與資訊架構

超過 200+ 頁以上的資訊簡報,讓你有效率地吸收複雜的知識!

章節 2 | Figma 快速上手:核心操作基礎 (10 個單元)

這個章節的重點會帶大家掌握 Figma 最核心的功能與操作技巧,以及熟悉最常用、最實用快捷鍵和繪圖方式,過程中也會分享許多人不知道的操作小技巧,讓你用有最有效率的方式做出好看、好懂、好維護的 UI 設計稿。

學完這個單元之後,你會對 Figma 這個工具的操作細節非常熟悉,會知道在什麼情境下應該用什麼方式來處理你的文字設定、圖層結構、樣式管理等等。也會介紹基本的檔案管理方式以及命名規則。

⚡️ 單元 1-3:Figma 環境建置與基本檔案管理觀念
⚡️ 單元 4-7:上手 Figma 所有核心工具,打好正確的製圖基礎觀念
⚡️ 單元 8:不可不知的響應式設計方法:內容定位 Constraint 介紹
⚡️ 單元 9:Figma 常用操作技巧、學會老手都會用來提高效率的各種快捷鍵
⚡️ 單元 10:控管設計版本與找回失去的檔案
章節 3 | Figma 進階技巧:打造可擴展的設計稿、精通常見 UI 元件設計 (15 個單元)
⚡️ 單元 1-3:Figma 進階操作:自動排版 (Auto Layout) 與元件 (Component) 介紹用法
⚡️ 單元 4:熟悉網格系統 (Grid System) 與排版技巧  
⚡️ 單元 5:打造設計系統:建立產品基礎架構—顏色、空間、字體
⚡️ 單元 6-11:設計常用 UI 元件 - 按鈕、表單、列表、彈窗、導航、回饋通知等等
⚡️ 單元 12:設計練習作業 (1):透過臨摹好的作品來打磨設計細節
⚡️ 單元 13:設計練習作業 (2):用鋼筆工具畫一組自己的 icon 圖標 
⚡️ 單元 14:交付設計稿:正確的輸出設計素材給工程團隊
⚡️ 單元 15:效率再加倍:Figma 超實用插件 (Plugins) 分享
章節 4 | 讓你的設計動起來:基礎與進階原型設計 (Prototyping) (10 個單元)
⚡️ 單元 1-3:Prototype 工具基本設定,包含頁面連結以及基本轉場介紹
⚡️ 單元 4-5:覆蓋層 Overlay 基礎與進階用法
⚡️ 單元 6:滾動 (Scrollable) 內容設定、固定選單與浮動按鈕
⚡️ 單元 7:在原型中加入 Gif 檔案讓你的設計更真實
⚡️ 單元 8-9:用 Smart Animation 製作令人驚豔的原型、分享原型設計上的各種小技巧
⚡️ 單元 10:分享原型:在行動裝置上瀏覽你的設計成果
章節 5 | 產品設計實戰:從 0 到 1 設計實際的產品 (App&Web) (10 個單元)
⚡️ 單元 1:iOS App:專案設定與設計系統說明
⚡️ 單元 2:iOS App:產品架構設計與規劃
⚡️ 單元 3-6: iOS App 介面設計 - 註冊與登入流程、課程列表與課程內容、課程發問與聊天室、個人設定頁面與原型製作
⚡️ 單元7:響應式網頁設計:頁面架構規劃(Wireframe)
⚡️ 單元 8-9: 響應式網頁設計:設計元件、與網站內容細節
⚡️ 單元 10:響應式網頁設計:調整設計適應各個尺寸
備註:此 Hahow iOS App 為課堂練習專案,非未來正式上線產品。
章節 6 | 準備進入業界:成為產品 (UI/UX) 設計師的最後一哩路 (6 個單元)

在最後一個章節中,我將會幫助你將課程中所學到的東西做一個總整理,並且以找到理想工作為目標來做準備。這個章節所要帶給大家的內容都是我從過去求職、面試、團隊合作所累積的經驗與心法,從累積相關作品開始、培養設計敏銳度、學習如何呈現作品、到準備作品集與面試,以及學習能幫助自己長期成長的方法。

我希望在你上完整個課程之後,不僅僅是學會了工具,做出好看的介面而已,而是真正的去思考你的設計在解決什麼問題,如何透過你的設計為產品帶來好的影響。最後能透過正確的方式不斷練習讓自己成長,找到屬於自己的理想 UI/UX 設計工作。

⚡️ 單元 1:我該如何累積 UI/UX 設計作品?
⚡️ 單元 2:要如何訓練自己的設計敏銳度與設計思維?
⚡️ 單元 3:要如何更好的展示自己的設計作品?
⚡️ 單元 4:該如何準備 UI/UX 作品集?設計師作品集案例分析
⚡️ 單元 5:如何找到一份適合自己的工作?如何開始海外求職?
⚡️ 單元 6:長期職涯發展:持續自我成長的方法,如何成為資深設計師?
課程內容搶先看!

這裡也提供一些課程試看的單元,可以讓同學更了解實際的授課狀況來判斷是否符合需求。(內容在正式上線前可能會做調整/修改)

<iframe src="https://www.youtube.com/embed/IvE1bml5iHQ" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute; width: 750px; height: 421.5px; top: 0px; left: 0px; border-width: initial; border-style: none;"></iframe>
<iframe src="https://www.youtube.com/embed/_yn93d-yM4Q" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute; width: 750px; height: 421.5px; top: 0px; left: 0px; border-width: initial; border-style: none;"></iframe>

除了原本規劃的課程內容之外,我也準備了解鎖課程,當募資期 30 天內達到以下募資門檻,課程將解鎖更多新單元!

由於目前課程規劃數量較多,解鎖單元將在課程正式上線開課 (12/20) 後的一個月內開始提供,還請各位同學理解,謝謝!
(更新:以上未達成解鎖門檻)

關於課程講師 | Simon Lin

大家好,我是 Simon!

我擁有超過 5 年的產品設計經驗,目前在東京的跨國企業擔任 UX 設計師,同時也是產品設計內容網站 AAPD 的創辦人。我自己在經歷過新創公司、自由接案和自組團隊開發產品之後,發現每個團隊都有不同的設計與開發流程,身為設計師想要提高影響力,必需要知道該在什麼產品階段找到設計的出力點,才有辦法將設計的價值放大。


我熱愛分享與教學、希望透過知識的分享幫助設計師們成長,這也是我想開設這門課程的主要原因,加上之前在 Hahow 開設了超過千人參與的 UI 設計入門課程 的經驗,我也知道初學者在學習 UI/UX 會面臨到的困難與挑戰。這也是為什麼我持續寫文章與在設計社群中公開分享我的設計方法與經驗,我相信學習設計的路上需要有人不斷的交流與分享,才能讓彼此更有信心繼續前進。


我自己也是從平面設計轉職 UI 設計再到 UX/產品設計,一路過關斬將到現在終於有機會在國外的跨國公司工作。我相信學習是有方法的,努力也要用在對的方向,所以我一直很希望能提供一個系統性的教學,幫助想學 UI/UX 設計的人能夠更有效率且全面地學習這個職業該有的知識,當有了扎實的基礎,往後想要進修或自學都將會更加的如虎添翼。

這幾年我也持續在不同的設計社群中分享個人經驗,希望透過交流讓 UI/UX 產業有更多可能性

這裡也分享一些我的相關個人連結,希望能讓大家更了解我:
以及我寫過的 UI/UX 設計 、工作職場相關文章、分享簡報

以下是我所創立 AAPD - As A Product Designer 設計內容平台,裡面有許多豐富的 UI/UX 相關知識文章:

上完這門課程後,我會學到什麼?

認真學習完這堂課程所有單元,並且完成課堂作業之後,你將會掌握:

1. 核心介面設計 (UI Design) 與使用者體驗設計 (UX Design) 的知識。
2. 常見業界產品開發流程、團隊合作流程以及 UI/UX 設計師的工作內容與細節。
3. 熟悉 Figma 核心操作技巧與常用快捷鍵,具備依據團隊需求快速且有效率的製作介面的能力。
4. 熟悉 Figma 進階技巧,像是管理元件、共享樣式等等,不只提高設計效率,並且做出可擴展、一致且好維護的設計系統。
5. 利用 Figma 做出可供使用者及團隊測試的原型,並且能夠根據反饋隨時調整設計。
6. 基礎設計美感與原則,有能力做出符合規範、直覺、美觀好閱讀的介面。
7. 從概念發想到實際操作,從 0 到 1 完成兩個產品 (App&Web) 的核心功能設計與原型製作。
8. 建立正確的學習心態與工作觀念,在未來的設計路上都能掌握學習原則,持續自我精進成長。
9. 了解如何準備與設計面試與求職作品集,讓自己在其他競爭者中脫穎而出。

以下為課程中會使用到的範例及專案設計,課程設計檔案將會公開分享,學員可以透過成品來檢視自己的學習成果。

以上只是部分範例,課程中將包含超過 50+ 以上的實用範例讓你參考學習!
這門課程基本上適合所有對產品 (UI/UX) 設計有興趣的人!

我相信這不只是一門線上課程,我更希望課程後同學間的互動與交流,可以持續幫助彼此成長

我了解學習 UI/UX 設計是一趟漫長的旅程,為了讓學員不只是單打獨鬥的上完課程而已,我將會:
1. 開設學員專屬 Slack 頻道 (購課後公告連結) 以及 Facebook 社團討論區 (大家都能參與),讓老師與同學可以即時互動與交流,互相討論並解決你學習上的疑難雜症。
2. 課程上線後也預計舉辦學員限定線上講座,透過 AMA (Ask Me Anything) 的方式來回答大家的各種問題 (工具技巧、職涯發展、工作經驗、面試技巧、作品集準備等等)。
3. 完整上完課程、完成所有作業、並且留下課程評價的同學,將可以有機會享有 30分鐘 的一對一設計/求職/作品集諮詢。 (限量 15 名,將視作業成果挑選,活動開跑會再另行公告通知大家)

課程問題回覆與課堂作業規劃
  1. 課程作業規劃:目前這門課程主要規劃 4 個作業,前兩個為圖標設計與介面臨摹的練習,以及兩個產品專案實作作品包含 App 和網站。希望透過實際演練來加深課程內容印象,並且真正去思考與走過產品設計的流程。
  2. 回答問題的頻率:募資期間的與開課前的課前問答會盡量在 3-7 天內回覆,開課後則每週盡量回覆至少 5 個同學問題。但會鼓勵同學也可以在開設的 Slack 頻道和 Facebook 社團中詢問問題,也許會有其他同學有相關問題或答案。
  3. 批改作業的頻率:盡量每週批改 3-5 份作業,並按照作業繳交的順序進行批改。因為產品設計的範圍較廣,根據設計的產品不同可能需要多費點時間去思考跟理解才能提供相應的回覆,還請大家理解。

如何購買三人同行?

詳細的教學請詳閱《3 人同行方案購買與兌換課程方式》

STEP 0|首先,你需要先找好另外 2 位學習好夥伴,並選出一位夥伴作為「購買人」
STEP 1|購買人請於課程頁面點選「馬上預購」,進入「課程購買頁面」
STEP 2|選擇付款資訊第二項「兌換 3 人同行 一人 NT$ 2,200 」
STEP 3|填寫「收取另外兩組課程兌換序號的 Email 信箱」(購買人信箱)
STEP 4|選擇「付款方式」與「發票選項」並按下「送出」
STEP 5|完成付款後,購買人即可進入「我的課程」頁面,於「我修的課」區塊,確認課程!
並請千萬記得另外 2 位好夥伴還在等待他們的課程兌換序號喲~快去信箱收信吧!

註:三人同行方案為特殊優惠方案,僅限募資期間,無法與 Hahow Point 或 Coupon 併用。

教學影片:影片1
購買三人同行優惠方案之後要怎麼兌換:影片2

收回內容
上課前的準備

需要準備的工具 / 軟體(若購買課程前不清楚版本是否支援,請先留言與老師確認。)

▶︎ 一台可以上網並且可以打開瀏覽器的電腦,不限作業系統。(沒錯,就只有這樣!)
▶︎ 老師會使用 MacOS 作業系統教學,但使用 Windows 的同學也不用擔心,會在講義中附上快捷鍵對應表
▶︎ (非必要) 準備紙筆或筆記本,可以隨時記錄產品設計上的想法與靈感

需要具備的背景知識

▶︎ 基本上這門課不需要有特別先備知識,但建議先閱讀一些設計的相關文章對整個 UI/UX 設計概念有個輪廓。
▶︎ 有設計軟體經驗的同學會更好的上手這堂課程所教授的操作,不過沒經驗的同學也不用緊張,我會將整個操作的細節與技巧講解得非常清楚。

哪些人適合這堂課?

基本上,這門課程適合所有程度的同學來參與,只要你對 UI/UX/產品設計 有熱情,不管你是沒有經驗、想轉職、或是已經在業界一段時間想要更精進 UI/UX 設計,都會非常適合來參與這門課程!這邊我列出以下幾個相對非常適合上這門課的的族群:

▶︎ 你對 UI/UX 設計完全沒經驗,但對這塊領域充滿好奇與熱情,並且想轉職成為 UI/UX 設計師。
▶︎ 你已經對 UI/UX 設計有基本的認識,想要更進一步學習概念與精進設計工具的技巧。
▶︎ 你目前是視覺設計師、UI 設計師,想要更了解在設計上所要注意的細節與設計脈絡,並掌握最新的工具趨勢。
▶︎ 你目前是 UX 設計師,想要更精進 UI 設計能力與美感,讓產出的設計細節更完整,幫助你和 UI/視覺設計師 的溝通更順暢。
▶︎ 你已經在在業界工作一段時間,但工作上還是使用其他工具 (Photoshop / Sketch / Adobe XD),未來想轉換到 Figma 或想深入了解 Figma 的操入技巧與協作流程。
▶︎ 你是使用者研究員、工程師、產品經理,或是團隊任何角色,想要更進一步了解產品設計思維與細節,以及加強與設計師的合作關係。
▶︎ 不管你將來是想走 UI 設計或 UX 設計、甚至是全方位的產品設計師,這門課都可以提供給你實際工作中所需要的知識與能力,開啟你前往業界的大門。
▶︎ 你是部門的設計主管,想要了解 Figma 如何幫助團隊提高工作效率與溝通品質。
展開全部
關於老師 Simon Lin
在東京跨國企業工作的 UX 設計師、產品設計內容平台 AAPD 的創辦人,在寫作平台 Medium 平台上擁有超過 5,000 追蹤者。 平常喜歡專研設計領域的知識與技術、並樂於分享自身所學,曾在 Hahow 開設一門超過千人購課的課程,也在海內外許多設計社群分享自己的工作、學習經驗。 我希望透過分享力量,讓台灣的數位設計產業變得更好!

What will you learn

要求

Lessons

  • 0 Lessons
  • 00:00:00 Hours

關於導師

導師
名字 : admin admin
Reviews : 0 Reviews
學生 : 1 學生
課程 : 18 課程

Reviews

0
Based on 0 Reviews
1 Stars
2 Stars
3 Stars
4 Stars
5 Stars