Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UX
Webdesign

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

by
Length:MediumLanguages:
This post is part of a series called UX Foundations.
A Beginner’s Guide to Wireframing
Defining And Applying Personas to UX Design

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

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

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

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

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

界面

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

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

畫布和圖層

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

Canvas Layer Sidebars

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

Canvas Sidebar

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

Layers Sidebar

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

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

Shared Layers

圖形和文本

圖形

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

Shape

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

填充色

Shape Fill

實際形狀和邊框(顏色、邊框尺寸等等)

Shape Outline

陰影

Shadow

幾何屬性

Shape Properties

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

Favorite Shape

文本

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

Text within shape

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

Text outside shape

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

Text Edit

Stencils和模板

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

Templates

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

Edit Stencil

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

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

Stencils

共享對象

這有幾件怪事。

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

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

Copy as PDF

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

對齊和文檔屬性

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

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

Alignment

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

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

Canvas Properties

交互

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

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

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

Actions

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

結論

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

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

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.