交互設(shè)計誰是最好用的原型繪制工具

尚：作為一個交互設(shè)計師，選用什么工具來完成快速原型繪制是一個爭論不斷的話題，從早些年“唯一”的選擇 visio 到如今 Axure / Omnigraffle / Adobe Creative Suite 遍地開花，再加上在線工具balsamiq, Lucidchart 或 Google Drive，思維導(dǎo)圖工具 XMind, Mindmanager 或 MindNode，在不同的細(xì)分領(lǐng)域給了我們很多的選擇，那么，哪個才是最好的原型繪制工具呢？

在實際使用過程中，由于項目具體階段、平臺特性以及輸出物展示對象的不同，并沒有哪個工具受到設(shè)計師們一致認(rèn)可，每個都有其各自的優(yōu)勢和缺陷，按照個人經(jīng)驗對比了一下常見的幾款。

下面，詳細(xì)介紹一下每一類軟件的優(yōu)劣。
Photoshop 作為設(shè)計師的看家技能，理論上可以通過它做出任何圖形，但對于交互原型來說制作和改動成本略高，圖層和組件的處理上比較死板，軟件自身性能和模板庫也很受挑戰(zhàn)，容易過快進入細(xì)節(jié)討論而忘記初衷，并非交互稿首選，當(dāng)然也有設(shè)計師一開始就是朝著高保真 Demo 方向做的，用它最直觀。 Illustrator 同胞兄弟 Illustrator 在矢量處理上表現(xiàn)的略好，不受畫布大小和圖層的困擾，也有豐富的模板庫支持原型設(shè)計，但繼承了 Adobe 家族一貫功能大而全導(dǎo)致操作很繁瑣的特點，原型圖制作效率也不高。 Fireworks 相比之下，干兒子 Fireworks 擁有更簡單的界面，同樣在圖層處理方面的優(yōu)勢，尤其是可編輯 png 文件包含了圖層和矢量信息這一點保證了文檔的傳承性，受到很多的設(shè)計團隊的青睞而做為交互輸出工具的首選，可惜 Adobe 對其支持有限，最新的 Adobe CC 家族中更是失去了它的蹤影，未來 Fireworks 優(yōu)化空間很有限。
Keynote / PPT 作為非專業(yè)繪圖工具，用 Keynote / PPT 來畫交互稿算是曲線救國，豐富的交互動作和簡單的使用流程解決了很多交互演示需求，CDC 的同事曾寫過一篇《關(guān)于快速原型的一點糾結(jié)》 做了很好的解釋，但問題也正如文章中所述，優(yōu)缺點非常明顯，模板庫幾乎為零，在沒有其它工具輔助情況下自行繪制費時費力，在這里就不詳細(xì)介紹了。

Axure 號稱是互聯(lián)網(wǎng)產(chǎn)品經(jīng)理標(biāo)配，國內(nèi)有大量資料和討論，其優(yōu)勢非常明顯：操作復(fù)雜度介于 Keynote/PPT 和 Adobe 家族之間；擁有全套 web 控件庫，直接拖拽即可快速制作網(wǎng)站原型；豐富的動態(tài)面板可以用來模擬各種復(fù)雜的交互效果；導(dǎo)出 HTML 后可以更加準(zhǔn)確的傳達信息架構(gòu)和頁面跳轉(zhuǎn)。 但對移動產(chǎn)品原型支持不足，Axure 無法導(dǎo)出可在移動端演示的文件，只適合做信息結(jié)構(gòu)和頁面邏輯的展示。在對形狀樣式的處理上不夠豐富，很多細(xì)節(jié)處理的不夠好，做出來的線框圖大多不夠好看。
OmniGraffle 作為 Mac 平臺下最好的原型設(shè)計工具，除了用來繪制普通圖表、樹狀結(jié)構(gòu)圖、流程圖、頁面編排等，還可以試試規(guī)劃電影劇本、 繪制公司組織結(jié)構(gòu)，甚至是作為演示文稿來展示一個項目。 由于利用了很多 OS X 原生繪圖屬性，Omnigraffle 只支持 Mac / iPad ，它在很多方面表現(xiàn)都有 Visio 的影子，就連名字里的 “Graffle” 都是創(chuàng)造出來對應(yīng) “Visio” 的，盡管在 web 交互事件上并不如 Axure 那么豐富，對移動平臺的支持也不如一些新星 (如 briefs 和 fluidui ) 的表現(xiàn)那么亮眼，但由于其豐富的模板庫、輕松的上手體驗以及大量貼心的細(xì)節(jié)，戰(zhàn)勝了其它所有競爭對手，成為我日常工作最主要的工具。 以上幾個軟件已經(jīng)能涵蓋大多數(shù)的使用場景，但工具畢竟只是紙和筆的延伸，在熟練掌握其中一個的基礎(chǔ)上，不斷嘗試新工具不僅能發(fā)現(xiàn)更多有價值的技巧加快設(shè)計節(jié)奏，更是對自身能力短板的了解，互相結(jié)合使用讓想法不受工具牽絆，努力讓自己成為全棧設(shè)計師才是它們的價值。 另外，市面上較少介紹 OmniGraffle 技巧的文章，很多人感興趣但不知道怎么用好它，下面分享10個有用的小技巧來加快上手。
1. 自定義你的工作界面

2. 樣式刷
在 Omnigraffle 中，可以通過拖拽指示器到另一個組件上的方式將包括邊框填充顏色等樣式復(fù)制過去，也可以復(fù)制任意單一屬性，大大節(jié)省了重復(fù)或近似組件的樣式修改成本。
3. 網(wǎng)格、智能輔助線及參考線
除圖示外，在畫布空白處點擊右鍵可以看到三個選項

1. 對齊到網(wǎng)格，參考定義畫布環(huán)節(jié)描述的網(wǎng)格設(shè)定，勾選這個選項后，調(diào)整形狀大小就會使邊緣貼近網(wǎng)格，拖拽位置時會根據(jù)形狀大小讓任意一邊貼近網(wǎng)格。
2. 智能對齊輔助線，勾選后，拖拽形狀位置時，會自動尋找當(dāng)前水平或垂直方向，邊緣或中心能對齊的已有形狀或畫布中心線，推薦勾選
3. 智能距離輔助線，勾選后，會自動尋找水平或垂直方向上臨近的兩個形狀，在等距的時候給出提示，推薦勾選

4. 流程圖
在用 visio 畫流程圖過程中最受不了的就是連接線不能隨意控制形狀位置樣式，只能畫幾種特定的圖，新建節(jié)點的操作步驟也很繁瑣，而這一缺陷直接導(dǎo)致各種思維導(dǎo)圖軟件的崛起。在 Omnigraffle 中這些都變得很容易，只要記住幾個快捷鍵，畫起流程圖來輕松寫意。 5. 點擊事件以及導(dǎo)出 pdf & html
在制作交互模型時，加入對點擊事件的處理能很方便的演示我們想要的效果，Omnigraffle 支持的腳本不多，沒有鼠標(biāo)滑過，沒有動畫，只有點擊跳轉(zhuǎn)和點擊顯示或隱藏圖層兩種，對于一般的原型演示足夠用了，尤其是圖層顯示隱藏，例如可以像圖中所示將浮層中的內(nèi)容放在圖層2上，用關(guān)閉按鈕用來觸發(fā)隱藏，來實現(xiàn)圖示效果。 在演講模式、導(dǎo)出為 pdf 或 html 后都可以用來演示設(shè)定好的交互點擊效果。在演示移動原型的時，我通常的做法是制作和屏幕大小一致的文件，設(shè)置好點擊效果后導(dǎo)出 pdf ，在手機上用任意支持讀取 pdf 的應(yīng)用打開。（這里推薦多看，無頁面翻轉(zhuǎn)動畫，無多余留白） 6. 畫布和圖層 和 Fireworks 一樣，Omnigraffle 提供類似的畫布和圖層管理，方便將項目所有內(nèi)容集中在一個文件中，每個畫布可以單獨設(shè)置頁面背景、大小、單位、網(wǎng)格和參考線，并且可以通過共享圖層讓所有畫布使用同一個母版，也就是說既可以當(dāng) Indesign 用，也可以當(dāng) PPT 用。 畫布：Omnigraffle 默認(rèn)使用 pt 來定義自身單位，在畫布面板中用 1pt = 1xx 的方式來設(shè)置換算方式，目標(biāo)單位可以是像素、厘米、英尺、千米等，意味著除了用來畫用戶界面，還支持用來畫地圖、家裝平面圖等任何大小的精準(zhǔn)圖形。 圖層：可以將 Omnigraffle 中的圖層理解為一個特殊的、可以批量隱藏或鎖定的、可以直接轉(zhuǎn)換為所有頁面共享的群組，共享圖層的名稱會被標(biāo)記為橙色，界面左下方的內(nèi)容面板顯示了每個圖層內(nèi)部的層疊順序，如果文件導(dǎo)出時選擇 psd，Omnigraffle 還會將圖層內(nèi)容合并成 photoshop 能讀取的格式。 如圖所示，利用共享圖層這一特性，我們可以將畫布設(shè)定為1024*768，并在共享圖層的指定位置插入頁碼 (Edit→Insert Variable→Canvas Number) 等，模擬 PPT 的方式制作演示用文檔。
7. 快捷鍵 點擊 Help→Keyboard Shortcuts，查閱所有的系統(tǒng)快捷鍵，了解下面這幾個就能滿足大部分情景了

1. 最常用的檢查器面板，cmd+12345切換；
2. 設(shè)置好一個常用的形狀樣式，右鍵點擊加入收藏，以后按住 s 不放就可以直接畫出來；
3. 按住 t 不放點擊空白處就可以直接新建一個文本塊，雙擊任意形狀也可以在里面插入文字；
4. 放大縮小只能通過 cmd+shift+. 和 cmd+shift+, 右手需要離開鼠標(biāo)不是很方便，我通常是按住 z 鼠標(biāo)點屏幕來放大，option+z 點擊屏幕來縮?。▃這個操作在ps和ai里也通用）；
5. 快速復(fù)制一個形狀 cmd+d，新的形狀會在當(dāng)前形狀右下方一個網(wǎng)格的位置出現(xiàn)，比cmd+c之后在cmd+v省一步。

8. 無窮的模板庫 在 Omnigraffle 中，工作文檔 .graffle和模板文檔 .stencil 的表現(xiàn)和編輯是完全一樣的，可以很方便的將已經(jīng)編輯好的文檔組織整理后，復(fù)制粘貼到模板文件中沉淀，作為后期復(fù)用規(guī)范，如果搭配云同步工具使用，小型設(shè)計團隊統(tǒng)一設(shè)計規(guī)范不再是難事。 除軟件自身提供的一堆模板外，全球 Omnigraffle 愛好者們搭建了 Graffletopia 用來共享各自的模板 (部分收費)，事實上如果你有足夠的耐心和精力，所有的模板你都可以照貓畫虎自己畫出來。
9. 制作自己的圖標(biāo)庫 Omnigraffle 自帶的圖形基本上能滿足大部分需求，簡單形狀也可以用形狀組合和鋼筆工具來畫， Graffletopia 上有很多其他人畫好的形狀圖標(biāo)，但面對具體項目的時候需要自己畫圖標(biāo)時該怎么辦呢？以下有幾種方式可供大家選擇

1. 最快捷：直接粘貼圖標(biāo)圖片進來，缺點是無法調(diào)整顏色，不可放大。
2. 多色圖標(biāo)：從 AI 中直接拖拽圖形進來，仍舊保持矢量可隨意拖拽但不可調(diào)整顏色。
3. 單色圖標(biāo)：將 AI 中畫好的單色圖標(biāo)導(dǎo)出為pdf (File→scripts→SaveDocsAsPDF) 后用 Omnigraffle 打開，可隨意調(diào)整大小和顏色，非常適合圖標(biāo)庫的建立。

10. 使用hex值定義顏色
Mac 自帶的取色器只能在已有的顏色集里選或是靠肉眼在色盤里選，非常不嚴(yán)謹(jǐn)，還好有愛心人士提供了 Hex Color Picker 和 Developer Color Picker 插件來幫助我們精準(zhǔn)設(shè)定顏色。 延伸閱讀

1. OmniGraffle 6 for Mac 新特性預(yù)覽，用來幫助從舊版本升級上來不知所措的老用戶回到 Omnigraffle 的懷抱。
2. 如何安裝模板？如果需要手動安裝，則只需要在 Omnigraffle 中點開模板庫，任意選擇一個模板后，點擊模板名稱右側(cè)的齒輪，選擇 Show In Finder 就可以看到全部的模板，將下載好 Stencil 文件拖進來即可。
3. Mac 下另一款設(shè)計軟件 Sketch 也非常棒，五星推薦。