16 種原型設(shè)計(jì)工具及其使用場(chǎng)景

時(shí)間：2023-09-29 08:00:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-29 08:00:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

16 種原型設(shè)計(jì)工具及其使用場(chǎng)景：

簡(jiǎn)評(píng)：每個(gè)人都在問(wèn)：“哪個(gè)原型設(shè)計(jì)工具是最好的？！” 這是個(gè)錯(cuò)誤的問(wèn)題。正確的問(wèn)法應(yīng)該是：“哪個(gè)原型設(shè)計(jì)工具對(duì)我現(xiàn)階段的目標(biāo)是最好的？”

▎在開始設(shè)計(jì)原型時(shí)首先明確這四個(gè)問(wèn)題：

原型設(shè)計(jì)是設(shè)計(jì)思維過(guò)程中的一個(gè)密切部分，它讓我們有機(jī)會(huì)去證明我們的瘋狂想法。當(dāng)原型完成時(shí)，我們測(cè)試并驗(yàn)證我們的設(shè)想。當(dāng)有新信息出現(xiàn)時(shí)，我們還會(huì)調(diào)整我們的設(shè)計(jì)。

但是我們?nèi)绾沃牢覀冊(cè)撌褂媚姆N工具呢？原型應(yīng)該設(shè)計(jì)到哪個(gè)地步呢？無(wú)論你到原型設(shè)計(jì)的哪一個(gè)步驟，這里的四個(gè)問(wèn)題你都應(yīng)該注意：

1. 你是在為手機(jī)、平板還是桌面做設(shè)計(jì)呢？
2. 你的原型需要什么程度的保真度？
3. 你需要多少時(shí)間完成設(shè)計(jì)？
4. 你需要多少經(jīng)驗(yàn)去展示？

▎六種場(chǎng)景和每種場(chǎng)景下合適的原型設(shè)計(jì)工具

我將給你舉些例子來(lái)說(shuō)明我的觀點(diǎn)，告訴你每個(gè)場(chǎng)景中哪個(gè)原型設(shè)計(jì)工具是最好的。我們將使用上面概述的問(wèn)題為每個(gè)場(chǎng)景創(chuàng)建上下文。

一、快速的在線原型界面設(shè)計(jì)

在項(xiàng)目立項(xiàng)之初，可能會(huì)涉及多方同事協(xié)同，包括設(shè)計(jì)、產(chǎn)品、運(yùn)營(yíng)，以及團(tuán)隊(duì)的領(lǐng)導(dǎo)，這個(gè)時(shí)候通常會(huì)采用在線工具，方便迅速地給團(tuán)隊(duì)提供原型預(yù)覽。

這一階段的原型設(shè)計(jì)工具，推薦 摹客RP：同時(shí)具備 強(qiáng)大的高保真原型設(shè)計(jì)能力 和 團(tuán)隊(duì)協(xié)作能力。不僅保證了快速產(chǎn)出和精細(xì)設(shè)計(jì)兩不誤，同時(shí)滿足產(chǎn)品經(jīng)理、設(shè)計(jì)師的需要，在線工具的協(xié)作能力更是不容小覷：多人實(shí)時(shí)編輯，便捷的團(tuán)隊(duì)評(píng)審，工程師查看頁(yè)面數(shù)據(jù)、復(fù)制代碼等強(qiáng)大功能非常適合團(tuán)隊(duì)使用。

最重要的是，摹客RP 是一款真正完全免費(fèi)的原型設(shè)計(jì)工具，不限時(shí)長(zhǎng)、不限功能、不限頁(yè)面，包括：

• 設(shè)計(jì)頁(yè)面不受限制，靈感肆意發(fā)揮；
• 無(wú)需為成員付費(fèi)，注冊(cè)即可實(shí)時(shí)參與項(xiàng)目編輯；
• 無(wú)限導(dǎo)出離線演示包，無(wú)憂演示與匯報(bào)；
• 設(shè)計(jì)資源庫(kù)自由搭建，團(tuán)隊(duì)共享不收費(fèi)；
• 歷史版本無(wú)限生成，隨時(shí)查看及回溯。

特色：

• 自帶交互效果的預(yù)設(shè)組件、海量圖標(biāo)、便捷的編輯方式，快速產(chǎn)出設(shè)計(jì)。
• 支持頁(yè)面交互、狀態(tài)交互、組件交互，以及設(shè)置多種觸發(fā)方式和交互動(dòng)作，輕松制作精細(xì)交互效果。
• 鋼筆工具、鉛筆工具、布爾運(yùn)算、響應(yīng)式布局等特色功能，設(shè)計(jì)創(chuàng)作自由隨心。
• 支持多人同時(shí)在線編輯同一項(xiàng)目，共同完成原型設(shè)計(jì)。
• 設(shè)計(jì)稿中支持直接繪制流程圖，清晰呈現(xiàn)項(xiàng)目邏輯。
• 強(qiáng)大的協(xié)作功能：團(tuán)隊(duì)評(píng)審、工程師查看頁(yè)面數(shù)據(jù)、復(fù)制代碼、撰寫在線文檔、任務(wù)管理... ...

適用情景：中高保真原型，快速原型， 團(tuán)隊(duì)協(xié)作，WEB/移動(dòng)端/平板原型，線框圖，視覺(jué)稿

二、低保真、快速移動(dòng)應(yīng)用程序

1. 為移動(dòng)應(yīng)用構(gòu)建
2. 低保真
3. 快速搭建
4. 需要將屏幕鏈接在一起，并顯示它們的流程

有很多好用的工具可適用于這個(gè)場(chǎng)景。用于此場(chǎng)景的最佳工具是可以在短時(shí)間內(nèi)以低保真方式展示整個(gè)應(yīng)用體驗(yàn)流程的工具。這些工具有：

• Invision
• Marvel
• Craft（by Invision,Plugin for Sketch）
• Adobe XD
• Flinto
• Principle
• Origami
• UX Pin
• Pixate

三、低保真桌面網(wǎng)站或 Web 移動(dòng)應(yīng)用

1. 為桌面瀏覽器（網(wǎng)站）構(gòu)建
2. 允許低保真
3. 快速搭建
4. 需要將屏幕鏈接在一起，并顯示它們的流程

針對(duì)桌面體驗(yàn)方面的工具會(huì)比較有限，因?yàn)樵S多原型設(shè)計(jì)工具往往更專注于移動(dòng)端。這些工具有：

• Invision
• Marvel
• Flinto
• Principle
• Adobe XD
• Keynote
• UX Pin

四、響應(yīng)體驗(yàn)

1. 構(gòu)建響應(yīng)式網(wǎng)站（手機(jī)、平板、桌面）
2. 需要較高的保真度
3. 時(shí)間不是特別急，但也想要有高效率
4. 需要將屏幕鏈接在一起，顯示它們的流程，并展示響應(yīng)式網(wǎng)站是如何崩潰的

一條簡(jiǎn)短的免責(zé)聲明：每當(dāng)客戶要求我演示「響應(yīng)性」時(shí)，我傾向于嘗試重新主導(dǎo)對(duì)話。

為什么我們必須設(shè)計(jì)響應(yīng)？真正的目標(biāo)是什么？我們可以分別顯示每個(gè)模塊？如果沒(méi)有前后端的編碼，那么設(shè)計(jì)高效率的響應(yīng)設(shè)計(jì)是非常困難的。

以下是達(dá)成目標(biāo)所需要的工具：

• Raw HTML/CSS/JS（真正的響應(yīng)式設(shè)計(jì)）
• Axure(static breakpoints)
• UXPin(static breakpoints)

五、特定功能

1. 在移動(dòng)應(yīng)用上構(gòu)建特定的動(dòng)畫
2. 需要特別高的保真度
3. 需要高效率
4. 需要顯示運(yùn)動(dòng)，動(dòng)畫元素和時(shí)機(jī)——我并不關(guān)心頁(yè)面之間的跳轉(zhuǎn)

做一個(gè)動(dòng)畫原型可以有很多的樂(lè)趣，而且我發(fā)現(xiàn)就算用戶沒(méi)有注意到動(dòng)畫的發(fā)生，他們也會(huì)在這些細(xì)微差別中發(fā)現(xiàn)很大的不同。當(dāng)你在細(xì)節(jié)上花心思去做，整體體驗(yàn)會(huì)更加愉悅和流暢。

• Principle（最快的設(shè)計(jì)方式）
• Adobe After Effects
• Raw HTML/CSS/JS
• Flinto
• Origami
• Phonegap
• Xcode
• Framer

六、高保真體驗(yàn)（手機(jī)或者桌面）

1. 為手機(jī)或桌面進(jìn)行構(gòu)建
2. 必須盡可能高保真
3. 我有足夠的時(shí)間進(jìn)行這項(xiàng)任務(wù)
4. 需要顯示屏幕的流程，同時(shí)還能高保真顯示屏幕元素和功能的動(dòng)畫

有時(shí)候你的原型不僅需特別高的保真度，與此同時(shí)還需要顯示應(yīng)用程序中的整個(gè)流程。這是一項(xiàng)非常耗時(shí)的任務(wù)，以至于有時(shí)候任務(wù)繁重時(shí)不禁想問(wèn)，為什么我們不能構(gòu)建一個(gè)真正的？

如果你需要構(gòu)建一個(gè)包含有趣而獨(dú)特動(dòng)畫的高保真原型，允許用戶在頁(yè)面之間導(dǎo)航，創(chuàng)造一個(gè)真正的體驗(yàn)，那么你可以使用這些工具：

移動(dòng)設(shè)備：

• http://Proto.io
• Principle
• Flinto
• Origami
• PhoneGap
• Framer
• Xcode

桌面：

• Raw HTML/CSS/JS
• Principle
• Flinto
• Framer
• Xcode

▎不要只使用一個(gè)原型設(shè)計(jì)工具

市面上有這么多原型設(shè)計(jì)工具，然而本文并不是要詳盡地列出所有工具。相反，我們只關(guān)注幾個(gè)最流行的工具。

關(guān)鍵是，你應(yīng)該專注于你的設(shè)計(jì)而不是工具。你需要溝通什么、展示什么、測(cè)試什么？你需要建立怎樣的模塊？需要什么程度的保真？

當(dāng)你專注于原型所需要的目標(biāo)時(shí)，你就知道你要采用何種工具了。

最后，每個(gè)人都應(yīng)該有廣泛的原型工具使用經(jīng)驗(yàn)。當(dāng)你需要它時(shí)，你馬上就可以上手。

---

原文鏈接：

16 Prototyping Tools & How Each Can Be Used

分類收藏：

產(chǎn)品 | 設(shè)計(jì) | 技術(shù) | HackLife | Photography

推薦閱讀：