【轉載】OMNIGRAFFLE新手指南

用mac已經2年了，感受比windows仍是強大不少，也方便不少，固然習慣的問題是本身須要解決的，包括畫圖，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