OmniGraffle使用的10個(gè)小技巧

2014-03-07 11:46:50來源:一些事作者:

OmniGraffle是由The Omni Group制作的一款繪圖軟件,其只能于運(yùn)行在Mac OS X和iPad平臺(tái)之上。在很多方面,OmniGraffle都類似于Microsoft Visio。下面介紹一下OmniGraffle使用的10個(gè)小技巧:

OmniGraffle是由The Omni Group制作的一款繪圖軟件,其只能于運(yùn)行在Mac OS X和iPad平臺(tái)之上。在很多方面,OmniGraffle都類似于Microsoft Visio。下面介紹一下OmniGraffle使用的10個(gè)小技巧:

1. 自定義你的工作界面

\

2. 樣式刷

\

在 Omnigraffle 中,可以通過拖拽指示器到另一個(gè)組件上的方式將包括邊框填充顏色等樣式復(fù)制過去,也可以復(fù)制任意單一屬性,大大節(jié)省了重復(fù)或近似組件的樣式修改成本。

3. 網(wǎng)格、智能輔助線及參考線

\

除圖示外,在畫布空白處點(diǎn)擊右鍵可以看到三個(gè)選項(xiàng)

對齊到網(wǎng)格,參考定義畫布環(huán)節(jié)描述的網(wǎng)格設(shè)定,勾選這個(gè)選項(xiàng)后,調(diào)整形狀大小就會(huì)使邊緣貼近網(wǎng)格,拖拽位置時(shí)會(huì)根據(jù)形狀大小讓任意一邊貼近網(wǎng)格。

智能對齊輔助線,勾選后,拖拽形狀位置時(shí),會(huì)自動(dòng)尋找當(dāng)前水平或垂直方向,邊緣或中心能對齊的已有形狀或畫布中心線,推薦勾選

智能距離輔助線,勾選后,會(huì)自動(dòng)尋找水平或垂直方向上臨近的兩個(gè)形狀,在等距的時(shí)候給出提示,推薦勾選

4. 流程圖

\

在用 visio 畫流程圖過程中最受不了的就是連接線不能隨意控制形狀位置樣式,只能畫幾種特定的圖,新建節(jié)點(diǎn)的操作步驟也很繁瑣,而這一缺陷直接導(dǎo)致各種思維導(dǎo)圖軟件的崛起。在 Omnigraffle 中這些都變得很容易,只要記住幾個(gè)快捷鍵,畫起流程圖來輕松寫意。

5. 點(diǎn)擊事件以及導(dǎo)出 pdf & html

\

在制作交互模型時(shí),加入對點(diǎn)擊事件的處理能很方便的演示我們想要的效果,Omnigraffle 支持的腳本不多,沒有鼠標(biāo)滑過,沒有動(dòng)畫,只有點(diǎn)擊跳轉(zhuǎn)和點(diǎn)擊顯示或隱藏圖層兩種,對于一般的原型演示足夠用了,尤其是圖層顯示隱藏,例如可以像圖中所示將浮層中的內(nèi)容放在圖層2上,用關(guān)閉按鈕用來觸發(fā)隱藏,來實(shí)現(xiàn)圖示效果。

在演講模式、導(dǎo)出為 pdf 或 html 后都可以用來演示設(shè)定好的交互點(diǎn)擊效果。在演示移動(dòng)原型的時(shí),我通常的做法是制作和屏幕大小一致的文件,設(shè)置好點(diǎn)擊效果后導(dǎo)出 pdf ,在手機(jī)上用任意支持讀取 pdf 的應(yīng)用打開。(這里推薦多看,無頁面翻轉(zhuǎn)動(dòng)畫,無多余留白)

6. 畫布和圖層

和 Fireworks 一樣,Omnigraffle 提供類似的畫布和圖層管理,方便將項(xiàng)目所有內(nèi)容集中在一個(gè)文件中,每個(gè)畫布可以單獨(dú)設(shè)置頁面背景、大小、單位、網(wǎng)格和參考線,并且可以通過共享圖層讓所有畫布使用同一個(gè)母版,也就是說既可以當(dāng) Indesign 用,也可以當(dāng) PPT 用。

畫布:Omnigraffle 默認(rèn)使用 pt 來定義自身單位,在畫布面板中用 1pt = 1xx 的方式來設(shè)置換算方式,目標(biāo)單位可以是像素、厘米、英尺、千米等,意味著除了用來畫用戶界面,還支持用來畫地圖、家裝平面圖等任何大小的精準(zhǔn)圖形。

圖層:可以將 Omnigraffle 中的圖層理解為一個(gè)特殊的、可以批量隱藏或鎖定的、可以直接轉(zhuǎn)換為所有頁面共享的群組,共享圖層的名稱會(huì)被標(biāo)記為橙色,界面左下方的內(nèi)容面板顯示了每個(gè)圖層內(nèi)部的層疊順序,如果文件導(dǎo)出時(shí)選擇 psd,Omnigraffle 還會(huì)將圖層內(nèi)容合并成 photoshop 能讀取的格式。

\

如圖所示,利用共享圖層這一特性,我們可以將畫布設(shè)定為1024*768,并在共享圖層的指定位置插入頁碼 (Edit→Insert Variable→Canvas Number) 等,模擬 PPT 的方式制作演示用文檔。

7. 快捷鍵

點(diǎn)擊 Help→Keyboard Shortcuts,查閱所有的系統(tǒng)快捷鍵,了解下面這幾個(gè)就能滿足大部分情景了

最常用的檢查器面板,cmd+12345切換;

設(shè)置好一個(gè)常用的形狀樣式,右鍵點(diǎn)擊加入收藏,以后按住 s 不放就可以直接畫出來;

按住 t 不放點(diǎn)擊空白處就可以直接新建一個(gè)文本塊,雙擊任意形狀也可以在里面插入文字;

放大縮小只能通過 cmd+shift+. 和 cmd+shift+, 右手需要離開鼠標(biāo)不是很方便,我通常是按住 z 鼠標(biāo)點(diǎn)屏幕來放大,option+z 點(diǎn)擊屏幕來縮小(z這個(gè)操作在ps和ai里也通用);

快速復(fù)制一個(gè)形狀 cmd+d,新的形狀會(huì)在當(dāng)前形狀右下方一個(gè)網(wǎng)格的位置出現(xiàn),比cmd+c之后在cmd+v省一步。

8. 無窮的模板庫

在 Omnigraffle 中,工作文檔 .graffle和模板文檔 .stencil 的表現(xiàn)和編輯是完全一樣的,可以很方便的將已經(jīng)編輯好的文檔組織整理后,復(fù)制粘貼到模板文件中沉淀,作為后期復(fù)用規(guī)范,如果搭配云同步工具使用,小型設(shè)計(jì)團(tuán)隊(duì)統(tǒng)一設(shè)計(jì)規(guī)范不再是難事。

除軟件自身提供的一堆模板外,全球 Omnigraffle 愛好者們搭建了 Graffletopia 用來共享各自的模板 (部分收費(fèi)),事實(shí)上如果你有足夠的耐心和精力,所有的模板你都可以照貓畫虎自己畫出來。

9. 制作自己的圖標(biāo)庫

Omnigraffle 自帶的圖形基本上能滿足大部分需求,簡單形狀也可以用形狀組合和鋼筆工具來畫, Graffletopia 上有很多其他人畫好的形狀圖標(biāo),但面對具體項(xiàng)目的時(shí)候需要自己畫圖標(biāo)時(shí)該怎么辦呢?以下有幾種方式可供大家選擇

最快捷:直接粘貼圖標(biāo)圖片進(jìn)來,缺點(diǎn)是無法調(diào)整顏色,不可放大。

多色圖標(biāo):從 AI 中直接拖拽圖形進(jìn)來,仍舊保持矢量可隨意拖拽但不可調(diào)整顏色。

單色圖標(biāo):將 AI 中畫好的單色圖標(biāo)導(dǎo)出為pdf (File→Scripts→SaveDocsAsPDF) 后用 Omnigraffle 打開,可隨意調(diào)整大小和顏色,非常適合圖標(biāo)庫的建立。

10. 使用hex值定義顏色

\

Mac 自帶的取色器只能在已有的顏色集里選或是靠肉眼在色盤里選,非常不嚴(yán)謹(jǐn),還好有愛心人士提供了 Hex Color Picker 和 Developer Color Picker 插件來幫助我們精準(zhǔn)設(shè)定顏色。

關(guān)鍵詞:OmniGraffle

贊助商鏈接: