正確的問(wèn)法應(yīng)該是：“哪個(gè)原型工具對(duì)我目前的項(xiàng)目是最好的？”
還有：每個(gè)產(chǎn)品設(shè)計(jì)師都應(yīng)該熟練多個(gè)原型設(shè)計(jì)工具。只懂一個(gè)還不夠！
原型設(shè)計(jì)毫無(wú)疑問(wèn)是設(shè)計(jì)思維進(jìn)程中的密不可分的一部分。因?yàn)橛羞@個(gè)設(shè)計(jì)進(jìn)程的必要部分，我們得以有機(jī)會(huì)來(lái)證明走馬行空的想法是否可行。當(dāng)原型完成，我們?nèi)ピ囼?yàn)它。我們驗(yàn)證和挑戰(zhàn)我們的假設(shè)。當(dāng)有新信息出現(xiàn)時(shí)，我們及時(shí)去調(diào)整我們的設(shè)計(jì)。
而我們?nèi)绾沃朗褂媚姆N工具更合適呢？還有原型設(shè)計(jì)應(yīng)該做到哪種程度？
那么每當(dāng)你接到一個(gè)原型設(shè)計(jì)的需求，你應(yīng)該首先得搞清楚如下4個(gè)問(wèn)題：
- 您的產(chǎn)品目標(biāo)設(shè)備是手機(jī)，平板電腦還是臺(tái)式機(jī)？
- 你的原型設(shè)計(jì)是否需要高保真？
- 可以給到你多少時(shí)間來(lái)準(zhǔn)備？
- 需要做到哪種程度？
為了說(shuō)明我的觀點(diǎn)，我將給出一些案例來(lái)告訴你每個(gè)場(chǎng)景下哪個(gè)原型工具最適合。我們將使用上面概括的4個(gè)問(wèn)題為每個(gè)場(chǎng)景來(lái)說(shuō)明依據(jù)。
場(chǎng)景1 – 可以是低保真，但需要快速準(zhǔn)備好的移動(dòng)App- 目標(biāo)設(shè)備是移動(dòng)端
- 只需要低保真
- 需要盡快準(zhǔn)備！
- 需要將頁(yè)面串聯(lián)，并展示它們的流程
有很多優(yōu)秀的工具適用于這種情況。用于此場(chǎng)景的最佳工具是可以在短時(shí)間內(nèi)以低保真方式展示整個(gè)應(yīng)用體驗(yàn)的流程的工具。適合這需求目標(biāo)的工具包括有：
- Invision
- Marvel
- Craft (Sketch的一個(gè)插件)
- Adobe XD
- Flinto
- Principle
- Origami
- UX Pin
- Pixate
- 目標(biāo)設(shè)備是桌面瀏覽器（網(wǎng)站）
- 可以是低保真原型
- 需要盡快準(zhǔn)備！
- 需要將頁(yè)面串聯(lián)，并展示它們的流程
針對(duì)臺(tái)式機(jī)的普通網(wǎng)頁(yè)可選擇的工具其實(shí)很有限，因?yàn)樵S多原型工具往往更專注于移動(dòng)端。符合我們4個(gè)需求點(diǎn)的工具包括有：
- Invision
- Marvel
- Flinto
- Principle
- Adobe XD
- Keynote
- UX Pin
- 目標(biāo)設(shè)備是全部類型
- 保真度相對(duì)要求較高
- 不用很趕，但需要保證效率
- 需要將頁(yè)面串聯(lián)，并展示它們的流程，還要展示響應(yīng)的效果
好吧，每當(dāng)客戶要求我準(zhǔn)備“響應(yīng)式”示例時(shí)，我其實(shí)更傾向于嘗試重新商議。為什么我們的原型需要做響應(yīng)效果??？真正的目標(biāo)是什么？我們可以分別顯示每種模態(tài)嗎？在不懂前端代碼的情況下，去實(shí)現(xiàn)原型設(shè)計(jì)的響應(yīng)式其實(shí)是相當(dāng)困難的。
話雖如此，但有時(shí)你還是不得不去準(zhǔn)備……就此場(chǎng)景推薦的工具包括有：
- 原始的HTML / CSS / JS（真正的響應(yīng)式）
- Axure（靜態(tài)斷點(diǎn)）
- UXPin（靜態(tài)斷點(diǎn)）
- 目標(biāo)設(shè)備是全部類型
- 保真度相對(duì)要求較高
- 不用很趕，但需要保證效率
- 需要展示動(dòng)效，元素及動(dòng)畫(huà)效果需要在適合的時(shí)機(jī)出現(xiàn)，而不需要關(guān)注頁(yè)面間的流程
在原型稿中搞些動(dòng)畫(huà)其實(shí)可以是蠻有趣的。我發(fā)現(xiàn)即使用戶也許沒(méi)有注意到這些動(dòng)畫(huà)，但這些細(xì)微差別的體驗(yàn)還是很有價(jià)值的——當(dāng)你花時(shí)間實(shí)現(xiàn)“平滑的過(guò)場(chǎng)”時(shí)，整體體驗(yàn)會(huì)更加愉悅和流暢。
- Principle (最快的方式實(shí)現(xiàn)模擬效果)
- Adobe After Effects
- 真正的 HTML/CSS/JS
- Flinto
- Origami
- Phonegap
- Xcode
- framer
- 目標(biāo)設(shè)備是移動(dòng)端或同時(shí)包括PC端
- 必須盡可能高保真
- 有充裕的時(shí)間
- 需要顯示屏幕的流程關(guān)系，同時(shí)還需要準(zhǔn)備屏幕元素和功能的高保真動(dòng)畫(huà)
有時(shí)，你的原型需要真正高保真，同時(shí)還展示app的整個(gè)流程交互關(guān)系。毫無(wú)疑問(wèn)這是一個(gè)相當(dāng)花時(shí)間的任務(wù)，有時(shí)我可能會(huì)問(wèn)，“為什么我們不索性作為正式的產(chǎn)品來(lái)直接來(lái)開(kāi)發(fā)呢？”
如果你確實(shí)需要構(gòu)建一個(gè)高保真的原型，包括一些有趣的和獨(dú)特的動(dòng)畫(huà)，并允許用戶在頁(yè)面之間導(dǎo)航跳轉(zhuǎn)，創(chuàng)造一個(gè)真正的體驗(yàn) —— 那么你可用到如下這些很棒的工具：
移動(dòng)端
- Proto.io
- Principle
- Flinto
- Origami
- PhoneGap
- framer
- Xcode
PC端
- 原生HTML/CSS/JS
- Principle
- Flinto
- framer
- Xcode
業(yè)內(nèi)如此多的原型設(shè)計(jì)工具。而本文并不是說(shuō)提及的已經(jīng)是原型工具的詳盡列表。相反地，提及的僅是所關(guān)注幾個(gè)最流行的工具而已。
關(guān)鍵點(diǎn)其實(shí)是，不要專注于用哪個(gè)具體的工具，而是專注于你有原型要達(dá)成一個(gè)怎樣的目標(biāo)。你需要溝通什么？你需要展示什么？你需要測(cè)試什么？你必須建立什么樣的模式？需要什么樣的保真度？要多快搞定？
當(dāng)你懂得專注于搞清楚原型設(shè)計(jì)的需求目標(biāo)時(shí)，應(yīng)該用哪些工具將變得很顯而易見(jiàn)的事情了。那么我們應(yīng)該有更廣泛的原型工具的經(jīng)驗(yàn)。當(dāng)需求出現(xiàn)，你有所準(zhǔn)備才懂得選擇哪一個(gè)工具。
最后要說(shuō)的是：原型存在只是為了交流東西。每當(dāng)你進(jìn)行原型設(shè)計(jì)時(shí)，我會(huì)鼓勵(lì)你少關(guān)注原型的表現(xiàn)效果，而更多地關(guān)注你為什么這樣做。你想實(shí)現(xiàn)什么？
通常，我發(fā)現(xiàn)自己做的原型設(shè)計(jì)算得上真正高保真體驗(yàn)是那些為了實(shí)現(xiàn)產(chǎn)品的，而不一定是做得很漂亮的。要知道原型只是為了便于需求的溝通和測(cè)試的整體產(chǎn)品概念的東西。
當(dāng)心原型設(shè)計(jì)別只是為了做原型！準(zhǔn)備原型的根本目的是為了證明一個(gè)概念，傳達(dá)一個(gè)想法或測(cè)試一種方法。若非如此，一切都是浪費(fèi)時(shí)間。
