??設(shè)計(jì)師小伙伴們肯定都知道，在網(wǎng)站或者應(yīng)用開發(fā)的前期，是需要設(shè)計(jì)原型圖然后給開發(fā)和客戶展示的。

??原型圖的目的：

??第一是給自己看，方便規(guī)劃整個設(shè)計(jì)并持續(xù)下一步的完成度；

??第二是給開發(fā)看的，可以更好的說服，并且更佳的完善軟件；

??第三個目的是給客戶看的，更高質(zhì)量的原型圖可以推動合作并讓客戶更滿意。

??但是在實(shí)際操作中，很多UI初學(xué)者對原型度的界限不是非常清晰，拿著給客戶看的原型圖去給開發(fā)，有的被拒絕，有的事效率低下，嚴(yán)重的溝通問題產(chǎn)生。有的拿著給開發(fā)看的原型去給客戶看，導(dǎo)致客戶不清楚并不滿意，談判過程較艱難。更甚者拿著自己看的原型圖去給開發(fā)／客戶看的話，后果不堪設(shè)想。

??所以接下來我們就來理清到底什么工具配合制作什么樣的原型給誰看。

??1.給自己看的原型圖

??重點(diǎn)：草圖

??工具：UX流程圖卡、白板、紙筆、Balsamiq、Xmind

??給自己看的原型圖可以略簡單一些，可以不需要太多花里胡哨的東西，但是UX流程圖卡兼?zhèn)淞嘶ɡ锖诤蛯?shí)用，強(qiáng)大的網(wǎng)站結(jié)構(gòu)規(guī)劃工具，專業(yè)的網(wǎng)站建設(shè)者，涵蓋54種常用UX模板，讓設(shè)計(jì)師能夠快速搭建專業(yè)的用戶體驗(yàn)流程圖，節(jié)省大量時間且架構(gòu)清晰。幫助設(shè)計(jì)師和產(chǎn)品經(jīng)理把握產(chǎn)品全貌，思考用戶體驗(yàn)，聚焦重要環(huán)節(jié)。

??UX流程圖卡

??官網(wǎng)：https://www./

??這款卡牌可以配合白紙板和筆的直接交互，這樣可以省下用筆畫出又線又框的時間，UX流程圖卡任你搭出無數(shù)想法

??原型講解，需求可視化

??流程卡是非常有效的將需求轉(zhuǎn)化為具體設(shè)計(jì)稿的思考工具。

??方案探討，隨時修改糾錯

??修改、移動、自定義都很容易，大大節(jié)省創(chuàng)建修改的時間成本。

??頭腦風(fēng)暴，快速搭建思維模型

??操作簡單，幫助設(shè)計(jì)師和產(chǎn)品經(jīng)理快速記錄思路。

??Balsamiq Mockups

??網(wǎng)址：https://www./app/graphics-design/balsamiq-mockups

??可以更有效的整理線框圖，這款工具雖然沒有交互設(shè)置，但是素描風(fēng)格也是很不錯的靈感來源了，雖然組件不是非常多，但也是夠滿足原型圖的要求了。

??Xmind

??官網(wǎng)：https://www./xmind8-pro/

??這是一款幫助你整理屬于你自己的思維導(dǎo)圖，更佳的完善所有流程步驟，簡單易用、美觀、功能強(qiáng)大，擁有高效的可視化思維模式,具備可擴(kuò)展、跨平臺、穩(wěn)定性和性能,真正幫助用戶提高生產(chǎn)率，促進(jìn)有效溝通及協(xié)作。

??2、給開發(fā)人員看的原型圖

??重點(diǎn)：交互

??工具：UX流程圖卡、Axure RP、Mockplus

??每個人看每件事物都是不一樣的，所以為了更好的和開發(fā)人員達(dá)成一致，我們該盡心盡力的去使用工具制作更直觀的原型圖，來減少誤解，提高效率加快節(jié)奏。

??這里UX流程圖卡又派上用場了，它并不僅是為了給設(shè)計(jì)師自己看，還可以拿出卡牌和開發(fā)人員一起探討跳轉(zhuǎn)的交互，隨時修改糾錯。

??再來進(jìn)階版的是AxureRP和Mockplus這兩款工具，敏捷開發(fā)的團(tuán)隊(duì)中，時間是寶貴的，我們想要的還是創(chuàng)造出更快、更好的效果來表達(dá)出最接近客戶想法的設(shè)計(jì)，然后更好的與開發(fā)溝通探討。

??AxureRP

??網(wǎng)址：https://www./app/business/axure-rp-pro

??是一款專業(yè)的快速原型設(shè)計(jì)工具，讓負(fù)責(zé)定義需求和規(guī)格、設(shè)計(jì)功能和界面的專家能夠快速創(chuàng)建應(yīng)用軟件或Web網(wǎng)站的線框圖、流程圖、原型和規(guī)格說明文檔。

??Mockplus

??官網(wǎng)：https://www./product/mockplus

??是一款簡潔、快速、免費(fèi)的原型圖工具，適合軟件團(tuán)隊(duì)、個人在軟件開發(fā)的設(shè)計(jì)階段使用。該工具具有低保真、無需學(xué)習(xí)、快速上手等功能特點(diǎn)，可以幫助用戶輕松的做出專業(yè)化的原型設(shè)計(jì)。

??3、給客戶看的原型圖

??重點(diǎn)：精致度

??工具：Origami Studio、Framer

??對于不是非常了解軟件設(shè)計(jì)的客戶，他們需要的是一個99.99%接近應(yīng)用的原型。

??這個時候就請使用Origami Studio、Framer這兩款工具，為什么這種不僅可以保證精致度，還可以保證高保真的工具我到這個時候才拿出來？原因很簡單，這兩款的工具步驟相對復(fù)雜，后者基本依靠代碼。這兩款工具無論是畫面效果還是交互動效都可以與真正的App相媲美，做到以假亂真的效果。不過由于要求高，時間成本高，不建議日常使用，可以留到最后以應(yīng)防不測。

??Origami Studio

??網(wǎng)址：https://www./app/graphics-design/origami-studio

??這款由Facebook推出，在iOS與Android設(shè)計(jì)風(fēng)格基礎(chǔ)之上采用Facebook設(shè)計(jì)語言的原型開發(fā)工具，這款工具提供了必要的設(shè)計(jì)要素、動畫效果以及各種庫，可以讓產(chǎn)品設(shè)計(jì)師更快更方便地進(jìn)行原型開發(fā)。

??Framer

??網(wǎng)址：https://www./app/graphics-design/framer

??它是一款屏幕設(shè)計(jì)和交互式原型制作的最佳工具。讓你從簡單的代碼開始你的設(shè)計(jì)生活。

??上面是對三種情況下的基礎(chǔ)說明了。還有很多比較優(yōu)秀的工具這里沒有提到，希望大家還是能夠根據(jù)自己的實(shí)際情況，合理選擇工具，更好的溝通，更敏捷的開發(fā)做更好的設(shè)計(jì)。