交互設計師MAC裝機必備

作為交互設計師具體的工作內容包含幾個方面，一是繪製線框圖，二是製作動態Demo，三是團隊協作。網路上每天都會推出新的工具，能留在電腦裡面的不過幾款，能經得住時間考驗的才是最好的。

後台小夥伴諮詢工具類的問題也不少，於是羅列出一些，不定期進行更新吧（樓主自己的偏向，供參考，網站鏈接很多需要翻qiang）。

樓主按照工作需求分類，將電腦上的工具分為這幾類：方案繪製、圖片處理、動效原型、視頻相關、思維整理、儲存、Mac系統相關。

方案繪製

Sketch

在方案繪製這個環節，大家應該不陌生。首推的是Sketch，配合它使用的還有插件CraftManage，在繪製圖片時使用它custom這個功能，可以隨機更換填充圖片，在做用戶頭像和APP裡面的圖片時特別方便。

Photoshop的功能在這裡不再強調，在交互設計中，用來繪製方案沒有sketch高效（原因樓主在之前的文章強調過多次）。但它強大的處理圖片的功能，讓人也忽視不了，經常能幫忙解決一些關於圖片的裁切、格式調整、顏色等等的一系列問題。

圖片處理

這裡的圖片處理主要是指在導出供程序員使用的APP圖片資源。為了降低圖片所佔內存大小，需要進行壓縮，ImageOptim是個不錯的選擇，但它有時候壓縮的大小並不是很大，因為是對圖片基本是無損壓縮。另外一個是在線工具TinyPNG，但對圖片耗損比較大，適合圖片透明區域比較多的情況。

gif製作主要是將一些小視頻（主要是APP的demo）其中的某一小段做成圖片，方便和運營的童鞋們進行溝通，他們在發文時有時候需要用到。GIPHY Capture，操作簡便，對錄製的gif也可以進行編輯，使用非常方便。

動效原型

Flinto

動效原型樓主試過很多種，最後剩下的是這三種，當然只供大家參考。Flinto是製作demo非常高效的工具，支持sketch導出。只要在sketch做好原型圖然後通過插件就可以導入到Flinto。但Flinto的缺點在於，它缺少邏輯判斷的功能。比如說點擊一個區域可能有兩張狀況出現，此時Flinto並不能表現出這種邏輯關係，於是有了Origami作為補充。

Origami是Facebook開發的一款動態工具，它的優點是能很細緻地表達一款動效的狀態出來，支持各種邏輯的跳轉，並且可以調動手機攝像頭，模擬拍照功能，可以調用JS代碼。但它的缺點在於不能做太多的頁面，二十個頁面以上的效果就會卡，不支持sketch的導入，需要手動拷貝文件夾。對設計師來說，因為代碼思維操作，學起來也稍微顯得有點困難。

Framer

Framer比Origami更接近代碼。兼容sketch和ps的文件導入，熟悉以後按照適合Framer的操作來組織sketch圖層在導入Framer的話，非常便捷。有些重複的事情用結構控制使用代碼更方便，可實現的效果跟Origami差不多。程序員學起來特別容易上手。這個樓主也才剛接觸，很感興趣，希望有一天也能成為大神。

視頻相關

1.視頻製作

動效demo有時候需要輸出視頻文件，想樓主做視頻類的APP也經常接觸到視頻，所以這一塊也有些雞肋。視頻製作軟體功能最強大的就是Adobe After Effects，簡稱AE。學習成本不太高，跟其他視頻製作軟體的原理比較相似，就是在某個時間段內，將每個元素每個屬性的變化進行拆分，一個個進行實現。

Final Cut是Apple公司開發的視頻軟體，它更偏向於視頻的拼接與合成，作為交互設計師，並不像動畫師那樣去製作，在視頻這一塊很多功能它就可以搞定。但Final Cut做出來的視頻內存會非常大，一般5s左右1280x720px的視頻可能就有200MB。

2.視頻壓縮

別擔心，與它配套的有視頻壓縮和格式轉化軟體，即Compressor，壓縮完成之後恢復正常，成了1~2MB。另外一款視頻壓縮軟體叫HandBrake，該軟體量感較輕，壓縮速度比較快，操作更簡便，功能沒有Compressor強大，也是一個不錯的選擇。

3.音頻處理

對，聲音的事情也會遇到，比方說按鈕在按下去的時候有類似「咔噠」聲音，這些也需要接觸到聲音的編輯。Adobe Audition就是最強大的聲音處理軟體，對聲音的時長、高低、格式、批量處理等都非常強大，操作也不難。

思維整理

腦圖試用過很多種，最後鎖定在MindNode不換了，它是樓主見過最好的腦圖繪製軟體，沒有之一。但沒有Windows版，Windows的用戶可以使用Xmind，也是很好用的一款工具。

郵件接收樓主也歸類為思維整理這一塊，推薦Spark，它能幫助用戶自動分類郵件，顏值也高，還支持emoji的回復，可以體驗一下。

儲存

儲存類樓主分為記錄和保存兩大塊。記錄呢，主要是印象筆記Evernote，國內的為知筆記WizNote也做得不錯，兩者選其一就行。大家都很熟悉，功能樓主就先不介紹了，主要來說說用法。兩個筆記選一種就行，分散到兩地筆記不統一，不方便進行整理。主要用於瀏覽網頁時一些有用的材料收集。但能把Evernote玩出花的教程網上也有不少，可以搜搜看。

保存這方面，Dropbox的對團隊協作更為有利，企業版的Dropbox方便將一個文件夾分享給團隊所有人，並且分配不同的許可權，同時APP也行進行本地的同步，體驗流暢，愛不釋手。百度網盤作為國內一些資料的補充。

系統相關

ShadowsocksX

首先要隆重介紹的是ShadowsocksX，用來翻qiang，大家懂的，穩定效率高。同一個賬號手機上也能使用，掃二維碼就能進行同步。文中介紹的軟體許多是要翻qiang的，打不開請試試翻一下。

OmniDiskSweeper

用來清理系統內存，樓主Mac是250G的空間，系統就佔了將近100G，說起來都是類，這個樓主也上網查過，貌似沒有什麼特別好的方法去解決，通過這個軟體能有所緩解。再就是在用sketch的時候將自動保存的功能關掉會省不少空間的。

在與工程師交接的過程中有項任務是整理好APP裡面的多語言翻譯文件。即，一個button上中文是「完成」，英文變成「Done」，整體進行整理完善後再發給對方，有時候這項工作由PM（產品經理）來完成。但多方進行溝通的過程中免不了要打開或者編輯一些這樣的文檔。Sublime Text對於批量查找和編輯來說，對設計師是比較友好的。

總結，每款軟體和工具都有它主要的特色，基本上沒有一款軟體能解決所有問題的情況，所以樓主在某一個方面的軟體時，經過時間的沉澱都會剩下兩到三款。這兩到三款就是精華所在了。但市場瞬息萬變，長江後浪推前浪，所不定會有更好的適合階段性的工具存在。但咱們的宗旨是，主要的還是自己的想法，能實現自己目的的工具就是好工具，在上面所費的時間適可而止。

Sophia 的 tips：

相關文章

《交互設計師手機必備APP》

找到很艱難，得到很幸運~

職場設計教程搶先看～一枚愛折騰、愛健身的設計師妹紙~

詳情請關注微信公眾號：Sophia的玲瓏閣，獲取更多有關交互、健身及其它相關信息。

推薦閱讀：