陌北默

小编:预告-一大波高保真原型正在靠近

@Sophia 这一次,我带来的是我刚做的Instagram的高保真原型!

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

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

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

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

 

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

原型下载地址见文末~~

原型展示

部分原型动态演示

快拍(Instagram Stories)拍摄

快拍(Instagram Stories)详情

feed流交互

 

分享图片

 

关注用户

 

私信(Instagram Direct)流程

 

阅后即焚消息

完整原型预览地址:http://www.xiaopiu.com/h5/byId?type=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:即用即复制,在新标签页中打开模板编辑页,复制所需组件,粘贴到自己的项目中。

 

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

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

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原型资源分享

欢迎大家对我们的原型提出建议,对后面分享内容有哪些期待和想法也可以跟我们交流哟!

 

原文地址:知乎

作者:Sophia

 

转载请注明:韦德1946 » 坐拥全球7亿用户的Instagram高保真原型送给你!

登录收藏

学UI就上韦德1946!越努力,越幸运!

“韦德1946www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【韦德1946 原创文章 投稿邮箱:tougao@xueui.cn,也可以找各个群的管理】

 
你可能喜欢的:
QQ 音乐与 iPhone X 在一起的背后故事 [适配经验]QQ 音乐与 iPhone X 在一起的背后故事 [适配经验]
在线教育APP「网易云课堂」原型分享在线教育APP「网易云课堂」原型分享
社区APP「豆瓣」原型(附模板)社区APP「豆瓣」原型(附模板)
58招才猫积分系统项目总结!58招才猫积分系统项目总结!
5个角度让你的APP更精致5个角度让你的APP更精致
写给视觉设计师的交互小技巧写给视觉设计师的交互小技巧
移动端模态弹框设计的7项原则移动端模态弹框设计的7项原则
如何设计令人“上瘾”的产品?如何设计令人“上瘾”的产品?
如何让设计稿更规范化?如何让设计稿更规范化?
解析百度贴吧升级的故事I:用户洞察与交互升级解析百度贴吧升级的故事I:用户洞察与交互升级