選擇移動(dòng)原型開(kāi)發(fā)工具的因素

幾年前，一個(gè)孩子試圖通過(guò)一把小刀去切割樹(shù)枝。他的祖父看到了后，遞給他一把鋸，說(shuō)：“始終使用正確的工具去工作！”作為故事中的孩子，我學(xué)到了寶貴的經(jīng)驗(yàn)：當(dāng)你選擇解決問(wèn)題的工具的時(shí)候，有很多很好的工具，但其中一些工具比其他更加合適去完成任務(wù)。

 

最近幾年，新的原型工具已經(jīng)出現(xiàn)了，很多為移動(dòng)端而設(shè)計(jì)。這種情景經(jīng)常在改變，很多工具正在失去UX設(shè)計(jì)師的喜愛(ài)，被其他工具所取代。然而本文不作為一個(gè)完整的數(shù)字涂鴉手冊(cè)去選擇一個(gè)原型工具，我們將討論影響這種選擇過(guò)程的重要因素。

 

我將依靠我個(gè)人使用和研究各種工具的經(jīng)驗(yàn)來(lái)解釋為什么某種工具比別的更加合適。臨近文章結(jié)尾的“ 資源 ”部分將給您更多的上下文讓您在決策時(shí)有更具體的比較方向。

 

你需要一個(gè)移動(dòng)工具，你是做什么的？

即使你有很多的工具可以為您的移動(dòng)項(xiàng)目進(jìn)行選擇，挑選一個(gè)不必須的是一項(xiàng)艱巨的任務(wù)。您可以通過(guò)回答問(wèn)題的形式來(lái)形成選擇標(biāo)準(zhǔn)以縮小可選范圍。

 

該項(xiàng)目的需求會(huì)給你很好的初始約束。你在測(cè)試可用性？視覺(jué)設(shè)計(jì)將是原型的一部分嗎？這個(gè)原型將捕獲一個(gè)高層次的概念或成熟的生產(chǎn)工作嗎？

 

UX設(shè)計(jì)師們不斷地評(píng)估給定的問(wèn)題并規(guī)劃路線。那么，我們?yōu)槭裁床徊捎猛瑯拥姆绞饺ミx擇一個(gè)原型工具？分解成更小的選擇因素會(huì)在你最終追求的方向上建立你的信心。以下每一項(xiàng)對(duì)你的決定具有重要作用：

 

• 交互保真度

• 動(dòng)畫(huà)和運(yùn)動(dòng)

• 手勢(shì)的支持

• 視覺(jué)設(shè)計(jì)

• 簡(jiǎn)單的演示

• 數(shù)字化協(xié)作

• 文檔

• 響應(yīng)能力

  
   

技術(shù)因素考慮

手機(jī)原型業(yè)內(nèi)每年都在發(fā)展令人興奮的新工具。每個(gè)工具都有不同的特性，允許設(shè)計(jì)師來(lái)解決各種各樣的問(wèn)題。一些工具比另一些更有價(jià)值來(lái)完成任務(wù)。沒(méi)有一個(gè)工具什么都是最好的。

 

下面是常見(jiàn)的原型設(shè)計(jì)工具和技術(shù)如何適用的一些解讀，給我們的選擇作為參考。

 

評(píng)級(jí)“合適”只是表明一個(gè)特定的工具是強(qiáng)烈推薦的,但另一個(gè)工具(“更合適的”)表示功能更高,使某些任務(wù)更容易完成。

 

基于技術(shù)因素分解的原型工具

 

1. 交互保真度

交互有不同的偏向。你可能只需要溝通交流，因此點(diǎn)進(jìn)原型是理想的（典型的概念和可用性測(cè)試）。相反，項(xiàng)目可能需要您來(lái)說(shuō)明多步條件交互作用（如果你需要生產(chǎn)準(zhǔn)備和集中文檔原型）。不管怎樣，一個(gè)原型工具的存在是為了輔助！

 

單個(gè)元素可以相互作用

合適

一些移動(dòng)工具能夠通過(guò)點(diǎn)擊原型熱點(diǎn)鏈接來(lái)實(shí)現(xiàn)效果。演示軟件如 Keynote 和紙稿轉(zhuǎn)換工具 POP 和Marvel 都是很好的例子。

 

更合適的

交互的靈活性來(lái)自于工具支持變量、詳細(xì)的事件模型和重用的元素的功能。適合該原則的工具包含云端的有如 Pixate 和 Proto.io，還有桌面軟件如Axure和Justinmind。還有編程技術(shù)如BootStrap，JQuery Mobile 和 framer 也提供這些功能，并且它們的效果取決于那你能夠構(gòu)建原型的速度。

 

2.動(dòng)畫(huà)和運(yùn)動(dòng)

動(dòng)畫(huà)在移動(dòng)通信交互領(lǐng)域起著很大的作用。在移動(dòng)項(xiàng)目的開(kāi)始，確定你或其他人是否負(fù)責(zé)創(chuàng)建動(dòng)畫(huà)原型，就像一個(gè)開(kāi)發(fā)人員或者動(dòng)效設(shè)計(jì)師。不管誰(shuí)將處理這個(gè)，它有助于知道什么級(jí)別的控制動(dòng)畫(huà)中需要原型。

 

動(dòng)畫(huà)能夠聯(lián)系復(fù)雜的交互

 

合適

這類移動(dòng)工具通常內(nèi)置動(dòng)畫(huà)但缺乏可定制性（如Blueprint，PoP和Xcode）。一些更加強(qiáng)大的工具提供了動(dòng)畫(huà)設(shè)置功能，包括時(shí)間和彈性設(shè)置；Axure，Justinmind，和Proto.io有這個(gè)功能。

 

更合適的

額外的要控制動(dòng)畫(huà)的速度，彈性，阻尼和其他基于物理的屬性，你可以試試編碼的工具如framer 或者 CSS3動(dòng)畫(huà)。這些工具也可以設(shè)置單獨(dú)小部件的動(dòng)畫(huà)屬性，包括大小、選擇、透明度、顏色和模糊度等。

 

3.手勢(shì)

手機(jī)原型包括設(shè)計(jì)手勢(shì)輸入，所以考慮你的項(xiàng)目是否需要這個(gè)。大多數(shù)UX-specific工具都是支持開(kāi)箱即用的，一套工具將內(nèi)置有共同的手勢(shì)，還有一些將支持手勢(shì)創(chuàng)建和多指輸入。

 

移動(dòng)體驗(yàn)原型要能手勢(shì)輸入

 

合適

在Pop，Blueprint和AppCooker中可以找到內(nèi)置的手勢(shì)，還有許多基于云計(jì)算的移動(dòng)工具如Proto.io。這些工具支持點(diǎn)擊，滑動(dòng)和快速輕擊。一些還支持長(zhǎng)按和雙擊。如果你需要觸發(fā)特定的手勢(shì)輸入交互動(dòng)作，沒(méi)有什么設(shè)置參數(shù)可以限制。

 

更合適的

如果你的原型需要更好的手勢(shì)控制,包括拖拽操作、速度和方向,你將需要利用移動(dòng)工具某種形式的API,不管是基于代碼還是抽象的人類可讀的操作形式。例如Hammer和Axure都是很好的。一些工具甚至可以支持多指手勢(shì)：Justinmind，Pixate和framer支持雙指縮放和旋轉(zhuǎn)。

 

4.視覺(jué)設(shè)計(jì)

當(dāng)原型為移動(dòng)端時(shí)，確定交付預(yù)期的視覺(jué)保真效果，在大型組織里一個(gè)任務(wù)委托給專業(yè)設(shè)計(jì)師，UX設(shè)計(jì)師們通常負(fù)責(zé)視覺(jué)設(shè)計(jì)。保真程度將由項(xiàng)目的目標(biāo)和用戶決定:高保真的給實(shí)際生產(chǎn)工作中使用；中保真用來(lái)可用性測(cè)試；低保真來(lái)證明描述概念。

 

顏色可以在原型中表達(dá)不同的情緒

合適

紙稿轉(zhuǎn)換工具（PoP和Blueprint），基于代碼的工具（framer和CSS3動(dòng)畫(huà)）和基于云的工具（Flinto，Pixate和InVision）圍繞視覺(jué)資源創(chuàng)建可交互的視覺(jué)應(yīng)用。其中一些工具甚至能夠使用內(nèi)置視覺(jué)效果的小部件。在這種類型的工作流中，UX設(shè)計(jì)師們可能發(fā)現(xiàn)自己都在原型設(shè)計(jì)工具和可視化應(yīng)用程序之間切換如Sketch或Photoshop。

 

更合適的

一些原型工具能夠?qū)崿F(xiàn)復(fù)雜的視覺(jué)效果,包括漸變、陰影、自定義字體和可重用的樣式(如Axure和Justinmind)。這使得其作為一個(gè)獨(dú)立的過(guò)程,解決你的原型設(shè)計(jì)的需要。然而,對(duì)于更復(fù)雜的視覺(jué)效果,包括遮罩、多路徑編輯和攝影增強(qiáng),UX設(shè)計(jì)師們必須依靠專門(mén)的可視化工具。

 

5.簡(jiǎn)單的演示

讓手機(jī)原型呈現(xiàn)在用戶面前是驗(yàn)證設(shè)計(jì)的關(guān)鍵。有兩種方法來(lái)演示移動(dòng)原型：在電腦上或者直接在目標(biāo)設(shè)備上。從計(jì)算機(jī)鏡像到設(shè)備之間有變化，反之亦然。當(dāng)開(kāi)始一個(gè)項(xiàng)目的時(shí)候，應(yīng)該考慮那種方法最適合由原型工具支持。

 

一個(gè)原型應(yīng)該根據(jù)上下情景進(jìn)行測(cè)試

 

合適

許多基于代碼的工具（JQuery Mobile和CSS3動(dòng)畫(huà)）在需要在云端通過(guò)一個(gè)鏈接把原型加載到目標(biāo)設(shè)備。這為演示創(chuàng)建額外的步驟。如ProtoSee在IOS允許直接生成原型加載在設(shè)備上，更加快速的解決方案。一些移動(dòng)工具更進(jìn)一步通過(guò)提供應(yīng)用程序就能夠提供從云端同步原型到設(shè)備，包括Axure，InVision和Proto.io。

 

更合適的
 

許多供應(yīng)商已經(jīng)開(kāi)始推出對(duì)應(yīng)目標(biāo)設(shè)備的應(yīng)用程序。這讓用戶體驗(yàn)原型在桌面上能夠通過(guò)wifi實(shí)時(shí)反映在移動(dòng)設(shè)備上。Pixate，F(xiàn)linto甚至framer都通過(guò)本地應(yīng)用支持這個(gè)功能。請(qǐng)注意wifi的安全性和原型的總體大小。

 

有趣的是，移動(dòng)工具允許您直接在目標(biāo)設(shè)備上創(chuàng)建一個(gè)原型并且還提供一些簡(jiǎn)單的方法來(lái)演示原型。

 

AppCooker，Blueprint和Marvel有內(nèi)置的功能在編輯和預(yù)覽模式之間進(jìn)行切換。

 

6.數(shù)字協(xié)作

設(shè)計(jì)師不單獨(dú)工作。UX設(shè)計(jì)師們?cè)谝粋€(gè)項(xiàng)目生命周期中協(xié)同利益相關(guān)者還有其他專業(yè)人士（包括視覺(jué)設(shè)計(jì)師和開(kāi)發(fā)人員）一起合作。因此，協(xié)作創(chuàng)建原型是很重要的。預(yù)先發(fā)現(xiàn)你將如何與他人一起工作。

 

合適

許多手機(jī)原型工具是為單一UX設(shè)計(jì)師設(shè)計(jì)的，并不支持協(xié)同創(chuàng)作和意見(jiàn)反饋,類似Pixate和framer。一些工具不支持協(xié)同創(chuàng)作但是提供一定程度的協(xié)作，如PoP,Marvel和InVision允許獲取外部反饋驅(qū)動(dòng)迭代。

 

更合適的

移動(dòng)的原型工具,提供最強(qiáng)大的協(xié)作項(xiàng)目共享,版本控制和分布式的協(xié)同創(chuàng)作功能。Justinmind和Axure是有能力做到這一點(diǎn)的。并且允許評(píng)論員評(píng)論原型。

 

文檔

并不是所有的手機(jī)原型都需要文檔。交互和工作流有時(shí)是足夠的。但是由于系統(tǒng)業(yè)務(wù)邏輯的復(fù)雜性,文檔成為開(kāi)發(fā)人員的一個(gè)重要工具來(lái)澄清細(xì)節(jié)。文檔獲取尚未實(shí)現(xiàn)的交互設(shè)計(jì)但是存在UX設(shè)計(jì)師的想法的細(xì)節(jié)。

 

文檔獲取原型微小不可見(jiàn)的細(xì)節(jié)

 

合適

許多原型工具依賴于原型作為文檔(Flinto和Pixate)。一些工具更進(jìn)一步通過(guò)讓UX設(shè)計(jì)師導(dǎo)出設(shè)計(jì)為PDF或一堆png。在這一類,工具集合了注釋功能。舉個(gè)例子,Proto.io沒(méi)有這個(gè)功能,而AppCooker和Blueprint允許自定義注釋。

 

更合適的

最靈活的文檔來(lái)自平臺(tái)原型工具如Axure和Justinmind。你可以標(biāo)注單個(gè)UI小部件或整個(gè)頁(yè)面,創(chuàng)建動(dòng)態(tài)文檔類別,并一鍵生成完整的規(guī)格!此外,許多基于代碼的工具提供內(nèi)聯(lián)文檔(framer和jQuery Mobile),它可以幫助開(kāi)發(fā)人員。

 

響應(yīng)能力

確定您的原型將支持本地體驗(yàn)或響應(yīng)式。此外,如果你正在設(shè)計(jì)響應(yīng)式web,考慮是否該工具支持自適應(yīng)或流體布局,是否有一個(gè)響應(yīng)小部件的庫(kù),以及響應(yīng)式如何在工具中演示。

 

需要在實(shí)際設(shè)備測(cè)試響應(yīng)式原型

 

合適

一些移動(dòng)工具在不能顯示屏幕不同的斷點(diǎn)，Pop，Marvel和Keynote等演示軟件就是很好的例子。然而,斷點(diǎn)可以單獨(dú)記錄和并排顯示比較。

 

其他工具支持不同方向的一個(gè)斷點(diǎn),甚至在斷點(diǎn)變化相同的設(shè)計(jì),但是他們還沒(méi)有在斷點(diǎn)在演示的動(dòng)態(tài)開(kāi)關(guān)。Blueprint，InVision和Pixate是其中一部分。

 

更合適的

專用的用戶體驗(yàn)新興工具支持響應(yīng)式設(shè)計(jì)。Axure有一個(gè)功能,允許您創(chuàng)建自適應(yīng)原型為多個(gè)斷點(diǎn)。允許流體設(shè)計(jì),盡管它需要一些能力。Proto.io和Justinmind能夠進(jìn)行真正的流體設(shè)計(jì)。

 

前端響應(yīng)式框架可以實(shí)現(xiàn)更大的靈活性,如Bootstrap和Foundation。其他工具,包括HotGloo和WebFlow支持響應(yīng)式.

 

隱藏影響你的選項(xiàng)

你現(xiàn)在已經(jīng)完成了工具的調(diào)查。你很滿意你的選擇想立刻進(jìn)行設(shè)計(jì)。創(chuàng)建令人敬佩項(xiàng)目的憧憬是一個(gè)偉大的動(dòng)力,但有時(shí)候它阻止我們看到大局!除了技術(shù)方面,我們必須考慮次要因素。在這之前讓我們簡(jiǎn)要回顧下一些建議！

易學(xué)性

選擇一個(gè)原型工具,特別是你沒(méi)有任何經(jīng)驗(yàn)。除了項(xiàng)目本身所花費(fèi)的時(shí)間,你需要花費(fèi)時(shí)間學(xué)習(xí)移動(dòng)工具的復(fù)雜和bug以及創(chuàng)造設(shè)計(jì)的過(guò)程。

 

學(xué)習(xí)需求處在一個(gè)困難局面

 

成為熟悉基本使用的工具大概需要6個(gè)月到一年。掌握并且持續(xù)的使用一個(gè)工具，有需要就立即知道如何解決問(wèn)題而無(wú)需研究的程度，大概需要兩到三年。這些估計(jì)來(lái)自我個(gè)人的經(jīng)驗(yàn),但是取決于你自己的熟悉編碼和原型的程度。

 

成本

對(duì)于你安裝的產(chǎn)品，分級(jí)定價(jià)。例如Axure標(biāo)準(zhǔn)版和pro版，就需要不同的成本獲取不同的功能。包括設(shè)備的許可數(shù)量的支持和升級(jí)的頻率等也是影響的因素。

 

基于云計(jì)算的工具按月定價(jià)。六個(gè)月和一年期為限來(lái)計(jì)算成本,適用于大多數(shù)中型到大型項(xiàng)目。工具將允許不同數(shù)量的項(xiàng)目,功能和評(píng)論者?？纯碔nVision和Proto.io就在這一類。也有混合的,有獨(dú)立的和基于云的版本,如Justinmind和Pixate.

 

不要低估免費(fèi)的力量，一些云服務(wù)為一到三個(gè)項(xiàng)目提供免費(fèi)計(jì)劃。通常有一個(gè)月的試用版本工具下載。對(duì)于仍然在學(xué)校，在公司的UX設(shè)計(jì)師提供免費(fèi)或者打折的工具。Pixate在被谷歌收購(gòu)前曾經(jīng)有個(gè)“學(xué)術(shù)賬戶”；Axure有一個(gè)優(yōu)秀學(xué)生項(xiàng)目；Proto.io提供50%的教育折扣。

 

技術(shù)支持

你的選擇不僅只有一個(gè)工具的功能,還提供的技術(shù)支持。我指的是公開(kāi)的文檔，視頻教程,API庫(kù)等等。Proto.io有一個(gè)很好的月度網(wǎng)絡(luò)研討會(huì)計(jì)劃工作;Axure詳細(xì)一步一步的引導(dǎo)；framer有一個(gè)API的網(wǎng)站和社區(qū)的建設(shè).

 

另一個(gè)考慮是工具的更新速度以適應(yīng)變化的用戶體驗(yàn)的需求。原型設(shè)計(jì)工具的小版本每三個(gè)月一次,主要功能發(fā)布每六到十二個(gè)月一次能夠保持領(lǐng)先的設(shè)計(jì)曲線。例如,framer有許多小bug修復(fù)和新功能的更新,而Axure通常每隔12個(gè)月發(fā)布一個(gè)主要版本,增量更新。

 

第三方資源

手機(jī)原型工具開(kāi)發(fā)商專注于社區(qū)建設(shè)。設(shè)計(jì)師通常解決同樣的問(wèn)題,因此,知識(shí)共享是高度相關(guān)的。在許多工具的網(wǎng)上論壇,用戶可以貢獻(xiàn)自己的原型和信息,包括Axure,Proto.io和Justinmind。其他供應(yīng)商,包括framer,使用替代的解決方案,比如Facebook群組。

 

第三方資源可以幫助您解決原型的難題

 

你的選擇也應(yīng)該基于使用工具的UX圈子、出版物的數(shù)量和專業(yè)設(shè)計(jì)師感興趣的程度就是一個(gè)很好的指標(biāo)。廣泛采用的工具,您將看到認(rèn)證課程和銷售設(shè)計(jì)資源的市場(chǎng)。例如,有書(shū)籍、文章和一年一度的研討會(huì)的Axure,而framer在多個(gè)城市有專業(yè)研討會(huì)和用戶貢獻(xiàn)的GitHub庫(kù)。

 

總結(jié)

在本文中,我們?yōu)閁X設(shè)計(jì)師介紹了實(shí)際考慮選擇一個(gè)移動(dòng)原型工具的因素,包括技術(shù)因素和更具戰(zhàn)略性的選擇標(biāo)準(zhǔn)。記住,沒(méi)有正確或錯(cuò)誤的決定——設(shè)計(jì)師有不同的工作方式,專業(yè)知識(shí)和需求!

 

讓你的選擇更明智,確定你的長(zhǎng)處。你會(huì)編碼嗎？你是一個(gè)優(yōu)秀的視覺(jué)設(shè)計(jì)嗎？你確定有多少需求？回答這些問(wèn)題并收集有關(guān)項(xiàng)目的信息將幫助您確定合適的工具。

 

建議

沒(méi)有人想“一招鮮吃遍天”。因此,我們建議你的手機(jī)原型工具包至少有以下類別之一:

 

• 全平臺(tái)應(yīng)對(duì)各種各樣的移動(dòng)問(wèn)題：Axure，JustinMind

• 基于代碼的工具，用于控制交互和動(dòng)畫(huà)：framer，JQuery Mobile

• 基于云計(jì)算的協(xié)作工具和分布式工作：Flinto，Proto.io,Pixate

• 設(shè)備內(nèi)置快速原型工具概念模型：Blueprint，AppCooker，POP

 

在你的專業(yè)上努力做到最好，保持對(duì)新的交互工具（如principle，InVision Motion，Adobe Comet）的好奇，并繼續(xù)為你的業(yè)務(wù)合作伙伴和用戶創(chuàng)作原型。我期待聽(tīng)到你關(guān)于選擇移動(dòng)交互工具的經(jīng)驗(yàn)。