一套互動設計工具推薦

發表於2016-01-18

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

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

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

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是我用過最好用的流程設計軟體。

產品功能需求邏輯圖;產品頁面互動邏輯圖

 

Page Flow

 

Keynote

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

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

製作簡單互動動效視訊;撰寫互動文件;撰寫設計規範

 

報錯提示互動

 

Pixate和Quartz Composer-Origami

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

製作精準的互動動效原型

 

複雜的Scroll互動動效(臨摹)

 

Principle

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

製作簡單互動原型;製作全域性原型演示

 

製作互動原型演示

 

對頁面上簡單互動Mirror到手機上進行推敲

 

工具只是工具而已

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

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

相關文章