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