OmniGraffle-新手指南

OmniGraffle是一款不錯的可視化軟件，經過它你能夠把你想要展示的數據簡介、直觀的展示在圖、表上，這是我在數據可視化工具這篇隨筆中說過的功能。可是當我真正用它時，我發現它能夠作的事情還有不少。

用來繪製實體關係的ER圖，用來繪製程序流程圖，甚至我當時苦苦尋找的思惟導圖軟件，發現其餘的都收費過高，而OmniGraffle，也是能夠實現繪製思惟導圖的，這麼強大的軟件固然值得學習了，下面我直接在網上借鑑一篇文章，文章來源是http://www.uisdc.com/omnigraffle，謝謝這位哥的無私奉獻。。

OmniGraffle是一款至關全面的工具，用途很普遍，不過今天咱們 主要側重在瞭解怎樣使用它來製做線框圖。我(英文原文做者)我的在這方面嘗試過不少軟件，坦誠的說，沒有一款是真正完美的，包括OmniGraffle， 但它在綜合能力及效率方面的表現確實是最讓我滿意的。不過首先，我仍是想說起OmniGraffle的兩點不足。一是它並不擅長於生成完美的可交互原型，固然，你仍是可以製做可點擊的界面原型的，譬如在某些狀況下顯示或隱藏某些圖層，或是切換界面等等；另一點就是這款軟件只能運行在Mac當中。

官方下載地址：http://www.omnigroup.com/products/omnigraffle/

仍是那句話，沒有哪一個工具是真正完美的，忽略這兩點缺陷(嚴格的說第二點不能算做缺陷)，OmniGraffle真的是一款很棒的線框圖工具。接下來，我將和各位一塊兒對OmniGraffle的強大功能進行一下縱覽，瞭解怎樣經過它製做一流的線框圖。

知識點

咱們將在本文中對如下這些界面元素進行了解：

• 畫布與圖層側邊欄(Canvas and Layers sidebar)
• 模板窗口(Stencils Window)
• 檢查器(The Inspector)
  • 樣式編輯器(Style Editors)
    • 填充(Fill)
    • 線條(Outline)
    • 陰影(Shadow)
    • 圖片(Image)
    • 文字(Text)
  • 對齊/屬性(Alignment/Properties)
  • 交互(Interactivity)

畫布與圖層(Canvases and Layers)

畫布與圖層側邊欄用來呈現文檔及其內容的組織結構。咱們能夠在這裏查看每一個畫布當中的內容縮略，還有它們之間的層級結構，這使得咱們可以更加輕鬆的管理和組織文檔。

咱們能夠在畫布中建立線框圖，畫布可以承載咱們所需的任何類型的內容。我一般會先建立一個「封面」頁、一些流程圖，還有一些關於用戶的信息或是我須要解決的問題。這以後才進入實際的線框圖製做階段。

而 圖層則用於在畫布當中組織內容。若是你熟悉Photoshop或Illustrator，那麼對圖層的概念應該很瞭解了。在圖層中，你能夠移動和組織各種 元素；而調整不一樣圖層的順序則可以幫助你按照本身所須要的方式組織頁面結構，就像咱們在Photoshop當中所作的那樣。

我 們所建立的多數界面中都會包含例如導航欄、頁腳、背景這類不會隨界面而發生變化的元素。這時咱們就須要使用「共享圖層(shared layer)」了，這種圖層能夠幫助咱們輕鬆的建立出可以複用於多個畫布的元素；未來任何針對共享圖層所進行的修改也會直接做用於那些使用了該圖層的畫布 之上。

有一點須要注意，共享圖層中的元素在任何畫布當中都會保持在固定的位置上，譬如導航欄永遠會在導航欄的位置。若是你須要的是更加靈活的可複用元素，那麼後文中將會介紹到的「共享對象(shared object)」纔是更合適的選擇。

形狀與文字(Shapes and Text)

形狀

在建立線框圖的過程當中，各類形狀是咱們最經常使用到的工具。我一般會用到的都是那些最基本的形狀，例如矩形、圓形和三角形。相比繁瑣複雜的視覺表現形式，使用這些基本的形狀來建立的頁面佈局一般能夠更直觀有效的展現出交互設計階段所需表達的重點。

咱們能夠根據實際須要來調整形狀的各類屬性。

填充色

形狀和輪廓線條(包括線條的顏色、尺寸等等)

陰影

幾何屬性

你還能夠將經常使用的形狀包括它的各類訂製化屬性打包添加到偏好當中，以便反覆使用。要添加新的偏好形狀，你須要在頁面中選中某個形狀，而後選擇形狀 (Shape)菜單中的「將當前選項添加至喜好的樣式(Add Current Selection to Favorite Styles)」。

文字

你能夠在形狀內部添加文字，並以某種方式和形狀自己保持對齊。添加以後，文字就會成爲形狀自身的一部分，跟隨形狀一塊兒聯動。

對於形狀內部的文字，OmniGraffle提供了大量的工具，用於調整行間距、字間距、對齊模式、內邊距等屬性。

你一樣能夠添加獨立的文字，不管其在視覺形式上處於形狀範圍以內或以外。

模板與主題(Stencils and Templates)

「模板」與「主題」是建立和使用可複用元素的極佳工具。主題能夠幫你創建起一套已經包含了各類相關預設的文檔，例如集體研討、組織圖表、空間計劃等。我在平常的工做中有本身的一套專用主題，你也能夠建立屬於本身的主題。

模板則是一系列有着預置樣式的界面元素，例如按鈕、文字、圖標等等。

你一樣能夠修改已有的模板和主題。在右側的模板面板中選中一套模板，而後點擊模板面板上的齒輪按鈕，在菜單中選擇「編輯模板」，便可調出模板編輯界面，你能夠在裏面像處理其餘OmniGraffle文檔同樣來編輯模板中的元素。對於主題來講也是同理。

網上有不少模板資源供你下載，我經常使用到的一些都來自於Graffletopia.com，例如移動設備界面元素模板等。推薦你看看這些模板：

• Konigi
• Twitter Bootstrap
• Foundation

經過這些模板，你能夠快速建立出很漂亮的線框原型。

共享對象(Shared Objects)

正如前面提到的，在多數時候，共享圖層是足夠知足需求的，但有時你確實須要一些屬性相同但在佈局位置上有所區別的界面元素。曾經有一度，我覺得OmniGraffle並無提供相似共享元素這樣的功能，但事情不是這樣的，只是建立共享元素的方法有些隱蔽。

在文檔中選中你要建立爲共享對象的界面元素，在頂部的編輯菜單中找到「拷貝爲」一項，選擇其中的PDF。而後刪除以前所選中的界面元素，再執行粘貼操做，這時被粘貼回來的PDF形式的元素就是咱們所說的「共享對象」了。

要編輯共享對象，只需在對象上雙擊，這時會出現一個獨立的OmniGraffle文檔，你能夠在裏面對共享對象進行編輯。保存以後，你會發現全部用到這份拷貝的元素都已經發生了相應的變化。

對齊和文檔屬性(Alignment/Properties)

另一些版面方面的功能，譬如對齊、空間調整、畫布屬性等等，也是咱們必須瞭解的。這類功能都集中在右側的檢查器面板當中。

對齊界面元素的功能是很是重要的。選中你要對齊的元素以後，在對齊面板中選擇須要對齊的基準點(側邊、邊角或中心)，而後點擊所需的對齊類型，包括橫向和縱向。

界面元素之間的相對空間調整也是經常使用的功能。你可使若干元素在某個方向上等距分佈，還能夠進一步爲它們設定彼此之間的距離。

在這些與版面相關的面板中，你能夠看到默認的長度單位是以「英寸」爲主的，建議你在實際工做中切換到更符合數字產品規則的像素。對於切換長度單位這類操做來講，最有效率的方式是在主題當中進行。

交互(Interactivity)

若是你須要爲線框原型添加一些基本的交互，那麼OmniGraffle也是能夠提供相關支持的。你須要作的就是選中界面中的交互元素，而後打開檢查器中的動做(Action)面板進行設置。OmniGraffle能夠爲點擊動做添加以下幾類交互動做：

• 打開一個URL
• 打開文件
• 運行腳本
• 跳到別處
• 顯示或隱藏圖層

我我的最經常使用的是「打開一個URL」和「跳到別處(Jumps Elsewhere)」，特別是後者，能夠用來實現畫布之間的切換，一般在線框原型中用來展現界面間的跳轉。

總結

關於OmniGraffle的新手指南就到這裏了。對於UXer們，這是一款平常工做中的基礎型工具；上手並深刻探索以後，你會發現它能夠幫助你快速的建立各種圖形文檔，特別是線框原型。此外，網上也有不少關於OmniGraffle的優秀資源等待你去發現和使用。好運叭！

原文地址：http://beforweb.com/node/202

 

如下再借鑑一篇文章，供學習這款軟件。

http://www.mobileui.cn/those-accelerate-prototyping-tool.html

市面上較少介紹 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 插件來幫助咱們精準設定顏色。