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

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

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

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

3.tools.keynote

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

4.tools.axure

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

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

5.tools.omnigraffle

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

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

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

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