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

小伙伴咨詢工具類的問題也不少，于是羅列出一些，不定期進行更新吧（我自己的偏向，供參考，網站鏈接很多需要搭梯子訪問）。

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

方案繪制

Sketch

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

Photoshop

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

圖片處理

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

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

動效原型

Flinto

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

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也行進行本地的同步，體驗流暢，愛不釋手。百度網盤作為國內一些資料的補充。

系統相關

OmniDiskSweeper

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

Sublime Text

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

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

作者簡介：Sophia的玲瓏閣，一枚愛折騰，愛健身的交互設計妹紙。

職場設計技能，更多教程搶先看，請關注作者的微信公眾號：「Sophia的玲瓏閣」

「設計師必備軟件合集」

1. 動效設計丨《新人手冊！動效設計幾乎都是這10個軟件做的（內附教程）》
2. 工作流程丨《畢業生必備軟件！6套APP構建我的產品設計工作流》
3. 軟件學習丨《從零基礎到高手！教你一個快速學會軟件的萬能方法》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量190萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com