坐拥全球7亿用户的Instagram高保真原型资源分享

只要用instagram拍照，就算你不会P图，只使用内置的滤镜，就可以让照片风格独树一帜，让人眼前一亮~方便的操作和舒适的交互体验使ins集结了大批用户驻足。今天张杨雪给大家带来了Instagram 高保真原型资源分享，对国外产品感兴趣的同学不要错过哦~

等等！什么？高保真？我知道，有小伙伴要准备吐槽了，高保真原型在产品圈中一直备受争议，它有很多缺点，比如需要耗费更多的时间、修改成本较高等等。这个我也认同，在产品的探索期以及内部沟通时，快速准确地表达产品的结构和功能是最重要的，快速讨论，快速调整，不必耗费太多时间在原型细节上。

但是，在某些情况下，高保真原型能有奇效，比如：

• 涉及对外演示产品方案，不论是对用户、管理层、投资人，一个高保真原型能让他们快速理解产品需求；

• 高保真原型可以充当一个MVP（最小化可行产品），进行用户测试和市场调研，帮助我们快速验证市场以及及早发现产品中的问题，看似增加了原型制作成本，却大大降低了开发成本。

为了让大家能够快速制作出给力的高保真原型，我们会分享一些高质量的原型模板，一键复用，助你效率up up up！今天的第一弹就是坐拥全球7亿用户的Instagram！

原型下载地址见文末~~

❶

原型展示

❷

部分原型动态演示

快拍（Instagram Stories）拍摄

快拍（Instagram Stories）详情

feed流交互

分享图片

关注用户

私信（Instagram Direct）流程

阅后即焚消息

完整原型预览地址：

http://www.xiaopiu.com/h5/byIdtype=project&id=59296a5362effb176912fec7

❸

组件库展示

❹

利用模板快速创建自己的高保真原型

方法1：下载模板，在模板基础上做修改。

http://www.xiaopiu.com/square?searchText=Instagram 

方法2：引用组件库和页面库，随时使用库中的素材来创建原型。

组件库：

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：即用即复制，在新标签页中打开模板编辑页，复制所需组件，粘贴到自己的项目中。

❺

原型中的动效是如何实现的？

原型中的动效主要是通过「状态」和「事件」来完成的，在这里我们以「选择图片滤镜」这个动效来讲解一下。

• 创建状态：分析图片一共会有多少种形态（在这里就是会有多少个滤镜效果），就依次创建多个「状态」；

• 调整状态样式：在每个状态下调整图片滤镜效果；

• 添加事件：给缩略图添加「点击事件」将图片切换到相应状态。

资源地址

• 原型预览：

http://www.xiaopiu.com/h5/byIdtype=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

其它资源分享

• 电商（天猫商城）APP原型：

https://zhuanlan.zhihu.com/p/25457522

• WeUI（微信）原型：

https://zhuanlan.zhihu.com/p/25790323

• 外卖（饿了么）APP原型：

https://zhuanlan.zhihu.com/p/25915620

• 音乐（网易云音乐）APP原型：

https://zhuanlan.zhihu.com/p/26194871

• 新闻阅读（ZAKER等4个）APP原型：

https://zhuanlan.zhihu.com/p/26401670

•  那些创意十足的Loading动效原型合集（一键复用！）

http://www.chanpin100.com/article/103631

• 视频（腾讯视频）APP原型：

http://www.chanpin100.com/article/103776

• 共享单车（ofo）APP原型：

http://www.chanpin100.com/article/103818

• 社交（新浪微博）APP原型

https://zhuanlan.zhihu.com/p/27243168

猛戳“阅读原文”，问问学习导师，更多系统产品课程在等着你哟~