[ 平面理論教程 ] 淺談誰是最好用的原型繪製工具？- 其他教程 - 骨子愛創意

教學主題: 淺談誰是最好用的原型繪製工具？

大家好!! 小編今天來和大家分享關於 其他教程中的平面理論教程教學

今天的這個教學主題是: 淺談誰是最好用的原型繪製工具？

這教學的重點為這幾點 [ 工具,原型,最好,可以,形狀,Omnigraffle,點擊, ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

作為一個交互設計師，選用什麼工具來完成快速原型繪製是一個爭論不斷的話題，從早些年“唯一”的選擇visio到如今Axure/Omnigraffle/AdobeCreativeSuite遍地開花，再加上在線工具balsamiq,Lucidchart或GoogleDrive，思維導圖工具XMind,Mindmanager或MindNode，

作為一個交互設計師，選用什麼工具來完成快速原型繪製是一個爭論不斷的話題，從早些年“唯一”的選擇visio到如今Axure/Omnigraffle/AdobeCreativeSuite遍地開花，再加上在線工具balsamiq,Lucidchart或GoogleDrive，思維導圖工具XMind,Mindmanager或MindNode，在不同的細分領域給了我們很多的選擇，那麼，哪個才是最好的原型繪製工具呢?

在實際使用過程中，由於項目具體階段、平台特性以及輸出物展示對象的不同，並沒有哪個工具受到設計師們一致認可，每個都有其各自的優勢和缺陷，按照個人經驗對比了一下常見的幾款。

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

Photoshop

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

Illustrator

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

Fireworks

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

Keynote/PPT

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

Axure

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

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

OmniGraffle

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

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

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

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

1.自定義你的工作界面

2.樣式刷

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

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→InsertVariable→CanvasNumber)等，模擬PPT的方式製作演示用文檔。

7.快捷鍵

點擊Help→KeyboardShortcuts，查閱所有的系統快捷鍵，了解下面這幾個就能滿足大部分情景了，最常用的檢查器面板，cmd+12345切換；設置好一個常用的形狀樣式，右鍵點擊加入收藏，以後按住s不放就可以直接畫出來；按住t不放點擊空白處就可以直接新建一個文本塊，雙擊任意形狀也可以在裡面插入文字；放大縮小隻能通過cmd+shift+.和cmd+shift+,右手需要離開鼠標不是很方便，我通常是按住z鼠標點屏幕來放大，option+z點擊屏幕來縮小(z這個操作在ps和ai里也通用；快速複製一個形狀cmd+d，新的形狀會在當前形狀右下方一個網格的位置出現，比cmd+c之後在cmd+v省一步。

8.無窮的模板庫

在Omnigraffle中，工作文檔.graffle和模板文檔.stencil的表現和編輯是完全一樣的，可以很方便的將已經編輯好的文檔組織整理后，複製粘貼到模板文件中沉澱，作為後期復用規範，如果搭配雲同步工具使用，小型設計團隊統一設計規範不再是難事。

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

9.製作自己的圖標庫

Omnigraffle自帶的圖形基本上能滿足大部分需求，簡單形狀也可以用形狀組合和鋼筆工具來畫，Graffletopia上有很多其他人畫好的形狀圖標，但面對具體項目的時候需要自己畫圖標時該怎麼辦呢?以下有幾種方式可供大家選擇

最快捷：直接粘貼圖標圖片進來，缺點是無法調整顏色，不可放大。

多色圖標：從AI中直接拖拽圖形進來，仍舊保持矢量可隨意拖拽但不可調整顏色。

單色圖標：將AI中畫好的單色圖標導出為pdf(File→Scripts→SaveDocsAsPDF)後用Omnigraffle打開，可隨意調整大小和顏色，非常適合圖標庫的建立。

10.使用hex值定義顏色

貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit／Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

Mac自帶的取色器只能在已有的顏色集里選或是靠肉眼在色盤裡選，非常不嚴謹，還好有愛心人士提供了HexColorPicker和DeveloperColorPicker插件來幫助我們精準設定顏色。

看完小編分享的教學之後 是不是對平面理論教程中的其他教程教學更熟悉了呢?

希望我們所介紹的 淺談誰是最好用的原型繪製工具？ 這教學會喜歡

文章標題: 骨子愛創意- 淺談誰是最好用的原型繪製工具？–轉載請註明來源處

本教學分類為平面理論教程中的 其他教程相關教學

文章相關關鍵字為: 工具,原型,最好,可以,形狀,Omnigraffle,點擊,

本文永久連結 :淺談誰是最好用的原型繪製工具？

本文轉載自 :VIA