款優秀的移動APP產品原型設計工具應當具備：

①.支持移動端演示（隨時隨地演示，廁所&食堂&電梯…以體現我們的敬業）

②.組件庫（高效復用，大量模板，好獲得）

③.可以快速生成全局流程（程序猿看不懂拆解的，給丫的看這個）

④.在線協作（多個PM狗一起用）

⑤.手勢操作、轉場動畫、交互特效…(這些都不需要，留給專業的交互、視覺，搞那么虛的不如多想想產品流程邏輯做做減法、寫寫xxRD啥的)

這些年，產品狗們折騰過的原型工具：

1. POP（Prototyping on Paper）

算是移動App原型設計神器 ，很多公司在用：quora、sina、豆瓣、36氪、ifanr…

操 作輕巧簡單：先用手機拍下草圖原型(存到POP app內)；然后開始編輯圖片的哪個區域（按鈕）鏈接到什么頁面，添加跳轉鏈接熱區，就可以在iPhone上給小伙伴們演示了，并且POP內嵌的交互動作 如側滑、展開、消失等，即可滿足一般的動態演示需要。不太明白？

2、Pencil Project

Pencil是一款開源的可以用來制作圖表和GUI原型的工具，可以作為一個獨立的app，也可以作為Firefox插件。內置模版可以幫你繪制桌面和移動界面中用到的各種各樣的用戶界面，包括流程圖、UI和一般的通用圖形。

通過它內置的模板，你可以創建可鏈接的文檔，并輸出成為HTML文件、PNG、OpenOffice文檔、Word文檔、PDF。Pencil Project還包含大量移動app模版。

3.Axure

大 家都很熟悉了，這里主要說下移動端的演示，這樣才充分表達原型意圖。按F5生成原型的時候，在“Mobile/Device”選項中可以設置適配移動設備 的特殊原型（Axure 6.5以下版本），再用移動設備訪問你生成的原型鏈接即可（該頁面創建一個桌面快捷方式）。

4、Proto.io

Proto.io是一個專用的手機原型開發平臺——可以構建和部署全交互式的移動程序的原型，并且可以模擬出相似的成品。它可以運行在大多數的瀏覽器中，并提供了3個重要的接口：dashboard、編輯器以及播放器。

dashboard 可以用來管理項目。編輯器是構建原型的環境，由一組設計和開發原型的工具組成，另外還可以構建交互。播放器用來觀看原型，并與原型進行交互，并提供了相關 工具來標注和保留反饋信息。你可以直接在真實的移動設備上對原型進行測試。并且可以使用iOS或Android上的瀏覽器以全屏模式運行原型。

5、Moqups

是一個非常好的、免費的HTML5應用，通過它可以創建可愛樸素的線框圖、實體模型和UI概念。該程序使用起來非常簡單，并且有內置的模板可以直接使用（模板包括單選按鈕、鏈接、圖像占位符、文本框以及滑塊等）。

它還提供了iPhone和iPad模板，以及iOS相關的按鈕、提示框、picker、菜單、開關以及鍵盤等。你可以設置網格的尺寸，并預覽和分享你的線框圖。Moqups提供了一個很有用的功能就是對齊網格，可以使對象精準對齊。

6、UXPin

UXPin是DeSmart團隊開發的一個簡易快速的實體模型和在線可點擊原型創作工具。它基于優秀的用戶體驗設計原則，在構建原型中，它提供了一個完整的工具包（該工具包具有良好的用戶設計模式和元素）來從頭構建一個出色的原型。

UXPin 具有響應式的斷點功能，創建的響應式原型和線框圖可以運行在不同的設備和分辨率上。另外該軟件還提供了版本控制和迭代功能，可以輕松的共享預覽，直觀的注 解和實時的協同編輯和聊天。該軟件擁有大量具有吸引力的用戶界面元素風格（包括web，iOS，Android等），并且具有快速、靈敏的響應拖放接口。

7、Omnigraffle

OmniGraffle是由The Omni Group制作的一款帶有大量模版可以用來快速繪制線框圖、圖表、流程圖、組織結構圖以及插圖等類型圖的app，也可以用來組織頭腦中思考的信息，曾獲得2002年的蘋果設計獎。

它采用拖放的所見即所得界面，你可以用鋼筆工具繪制自定義的模版或者圖形，此外還自帶Graffletopia提供的多個iPhone、iPad以及Android模版。

8、JustinMind

JustinMind是由西班牙JustinMind公司出品的原型制作工具，可以輸出Html頁面。與目前主流的交互設計工具axure，Balsamiq Mockups等相比，Justinmind Prototyper更為專屬于設計移動終端上app應用。

JustinMind 可以幫助開發者設計更豐富、更具交互新的移動產品線框圖，包含了iPhone、Android 以及iPad常用手勢，滑動、縮放、旋轉，甚至捕捉設備方向等，從而創造出更具交互性的原型。另外，它可以導出原型信息到Microsoft Word，生成規范的文檔。

此外，你還可以自定義小組件，創建自定義組件庫，并進行分類，不管對象是iPhone、iPad、黑莓、Android還是其他。

9、FluidUI

Fluid UI是一款用于移動開發的Web原型設計工具，可以幫助設計師高效地完成產品原型設計。Fluid UI 內置超過1700款的線框圖和手機UI控件，并且還會經常進行更新。

Fluid UI無設備限制，無平臺限制（Windows、Mac以及Linux系統），支持Chrome和Safari瀏覽器（Chrome瀏覽器上的app也可離 線使用）。你可以使用Fluid Player來預覽你的設計，收集意見和反饋。還可以以PNG、PDF方式輸出。

Fluid UI使用方法簡單，采取拖拽的操作方式，不需要程序員來寫代碼。另外，Fluid UI資源庫非常豐富，有針對iOS、Android以及Windows 8的資源。如果你覺得庫存資源不能滿足你的需求，你也可以自行添加。

10、Protoshare

ProtoShare：在線網站開發協同制作工具是一個十分便捷的在線原型制作工具，側重于團隊協作。團隊成員可以通過這個工具對工作進行審查，并及時提供反饋，對線框圖或內容進行建議。

作 為一個強大的線框圖和原型平臺，Protoshare提供了大量移動工具集（有來自中心資源庫的大量移動模版和大量2D、3D動畫過渡）。通過“拖放”界 面，你可以快速創建交互式的線框圖和移動原型，然后發送至iPhone、iPad或者Android設備進行測試，體驗app的功能實現情況。

另外，Protoshare還支持分享和反饋功能，項目成員可以標記和跟蹤的反饋信息來做出決定。而大量的資源庫意味著你可以使用模版和獲得的反饋創建移動產品線框圖，進而演變為高保真的原型。

11、 Wireframe

Wireframe是一款具有“點擊-拖-放”界面且超簡單的線框圖創作工具。雙擊實現編輯功能，有限的界面意味著你會把精力集中于你的想法上。還給每個線框圖分配了特有的URL，便于標記和分享。

Wireframe有瀏覽器窗口和移動手機兩個模版選項，移動版有縱向和橫向兩個選擇。線框圖的每個元素都可以編輯和轉換。

12、InVision

InVision是一個便捷的產品原型生成工具，用戶制作一個在線原型只需要四部：創建一個工程、上傳視覺設計稿、添加鏈接以及生成在線原型。

確 切說，InVision提供的不是準確的線框圖，而是一個快速原型的環境，可以把你的UX/UI草圖快速連接起來。數字型的線框圖和高保真的設計可以幫你 測試app的工作情況，同時該工具還支持協作和分享功能，生成的在線原型可以支持任何人在產品原型的任何地方評論，便于準確的交流。

針對iOS 開發，InVision還增添了其他功能，比如自定義主屏幕icon和自定義加載頁面。

13、Mokk.me

Mokk.me 是一個簡單快速的原型工具，通過界面上簡單的拖放操作，不用了解單線編程就能創作一個可以分享、測試以及多平臺的app。目前，Mokk.me正在測試 中，但它是一個簡單的基本的工具，任何人可以用它來創建app的布局。你可拖、放或者編輯小工具，可以搭建和連接頁面，還可以選擇過渡動畫。它的特點還在 于頁面和按鈕、圖片小工具、文本輸入以及復選框形式。

另外，你可以借助HTML、CSS以及JavaScript完成app其他一些功能，一旦你創建了原型，你還可以進行分享，在iOS 和Android上進行測試。

14、iPlotz

iPlotz 是一款可以用來創建可點擊、可導航的原型和線框圖工具，適合網站開發者和移動app開發者。你可以在一個可調整的頁面拖放元件，然后連接起來，增加其他屏 幕或者頁面的熱點鏈接。你可以選擇使用iPhone/iPad模版或者Android模版，任何模版都有獨一無二的元件設置。

iPlotz界面明白易懂，支持協同工作、可分享的編輯權限、任務管理以及評價系統。另外，項目可以以IPML、JPG、PNG、PDF以及HTML形式輸出。

15.Adobe Illustrator 俗稱AI

這是adobe的一款矢量圖設計軟件，推薦給設計師轉型過來的PM（沒興趣的跳過），電商圈不推薦再去費力學習其他軟件，達到溝通的目的提高效率是王道。上圖是設計出來的原型成品，可以結合上面提到的POP去演示。

個人還是喜歡axure，比較是最多人推薦的軟件了！你喜歡哪款呢？推薦給大家用一下！

最后一句，求關注！

文將從以下三個方面解說原型特點

1、 了解指針

2、 了解原型

3、 用原型的方法完成承繼

以下為詳細內容：

1、 了解指針

要了解JAVASCRIPT中的原型，先了解指針，在C/C++中，會提到指針，其實，指針不應該屬于C/C++的專利，上篇文章中，提到的引證類型(也是許多面向目標語言中的數據類型的叫法)，便是指針。

C/C++中對指針的解說：指針便是地址。地址為何物?

地址：是計算機對內存每個存儲單元的管理方法。在計算機的內存中，存儲著若干數據，計算機的CPU是如何讀取內存中的數據的?

計算機的每個存儲單元都有一個編號，就像到超市存包時，每個存包的格子都有一個編號，這個編號便是地址，內存的地址。超市每個格子為什么要有編號，目的便是為了方便服務員進行查找(依據編號進行查找)，計算機每個存儲單元為什么會有一個編號，目的也是為了CPU查找內存。

假如某個內存中直接存儲的是數據，則這種數據是根本類型的數據，假如某個內存中存儲的是其它內存的編號(數據)，那么這種數據就叫引證類型的數據。

2、 了解原型

a) 原型(特點)的概念

JAVASCRIPT中的函數也是目標(假如不明白函數也是個目標，請百度JAVASCRIPT中函數是功用完整的類)，每個函數都有一個原型(prototype)特點，這個特點是指針類型。原型特點是目標類型，所以，也可以叫原型目標，原型便是模子，模型。函數何來原型，其實了解原型(模型)更應該用結構函數來了解會更好。

結構函數是用來結構實例的，每次用new運算符調用結構函數發生一個實例時，模型就會起作用。就像咱們要造一個塑料制品(如：杯子，電腦顯示器的外殼，打印機的外殼等)，都有一個模具，只要是同一個模具做出來的物體，都非常類似。所以，百度上對模具的解說：模具的俗稱。常用于比喻具有許多類似點的兩個或多個人或者事物。

b) 原型形式創立目標(把結構函數和原型形式合在一起)

用同一個結構函數結構的實例，具有許多的一起點(一起的特點或者函數)，這些一起點便是許多書籍描繪的“一切實例同享的特點和辦法”。這些一起點便是用prototype特點進行維護的。詳細的做法便是：一切實例同享的特點和辦法用prototype特點進行表明。

如：

function Person(id,name,sex){

//在結構函數里寫的是每個實例特有的特點(特點值不相同)

this.id =id;

this.name = name;

this.sex = sex;

}

//一切人的國籍都是我國，國籍特點就用prototype來表明

Person.prototype.country = “我國”;

//一切人吃的邏輯都相同。所以，吃的函數也用prototype來表明

Person.Prototype.eat = function(str){

alert(this.name+”在吃”+str+”，天在看……”);

}

var p1 = new Person(“007”, “樂樂”, “女”);

var p2 = new Person(“008”, “寶寶”, “男”);

Console.log(p1.country);//我國

Console.log(p2.country); //我國

p1和p2兩個實例的country特點值都是我國，因為它們兩個是一個結構函數實例化出來的(一個模子“刻”出來的)。

如下是示意圖，其中帶箭頭的線表明指向。

圖中可以看出：

1)、在Person結構函數的prototype特點中有個constructor特點，指向了結構函數自身。constructor特點究竟有何用，我們先把它save到大腦中，后邊給我們解說。

2)、兩個實例p1和p2指向了Person結構函數的prototype特點，跟Person結構函數沒有直接關系。

3)、兩個實例p1和p2都有[[prototype]]特點。實例靠著 [[prototype]]特點找到它所對應結構函數的原型，也是靠它來找到，原型中的特點的。留意， [[prototype]]特點不能直接在代碼中運用。

c) 原型(類型的)特點和實例(類型的)特點

每個實例特有的特點和辦法存放在實例所在內存區域，也叫實例特點，如以上例中的id，name，sex特點。一切實例同享的特點和辦法，都在原型(prototype)對應的內存區域，也叫原型的特點，如上例中的country。

i. 原型(類型的)特點變成實例(類型的)特點

這里有點疑問，隨著時刻的推移，有的目標的原型特點的值會發生變化?

如：寶寶年輕時，覺得俄羅斯的美女多，決定久居俄羅斯了。即p2的country(國籍)的值為俄羅斯。那該如何是好，改仍是不改?改了會不會影響其它目標的country特點的值。不改，又不能滿意需求。看來，JAVASCRIPT在這方面仍是考慮到了。可以改，并且不會影響其它目標的特點值。

還有，假如呈現了實例特點和原型特點重名的情況，用實例來拜訪該特點時，究竟拜訪的是實例特點仍是原型特點。這個JAVASCRIPT中解決了。

如何解決上面的問題的。在JAVASCRIPT中，當給原型特點賦值時，在對應實例中會增加了一個同名的實例特點，然后把值賦給實例特點，而原型特點的值不受影響。當拜訪該特點時，先在實例特點中尋覓，假如找不到，再在原型特點中找。

如以下代碼：

P2.country = “俄羅斯”;

執行時，內存會變成如下：

在p2的實例中增加一個country實例特點，內容為“俄羅斯”(圖中赤色的框里)。這樣，代碼p1.country依然去找實例特點的值“我國”。而p2.country先在實例特點中找country，找到了，就不用去原型特點中去找了。即，當實例拜訪特點時，會先在實例的內存中去尋覓，假如找不到就會到原型的內存中去尋覓。

ii. 刪去實例(類型的)特點

隨著寶寶年齡的增長，對美女沒有了愛好，并且覺得仍是在自己的國家好，又想回來。即p2.country的值為”我國”，這時候是可以運用原型里的特點值，怎么辦?沒事，運用delete p2.country就會把p2的實例特點country刪去掉。

定心吧，delete是不能刪去掉原型的特點的。

3、 承繼時原型的了解(原型鏈)

原型鏈是ECMAScript中實現承繼的一種方法。假如不明白承繼，請先百度，了解承繼的概念。

原型承繼的根本思想是讓原型特點(目標)指向另外一個類型的的實例。

如：

父目標：人

function Person(id,name,age){

this.id = id;

this.name = name;

this.age = age;

}

Person.prototype.eat = function(str){

alert(this.name+"在吃"+str);

}

子目標：程序員

function Programmer(languages){

this.languages = languages;

}

//此句話運用原型實現了承繼，子目標Programmer的原型特點指向了父目標Person的實例。

Programmer.prototype = new Person(“008”, “寶寶”, “20”);

Programmer.prototype.writeCode=function(){

alert(this.name+"一邊努力地寫著代碼，一邊想著‘多寫代碼，多賺錢’");

}

從圖中可以看出，子目標Programmer擁有了父目標的特點(id，name，age)和辦法(eat)。自己特有的特點languages和辦法writeCode()。成功完成了承繼。

特別要留意，子目標完成了承繼關系后，再給子目標的原型中增加特點和辦法。即，先寫代碼Programmer.prototype = new Person(“008”, “寶寶”, “20”); 再寫代碼：

Programmer.prototype.writeCode=function(){

alert(this.name+"一邊努力地寫著代碼，一邊想著‘多寫代碼，多賺錢’");

}

否則，當子目標的prototype(原型)特點的指向發生變化后，原來在prototype(原型)特點中所寫特點和辦法就會丟掉。

原型鏈承繼：當B目標的原型特點指向了A目標的實例，而C目標的原型特點指向B目標的實例時，就完成了原型鏈承繼。

注：

1、此篇文章可以結合JAVASCRIPT中創立目標的幾種方法進行學習。假如再能結合上篇文章《比照引證類型與根本類型》就會更好

2、此篇文章只是為了了解prototype特點，所以，許多的留意點并沒有觸及。作者更期望我們學一點，了解一點，而不是大而全。并且學習是循序漸進的。先把prototype特點了解了，再去重視留意點。

本文由“指尖代碼”發布，2019年4月9日