交互設計誰(shuí)是最好用的原型繪制工具發(fā)布者：本站     時(shí)間：2020-06-21 11:06:24

Photoshop
作為設計師的看家技能，理論上可以通過(guò)它做出任何圖形，但對于交互原型來(lái)說(shuō)制作和改動(dòng)成本略高，圖層和組件的處理上比較死板，軟件自身性能和模板庫也很受挑戰，容易過(guò)快進(jìn)入細節討論而忘記初衷，并非交互稿首選，當然也有設計師一開(kāi)始就是朝著(zhù)高保真 Demo 方向做的，用它最直觀(guān)。

Illustrator
同胞兄弟 Illustrator 在矢量處理上表現的略好，不受畫(huà)布大小和圖層的困擾，也有豐富的模板庫支持原型設計，但繼承了 Adobe 家族一貫功能大而全導致操作很繁瑣的特點(diǎn)，原型圖制作效率也不高。

Fireworks
相比之下，干兒子 Fireworks 擁有更簡(jiǎn)單的界面，同樣在圖層處理方面的優(yōu)勢，尤其是可編輯 png 文件包含了圖層和矢量信息這一點(diǎn)保證了文檔的傳承性，受到很多的設計團隊的青睞而做為交互輸出工具的首選，可惜 Adobe 對其支持有限，最新的 Adobe CC 家族中更是失去了它的蹤影，未來(lái) Fireworks 優(yōu)化空間很有限。

3.tools.keynote

Keynote / PPT
作為非專(zhuān)業(yè)繪圖工具，用 Keynote / PPT 來(lái)畫(huà)交互稿算是曲線(xiàn)救國，豐富的交互動(dòng)作和簡(jiǎn)單的使用流程解決了很多交互演示需求，CDC 的同事曾寫(xiě)過(guò)一篇《關(guān)于快速原型的一點(diǎn)糾結》 做了很好的解釋?zhuān)珕?wèn)題也正如文章中所述，優(yōu)缺點(diǎn)非常明顯，模板庫幾乎為零，在沒(méi)有其它工具輔助情況下自行繪制費時(shí)費力，在這里就不詳細介紹了。

4.tools.axure

Axure
號稱(chēng)是互聯(lián)網(wǎng)產(chǎn)品經(jīng)理標配，國內有大量資料和討論，其優(yōu)勢非常明顯：操作復雜度介于 Keynote/PPT 和 Adobe 家族之間；擁有全套 web 控件庫，直接拖拽即可快速制作網(wǎng)站原型；豐富的動(dòng)態(tài)面板可以用來(lái)模擬各種復雜的交互效果；導出 HTML 后可以更加準確的傳達信息架構和頁(yè)面跳轉。

但對移動(dòng)產(chǎn)品原型支持不足，Axure 無(wú)法導出可在移動(dòng)端演示的文件，只適合做信息結構和頁(yè)面邏輯的展示。在對形狀樣式的處理上不夠豐富，很多細節處理的不夠好，做出來(lái)的線(xiàn)框圖大多不夠好看。

5.tools.omnigraffle

OmniGraffle
作為 Mac 平臺下最好的原型設計工具，除了用來(lái)繪制普通圖表、樹(shù)狀結構圖、流程圖、頁(yè)面編排等，還可以試試規劃電影劇本、 繪制公司組織結構，甚至是作為演示文稿來(lái)展示一個(gè)項目。

由于利用了很多 OS X 原生繪圖屬性，Omnigraffle 只支持 Mac / iPad ，它在很多方面表現都有 Visio 的影子，就連名字里的 “Graffle” 都是創(chuàng )造出來(lái)對應 “Visio” 的，盡管在 web 交互事件上并不如 Axure 那么豐富，對移動(dòng)平臺的支持也不如一些新星 (如 briefs 和 fluidui ) 的表現那么亮眼，但由于其豐富的模板庫、輕松的上手體驗以及大量貼心的細節，戰勝了其它所有競爭對手，成為我日常工作最主要的工具。

以上幾個(gè)軟件已經(jīng)能涵蓋大多數的使用場(chǎng)景，但工具畢竟只是紙和筆的延伸，在熟練掌握其中一個(gè)的基礎上，不斷嘗試新工具不僅能發(fā)現更多有價(jià)值的技巧加快設計節奏，更是對自身能力短板的了解，互相結合使用讓想法不受工具牽絆，努力讓自己成為全棧設計師才是它們的價(jià)值。

另外，市面上較少介紹 OmniGraffle 技巧的文章，很多人感興趣但不知道怎么用好它，下面分享10個(gè)有用的小技巧來(lái)加快上手。