Instagram的高保真原型分享，附原型和組件庫下載！
這一次，我們帶來的是instagram的高保真原型！
等等！什么？高保真？我知道，有小伙伴要準(zhǔn)備吐槽了，高保真原型在產(chǎn)品圈中一直備受爭議，它有很多缺點，比如需要耗費更多的時間、修改成本較高等等。這個我也認(rèn)同，在產(chǎn)品的探索期以及內(nèi)部溝通時，快速準(zhǔn)確地表達(dá)產(chǎn)品的結(jié)構(gòu)和功能是最重要的，快速討論，快速調(diào)整，不必耗費太多時間在原型細(xì)節(jié)上。
但是，在某些情況下，高保真原型能有奇效，比如：
1. 涉及對外演示產(chǎn)品方案，不論是對用戶、管理層、投資人，一個高保真原型能讓他們快速理解產(chǎn)品需求；
2. 高保真原型可以充當(dāng)一個MVP（最小化可行產(chǎn)品），進(jìn)行用戶測試和市場調(diào)研，幫助我們快速驗證市場以及及早發(fā)現(xiàn)產(chǎn)品中的問題，看似增加了原型制作成本，卻大大降低了開發(fā)成本。
為了讓大家能夠快速制作出給力的高保真原型，我們會分享一些高質(zhì)量的原型模板，一鍵復(fù)用，助你效率up up up！今天的第一彈就是坐擁全球7億用戶的instagram！
原型下載地址見文末~~
原型展示
部分原型動態(tài)演示
快拍（Instagram Stories）拍攝
快拍（Instagram Stories）詳情
feed流交互
分享圖片
關(guān)注用戶
私信（Instagram Direct）流程
閱后即焚消息
完整原型預(yù)覽地址：http://www.xiaopiu.com/h5/byId?type=project&id=59296a5362effb176912fec7
組件庫展示
利用模板快速創(chuàng)建自己的高保真原型
方法1：下載模板（http://www.xiaopiu.com/square?searchText=Instagram），在模板基礎(chǔ)上做修改。
方法2：引用組件庫和頁面庫，隨時使用庫中的素材來創(chuàng)建原型。
組件庫：http://www.xiaopiu.com/square/contr?searchText=Instagram&libPop=contr&libId=593df5bb7160bd421fa4f6fd
頁面庫：http://www.xiaopiu.com/square/page?searchText=Ins&libPop=page&libId=593df33a7160bd421fa4f696
方法3：即用即復(fù)制，在新標(biāo)簽頁中打開模板編輯頁，復(fù)制所需組件，粘貼到自己的項目中。
原型中的動效是如何實現(xiàn)的？
原型中的動效主要是通過「狀態(tài)」和「事件」來完成的，在這里我們以「選擇圖片濾鏡」這個動效來講解一下。
1. 創(chuàng)建狀態(tài)：分析圖片一共會有多少種形態(tài)（在這里就是會有多少個濾鏡效果），就依次創(chuàng)建多個「狀態(tài)」；
2. 調(diào)整狀態(tài)樣式：在每個狀態(tài)下調(diào)整圖片濾鏡效果；
3. 添加事件：給縮略圖添加「點擊事件」將圖片切換到相應(yīng)狀態(tài)。
資源地址
原型預(yù)覽：http://www.xiaopiu.com/h5/byId?type=project&id=59296a5362effb176912fec7
原型下載：http://www.xiaopiu.com/square?searchText=Instagram
頁面庫引用：http://www.xiaopiu.com/square/page?searchText=Instagram
組件庫引用：http://www.xiaopiu.com/square/contr?searchText=Instagram
其它資源分享
更多資源請見xiaopiu工坊：
1. 電商（天貓商城）APP原型
2. WeUI（微信）原型
3. 外賣（餓了么）APP原型
4. 音樂（網(wǎng)易云音樂）APP原型
5. 新聞閱讀（ZAKER等4個）APP原型
6. 那些創(chuàng)意十足的Loading動效原型合集（一鍵復(fù)用！）
7. 視頻（騰訊視頻）APP原型
8. 共享單車（ofo）APP原型
9. 社交（新浪微博）APP原型
歡迎大家對我們的原型提出建議，對后面分享內(nèi)容有哪些期待和想法也可以跟我們交流喲！
如果你覺得還不錯，就點個贊吧！哈哈，給我一點更下去的動力！～動力！～動力！～
