订阅摹客文章

免费获取优质的设计资讯!

文章分类
热门文章
Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、百度、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用
2019,都在用iDoc了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用
【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多
入门教程 了解更多

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

设计资源 > 设计文章 > 【附教程】App原型设计—Dribbble极具创意的下拉刷新案例大放送

【附教程】App原型设计—Dribbble极具创意的下拉刷新案例大放送

Naranja
2018-05-28
63991

下拉刷新是指用户用手指在屏幕上拉下后,刷新指示符出现在列表顶部,并显示内容更新的进度。下拉刷新这种用户交互最早由twitter创始人Loren Brichter发明。iOS和Android用户应该很熟悉这样的app原型设计交互方式。其实别小瞧这个简单的交互动作,一个有特色有创意的下拉刷新交互效果,可为你的app增加不少亮点。

App原型设计—Dribbble极具创意的下拉刷新案例大放送


下拉刷新VS刷新按钮


相比刷新按钮,下拉刷新现在已经成为iOS移动端中非常流行的一种UI手势,到现在已经非常广泛地应用于各种程序中,例如我们熟悉的Facebook、新浪微博,Instagram等。许多开发人员会考虑使用下拉刷新因为其更能节省屏幕空间,避免用户界面出现混乱。下拉刷新为隐藏手势,而刷新按钮在导航栏上总是可见的,因此,它可能不如刷新按钮那么直观,但操作起来更具便利性和互动性。

为什么要使用下拉刷新


手动刷新确实为用户界面提供了很多好处,不仅可增加与用户间的互动性而且操作起来也很方便,用户可随时刷新屏幕。经过下拉刷新的不断迭代和演变,如今,设计师们为了成功吸引到用户,已把下拉刷新玩出了新花样。下面,博主给大家收集分享一些dribbble上面最火的下拉刷新案例类别,希望可以给你们的App原型设计带来一些灵感冲击。

类别一:主题类


效果:传达品牌印象,推广品牌理念。

App原型设计-Dribbble 下拉刷新烹饪主题

App原型设计-dribbble下拉刷新航空

App原型设计-通话主题

这三个下拉刷新都是结合app主题而创造的,第一个是烹饪类的App,下拉刷新会出现正在烹饪的锅具。第二个是航空公司的应用程序,下拉会弹出一架一闪而过的飞机。第三个呢是关于通信类的一款应用,下拉会出现一个等待连接的复古风格的传声筒。相比传统的刷新按钮,是不是很生动形象呢,你在等待的同时会不会有点愉悦感呢?

图片来源:Dribbble

类别二:创意类


效果:吸引用户,提升品牌形象,增强用户粘度。

App原型设计-下拉刷新盒子主题

App原型设计-礼券

类别三:游戏类


效果:可使你的App原型增加趣味性,并增强用户的互动性,从而拉进用户和产品的距离。

App原型设计-下拉刷新游戏系列

在Twitterrific 5 中下拉刷新,你就可以免费玩到的Flappy Bird,是不是忍不住想停下来尝试一下呢?

类别四:卡通类


效果:以卡通形象的方式来呈现,生动活泼,萌萌哒。是不是忍不住往下拉呢。

App原型设计-下拉刷新之卡通主题

App原型设计-卡通类别

类别五:节日类


效果:提醒用户,告知节日内容和信息。

App原型设计-下拉圣诞老人

App原型设计-下拉灯排节

下拉刷新会出现一个萌萌的拖着礼物的圣诞老人(上)和一排节灯(下)是不是很有节日的氛围呢?

看了上面的例子,是不是也很想动手做一个简单的下拉刷新的交互效果呢?别急,根本不需要任何代码参与哈,一个app原型设计工具就能搞定啦,今天博主就跟大家推荐一款巨实用的app原型交互利器。相信很多做App原型设计的产品汪对Mockplus这款软件并不陌生,国产原型工具中的王者,一键拖拽即可完成交互,分分钟可以实现我们需要的刷新效果。举个栗子~我们来观摩一下Mockplus设计大赛冠军的作品《Timing》里面的下拉刷新效果。

App原型设计-mockplus冠军作品

在线演示地址:https://run.mockplus.cn/34Q0oxnnvxxUKvkV/index.html

其实实现这个效果呢我们只需要简单的移动+显示/隐藏效果就可以办到啦。

Step 1:先填充好我们自己想要的内容(图片,按钮等)编辑成组的形式,接着用一个文本组件编辑好下拉刷新的文本,并勾选为不可见。

Step 2:用图片组对自己设置交互,选择载入时移动,X坐标设置为0,Y坐标设置为40,执行时长为200。重复上面步骤对自己再做一个移动交互,X坐标设置为0,Y坐标设置为-40,延迟800ms。具体设置如图:

mockplus软件界面

Step 3:用图片组跟文本组件做交互,选择载入时显示,执行时长为200ms。重复以上步骤,继续做一个载入时隐藏交互,执行时长为200ms,延迟800ms。勾选两个交互目标同时工作。

mockplus作品界面

Step 4:点击演示,就可以看到载入时自动下拉刷新啦。是不是So easy呢?跃跃欲试?那就赶快尝试一下吧~

Mockplus还给大家准备了很多简单的交互例子哦,请戳:http://doc.mockplus.cn/?cat=60

附:进度条教程:http://doc.mockplus.cn/?p=3609

在线演示地址:https://run.mockplus.cn/4XDXA4vxJOPgTbBE/index.html

总结


总的来说,下拉刷新这一细节设计还是很有必要的。有趣的下拉刷新设计,可以让大家记住你,从而起到产品宣传的作用。所以呢,我们在以后的设计中,我们可以关注一些小细节设计,会让你的App原型设计脱颖而出哦。

【新年福利】高效的原型设计工具Mockplus为各位赠送新年福利啦~


Mockplus3.5新版本新增了智能标注功能,2019年Mockplus将全面升级为摹客RP,为大家带来更好的体验,Mockplus春节送福利,赶快领取Mockplus个人版激活码吧,数量有限,时间有限,先到先得!

专属激活码:Mockplus2019


激活数量:限量150个。


有效期:2019年1月31日。


激活地址:https://www.mockplus.cn/user/upgrade

上一篇
​Mockplus走进西南交通大学

Jongde   05/28

Mockplus走进重庆大学

Jongde   05/24

下一篇
咨询客服

帮助群:651432826

服务邮箱:service@jongde.com