一套交互設計工具推薦

剛開始接觸交互設計往往會面臨自己的想法找不到合適的方法輸出。所以完成基本工作同時也在積極尋找、學習適合自己又和工作環境相匹配的工具。與團隊成員配合的時候沒有人會在意你是用什麼工具，成員們只想看到設計師產出的輸出物。這個時候針對不同任務類型和團隊大小找到合適的工具可以讓設計師迅速輸出團隊想要的結果輸出物，事半功倍。

隨著移動互聯網的快速發展，很多針對移動端開發的工具層出不窮，這些工具的小、快、針對性強的特點在一定程度上對產統設計工具造成一定的衝擊。

下面介紹自己常用的一套設計工具和在配合項目使用過程中的心得：

Axure

雖然現在很少用到了，但作為步入互聯網第一個接觸的軟體要紀念一下。功能大而全，有豐富的控制項可以調用（網上對於Axure的控制項資源很多），通過簡單的邏輯關係組合出豐富的動畫（8.0在動效製作有大幅提升）。但正是因為它的大而全使其在移動端設計上不夠靈活，功能多而複雜。軟體自身的設計不符合設計師工作習慣，當元素多時繪圖面板非常混亂，產出物死板不美觀。當然Axure可以做出高保真界面，但相比於Sketch要花費很大成本，如果未能多去建立母版，之後的二次三次修改成本很高。大部分產品經理在Axure上圖配文並生成html作為文檔傳遞給下一工作流程上的組員。

繪製高、低保真網頁原型圖；可作為產品、交互文檔輸出工具

Sketch

完全針對移動端設計而生的軟體。界面乾淨直觀，分層的概念符合設計師工作習慣，當界面複雜時明確的圖層與分組使元素控制項管理起來非常方便。Artboard、Symbol和Text style 的運用簡化了重複內容調用的工作也減輕了後續修改工作，圖配文的文檔輸出管理好過Axure。第三方插件的開發和控制項庫資源使設計更方便，還有很多其他的小功能，比如Share（用其他電腦可以實時觀看設計進度），自己還要邊使用邊發現。與Axure對比，前者更適合網頁原型設計而後者更傾向於移動端產品。國外Sketch已經有取代Ps、Axure的趨勢了，國內也開始普及，一些公司團隊強行統一使用Sketch。

繪製高、低保真移動端原型圖；繪製圖標、視覺設計稿；可切圖輸出；可作為交互文檔和視覺設計說明文檔的輸出工具

Omni Graffle

一款流程圖工具。流程圖無非就是圖和線的排布，自己也有用過Ai、Sketch畫流程圖。但當要修改時會很混亂，線要重新畫，版面要重新布置。而Graffle專為流程邏輯而設計，移動圖時線也隨之移動，線的屬性可更改，排版非常方便。圖層的設計方便管理界面元素，很清楚認識到哪些元素是並列關係，哪些元素是父子集關係。交互的流程，功能的結構，組織的關係，凡是涉及到關係邏輯的設計Graffle是我用過最好用的流程設計軟體。

產品功能需求邏輯圖；產品頁面交互邏輯圖

Keynote

普遍當作彙報演講的軟體，其實還可以用來輸出原型演示視頻。在開發過程中設計師很多時候不能通過靜止的圖像清晰地向工程師傳達交互過程，此時需要製作動畫原型來展示方案。製作動畫需要安排好展示邏輯，設置很多動效參數，有時甚至涉及到動效變化曲線，這些複雜的邏輯參數增加了製作成本。工程師只想看到簡單的演示，他們並不care你這個交互反饋是否有spring，delay了零點幾秒，這時可以使用keynote製作動效視頻。首先畫草圖排好展示順序和時間，在keynote上列出展示頁面，用神奇移動和自帶控制項動畫將頁面聯繫起來，製作起來非常省力。

同時本身的圖文編輯屬性、分頁展示屬性、可插入原型演示動畫的特點使keynote可作為交互文檔和設計規範文檔的輸出工具

製作簡單交互動效視頻；撰寫交互文檔；撰寫設計規範

Pixate和Quartz Composer-Origami

兩者都是交互原型製作工具，可生成模擬器或者mirror到手機上，更直觀地推敲設計交互原型。前者被Google收購已經免費，最大的特點是運用了圖層概念，將交互手勢、動畫直接添加到圖層上，並用base on將頁面聯繫起來。後者是Facebook在蘋果原生Quartz Composer動畫設計軟體上的插件，大大降低了設計使用門檻。特點是模塊化，用編程的邏輯製作動畫。不同的交互手勢和動效樣式有各自的一個模塊，用線將模塊聯繫起來，軟體的動效調用基本源於FB的Pop Animation庫。兩者學習成本很高，尤其後者，頁面多、交互多時製作面板非常複雜，但做出的動效精確優美。可適用於個別頁面中少數重要、精確的交互原型製作。

製作精準的交互動效原型

Principle

剛出來不久的原型製作軟體。操作界面和Sketch很相像，通過不同交互手勢將頁面連接起來，最大的特點是可視化程度高。在Sketch中製作的高保真原型圖可直接拖拽到Principle中，為圖片自身和圖片之間賦予交互，mirror到手機上，用來彙報自己製作的demo非常方便。通過animate和drivers也可製作出略複雜帶有條件語句的動畫，但並不能和Pixate、QC-Origami相比擬。用Principle直接將手機連接到投影上展示demo，其他手機裝上Principle後可打開用郵件收到的demo文件，評審更直觀，省去了彙報過程中很多文字描述

製作簡單交互原型；製作全局原型演示

工具只是工具而已

以上是自己從原型圖、交互原型展示到文檔輸出經常使用的一系列軟體。工具只是高效地將我們的想法用最合適的方式完整無缺地展示出來，便於別人理解與存檔。根據不同場景和輸出物選擇恰當工具，工具自身並沒有優劣。如果繪製擬物風格界面、圖標，Sketch在Ps和Ai面前就顯得力不從心；在大團隊里文檔輸出用Indesign就比用Axure等輸出的文檔更正規,更有利於存檔和日後查看，形成公司團隊的知識庫。

自己本科在剛做工業設計時常糾結於工具，看到別人優秀的作品總是把重點放到「這是用什麼渲染的？這個模型有什麼軟體建立的？」而忽略了使用者的創意和想法。那時也學習了不少軟體（Ps、Alias、Showcase、Keyshot等等），現在回想起來留下的更多是工業設計的想法思維。希望大家能清楚認識工具的意義，找到並掌握一套自己順手的工具，更重要還是要看使用者達出來的創意想法，切不可糾結於工具。