@C7210 OmniGraffle是一款相當全面的工具，用途很廣泛，不過今天我們 主要側(cè)重在了解怎樣使用它來制作線框圖。我(英文原文作者)個人在這方面嘗試過很多軟件，坦誠的說，沒有一款是真正完美的，包括OmniGraffle， 但它在綜合能力及效率方面的表現(xiàn)確實是最讓我滿意的。不過首先，我還是想提及OmniGraffle的兩點不足。一是它并不擅長于生成完美的可交互原型，當然，你還是能夠制作可點擊的界面原型的，譬如在某些情況下顯示或隱藏某些圖層，或是切換界面等等；另外一點就是這款軟件只能運行在Mac當中。

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

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

知識點

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

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

畫布與圖層(Canvases and Layers)

畫布與圖層側(cè)邊欄用來呈現(xiàn)文檔及其內(nèi)容的組織結(jié)構(gòu)。我們可以在這里查看每個畫布當中的內(nèi)容縮略，還有它們之間的層級結(jié)構(gòu)，這使得我們能夠更加輕松的管理和組織文檔。

我們可以在畫布中創(chuàng)建線框圖，畫布能夠承載我們所需的任何類型的內(nèi)容。我通常會先創(chuàng)建一個“封面”頁、一些流程圖，還有一些關于用戶的信息或是我需要解決的問題。這之后才進入實際的線框圖制作階段。

而 圖層則用于在畫布當中組織內(nèi)容。如果你熟悉Photoshop或Illustrator，那么對圖層的概念應該很了解了。在圖層中，你可以移動和組織各類 元素；而調(diào)整不同圖層的順序則能夠幫助你按照自己所需要的方式組織頁面結(jié)構(gòu)，就像我們在Photoshop當中所做的那樣。

我 們所創(chuàng)建的多數(shù)界面中都會包含例如導航欄、頁腳、背景這類不會隨界面而發(fā)生變化的元素。這時我們就需要使用“共享圖層(shared layer)”了，這種圖層可以幫助我們輕松的創(chuàng)建出能夠復用于多個畫布的元素；將來任何針對共享圖層所進行的修改也會直接作用于那些使用了該圖層的畫布 之上。

有一點需要注意，共享圖層中的元素在任何畫布當中都會保持在固定的位置上，譬如導航欄永遠會在導航欄的位置。如果你需要的是更加靈活的可復用元素，那么后文中將會介紹到的“共享對象(shared object)”才是更合適的選擇。

形狀與文字(Shapes and Text)

形狀

在創(chuàng)建線框圖的過程中，各種形狀是我們最常用到的工具。我通常會用到的都是那些最基本的形狀，例如矩形、圓形和三角形。相比繁瑣復雜的視覺表現(xiàn)形式，使用這些基本的形狀來創(chuàng)建的頁面布局通常可以更直觀有效的展示出交互設計階段所需表達的重點。

我們可以根據(jù)實際需要來調(diào)整形狀的各種屬性。

填充色

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

陰影

幾何屬性

你還可以將常用的形狀包括它的各種訂制化屬性打包添加到偏好當中，以便反復使用。要添加新的偏好形狀，你需要在頁面中選中某個形狀，然后選擇形狀 (Shape)菜單中的“將當前選項添加至喜愛的樣式(Add Current Selection to Favorite Styles)”。

文字

你可以在形狀內(nèi)部添加文字，并以某種方式和形狀本身保持對齊。添加之后，文字就會成為形狀自身的一部分，跟隨形狀一起聯(lián)動。

對于形狀內(nèi)部的文字，OmniGraffle提供了大量的工具，用于調(diào)整行間距、字間距、對齊模式、內(nèi)邊距等屬性。

你同樣可以添加獨立的文字，無論其在視覺形式上處于形狀范圍之內(nèi)或之外。

模板與主題(Stencils and Templates)

“模板”與“主題”是創(chuàng)建和使用可復用元素的極佳工具。主題可以幫你建立起一套已經(jīng)包含了各種相關預設的文檔，例如集體研討、組織圖表、空間計劃等。我在日常的工作中有自己的一套專用主題，你也可以創(chuàng)建屬于自己的主題。

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

你同樣可以修改已有的模板和主題。在右側(cè)的模板面板中選中一套模板，然后點擊模板面板上的齒輪按鈕，在菜單中選擇“編輯模板”，即可調(diào)出模板編輯界面，你可以在里面像處理其他OmniGraffle文檔一樣來編輯模板中的元素。對于主題來說也是同理。

網(wǎng)上有很多模板資源供你下載，我常用到的一些都來自于Graffletopia.com，例如移動設備界面元素模板等。推薦你看看這些模板：

• Konigi
• Twitter Bootstrap
• Foundation

通過這些模板，你可以快速創(chuàng)建出很漂亮的線框原型。

共享對象(Shared Objects)

正如前面提到的，在多數(shù)時候，共享圖層是足夠滿足需求的，但有時你確實需要一些屬性相同但在布局位置上有所區(qū)別的界面元素。曾經(jīng)有一度，我以為OmniGraffle并沒有提供類似共享元素這樣的功能，但事情不是這樣的，只是創(chuàng)建共享元素的方法有些隱蔽。

在文檔中選中你要創(chuàng)建為共享對象的界面元素，在頂部的編輯菜單中找到“拷貝為”一項，選擇其中的PDF。然后刪除之前所選中的界面元素，再執(zhí)行粘貼操作，這時被粘貼回來的PDF形式的元素就是我們所說的“共享對象”了。

要編輯共享對象，只需在對象上雙擊，這時會出現(xiàn)一個獨立的OmniGraffle文檔，你可以在里面對共享對象進行編輯。保存之后，你會發(fā)現(xiàn)所有用到這份拷貝的元素都已經(jīng)發(fā)生了相應的變化。

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

另外一些版面方面的功能，譬如對齊、空間調(diào)整、畫布屬性等等，也是我們必須了解的。這類功能都集中在右側(cè)的檢查器面板當中。

對齊界面元素的功能是非常重要的。選中你要對齊的元素之后，在對齊面板中選擇需要對齊的基準點(側(cè)邊、邊角或中心)，然后點擊所需的對齊類型，包括橫向和縱向。

界面元素之間的相對空間調(diào)整也是常用的功能。你可以使若干元素在某個方向上等距分布，還可以進一步為它們設定彼此之間的距離。

在這些與版面相關的面板中，你可以看到默認的長度單位是以“英寸”為主的，建議你在實際工作中切換到更符合數(shù)字產(chǎn)品規(guī)則的像素。對于切換長度單位這類操作來說，最有效率的方式是在主題當中進行。

交互(Interactivity)

如果你需要為線框原型添加一些基本的交互，那么OmniGraffle也是可以提供相關支持的。你需要做的就是選中界面中的交互元素，然后打開檢查器中的動作(Action)面板進行設置。OmniGraffle可以為點擊動作添加如下幾類交互動作：

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

我個人最常用的是“打開一個URL”和“跳到別處(Jumps Elsewhere)”，特別是后者，可以用來實現(xiàn)畫布之間的切換，通常在線框原型中用來展示界面間的跳轉(zhuǎn)。

總結(jié)

關于OmniGraffle的新手指南就到這里了。對于UXer們，這是一款日常工作中的基礎型工具；上手并深入探索之后，你會發(fā)現(xiàn)它可以幫助你快速的創(chuàng)建各類圖形文檔，特別是線框原型。此外，網(wǎng)上也有很多關于OmniGraffle的優(yōu)秀資源等待你去發(fā)現(xiàn)和使用。好運叭！

原文地址：http://beforweb.com/node/202
================微信推薦================
想在手機上、被窩里獲取網(wǎng)頁設計教程、無線端設計經(jīng)驗分享和各種意想不到的資源"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設計 微信號：【youshege】優(yōu)設哥的全拼
您也可以通過掃描下方二維碼快速添加：