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

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

下拉刷新VS刷新按钮

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

为什么要使用下拉刷新

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

类别一：主题类

效果：传达品牌印象，推广品牌理念。

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

图片来源：Dribbble

类别二：创意类

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

摹客专访

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

类别三：游戏类

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

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

类别四：卡通类

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

类别五：节日类

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

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

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

在线演示地址：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

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

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原型设计脱颖而出哦。