坐拥全球 7 亿用户的 Instagram 高保真原型资源分享
这一次，我带来的是我刚做的Instagram的高保真原型！附原型和组件库下载。
等等！什么？高保真？我知道，有小伙伴要准备吐槽了，高保真原型在产品圈中一直备受争议，它有很多缺点，比如需要耗费更多的时间、修改成本较高等等。这个我也认同，在产品的探索期以及内部沟通时，快速准确地表达产品的结构和功能是最重要的，快速讨论，快速调整，不必耗费太多时间在原型细节上。
但是，在某些情况下，高保真原型能有奇效，比如：
1. 涉及对外演示产品方案，不论是对用户、管理层、投资人，一个高保真原型能让他们快速理解产品需求；
2. 高保真原型可以充当一个MVP（最小化可行产品），进行用户测试和市场调研，帮助我们快速验证市场以及及早发现产品中的问题，看似增加了原型制作成本，却大大降低了开发成本。
为了让大家能够快速制作出给力的高保真原型，我们会分享一些高质量的原型模板，一键复用，助你效率up up up！今天的第一弹就是坐拥全球7亿用户的Instagram！
原型下载地址见文末~~
1、原型展示
2、部分原型动态演示
- 快拍（Instagram Stories）拍摄
- 快拍（Instagram Stories）详情
- feed流交互
- 分享图片
- 关注用户
- 私信（Instagram Direct）流程
- 阅后即焚消息
3、组件库展示
4、利用模板快速创建自己的高保真原型
方法1： 下载模板（http://www.xiaopiu.com/square?searchText=Instagram 查看链接），在模板基础上做修改。
方法2： 引用组件库和页面库，随时使用库中的素材来创建原型。
方法3： 即用即复制，在新标签页中打开模板编辑页，复制所需组件，粘贴到自己的项目中。
5、原型中的动效是如何实现的？
原型中的动效主要是通过 「状态」 和 「事件」 来完成的，在这里我们以 「选择图片滤镜」 这个动效来讲解一下。
1. 创建状态：分析图片一共会有多少种形态（在这里就是会有多少个滤镜效果），就依次创建多个「状态」；
2. 调整状态样式：在每个状态下调整图片滤镜效果；
3. 添加事件：给缩略图添加「点击事件」将图片切换到相应状态。
资源地址
- 原型预览：http://www.xiaopiu.com/h5/byId?type=project&id=59296a5362effb176912fec7（[查看链接](http://www.xiaopiu.com/h5/byId?type=project&id=59296a5362effb176912fec7)）
- 原型下载：http://www.xiaopiu.com/square?searchText=Instagram（[查看链接](http://www.xiaopiu.com/square?searchText=Instagram)）
- 页面库引用：http://www.xiaopiu.com/square/page?searchText=Instagram（[查看链接](http://www.xiaopiu.com/square/page?searchText=Instagram)）
- 组件库引用：http://www.xiaopiu.com/square/contr?searchText=Instagram（[查看链接](http://www.xiaopiu.com/square/contr?searchText=Instagram)）
其它资源分享
更多资源请见我的专栏 xiaopiu工坊（查看链接）
1. 电商（天猫商城）APP原型
2. WeUI（微信）原型
3. 外卖（饿了么）APP原型
4. 音乐（网易云音乐）APP原型
5. 新闻阅读（ZAKER等4个）APP原型
6. 那些创意十足的Loading动效原型合集（一键复用！）
7. 视频（腾讯视频）APP原型
8. 共享单车（ofo）APP原型
9. 社交（新浪微博）APP原型
欢迎大家对我们的原型提出建议，对后面分享内容有哪些期待和想法也可以跟我们交流哟！
如果你觉得还不错，就点个赞吧！哈哈，给我一点更下去的动力！～动力！～动力！～
作者信息：张杨雪，独立开发者，我们希望xiaopiu的操作体验和云端共享资源能让大家创作原型时更加高效，专栏 xiaopiu工坊
关键字：产品经理
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
