Omnigraffle畫線框圖的新手操作指南

Chinese (Traditional) (中文（繁體）) translation by Stypstive (you can also view the original English article)

Omnigraffle作為工具，可以有多種用途。不過今天我們要探索如何用它來畫線框圖。我用過各種線程圖工具，總體上來說，Omnigraffle並不算完美，但就對我工作而言，它性能和效率總體表現最佳。

它最大的問題是不具備很好的原型交互功能。你最多可製作出能點擊的原型圖，僅此而已了。你也可以顯示或隱藏圖層，不過只能在Ominigraffle應用內才能生效。

其他的缺點就是只能在Mac平台上使用。

如果不考慮這些缺點的話，Omnigraffle是個超棒的線框圖製作工具。我們將深入了解這個程序，看看Omnigraffle功能有多強，我們怎樣結合stellar來製作線框圖。

界面

下面是一些我們將在教程中看到的元素。如果你對其他元素有興趣想進一步了解的話，你可以在後面留言給我，我將盡力為您提供相關信息。

畫布和圖層工具欄
模板(Stencils)窗口
監控器
- 樣式編輯器
  - 填色
  - 邊框
  - 陰影
  - 圖片
  - 文本
- 對齊/屬性
- 交互

畫布和圖層

畫布和圖層邊欄是用來查看你所有文檔和其內容的組織結構。它們可以展示內容和層級結構，幫助你輕鬆管理和組織頁面。

在畫布上你可以建立多個頁面。可以容納各種所需的內容。我通常先建一個封面頁，一些流程圖，再加一些用戶信息，還我希望解決的問題。然後再開始真正創建線框圖。

一個畫布里可以放置多個層。如果你很熟悉Photoshop或者Illustrator，那麼Ominigraffle裡的層和它們是一樣的。在層裡面，你就可以組織或隨意放置一個個的元素。層可以上下切換順序，這樣你就可以用你需要的方式來管理頁面結構。

你是否需要在多個頁面中放置同樣的菜單欄，頁面背景，或者是頁面底部內容？那可以用一個共享層。共享層可以直接復用在不同的畫布上。調整也很方便，如果你修改了共享層，所有使用了這個共享層的畫布都會同步生效。

不過，請記住，共享層會出現在不同畫布相同的位置上。如果你不希望這樣，可以使用後面會提到的共享對象解決。

圖形和文本

圖形

畫線框圖時，圖形是最重要的工具。我最常使用的是長方形、圓形和三角形這些基本圖形。用基本圖形來構建頁面，可以直觀地看到頁面效果。和畫肖像不同，做線框圖的時候基本圖形和文本以外的東西幾乎用不上。

對圖形來說，你可以改變幾種屬性。

填充色

實際形狀和邊框（顏色、邊框尺寸等等）

陰影

幾何屬性

你可以把圖形設為你最喜歡的圖形。這樣當你需要反複使用相同樣式的圖形時會更加方便。只需要選中你需要的圖片，然後再在圖形菜單中選擇“增加當前選擇到最喜歡的樣式”即可(在最新版本中，右鍵選擇即可）。

文本

你可以在圖形中增加文本，然後對齊。這時，文本就成為這個圖形的一個性，移動圖形時文本也會跟著移動。

你可以直接使用單獨的文本。除了常規使用以外，當你需要在一個圖形中放置多個文本的話，這樣也會比較方便。

文本有許多常用的設置工具。 Omnigraffle是一個設計工具，設置留白、緊縮、首行空格這樣屬性也非常方便。

Stencils和模板

Stencils和模板可以為您提供可供直接復用的元素。模板是個現成的文檔，你直接填東西就好。我自己有個單獨的工作模板，不過Omnigraffle預裝的模板也很不錯。當然，自己建模板也很方便。 Stencils是一個預先設置好樣本的元素庫，象按鈕、文本、圖標、或者是其他的單個元素，你可以用在自己的線框圖裡。

你也可以編輯Stencils和模板。如果是Stencils，你只需要點擊Stencil，在頂部的菜單裡點擊"編輯Stencil"。應用會打開這個Stencil，你可以像編輯其他Omnigraffle文檔一樣編輯Stencil 模板。

你可以創建自己的Stencils，也可以直接從網上下載現成的Stencils。我用過Graffletopia.com網站提供的一些Stencils。我通常用在特別用途，比如簡筆劃或者移動端元件。下面集合裡提供絕大多數常見的元素：

你可以用這些現成的元素快速創建非常棒的線框圖。

共享對象

這有幾件怪事。

長久以來，我覺得Omnigraffle沒有共享對像是一個最大的缺陷，雖然Omnigraffle實際上確實是有這麼個東西。問題是創建和編輯共享對象的方式不管怎麼說都不夠突出。絕大多數情況下，用共享層就夠了。不過偶爾會遇到你想用共享層，但位置卻並不一樣的情況。這時用共享層就搞不定了。我們該學習怎樣來創建共享對象吧。

先創建你的對象（物體）。對像你要多複雜就可以設計成多複雜的。將所有需要的元素編成組，然後創建一個對象。選中這個對象然後在編輯菜單欄下選擇Copy as PDF。

詭異的事情發生了。你先將原來的刪掉，然後粘貼。雙擊群組對象然後進入編輯模式。這時會打開一個新Omnigraffle文檔。不用管它，在新打開的文檔裡編輯然後保存。然後關掉文檔回到你原來的界面下。這時你會看到剛才的改動已經在你粘貼到文檔裡的實例上全部生效。

對齊和文檔屬性

有些事和線框圖的製作關係不大，但注意對齊絕對會讓你輕鬆很多。包括：對齊、空格，還有畫布屬性。

對齊就是我用得最多的。點擊需要對齊的邊、角、或者圖形中央，然後點擊水平和垂直對齊按鈕。就會與被選中的物體對齊。需要注意的時，第一個被選中的物體就是需要被對齊的對象。

空格元素也很重要。設置間隔距離，然後將選中的對象按距離隔開。不過，我做得更多只使用快速平均間隔按鈕。對所有被選中的元素，從第一個到最後一個物體實現平均分佈。只要在你設置的最大範圍兩邊放置兩個物體，然後選中所需要對齊的物體，點擊對齊按鈕就可以。瞬間完成有木有！所有元素都完美、平均的排列好了。

在我看來通常情況下，缺省設置裡，畫布屬性的度量單位通常是英寸。在數字編輯時，這不是非常方便，所以可以把它改成像素。最好是在你自己的模板裡設置好。選擇所有的畫布，然後將長度單位改成像素。也可以改成別的測量單位。

交互

如果你只想做一些基本的交互，Omnigraffle也是可勝任。選中你想進行交互的元素，然後在檢查器裡的“屬性”卡中打開(譯譯者註：6.4版本中）。點擊時可以實現如下效果：

打開一個鏈接
打開一個文件
運行一個腳本
跳到別的地方
顯示/隱藏圖層

我只使用過打開鏈接和跳到別的地方功能。跳到別處這個效果比較有用，線框圖有點像可點擊的原型，可以實現從這個畫布跳到別的畫布。

警告：在PDF中我從來沒有使用過顯示/隱藏圖層選項。這個功能只在Omnigraffle的交互模式下才有效(按下B鍵）。

結論

Omnigraffle是一個很棒的工具，許多設計師天天都在用。可以用很少的時間快速創建效果不錯的線框圖。

如果你已經是用戶體驗師，或者還在尋找一款線框圖製作工具,Omnigraffle值得一試。同樣，如果有什麼問題或建議可以在下面留言，我將盡量提供幫助。祝線框圖製作順利。