Photoshop 的協作功能太糟,今年才 23 歲的 Dylan Field 決定打造一款全新的 UI 雲端設計軟體 Figma,要打敗 Adobe,成為「設計界的 GitHub」,便於設計師們共享與協作。
同時也有3部Youtube影片,追蹤數超過89萬的網紅PAPAYA 電腦教室,也在其Youtube影片中提到,► 內容綱要 00:00 開場白 00:53 畫布建立 / 圖層管理 02:55 建立網格糸統 03:23 文字樣式 04:00 外掛安裝 05:38 自適應/響應式版面 07:52 圖片水平捲動效果 09:32 固定頁首 / 霧面玻璃效果 10:19 組件建立與修改 11:28 疊加圖層動畫 12...
ui 設計 figma 在 半路出家軟體工程師在矽谷 Facebook 八卦
這次邀請到的特別來賓是型男設計師 Nick。 Nick 現在在 Google 總部擔任 UX Designer Manager,這次的直播會聚焦在如何成為頂尖的 UX 設計師上。
本次訪談內容皆為個人意見立場,不代表 Google 或任何公司的立場。
直播影片的大綱內容:
Nick 大學是師大的工業科技教育學系,主要偏重寫程式、學習網路、資料庫架構相關的學科。 因為他從小學開始就對美術相關的比賽很有興趣,大學畢業後想持續的往設計方面發展, 於是進入交大的應用藝術研究所就讀。
他研究所方向偏向視覺傳達、心理學,學習如何把 coding 、或是邏輯相關的知識應用在藝術、設計方面。 研究所畢業後先工作, 工作幾年後申請美國學校, 來到 CMU 卡內基美隆大學唸 HCI (Human Computer Interaction)。 HCI 是 3 個領域的結合, Computer Science + Design + Psychology (電腦科學 + 設計 + 心理學),也都剛好是 Nick 接觸過的領域。
Nick 在大學就讀的過程中, 有和另外兩位朋友一起創業, 那時適逢 2000 年,他們想把許多服務及一些內容辦到網路上, Nick 負責把網站做設計、並架起網站、運行。 大學因為有拿到教師資格,所以畢業後去高中教了一年的生活科技課。
隨後 Nick 決定還是回到設計, 先做了網頁 Desinger , 再到 HTC 做 User Usability Engineer , 再來開始做手機的 UI, UI 做久了開始會思考產品要如何設計可以更符合使用者的需求,從介面的安排位置、顏色、到和使用者的互動等等, 就開始進入 UX(User Experience) 領域 。
探討 UX 前先來確定 UX 使用者經驗的定義是什麼? UI 是被包含在 UX 裡, UI 比較偏向視覺的元素, 而 UX 是整個產品生命週期的體驗。 ex: 車子的按鈕、儀表板可以比喻成 UI , 而打開車門、開車、停車的整個體驗是 UX。
比如說去迪士尼玩,從買票到在遊樂園裡玩的所有經驗、排隊買演場會的票、坐在客廳沙發上挑一部電影來看。 如何把經驗從好的變的更好, 就是 UX Designer 的工作。
UX 在科技業包含了幾個部分:
1. 互動設計 Interaction
2. 視覺設計 Visual (與設計的流行趨勢影響密切)
3. 轉場 Motion
4. 使用者研究 Research
5. 工程 Engineering
UX Designer 廣義來說包含以上這五種工作類別,目前比較大的業界需求偏向 1 & 2,如果能同時兼備多樣專長 (Hybrid Designer) 在就業市場上會更有競爭力。 美國的科技產業, 產品和終端消費者比較直接相關,讓設計師比較被視為一個專業。 UX Designer 依照公司規模的狀態, 小公司 3~5人, 第一個 designer 職責可能就是包山包海,連 UX Researcher 的工作也要做, 拿到結果再來自己測試。
什麼是好的 UX Designer?
視覺設計要不錯, 有基本的美感及程度、並且有邏輯思考的能力,這樣就會是很有競爭力的設計師。
UX designer 過往在矽谷還是會希望有寫程式的能力,5~7 年前的一些公司設計師面試還是會考程式, 但到目前, 專業被更尊重及細分, 就比較沒有被考程式了。 當然,找工作的時候, 如何讓自己比別人突出, 如果你是設計師,有程式的經驗,還是會很有競爭力及賣點。
設計的本質: 1. 對事務的好奇心、2. Iteration 迭代 的容忍度、接受度、及執行力,3. 合作、溝通的能力。
提升能力的方式: Nick 相信做中學,產品一個階段之後, 把專案相關人員聚集起來, 討論 Start、Stop 、Continue 。 什麼事情是不該繼續做的? 什麼事需要持續做的? 什麼事情需要開始去做的?
Designer 的工具: 從之前 Photoshop、 Illustrator, 近幾年因為設計潮流變的扁平, 所以 Sketch 因為可以勝任大部分工作, 也變得更流行。 當然, 因為團隊協作的部分, Figma 讓設計師在合作上有像 Google Doc 有一份網上的檔案讓大家協同合作,也是常用的工具。
Designer 面臨的工作挑戰:
如何用研究方法,把主觀的設計,用客觀的方法、數據來解釋、說服團隊。 所以設計師和 UX 研究員的合作緊密,用值化、量化研究來找出好的設計。
UX designer 在整個產品週期都參與, 每個階段都有不同的目標及任務。 產品比喻成的 3 隻腳的椅子的話, 分別是 Designer 、 Engineer、 PM, 少了一個產品都沒辦法順利運行。
UX 常常會被說要有同理心,其實每個產品的角色應該都要有同理心。
質化 vs. 量化研究: 質化是要找問題的本質,比如說 5~8 人的研究就可以找出 85% 以上的錯誤或是設計不好的地方。 量化就是要多的樣本數、找到公正、大數據、可信賴結果的研究。 UX 要知道在什麼樣的情況,用什麼樣的研究方法來證明、並讓案子往前推進。
最後是一些提問及資源分享:
有什麼好的線上資源可以學習?
dribbble (https://dribbble.com/)
behance (https://www.behance.net/)
UX Design Weekly (uxdesignweekly.com)
經典的 UX design 準則, 不僅僅是 designer 適用、工程師及 PM 內化這些準則後也可以發現產品做出來可以避免許多不好使用者經驗的問題:
10 Usability Heuristics for User Interface Design by Jakob Nielsen in 1994
https://www.nngroup.com/articles/ten-usability-heuristics/
推薦閱讀的 2 本書:
Nick 的啟蒙書 Don’t make me think (https://amzn.to/2Zq9Xti) 中文版翻譯為“ 如何設計好網站”
The Design of Everyday Things (https://amzn.to/2zmRNhA),用了許多生活化的例子。Affordance 在使用者經驗領域佔有相當的一席之地,例如:旋鈕、橫桿、直桿、握把的門,大致上會讓使用者理解該用轉的、推的、還是拉的。
找工作的建議:
提升自我的競爭力,先釐清自我的興趣、想要做的方向,因為每個 UX 細分領域看重的技能都不太一樣。 許多人都願意分享,可以找到願意分享的前輩,得到一些建議。
職場上爬升的建議:
首先, title 是公司衡量是你是否有值得那個等級、影響力的結果,所以要著重於你對與展品的影響力是什麼。再來是要有耐心,培養自我能力、提升競爭力,最後就會自然而然走到你該得到的位子。 最後, Nick 覺得 designer 最要有的能力是溝通能力。 好的設計能力可以變成好的設計師。 強的設計師就是厲害在溝通方面。 Design 在 Nick 心中就是解讀 (如何分析問題)、解決(如何解決問題)、解釋(如何解釋你設計出來的東西), 最後解釋就是溝通。 所以對於設計有興趣的朋友,溝通是個很值得培養的能力。
溝通能力加強的方式:
上課培養。如果簡報 (presentation) 角度著墨,從聽眾聽完後,你想要讓他們知道哪 3 件事情反向思考,來幫助架構簡報,3 是個很重要的數字,讓這 3 個有相關、又各自著墨重點, 就可以涵蓋很大一部分思想理念。
最後分享一下UX 設計師大概的面試流程:
如果你有 portfolio,很多時候會被找到, 這是一個門票, 讓你可以開始面試,接下來可能會有 take home exerecise , 讓你做一個開放性的問題, 被公司審核通過的話會邀請到 onsite interview 。 onsite 需要介紹你自己的作品, take home exerecise 的作品。 如果設計師可以充分利用白板來解釋思考過程、思考邏輯、及最後的提案是什麼,會是一個非常大的加分。 面試官其實很在乎你面試過程中展現的思考能力 (其實和軟體工程師的面試的精髓也是一樣的)。
第一段影片在:
https://www.facebook.com/PivotSoftwareEngineer/videos/492317728266537/
ui 設計 figma 在 半路出家軟體工程師在矽谷 Facebook 八卦
這次邀請到的特別來賓是型男設計師 Nick。 Nick 現在在 Google 總部擔任 UX Designer Manager,這次的直播會聚焦在如何成為頂尖的 UX 設計師上。
本次訪談內容皆為個人意見立場,不代表 Google 或任何公司的立場。
直播影片的大綱內容:
Nick 大學是師大的工業科技教育學系,主要偏重寫程式、學習網路、資料庫架構相關的學科。 因為他從小學開始就對美術相關的比賽很有興趣,大學畢業後想持續的往設計方面發展, 於是進入交大的應用藝術研究所就讀。
他研究所方向偏向視覺傳達、心理學,學習如何把 coding 、或是邏輯相關的知識應用在藝術、設計方面。 研究所畢業後先工作, 工作幾年後申請美國學校, 來到 CMU 卡內基美隆大學唸 HCI (Human Computer Interaction)。 HCI 是 3 個領域的結合, Computer Science + Design + Psychology (電腦科學 + 設計 + 心理學),也都剛好是 Nick 接觸過的領域。
Nick 在大學就讀的過程中, 有和另外兩位朋友一起創業, 那時適逢 2000 年,他們想把許多服務及一些內容辦到網路上, Nick 負責把網站做設計、並架起網站、運行。 大學因為有拿到教師資格,所以畢業後去高中教了一年的生活科技課。
隨後 Nick 決定還是回到設計, 先做了網頁 Desinger , 再到 HTC 做 User Usability Engineer , 再來開始做手機的 UI, UI 做久了開始會思考產品要如何設計可以更符合使用者的需求,從介面的安排位置、顏色、到和使用者的互動等等, 就開始進入 UX(User Experience) 領域 。
探討 UX 前先來確定 UX 使用者經驗的定義是什麼? UI 是被包含在 UX 裡, UI 比較偏向視覺的元素, 而 UX 是整個產品生命週期的體驗。 ex: 車子的按鈕、儀表板可以比喻成 UI , 而打開車門、開車、停車的整個體驗是 UX。
比如說去迪士尼玩,從買票到在遊樂園裡玩的所有經驗、排隊買演場會的票、坐在客廳沙發上挑一部電影來看。 如何把經驗從好的變的更好, 就是 UX Designer 的工作。
UX 在科技業包含了幾個部分:
1. 互動設計 Interaction
2. 視覺設計 Visual (與設計的流行趨勢影響密切)
3. 轉場 Motion
4. 使用者研究 Research
5. 工程 Engineering
UX Designer 廣義來說包含以上這五種工作類別,目前比較大的業界需求偏向 1 & 2,如果能同時兼備多樣專長 (Hybrid Designer) 在就業市場上會更有競爭力。 美國的科技產業, 產品和終端消費者比較直接相關,讓設計師比較被視為一個專業。 UX Designer 依照公司規模的狀態, 小公司 3~5人, 第一個 designer 職責可能就是包山包海,連 UX Researcher 的工作也要做, 拿到結果再來自己測試。
什麼是好的 UX Designer?
視覺設計要不錯, 有基本的美感及程度、並且有邏輯思考的能力,這樣就會是很有競爭力的設計師。
UX designer 過往在矽谷還是會希望有寫程式的能力,5~7 年前的一些公司設計師面試還是會考程式, 但到目前, 專業被更尊重及細分, 就比較沒有被考程式了。 當然,找工作的時候, 如何讓自己比別人突出, 如果你是設計師,有程式的經驗,還是會很有競爭力及賣點。
設計的本質: 1. 對事務的好奇心、2. Iteration 迭代 的容忍度、接受度、及執行力,3. 合作、溝通的能力。
提升能力的方式: Nick 相信做中學,產品一個階段之後, 把專案相關人員聚集起來, 討論 Start、Stop 、Continue 。 什麼事情是不該繼續做的? 什麼事需要持續做的? 什麼事情需要開始去做的?
Designer 的工具: 從之前 Photoshop、 Illustrator, 近幾年因為設計潮流變的扁平, 所以 Sketch 因為可以勝任大部分工作, 也變得更流行。 當然, 因為團隊協作的部分, Figma 讓設計師在合作上有像 Google Doc 有一份網上的檔案讓大家協同合作,也是常用的工具。
Designer 面臨的工作挑戰:
如何用研究方法,把主觀的設計,用客觀的方法、數據來解釋、說服團隊。 所以設計師和 UX 研究員的合作緊密,用值化、量化研究來找出好的設計。
UX designer 在整個產品週期都參與, 每個階段都有不同的目標及任務。 產品比喻成的 3 隻腳的椅子的話, 分別是 Designer 、 Engineer、 PM, 少了一個產品都沒辦法順利運行。
UX 常常會被說要有同理心,其實每個產品的角色應該都要有同理心。
質化 vs. 量化研究: 質化是要找問題的本質,比如說 5~8 人的研究就可以找出 85% 以上的錯誤或是設計不好的地方。 量化就是要多的樣本數、找到公正、大數據、可信賴結果的研究。 UX 要知道在什麼樣的情況,用什麼樣的研究方法來證明、並讓案子往前推進。
最後是一些提問及資源分享:
有什麼好的線上資源可以學習?
dribbble (https://dribbble.com/)
behance (https://www.behance.net/)
UX Design Weekly (uxdesignweekly.com)
經典的 UX design 準則, 不僅僅是 designer 適用、工程師及 PM 內化這些準則後也可以發現產品做出來可以避免許多不好使用者經驗的問題:
10 Usability Heuristics for User Interface Design by Jakob Nielsen in 1994
https://www.nngroup.com/articles/ten-usability-heuristics/
推薦閱讀的 2 本書:
Nick 的啟蒙書 Don’t make me think (https://amzn.to/2Zq9Xti) 中文版翻譯為“ 如何設計好網站”
The Design of Everyday Things (https://amzn.to/2zmRNhA),用了許多生活化的例子。Affordance 在使用者經驗領域佔有相當的一席之地,例如:旋鈕、橫桿、直桿、握把的門,大致上會讓使用者理解該用轉的、推的、還是拉的。
找工作的建議:
提升自我的競爭力,先釐清自我的興趣、想要做的方向,因為每個 UX 細分領域看重的技能都不太一樣。 許多人都願意分享,可以找到願意分享的前輩,得到一些建議。
職場上爬升的建議:
首先, title 是公司衡量是你是否有值得那個等級、影響力的結果,所以要著重於你對與展品的影響力是什麼。再來是要有耐心,培養自我能力、提升競爭力,最後就會自然而然走到你該得到的位子。 最後, Nick 覺得 designer 最要有的能力是溝通能力。 好的設計能力可以變成好的設計師。 強的設計師就是厲害在溝通方面。 Design 在 Nick 心中就是解讀 (如何分析問題)、解決(如何解決問題)、解釋(如何解釋你設計出來的東西), 最後解釋就是溝通。 所以對於設計有興趣的朋友,溝通是個很值得培養的能力。
溝通能力加強的方式:
上課培養。如果簡報 (presentation) 角度著墨,從聽眾聽完後,你想要讓他們知道哪 3 件事情反向思考,來幫助架構簡報,3 是個很重要的數字,讓這 3 個有相關、又各自著墨重點, 就可以涵蓋很大一部分思想理念。
最後分享一下UX 設計師大概的面試流程:
如果你有 portfolio,很多時候會被找到, 這是一個門票, 讓你可以開始面試,接下來可能會有 take home exerecise , 讓你做一個開放性的問題, 被公司審核通過的話會邀請到 onsite interview 。 onsite 需要介紹你自己的作品, take home exerecise 的作品。 如果設計師可以充分利用白板來解釋思考過程、思考邏輯、及最後的提案是什麼,會是一個非常大的加分。 面試官其實很在乎你面試過程中展現的思考能力 (其實和軟體工程師的面試的精髓也是一樣的)。
第二段影片在:
直播訪問: Google Design Manager 談如何成為頂尖的 UX Designer 【02】
https://www.facebook.com/PivotSoftwareEngineer/videos/512324412847952/
ui 設計 figma 在 PAPAYA 電腦教室 Youtube 的評價
► 內容綱要
00:00 開場白
00:53 畫布建立 / 圖層管理
02:55 建立網格糸統
03:23 文字樣式
04:00 外掛安裝
05:38 自適應/響應式版面
07:52 圖片水平捲動效果
09:32 固定頁首 / 霧面玻璃效果
10:19 組件建立與修改
11:28 疊加圖層動畫
12:55 切換瀏覽頁面
13:57 Figma 社群資源
► 練習檔下載
載點一 https://tinyurl.com/yej2fwtj
載點二 https://share.weiyun.com/A34153eN
Figma 官網 https://www.figma.com
► Papaya 電腦教室 - 會員專區 (加入後可觀看會員專區的影片喔)
加入頻道會員 https://tinyurl.com/sxt3d2b
會員專區影片目錄 https://tinyurl.com/y6mvo38a
► 小額贊助 Papaya 電腦教室 ☕️
ECPay: https://p.ecpay.com.tw/A1B71E8
Paypal: https://www.buymeacoffee.com/papayaclass
► Papaya 剪輯影片所使用的軟體 / 素材來源
Camtasia Studio https://www.techsmith.com/video-editor.html
Adobe After Effects https://www.adobe.com/products/aftereffects/
Adobe Audition https://www.adobe.com/products/audition.html
Keynote https://www.apple.com/tw/keynote
Envato Elements https://elements.envato.com
Vecteezy https://www.vecteezy.com
Unsplash https://unsplash.com
#記得打開影片的CC字幕喔 #Figma #Prototype #Mockup
ui 設計 figma 在 StockFeel 股感知識庫 Youtube 的評價
近年來網路資訊發達,UI(使用者介面)、UX(使用者體驗)設計領域也開始活躍起來,或許你沒聽過Figma,但想必也耳聞過設計軟體霸主Adobe吧💪?
如今這塊大餅越來越多企業想分食,設計軟體也進入百家爭鳴年代,其中殺出血海的新星就是Figma!這家公司2012年誕生,不到10年Figma估值已達20億美元,今天影片就想與你分享這其中傳奇😎
#Figma #UI #設計
近幾年來隨著設計思考與 UX 設計的興起,在這其中異軍突起的設計工具非屬 Figma 不可了。
根據 UX Tools 針對全球數千名設計師年度問卷調查,Figma 在 2017 年的愛用程度位居第六或七名,相對很少人關注。Figma 在國外的討論度一直都很高,而在台灣好像相對來講少一點。Figma雖然目前沒有中文介面,但並不影響UI設計師們對他的喜愛。
創作者推薦:
《Socialmorehk》https://www.instagram.com/socialmorehk/
🎉看完影片腦袋還在高速運轉嗎?這邊已經幫你整理好Figma四大亮點囉!
1. 不用額外下載、更新軟體
2. 免存檔,檔案都會自動存在雲端中
3. 一個網址,每個人都看的到最新內容
4. 不用一直上傳、一直同步檔案
資料參考:
《Figma以20億美元的估值和5000萬美元的新資金尋找收購機會》
《反思Figma的第一年》
《23歲少年創立的設計師協作工具將以1400萬投資對抗Adobe》
《Figma的CEO Dylan Field訪談》
《為什麼我們應該使用Figma》
Figma — 異軍突起的設計協作神器 https://medium.com/as-a-product-designer/figma-design-tool-1c6542ae8dc1
我從 Sketch 老粉變成 Figma 鐵粉的 10 個理由 https://reurl.cc/VXXDVZ
股感:https://www.stockfeel.com.tw/
股感Facebook:https://www.facebook.com/StockFeel.page/?fref=ts
股感IG:https://www.instagram.com/stockfeel/
股感Line:http://line.me/ti/p/@mup7228j
ui 設計 figma 在 魏巍 Youtube 的評價
開始一個新的系列!分享練習 Figma 向量繪圖的過程。第一集就這麼說做就做開始了。先下載免費的軟體 Figma,然後選擇一個簡單的圖形來試著畫畫看。我選了 Line 的熊大!之前教用 Sketch 來設計 UI/UX 的時候,這是我的第一個範例,現在用 Figma 來畫,很快就畫完了...
ui 設計 figma 在 Figma]註冊與基本認識/ 基本功能介紹/ UI Mockup軟體介紹 的相關結果
使用者介面設計,教學網站,User interface design,UI,中國科大,視傳系. ... <看更多>
ui 設計 figma 在 Figma 教學:UI/UX 設計熱門軟體Figma 基本功能新手包 的相關結果
Figma 是現在最熱門的UIUX 設計軟體之一。根據國外平台2020 的UI 設計工具調查報告,Figma 已經超越了Sketch 成為業界使用工具第一名。它的即時同步與 ... ... <看更多>
ui 設計 figma 在 被Adobe 買下來了!快速上手Figma UI 設計軟體#新手教學 的相關結果
我們今天要來教的是UI 設計軟體Figma,這個跟Sketch, Adobe Xd 相同都是介面設計軟體,其實在軟體操作上都差不多,那我第一次使用Figma 大概是2018 年 ... ... <看更多>