加速原型設(shè)計(jì)

1 評(píng)論 14005 瀏覽 2 收藏 15 分鐘

作為一個(gè)交互設(shè)計(jì)師,選用什么工具來(lái)完成快速原型繪制是一個(gè)爭(zhēng)論不斷的話題,從早些年“唯一”的選擇 visio 到如今 Axure / Omnigraffle / Adobe Creative Suite 遍地開(kāi)花,再加上在線工具 balsamiq, Lucidchart 或 Google Drive,思維導(dǎo)圖工具 XMind, Mindmanager 或 MindNode,在不同的細(xì)分領(lǐng)域給了我們很多的選擇,那么,哪個(gè)才是最好的原型繪制工具呢?

在實(shí)際使用過(guò)程中,由于項(xiàng)目具體階段、平臺(tái)特性以及輸出物展示對(duì)象的不同,并沒(méi)有哪個(gè)工具受到設(shè)計(jì)師們一致認(rèn)可,每個(gè)都有其各自的優(yōu)勢(shì)和缺陷,按照個(gè)人經(jīng)驗(yàn)對(duì)比了一下常見(jiàn)的幾款。

1.compare

下面,詳細(xì)介紹一下每一類軟件的優(yōu)劣。

2.tools.adobe
Photoshop 作為設(shè)計(jì)師的看家技能,理論上可以通過(guò)它做出任何圖形,但對(duì)于交互原型來(lái)說(shuō)制作和改動(dòng)成本略高,圖層和組件的處理上比較死板,軟件自身性能和模板庫(kù)也很受 挑戰(zhàn),容易過(guò)快進(jìn)入細(xì)節(jié)討論而忘記初衷,并非交互稿首選,當(dāng)然也有設(shè)計(jì)師一開(kāi)始就是朝著高保真 Demo 方向做的,用它最直觀。

同胞兄弟 Illustrator 在矢量處理上表現(xiàn)的略好,不受畫(huà)布大小和圖層的困擾,也有豐富的模板庫(kù)支持原型設(shè)計(jì),但繼承了 Adobe 家族一貫功能大而全導(dǎo)致操作很繁瑣的特點(diǎn),原型圖制作效率也不高。

相比之下,干兒子 Fireworks 擁有更簡(jiǎn)單的界面,同樣在圖層處理方面的優(yōu)勢(shì),尤其是可編輯 png 文件包含了圖層和矢量信息這一點(diǎn)保證了文檔的傳承性,受到很多的設(shè)計(jì)團(tuán)隊(duì)的青睞而做為交互輸出工具的首選,可惜 Adobe 對(duì)其支持有限,最新的 Adobe CC 家族中更是失去了它的蹤影,未來(lái) Fireworks 優(yōu)化空間很有限。

3.tools.keynote
作為非專業(yè)繪圖工具,用 Keynote / PPT 來(lái)畫(huà)交互稿算是曲線救國(guó),豐富的交互動(dòng)作和簡(jiǎn)單的使用流程解決了很多交互演示需求,CDC 的同事曾寫(xiě)過(guò)一篇《關(guān)于快速原型的一點(diǎn)糾結(jié)》 做了很好的解釋,但問(wèn)題也正如文章中所述,優(yōu)缺點(diǎn)非常明顯,模板庫(kù)幾乎為零,在沒(méi)有其它工具輔助情況下自行繪制費(fèi)時(shí)費(fèi)力,在這里就不詳細(xì)介紹了。

4.tools.axure

Axure 號(hào)稱是互聯(lián)網(wǎng)產(chǎn)品經(jīng)理標(biāo)配,國(guó)內(nèi)有大量資料和討論 (知乎,中文社區(qū)),其優(yōu)勢(shì)非常明顯:操作復(fù)雜度介于 Keynote/PPT 和 Adobe 家族之間;擁有全套 web 控件庫(kù),直接拖拽即可快速制作網(wǎng)站原型;豐富的動(dòng)態(tài)面板可以用來(lái)模擬各種復(fù)雜的交互效果;導(dǎo)出 HTML 后可以更加準(zhǔn)確的傳達(dá)信息架構(gòu)和頁(yè)面跳轉(zhuǎn)。

但對(duì)移動(dòng)產(chǎn)品原型支持不足,Axure 無(wú)法導(dǎo)出可在移動(dòng)端演示的文件,只適合做信息結(jié)構(gòu)和頁(yè)面邏輯的展示。在對(duì)形狀樣式的處理上不夠豐富,很多細(xì)節(jié)處理的不夠好,做出來(lái)的線框圖大多不夠好看。

5.tools.omnigraffle

OmniGraffle 作為 Mac 平臺(tái)下最好的原型設(shè)計(jì)工具,除了用來(lái)繪制普通圖表、樹(shù)狀結(jié)構(gòu)圖、流程圖、頁(yè)面編排等,還可以試試規(guī)劃電影劇本、 繪制公司組織結(jié)構(gòu),甚至是作為演示文稿來(lái)展示一個(gè)項(xiàng)目。

由于利用了很多 OS X 原生繪圖屬性,Omnigraffle?只支持 Mac / iPad ,它在很多方面表現(xiàn)都有 Visio 的影子,就連名字里的 “Graffle” 都是創(chuàng)造出來(lái)對(duì)應(yīng) “Visio” 的,盡管在 web 交互事件上并不如 Axure 那么豐富,對(duì)移動(dòng)平臺(tái)的支持也不如一些新星 (如 briefs 和 fluidui ) 的表現(xiàn)那么亮眼,但由于其豐富的模板庫(kù)、輕松的上手體驗(yàn)以及大量貼心的細(xì)節(jié),戰(zhàn)勝了其它所有競(jìng)爭(zhēng)對(duì)手,成為日常工作最主要的工具。

以上幾個(gè)軟件已經(jīng)能涵蓋大多數(shù)的使用場(chǎng)景,但工具畢竟只是紙和筆的延伸,在熟練掌握其中一個(gè)的基礎(chǔ)上,不斷嘗試新工具不僅能發(fā)現(xiàn)更多有價(jià)值的技巧加快設(shè)計(jì)節(jié)奏,更是對(duì)自身能力短板的了解,互相結(jié)合使用讓想法不受工具牽絆,努力讓自己成為全棧設(shè)計(jì)師才是它們的價(jià)值。

 

另外,市面上較少介紹 OmniGraffle 技巧的文章,很多人感興趣但不知道怎么用好它,下面分享10個(gè)有用的小技巧來(lái)加快上手。

1. 自定義你的工作界面

6.custom_workspace

 

2. 樣式刷

7.format_painter

在 Omnigraffle 中,可以通過(guò)拖拽指示器到另一個(gè)組件上的方式將包括邊框填充顏色等樣式復(fù)制過(guò)去,也可以復(fù)制任意單一屬性,大大節(jié)省了重復(fù)或近似組件的樣式修改成本。
3. 網(wǎng)格、智能輔助線及參考線

8.guide_line

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

  1. 對(duì)齊到網(wǎng)格,參考定義畫(huà)布環(huán)節(jié)描述的網(wǎng)格設(shè)定,勾選這個(gè)選項(xiàng)后,調(diào)整形狀大小就會(huì)使邊緣貼近網(wǎng)格,拖拽位置時(shí)會(huì)根據(jù)形狀大小讓任意一邊貼近網(wǎng)格。
  2. 智能對(duì)齊輔助線,勾選后,拖拽形狀位置時(shí),會(huì)自動(dòng)尋找當(dāng)前水平或垂直方向,邊緣或中心能對(duì)齊的已有形狀或畫(huà)布中心線,推薦勾選
  3. 智能距離輔助線,勾選后,會(huì)自動(dòng)尋找水平或垂直方向上臨近的兩個(gè)形狀,在等距的時(shí)候給出提示,推薦勾選

 

4. 流程圖

9.outlining

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

 

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

10.pdf&html

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

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

 

6. 畫(huà)布和圖層

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

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

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

11.layer

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

 

7. 快捷鍵

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

  1. 最常用的檢查器面板,cmd+12345切換;
  2. 設(shè)置好一個(gè)常用的形狀樣式,右鍵點(diǎn)擊加入收藏,以后按住 s 不放就可以直接畫(huà)出來(lái);
  3. 按住 t 不放點(diǎn)擊空白處就可以直接新建一個(gè)文本塊,雙擊任意形狀也可以在里面插入文字;
  4. 放大縮小只能通過(guò) cmd+shift+. 和 cmd+shift+, 右手需要離開(kāi)鼠標(biāo)不是很方便,我通常是按住 z 鼠標(biāo)點(diǎn)屏幕來(lái)放大,option+z 點(diǎn)擊屏幕來(lái)縮小(z這個(gè)操作在ps和ai里也通用);
  5. 快速?gòu)?fù)制一個(gè)形狀 cmd+d,新的形狀會(huì)在當(dāng)前形狀右下方一個(gè)網(wǎng)格的位置出現(xiàn),比cmd+c之后在cmd+v省一步。

 

8. 無(wú)窮的模板庫(kù)

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

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

 

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

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

  1. 最快捷:直接粘貼圖標(biāo)圖片進(jìn)來(lái),缺點(diǎn)是無(wú)法調(diào)整顏色,不可放大。
  2. 多色圖標(biāo):從 AI 中直接拖拽圖形進(jìn)來(lái),仍舊保持矢量可隨意拖拽但不可調(diào)整顏色。
  3. 單色圖標(biāo):將 AI 中畫(huà)好的單色圖標(biāo)導(dǎo)出為pdf (File→Scripts→SaveDocsAsPDF) 后用 Omnigraffle 打開(kāi),可隨意調(diào)整大小和顏色,非常適合圖標(biāo)庫(kù)的建立。

 

10. 使用hex值定義顏色

12.hex_color_picker

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

 

原文來(lái)自:騰訊ISUX (http://isux.tencent.com/speed-up-wireframing.html)
更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!