邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

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

热门文章

Mockplus是什么?

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

了解更多

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

Naranja 2018-05-28 07:55:22 阅读:1750

下拉刷新是指用户用手指在屏幕上拉下后,刷新指示符出现在列表顶部,并显示内容更新的进度。下拉刷新这种用户交互最早由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!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:477208695 加入QQ群

服务邮箱:service@jongde.com

咨询客服
置顶