跨領域轉職，我學的20套設計軟體/工具分享
本文適合「想自學設計軟體」的你
Published in
29 min readApr 5, 2019
Hi！我是Faye，主修行銷，在電商擔任Sr. UX designer。我是一位自學並成功轉職的設計師。
我從2019年開始，將經歷過的點滴記錄下來，希望對『想投入設計領域的你』有幫助。我學軟體/工具的過程很長，因此分成 [準備轉職前]、[成為設計師後]、[未來預計學習]三個階段來說明。
包含我擔任過的3種職業：
- 工業設計師 Industrial Designer (2套工具)
- 用戶介面設計師 User Interface Designer (4套工具)
- 使用者體驗設計師 User Experience Designer (8套工具)
加上轉職前(4套)，及未來預計學習(2套) = 總共20套工具
先分享一場活動，歡迎6/1 下午一起來交流❤️ (點下圖可報名)
我跟AAPD的Simonㄧ起當講者，我會分享 #轉職5種不同設計師的心得 & 從Designer升爲 #SeniorDesigner後巨大的改變
轉職前，我學了哪些設計軟體
- 我一開始想轉設計時，發現設計領域很多，而每個領域要學的軟體技能也差異很大，這時軟體補習班就是很好的資源平台。
- 推薦可以去聯成電腦 (或類似“以教軟體為主”的補習班)的網站找資料，通常都會有『想進攻哪個領域，需要學哪些軟體』的資訊，順便可以看看曾經補習過的畢業校友未來的就業成績。
- 同時，我也在網路上查到『以培育”設計人才”為主的補習班』如: 王健、復興設計、易禧創意…等等，這類補習班的課程多半會幫你規劃好一個系列，比如針對未來想專攻『產品設計師』，他們就規劃你要學習的2~3種軟體。
在多方比較後(去門市洽詢、上PTT爬文、上104查看感興趣的職務內容)，發現我當時對『產品設計』比較感興趣，因此選擇以下設計工具課程：
(1) Sketching 麥克筆/色鉛筆 速繪
(它不是軟體，是一種畫圖技法)
- 我推薦想踏入”所有設計領域”的朋友們都該學速繪。
- 速繪與素描並不同，速繪講求的快速地打草稿表達你的設計，這個技能一直到現在我都還在使用，隨時有什麼畫面靈感，能夠快速勾勒出大重點來跟其他人討論。
- 除了實體課程，線上課程相對便宜，對於初期不想花太多錢的人可試試。
(2) Adobe — Photoshop、Illustrator 數位設計軟體
（需付費）
- 如果你想踏入數位電腦設計，那麼Adobe將是你的好朋友。
- 如果你沒有打算走數位領域，但你想設計自己的名片，或想印出一本好看的作品集，Adobe系列都能幫你完成，算是C/P值很高的軟體！
- 以上的1. 跟 2. 是我推薦轉職必學的技能，其餘就看你想走哪行再決定。
- 我大約花3個月把上述的軟體學完，上課的作品就成了簡易的作品集(補習時要多跟老師討論作品集的內容，老師們大多會給予很多建議)，然後開始投履歷＆面試，最後成功地成為一名設計師。
- 建議一開始學2~4個軟體就好，重要的是作品集的設計理念，讓面試官看到你有潛力才是最重要的，並不需要學太多軟體來炫技喔。
成為設計師後，學哪些設計軟體
並不是學了剛剛的那幾套工具就可以打天下了。
- 你會發現有很多『功能像近』的軟體，但可能A軟體比B軟體又多了一些功能，C軟體又比B軟體多了一些功能，幾乎80%一樣但20%有差異。而開發軟體的公司為了讓更多人願意使用，大部分的”指令”及”操作模式”都會遵循類似的邏輯，所以你熟悉一套軟體之後，要熟悉另一套相似的軟體是很快的。
- 另外，每間公司都有慣用的軟體(因為一套正版的公司軟體通常不便宜，大部分買了就會一直沿用)，所以你可能會去面試三間公司都是做包裝設計，但每間公司要求你會的軟體都不同。
- 最後，就是你真正成為設計師後，隨著工作的經歷會逐漸修正當初你對設計的幻想，從而去學習更適合你的軟體。比如當初我對『產品設計』比較感興趣，後來發現『UX設計』讓我有更大的發揮空間，因此陸續又學了很多新的軟體/工具。
以下說明我擔任不同的設計師職務時，陸續又學了哪些軟體。
[一] 工業設計師
Industrial Designer
我轉職後第一份設計師工作是擔任包裝設計師，之後便前往竹科擔任工業設計師。
(5) Pro/ENGINEER：3D製圖、建模軟體
(現改名為Creo Parametric)
(需付費)
- 我學習PRO-E是因為公司就是使用這套軟體。我就職前已經學會另一套3D建模軟體Alias，因此後來學習PRO-E還蠻快的。
- 進公司後，通常有學長姐/同事帶你使用軟體，也可以拿前人的設計檔案來參考他們怎麼建模，因此學習的速度會比在補習班快非常多。而且為了快速趕上團隊的腳步，我晚上會留在公司繼續練習軟體，甚至假日也會去公司操作。因此我會建議轉職前不需要學太多套軟體，也不用專研到每個功能都要很熟，最好的方式是先進入那個職位，再慢慢精深軟體技巧。
- 市場上有很多其他的三維建模軟體：PRO-E、SolidWorks、AutoCAD...等等。建議可以先熟悉一套，了解建模的點線面概念，未來進公司學習類似的會快很多。
可參考這篇 學習工業設計需要精通哪些設計軟體。(6) CINEMA 4D：3D渲染軟體
(需付費)
- 一樣的，因為公司就是使用這套軟體，所以我必須學著使用它。而我就職前有學過另一套渲染軟體keyshot，因此再學C4D也很順利。
- 工業設計師需具備CMF知識 - Color(顏色)、Material(材料)、Finish(表面處理)，才能設計出恰當的產品外觀，C4D這套軟體能幫你的產品模擬很多材質，比如說木頭的紋路、鍍膜後的金屬光、甚至是陽光下的陰影…等等。
建模 vs.渲染:建模：
蓋出一個立體的骨架+軀殼。渲染：
幫軀殼穿上漂亮的衣服，甚至打上光影。*渲染軟體裡面美美的材質大多需要運算，有些筆電會跑不動，所以要留意裝置的乘載性能。
[二] 用戶介面設計師
User Interface Designer (UI Designer)
其實我是先擔任UX Designer ，之後再轉 UI /UX Designer，後來又轉回UX Designer。(這裡有一篇是我的轉職經歷) 我針對軟體介紹想先從UI Designer開始。
(7) Sketch：UI設計軟體
(需付費，但不貴，幾千塊以內)
*注意不是Sketch up喔，那是另外一套軟體。
- 你可以去Sketch官網下載免費的試用版來練習，印象中可以試用1個月，拿來練習設計icon、按鈕、符號…綽綽有餘。
- 我當時買了這個hahow的線上課程 （但我來不及看完，就進新公司上工了）。很推薦hahow的線上課程，因為上課的前、中、後都可以向老師發問，而且老師會出作業，並不是單方面的教學而已。
做UI設計時，需要將靜態的頁面連起來，藉此判斷使用者的操作流程順不順暢。因此你會需要原型or雛型 (Prototyping)工具，這些工具讓你把每個動作都串起來，包含過場動畫，比如左右翻動，或滾動效果等等，以下介紹3個我用過的Prototyping軟體。
(8) POP by Marvel：Prototyping工具
(現改名叫marvelapp)
(有免費專案，限定1 project，1 user)
(10) Flinto：Prototyping工具
(需付費)
該怎麼挑選Prototyping軟體？
- Prototyping的精髓是模擬使用情境，目的就是在實際進入工程端coding之前，儘早發現設計上的錯誤，儘早修正。
- 因此我個人傾向[簡單快速好上手]的軟體，最好挑選你可在1小時內完成的軟體，並適度省略不重要的微小動效，以爭取越多時間找更多使用者做測試，更加實在。
要特別感謝我的一位正妹設計師朋友 Tina Hsieh她在Mozilla擔任UX designer，當年我在尋找Prototyping軟體時，從她那邊得到很多回饋，她定期幫公司寫設計文章，推薦大家閱讀下面這篇喔。
[三] 使用者體驗設計師
User Experience Designer (UX Designer)
我先後在三間公司擔任UX Designer，台灣汽車品牌、美商B2C電商平台、日商B2B2C電商平台，以下就說說在電商擔任UX Designer時學的軟體。
(11) Xmind：腦力激盪&心智圖軟體
（免費）
- 在學習UX設計之前，先要訓練的你將思維及想法『系統化』，而心智圖就是能幫助你系統化的最佳軟體，在我們公司從產品經理(PM)到部長(Manager)都會使用心智圖來闡述報告。
(12) Persona (人物誌)
(它是一種描繪目標用戶的方法，不是軟體)
- UX的U代表使用者(user)，所以UX設計的第一步要先了解『誰是你的目標顧客?』，而Persona人物誌能夠協助你，建立目標顧客的輪廓。
- 那我該如何描述一個消費族群的輪廓呢? 提供兩個例子當參考：
- 日劇《東京女子圖鑑》
這齣日劇以口耳相傳的方式，穫得如潮的好評。由日本代表性生活情報誌《東京Calendar》與日本Amazon協作推出，下面這篇文章帶出了『消費輪廓』的概念。
- 中國『網紅奶茶店』人群研究報告
這篇文章使用較為現代的分類方式，很接地氣的描述網紅奶茶的目標客群，包含手機裡使用哪些APP？喜愛閱讀哪類型的書籍? (點這兒)https://kknews.cc/zh-tw/tech/kbrbmjv.html
💜💜💜💜💜💜如果你看到這裡，喜歡我的文章，歡迎給我拍拍手！謝謝你呦~可以『長按』手掌10秒， (= 給我非常多讚，你一次最多可以給我50個讚喔)💜💜💜💜💜💜
(13) Information Architecture (IA)資訊架構
(它是一個系統方法，不是軟體)
- 成為UX設計師之後，我花了很多時間練習如何條列資訊架構。尤其是數位產品，資訊總是層層的包圍在一起，網頁與網頁之間充滿各種父層子層關係，作為一位UX設計師，你首要的任務就是要讓你想呈現的資訊 [容易被找到] 及 [容易被理解] 。
另外，這本資訊架構聖經必看!
(14) Balsamiq：線框稿 (Wireframe)軟體
(免費)
為什麼要畫wireframe『線框』?
- 簡單的說，UX設計師花更多時間探討 [使用者”為什麼”使用我的產品] 及 [使用者”如何”使用我的產品]，而花較少時間在設計高度擬真的介面。因此我們常運用簡單的線框、隨意亂貼的圖形、手繪歪七扭八的按鈕，快速拼湊成一個設計畫面，然後就開始做測試或與夥伴們討論。
- 而balsamiq是一個非常簡易好上手的wireframe軟體，內建很多現成的按鈕圖示，輕鬆滑鼠拉一拉就可以完成一個設計稿了。
我推薦你閱讀以下這4篇文章，可以更瞭解wireframe。
(15) Axure：線框稿+Prototyping軟體
(需付費)
*注意不是Azure喔，那是另外一套軟體。
- 如果說balsamiq是路邊小吃，那Axure肯定是5星級料理。
- Axure有更多元更完整的圖示工具，並且有強大的Prototyping功能，可以省下購買Prototyping軟體的錢，我目前很多專案都是直接用Axure一路從wireframe製作然後進入Prototyping。
- 這套軟體並不便宜，你可以先去官網下載試用版。
如果要購買，我推薦 悠識UserXper，他們是Axure的合作夥伴，他們也開了很多UX相關課程，可以常去那邊晃晃喔。(16) Adobe XD：線框稿 +UI設計+Prototyping軟體
(需付費)
是不是覺得它太萬能了？
- Adobe XD是在2016年才出生的軟體，是個新寵兒，它的訴求就是設計師們不再需要學習一大堆軟體，只需要一個XD就能完成設計。
- 它很適合近幾年才開始要切入UI/UX的公司購買，但如果是很早就在這領域經營的公司，可能就比較無感。
- 它的UI功能相對簡略，但是它能匯入你在sketch、Photoshop、Illustrator畫好的UI圖檔，因此搭配起來也還方便好用。
推薦這部影片由Adobe官方合作講師Riven的教學課(17) crazyegg：網站熱點圖 & A/B 測試工具
(需付費)
- UX設計師倚賴『觀測工具』來了解使用者在網站上的行為，我們不會只看使用者最終有沒有購買，還需要了解使用者在購買前瀏覽了哪些畫面? 做了哪些行為? 點擊了哪些按鈕? 很有可能問題就出在這些步驟之中。
- crazyegg這類型的觀測工具只能顯示結果(比如顯示這一頁最多人點擊的按鈕)，剩下就要靠你自己去探索發生的原因。
- 它只支援網頁版，不支援APP。
你也可以透過下面的比較網站，看看哪種網頁監控工具適合你(18) Google Analytics (GA)：網站/APP分析工具
(有免費及付費進階版)
- GA是Google公司提供的數據分析工具，提供強大的數據及表格化功能。
- 它可以估算出銷售量、轉換率、及分析使用者是從什麼管道搜尋或是連結前來你的網站。（簡直跟神一樣)
- UX設計師除了觀察單一個頁面的使用者行為，更需要觀察一段時間產生的『行為趨勢』(比如發現母親節後的一個月bounce rate怎麼逐漸攀升?)，而GA能匯集非常長的時間(年、月、日)數據來做分析。
未來，我預計學習的工具/軟體
在擔任設計師多年後，仍然會發現我完全沒聽過的好工具，以下列舉2個我最近覺得很有趣的，期待未來有時間好好體驗一番的軟體。
(19) UsabilityHub：遠端使用者測試平台
(有免費版，限定Single user & Limited test length)
- 這是公司裡其他 UX Designer 推薦的工具，它特別的地方就是『遠端測試』的功能。
- 你先在這平台上傳你的設計稿，設定一些簡單的互動，然後UsabilityHub會幫你變成一個互動式的測試問券，並產生一個網址，讓你發送給受測者填寫。
- 它跟大部分的問券平台一樣，蒐集的數據在後台可以很精美以圖像化顯示，讓你輕鬆查看受測結果。
- 若你的設計有商業機密，需要評估發布在這類第三方平台上的風險。
(20) FullStory：網站操作回放觀察＆挫折信號
- FullStory標榜它能重溫您客戶的旅程 — 就像您網站的DVR一樣播放。
- 它其他的功能與crazyegg蠻類似，但最吸引我的是它有一個叫 Frustration Signals (沮喪信號)，包含四種『情緒類行為』的指標：
- Rage Clicks (憤怒點擊)
憤怒點擊就像是用手指敲打你的電腦，因為它沒有按你想要的那樣做。Rage Click的特定觸發器在同一區域中快速單擊多次。 - Error Clicks (錯誤點擊)
記錄用戶點擊網站時出現錯誤的時候。 - Dead Clicks (死亡點擊)
用戶點擊您網站 — 但沒有發生任何作用。是否客戶期待這張圖像應該放大？期望這串文字可以點擊？是否某個表單送出按鈕沒有作用？這可以幫助您找到發生這些無效交互的位置。 - Thrashed Cursor (捶打滑鼠)
用戶不規則地或以圓圈方式移動鼠標時。鼠標的抖動可能表示客戶感到困惑，迷失或等待加載頁面。這可以幫助發現用戶猶豫不決或在購物車中遇到困難的時刻。
聽起是不是超級有趣? 把沮喪的情緒變成觀察指標，就能快速的幫助UX設計師判斷問題的嚴重性。
寫在最後，一直學新的軟體要花很多錢嗎?
其實不用！
我擔任設計師時，從沒停止學習新的軟體。除了在轉職前我花了約10萬找補習班(其實沒必要，我只能把它當作繳學費)，後來學習軟體幾乎沒有花太多的錢，單純靠著自學、請教同事、及上網看教學影片即可。而軟體通常是公司買的，我幾乎不用自己額外購買。
推薦想成為設計師的朋友們，學任何新軟體先買書自學，一本教學書可能才幾百元而已，非常經濟實惠，並搭配下載試用版操作(很多軟體都有提供免費試用版)，並找到相關的FB社團群組多多參與討論。
已經擔任設計師後，也別忘了隨時嘗試『新開發的軟體』，通常越新的軟體能涵蓋越多的功能，讓自己跟上時代的發展，用更有效率的軟體來做設計。
感謝大家:)
關於這篇文章，懇請幫我填寫1分鐘NPS問券
🎯🎯這次我嘗試設計一份簡易的NPS問券，希望大家給我回饋，讓我在文章的寫作上更加精進，大約1分鐘可填完，麻煩大家了。
請直接點下圖surveycake的連結，感謝大家 :)
TAKE AWAY — 20個設計工具軟體
[A. 準備轉職前] 我鎖定"產品設計"
(1)麥克筆/色鉛筆速繪：訓練『快速手繪』的能力，適合各種設計領域
(2)Adobe系列：Photoshop、Illustrator數位設計軟體
(3)Alias：3D建模軟體
(4)KeyShot：3D渲染軟體[B. 擔任設計師時][一] 工業設計師 Industrial Designer
(5)Pro/ENGINEER(改名為Creo Parametric)：3D製圖、建模軟體
(6)CINEMA 4D：3D渲染軟體[二] 用戶介面設計師 User Interface Designer (UI Designer)
(7)Sketch：UI設計軟體
(8)POP by Marvel(改名叫marvelapp)：Prototyping軟體
(9)Principle：Prototyping軟體
(10)Flinto：Prototyping軟體[三] 使用者體驗設計師 User Experience Designer (UX Designer)
(11)Xmind：腦力激盪&心智圖軟體
(12)Persona (人物誌)
(13)Information Architecture (IA)資訊架構
(14)Balsamiq：線框稿軟體
(15)Axure：線框稿+Prototyping軟體
(16)Adobe XD：線框稿+簡易UI+Prototyping軟體
(17)crazyegg：網站熱點圖 & A/B 測試工具
(18)Google Analytics (GA)：網站/APP分析工具[C.未來預計學習](19)UsabilityHub：遠端使用者測試平台
(20)FullStory：網站操作回放觀察＆挫折信號
TAKE AWAY — 搭配選讀文章
(1) 速繪：要短時間內完成的意義(2) Yotta線上課程 麥克筆基礎應用｜教你畫出真假難辨的圖畫(3) 學習工業設計需要精通哪些設計軟體(4) hahow線上課程 UI設計入門，輕鬆上手 Sketch App(5) 15款為設計師而生的心智圖工具 (6) 什麼是人物誌設計法（Persona）(7) 性別、財富、身分--談《東京女子圖鑑》中的階級複製-The News Lens 關鍵評論網(8) 中國『網紅奶茶店』人群研究報告(9) [MIX2018] 淺談資訊架構，以及如何運用在生活或職場中(10) 聖經 資訊架構學：網站、App與資訊生態系統規劃（第四版）(11) wireframe是什麼？(12) 淺談線框圖（Wireframe）(13) 設計師必懂 Wireframe 與 Prototype 的不同(14) Wireframe、Mockup與Prototype的差異？來看看完整的產品UI設計流程(15) Adobe Xd 新手教學 ｜線上直播頻道 (16) Crazy Egg－用熱點為你捕捉網頁正夯的瀏覽區域 (17) 軟體比較 Crazy Egg vs Hotjar 看看哪個工具適合你(18) GA(Google Analytics) 實用教學，快速掌握7大重點分析指標(19) UsabilityHub － 網頁優化及使用者體驗優化設計工具
別忘了幫我拍手喔
💜💜💜
你現在看到的這篇文章，是我Fay寫的。
你在這裡可以為每篇po文按讚或分享及留言，讓我來教你怎麼做。↓↓↓ 找找左下角 灰色的 兩隻手掌重疊 符號 ↓↓↓你現在可以試著『點』手掌1下 (= 給我1個讚)
你接著試試『長按』手掌10秒， (= 給我非常多讚，你一次最多可以給我50個讚喔)💜💜💜
如果想看我其他的文章，點擊 我的大頭照 。💜💜💜
如果希望我寫新文章時通知你，在我大頭照右側找找「Follow」，按下它追蹤我。💜💜💜
你還可以留下公開的評論，往下滑到底就會看到 輸入的地方。
