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

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

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

下拉刷新VS刷新按钮

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

为什么要使用下拉刷新

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

类别一:主题类

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

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

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

图片来源:Dribbble

类别二:创意类

最前沿的中国产品人和设计师

摹客专访

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

类别三:游戏类

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

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

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

类别四:卡通类

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

类别五:节日类

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

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

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

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

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

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

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

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

need-to-insert-img

need-to-insert-img

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

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

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

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

need-to-insert-img

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

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

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

总结

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

你可能感兴趣的:(【附教程】App原型设计—Dribbble极具创意的下拉刷新案例大放送)