业界动态
ProtoPie作品大礼包(内附源文件)
2024-10-31 18:27

交互原型工具ProtoPie正式上线不过才5个月的时间,已经有32个国家的数以万计的设计师在使用了。

ProtoPie作品大礼包(内附源文件)

很多用户都把作品上传到了Dribbble,站酷等设计网站,这么多的作品,小编会决定做个大礼包陆续分享给大家。首先是20个容易借鉴和学习的原型作品。

如果你已经在用ProtoPie,那千万别客气,源文件尽管拿去下载。如果还没有听说过ProtoPie...What?!ProtoPie都不知道!那先去补补功课吧,点击这里有中文介绍。

礼包享受的正确姿势告诉大家:

43b15927b944a801216a3ee3faf8.jpg

ProtoPie 用户 Lily的个人作品。交互很自然的模仿了实际生活中翻动日记的动作效果。因重复交互较多,利用ProtoPie中的场景复制功能,可以快速完成。

https://share.protopie.io/eLWb28tsH2c

页面转换, 3D旋转,卡片交替, 推拉

81065927bb08b5b3086ed42a17dd.jpg

通过‘推拉’这一动作,可以将手机上端隐菜单拉出,之后利用‘抛掷’动作再收回。而两个动作会根据手指滑动的速度和距离,判断菜单是否应保持在原地。

https://share.protopie.io/HxL5WtXYbot

抛掷,推拉

88865927bd25a801216a3e3a55ac.jpg

拖动常用收款人头像,当头像进入指定的范围时,该范围内的图层产生视觉变化。该作品可以帮助大家学会使用‘条件’和‘范围’两个高级功能。

https://share.protopie.io/bwnShi3EPSv

条件, 范围, 3D 旋转

619e5927c237b5b3086ed4fbbb6d.jpg

ProtoPie 用户Yun Seong won的作品。利用‘排序’功能,点击或左右拖动图层可交替卡片。

https://share.protopie.io/bAgkuvhtvpD

排序,卡片交替

cd945927c7adb5b3086ed4f02b40.jpg

点击卡片可查看具体内容,向下翻动后下一张卡片出现。而这里的立体旋转效果让这个原型添加了不少趣味。

https://share.protopie.io/Ehmrm3M1S4E

卡片交替,3D旋转,场景,推拉

516b5927f40ca801216a3ec989cf.jpg

用户自定义常用功能时,可以通过点击卡片来添加或删除功能。

https://share.protopie.io/fcMTGqMGwwJ

卡片排序,容器层

80ad5927f50aa801216a3ebf2f65.jpg

这个使用场景和前面的一样。只是在自定义后,卡片的位置发生了变化,使用场景功能,可以将本是一个画面上的交互,分阶段制作。

https://share.protopie.io/VvT3vc6efMf

场景,卡片排序

e512592baa12a801216a3e022d15.jpg

引导页中常见的滑动效果,滑动的同时下面的进度条也在跟随移动。整个原型制作时间仅2分钟。

https://share.protopie.io/EST6pUhGLGv

页面导航条,联动 , 基本交互

cda9592baacda801216a3e7276fa.jpg

使用放大缩小效果制作的数字输入原型,ProtoPie的‘条件’功能可以提高原型制作效率。

条件

2d11592baee2a801216a3e41c39b.jpg

游戏App中常见的排行榜、关卡、活动通知等交互都在这个原型中有体现。可以说是交互很全的一款作品。

https://share.protopie.io/dsTcLaWHuyF

游戏交互, 自动加载, 滚页

8a75592baf92b5b3086ed43c7db4.jpg

浮动按钮/开关按钮中常见的交互。点击一个按钮,后面隐藏的按钮弹出,再点击一下按钮收回。

https://share.protopie.io/HurvMUYwcMC

开关按钮, 旋转

60a1592bb020a801216a3e1574c1.jpg

Material 设计提倡让内容以最自然的方式展现出来。而想要达到这个目的‘遮罩层’功能就会被反复使用。

https://share.protopie.io/EQmkKwHyLA9

Material设计, 遮罩层

ba00592bb0dca801216a3ec83c95.jpg

ProtoPie用户David Lee作品。 快看! 可爱的熊猫在看你呢。

https://share.protopie.io/eN4vfmJffBc

拖动,联动

428b592bb4b4a801216a3e933524.jpg

某个区域的内容进入一定的视线范围时,导航栏上的颜色和导航条会有相应的变化。

https://share.protopie.io/3wcDRFmQf4Z

导航条交互,范围,颜色,页面导航条交互

aab1592bb549b5b3086ed4f72cb8.jpg

向下拉动页面,滑动超过一定距离时,页面在回弹的过程中暂时停顿后归位。

https://share.protopie.io/gxZ5J7c75xR

条件,滚页,反复

0dc1592bb618a801216a3e37acfb.jpg

像联系人名单这种比较长且有规律的内容前,往往会有一个标签跟随。名单的某个区域进入指定位置时,标签跟随变动。

https://share.protopie.io/fhhhwrKNc4W

范围,滚页, 联动,页面导航条交互

5b8d592bb740a801216a3e342ebf.jpg

相同的手势,相同的触碰对象,但反应却不同。这类的交互和‘开关按钮’的交互原理都是相似的。ProtoPie中的‘条件’功能可以帮助完成两种以上状态间的开关转化。

https://share.protopie.io/ZrpYPgKbUjY

开关按钮, 条件,基本交互

9efc592bb800b5b3086ed47aaaf1.jpg

根据页面滚动的距离,导航条、logo等元素都会发生变化。

https://share.protopie.io/cQCxzXKdSBx

滚页,联动, 导航条交互

ddf0592bb8ada801216a3eca2c07.jpg

Uber 中选择出发地和到达地的交互。看起来需要是一个页面中发生的一系列动作,但实际上是3个页面连接了起来。  

https://share.protopie.io/8eXJkrLwUuk

场景, 搜索交互

e3d3592bb963b5b3086ed4b221e0.jpg

使用ProtoPie中的容器层可以制作一个点绕圆环一圈的交互。

https://share.protopie.io/7EujXR2MewY

容器层, 进度条

更多关于ProtoPie的信息:

-官网:www.protopie.cn

-微博:http://weibo.com/protopie 

    以上就是本篇文章【ProtoPie作品大礼包(内附源文件)】的全部内容了,欢迎阅览 ! 文章地址:http://lianchengexpo.xrbh.cn/news/12013.html 
     资讯      企业新闻      行情      企业黄页      同类资讯      首页      网站地图      返回首页 迅博思语资讯移动站 http://lianchengexpo.xrbh.cn/mobile/ , 查看更多   
最新新闻
刘畊宏直播2小时收入120万,打赏的榜一大哥都是什么人?
说起最近这段时间直播界最火的网红明星,非“健身达人”刘畊宏莫属,从今年4月初开始,全国各地都有人因疫情被封控,而刘畊宏的
国家要普涨工资,地方正狂卷就业,让大家挣钱最重要
最近,有一个重要的文件和每个人的“钱袋子”息息相关。那就是《中共中央、国务院关于实施就业优先战略促进高质量充分就业的意见
实探债务危机中的柔宇科技:生产基地半小时只看到3个人,手机业务已停摆
2023年是折叠屏手机爆发年,诸多柔性屏供应商、手机厂商吃到红利。然而面对这样的好光景,柔宇科技却只剩一片残局。曾经凭借柔性
今日头条iphone最新版特色
今日头条ios2021最新版是专为苹果手机用户打造的头条新闻资讯应用,打开今日头条,即可知道今天发生了哪些大事,还有最新的娱乐
一张床垫用N年,弹簧早就疲软了,撑不住儿童发育的脊梁,赶紧换!
你家孩子睡的弹簧床垫陪伴TA多少年了?尤其是弹簧床垫,通常睡上3~5年的儿童床垫,金属弹簧就会呈现不同程度的疲软,这将严重影
增长黑客,创业公司用户增长的秘籍
增长黑客读了范冰的《增长黑客》,启发太多。正如作者在前言中所说,确实是处处均是干货,书里脉络清晰,是本难得的好书。增长黑
实用的高考化学考试答题思路与技巧
高考的化学考试答题要联系所学习的知识,找到知识与问题之间的结合点,确定解题的方案,这才是解题的关键。下面是小编为大家整理
小红书情人节营销指南
│前言│小红书作为女生的口袋百科指南,提供了各种各样的节日攻略内容,同时引导着用户去享受更好的生活,而在即将到来的214情
云南SEO优化如何让描述中出现地址呢?
在搜索引擎优化(SEO)的世界中,整合关键信息,如地址,到网页描述中是提升网站在搜索引擎结果页面上的可见性和点击率的关键策
实用贴!海关统计数据查询攻略
海关统计数据查询攻略为便于社会公众查询和使用海关进出口货物贸易统计数据(以下简称海关统计数据),特编制本查询攻略。一定期
本企业新闻
推荐企业新闻

点击拨打: