交互設計誰是最好用的原型繪製工具

尚：做爲一個交互設計師，選用什麼工具來完成快速原型繪製是一個爭論不斷的話題，從早些年「惟一」的選擇 visio 到現在 Axure / Omnigraffle / Adobe Creative Suite 遍地開花，再加上在線工具balsamiq, Lucidchart 或 Google Drive，思惟導圖工具 XMind, Mindmanager 或 MindNode，在不一樣的細分領域給了咱們不少的選擇，那麼，哪一個纔是最好的原型繪製工具呢？

在實際使用過程當中，因爲項目具體階段、平臺特性以及輸出物展現對象的不一樣，並無哪一個工具受到設計師們一致承認，每一個都有其各自的優點和缺陷，按照我的經驗對比了一下常見的幾款。

下面，詳細介紹一下每一類軟件的優劣。

Photoshop

做爲設計師的看家技能，理論上能夠經過它作出任何圖形，但對於交互原型來講製做和改動成本略高，圖層和組件的處理上比較死板，軟件自身性能和模板庫也很受挑戰，容易過快進入細節討論而忘記初衷，並不是交互稿首選，固然也有設計師一開始就是朝着高保真 Demo 方向作的，用它最直觀。

Illustrator

同胞兄弟 Illustrator 在矢量處理上表現的略好，不受畫布大小和圖層的困擾，也有豐富的模板庫支持原型設計，但繼承了 Adobe 家族一向功能大而全致使操做很繁瑣的特色，原型圖製做效率也不高。

Fireworks

相比之下，乾兒子 Fireworks 擁有更簡單的界面，一樣在圖層處理方面的優點，尤爲是可編輯 png 文件包含了圖層和矢量信息這一點保證了文檔的傳承性，受到不少的設計團隊的青睞而作爲交互輸出工具的首選，惋惜 Adobe 對其支持有限，最新的 Adobe CC 家族中更是失去了它的蹤跡，將來 Fireworks 優化空間頗有限。

Keynote / PPT

做爲非專業繪圖工具，用 Keynote / PPT 來畫交互稿算是曲線救國，豐富的交互動做和簡單的使用流程解決了不少交互演示需求，CDC 的同事曾寫過一篇《關於快速原型的一點糾結》 作了很好的解釋，但問題也正如文章中所述，優缺點很是明顯，模板庫幾乎爲零，在沒有其它工具輔助狀況下自行繪製費時費力，在這裏就不詳細介紹了。

Axure

號稱是互聯網產品經理標配，國內有大量資料和討論，其優點很是明顯：操做複雜度介於 Keynote/PPT 和 Adobe 家族之間；擁有全套 web 控件庫，直接拖拽便可快速製做網站原型；豐富的動態面板能夠用來模擬各類複雜的交互效果；導出 HTML 後能夠更加準確的傳達信息架構和頁面跳轉。

但對移動產品原型支持不足，Axure 沒法導出可在移動端演示的文件，只適合作信息結構和頁面邏輯的展現。在對形狀樣式的處理上不夠豐富，不少細節處理的不夠好，作出來的線框圖大多不夠好看。

OmniGraffle

做爲 Mac 平臺下最好的原型設計工具，除了用來繪製普通圖表、樹狀結構圖、流程圖、頁面編排等，還能夠試試規劃電影劇本、 繪製公司組織結構，甚至是做爲演示文稿來展現一個項目。

因爲利用了不少 OS X 原生繪圖屬性，Omnigraffle 只支持 Mac / iPad ，它在不少方面表現都有 Visio 的影子，就連名字裏的 「Graffle」 都是創造出來對應 「Visio」 的，儘管在 web 交互事件上並不如 Axure 那麼豐富，對移動平臺的支持也不如一些新星 (如 briefs 和 fluidui ) 的表現那麼亮眼，但因爲其豐富的模板庫、輕鬆的上手體驗以及大量貼心的細節，打敗了其它全部競爭對手，成爲我平常工做最主要的工具。

以上幾個軟件已經能涵蓋大多數的使用場景，但工具畢竟只是紙和筆的延伸，在熟練掌握其中一個的基礎上，不斷嘗試新工具不只能發現更多有價值的技巧加快設計節奏，更是對自身能力短板的瞭解，互相結合使用讓想法不受工具牽絆，努力讓本身成爲全棧設計師纔是它們的價值。

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

1. 自定義你的工做界面

2. 樣式刷

在 Omnigraffle 中，能夠經過拖拽指示器到另外一個組件上的方式將包括邊框填充顏色等樣式複製過去，也能夠複製任意單一屬性，大大節省了重複或近似組件的樣式修改爲本。

3. 網格、智能輔助線及參考線

除圖示外，在畫布空白處點擊右鍵能夠看到三個選項

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

4. 流程圖

在用 visio 畫流程圖過程當中最受不了的就是鏈接線不能隨意控制形狀位置樣式，只能畫幾種特定的圖，新建節點的操做步驟也很繁瑣，而這一缺陷直接致使各類思惟導圖軟件的崛起。在 Omnigraffle 中這些都變得很容易，只要記住幾個快捷鍵，畫起流程圖來輕鬆寫意。

5. 點擊事件以及導出 pdf & html

在製做交互模型時，加入對點擊事件的處理能很方便的演示咱們想要的效果，Omnigraffle 支持的腳本很少，沒有鼠標滑過，沒有動畫，只有點擊跳轉和點擊顯示或隱藏圖層兩種，對於通常的原型演示足夠用了，尤爲是圖層顯示隱藏，例如能夠像圖中所示將浮層中的內容放在圖層2上，用關閉按鈕用來觸發隱藏，來實現圖示效果。

在演講模式、導出爲 pdf 或 html 後均可以用來演示設定好的交互點擊效果。在演示移動原型的時，我一般的作法是製做和屏幕大小一致的文件，設置好點擊效果後導出 pdf ，在手機上用任意支持讀取 pdf 的應用打開。（這裏推薦多看，無頁面翻轉動畫，無多餘留白）

6. 畫布和圖層

和 Fireworks 同樣，Omnigraffle 提供相似的畫布和圖層管理，方便將項目全部內容集中在一個文件中，每一個畫布能夠單獨設置頁面背景、大小、單位、網格和參考線，而且能夠經過共享圖層讓全部畫布使用同一個母版，也就是說既能夠當 Indesign 用，也能夠當 PPT 用。

畫布：Omnigraffle 默認使用 pt 來定義自身單位，在畫布面板中用 1pt = 1xx 的方式來設置換算方式，目標單位能夠是像素、釐米、英尺、公里等，意味着除了用來畫用戶界面，還支持用來畫地圖、家裝平面圖等任何大小的精準圖形。

圖層：能夠將 Omnigraffle 中的圖層理解爲一個特殊的、能夠批量隱藏或鎖定的、能夠直接轉換爲全部頁面共享的羣組，共享圖層的名稱會被標記爲橙色，界面左下方的內容面板顯示了每一個圖層內部的層疊順序，若是文件導出時選擇 psd，Omnigraffle 還會將圖層內容合併成 photoshop 能讀取的格式。

如圖所示，利用共享圖層這一特性，咱們能夠將畫布設定爲1024*768，並在共享圖層的指定位置插入頁碼 (Edit→Insert Variable→Canvas Number) 等，模擬 PPT 的方式製做演示用文檔。

7. 快捷鍵

點擊 Help→Keyboard Shortcuts，查閱全部的系統快捷鍵，瞭解下面這幾個就能知足大部分情景了

1. 最經常使用的檢查器面板，cmd+12345切換；
2. 設置好一個經常使用的形狀樣式，右鍵點擊加入收藏，之後按住 s 不放就能夠直接畫出來；
3. 按住 t 不放點擊空白處就能夠直接新建一個文本塊，雙擊任意形狀也能夠在裏面插入文字；
4. 放大縮小隻能經過 cmd+shift+. 和 cmd+shift+, 右手須要離開鼠標不是很方便，我一般是按住 z 鼠標點屏幕來放大，option+z 點擊屏幕來縮小（z這個操做在ps和ai裏也通用）；
5. 快速複製一個形狀 cmd+d，新的形狀會在當前形狀右下方一個網格的位置出現，比cmd+c以後在cmd+v省一步。

8. 無窮的模板庫

在 Omnigraffle 中，工做文檔 .graffle和模板文檔 .stencil 的表現和編輯是徹底同樣的，能夠很方便的將已經編輯好的文檔組織整理後，複製粘貼到模板文件中沉澱，做爲後期複用規範，若是搭配雲同步工具使用，小型設計團隊統一設計規範再也不是難事。

除軟件自身提供的一堆模板外，全球 Omnigraffle 愛好者們搭建了 Graffletopia 用來共享各自的模板 (部分收費)，事實上若是你有足夠的耐心和精力，全部的模板你均可以照貓畫虎本身畫出來。

9. 製做本身的圖標庫

Omnigraffle 自帶的圖形基本上能知足大部分需求，簡單形狀也能夠用形狀組合和鋼筆工具來畫， Graffletopia 上有不少其餘人畫好的形狀圖標，但面對具體項目的時候須要本身畫圖標時該怎麼辦呢？如下有幾種方式可供你們選擇

1. 最快捷：直接粘貼圖標圖片進來，缺點是沒法調整顏色，不可放大。
2. 多色圖標：從 AI 中直接拖拽圖形進來，仍舊保持矢量可隨意拖拽但不可調整顏色。
3. 單色圖標：將 AI 中畫好的單色圖標導出爲pdf (File→Scripts→SaveDocsAsPDF) 後用 Omnigraffle 打開，可隨意調整大小和顏色，很是適合圖標庫的創建。

10. 使用hex值定義顏色

Mac 自帶的取色器只能在已有的顏色集裏選或是靠肉眼在色盤裏選，很是不嚴謹，還好有愛心人士提供了 Hex Color Picker 和 Developer Color Picker 插件來幫助咱們精準設定顏色。