“：我们的设计日记ID：Helloskys”

“下拉刷新专利归Twitter所有，但我认为没人需要为此担心。--罗兰·布里赫特”

据说这种互动是由一位设计Tweetie应用程序的前苹果设计师创造的。现在，从Twitter到QQ，下拉刷新已经成为一种普遍的体验，它几乎存在于你手机上的每一个应用程序中。不仅仅是今天文章介绍的这些互动细节，星球里的“每日互动”栏目每天还会更新更多互动游戏，方便大家随时更新。

01.手势交互：刷新动作依赖用户直觉

在早期的PC时代，用户需要退出页面并重新进入以刷新内容。2008年iPhone崛起时，出现了按钮点击刷新的主流设计。但设计师会不断追求更好的用户体验，所以两年后出现了“下拉刷新”。

专利文献（2010年）

具有视觉反馈的直观手势

下拉刷新是刷新指示灯和下拉手势的结合，通过下拉效果提升整个交互。下拉刷新本质上是一种特定的手动刷新行为，与其他同类操作不同的是，它采用了更加直观的手势。

Android系统

02.情感化设计：精致体验提升产品认同感

除了手势，从下拉到刷新的过程中，图片、文案、动态效果都是设计师打造差异化体验的手段，任何一个元素都可能是传达调性的最佳契机。

图标动态效果：加深产品类型印象

韩国外卖APP（）通过有趣生动的食物图标，在下拉过程中给用户强烈的控制感，通过控制滚轮中食物图标的释放，完成交替滚动效果的播放。

产品的外卖属性与下拉刷新的交互手势很好地融合在一起，让用户可以“玩转”产品。

（外卖全国）APP首页

随机文案：持续的知识传递服务

丁香医生APP下拉刷新加载过程中，暖心文案融入情感化设计；向用户传递健康知识，实现与用户的情感交流。与用户拉开距离，让用户持续感受产品带来的温度。

丁香医生APP首页

活动宣传：加强代言人形象衔接

在下拉过程中，SSG玛特很好地结合了代言人的形象，通过人物形象“说”出一些需要表达的信息，善用代言人形象帮助产品传播品牌心智。

SSG MART应用程序首页

今天分享的这些交互，是体验设计中一个非常小的闭环。近期，阿里分享了很多内部课程，包括视频和PPT，让更多人学习和了解真实的体验设计。有需要的同学可以添加叮当猫回复“阿里”进行收藏，但已经有叮当猫的同学无需重复添加。

03.工具设计：塑造高级提神思维

在不影响当前内容的前提下，下拉更多相关内容或管理当前页面，将下拉刷新变成高级工具的头脑。

刷出新内容：多维度推荐引导用户继续观看

抽屉新热榜APP下拉刷新时，结合弹性微动效果和振动反馈，像抽屉一样“抽出”更多内容信息；同时，下拉过程搭配表情和随意有趣的文案，进一步提升趣味性。

抽屉新热榜APP首页

虎嗅APP通过下拉刷出今天的神评论，让用户每天都能找到最热的评论，产生浏览兴趣。点击浏览相应的文章，对产品中的内容也起到了很好的引流作用。

虎嗅APP信息页面

微信阅读下拉进书店，利用下拉刷新揭示更多内容。用户心理上推荐更多的书，合理利用空间拓展延伸服务，这太自然了。

微信

读书APP书架

刷出多个工具：创建固定管理入口形象

首页下拉刷新操作期间，手淘继续下拉进入二楼，展示常用的应用渠道。用户还可以自由添加和编辑，聚焦用户喜好，提供更高自由度，曝光更多产品。

淘宝APP首页

NAVER还在下拉刷新中结合固定工具入口，为用户提供工具服务，用户可以快速使用所需功能解决特定场景下的效率问题。

NAVER应用程序首页

Netflix APP考虑到用户继续观看视频的需求，提供了首页下拉继续观看的快捷方式，既保证首屏推荐视频占用大面积曝光，又让用户更加方便。

网飞应用程序首页

04.营销设计：发挥产品形态新空间

对于主要应用程序的主页来说，效率始终是一个重要的考虑因素。在紧张的排版中，下拉刷新的空间成为调性张扬的新契机。

页面二楼：品牌活动调性宣传

饿了么二楼设计以生动有趣为目标，展示动态广告图文，互动营销内容。让用户更有新鲜感的同时，也拓展了新的商业营销场景。

饿了么APP首页

随着商家对品牌营销要求的提高，淘宝提供了固定店铺框架下拉进二楼的功能。作为商品货架外品牌的宣传空间，可向用户交互展示视频、H5等。

淘宝应用商店二楼品牌专区

页面基础：产品附加精神传递

支付宝是面向金融属性的功能聚合平台，二层设计可能会干扰用户使用场景的稳定性。因此，支付宝以全新的互动创意方式，通过底部滑动页面引出“地下室”场景，是二层设计的又一延伸概念。

支付宝APP头部

页面地下室

05.经验延伸：下拉结合主心智互动

之前的案例都是在“下拉发布”之间或之后，呈现更多的内容或信息给用户更多的选择，这在产品的主脑之外提供了辅助功能。

其实还有一种交互，将产品的主心骨与下拉手势结合，通过培养用户的下拉习惯，提升APP体验的流畅性。

下拉触发主操作：核心功能使用更方便

Clear将下拉手势与“上新”操作相结合，用户可以通过控制下拉力度进入不同页面，获得不同的功能反馈。

整个产品的设计理念也非常大胆。页面中除了卡片列表之外没有多余的元素，所有功能都由下拉和滑动手势控制。

清除应用程序

下拉结合左右滑动：提供更多主要功能

谷歌Chrome浏览器认为用户操作页面的关键目的是“新开/刷新/关闭”，可以结合下拉刷新，会让用户的心智更加自然。操作只需“一步”，比苹果Safari同样三个功能的“五步”还要快。

谷歌Chrome应用程序

06.最后

从简单的手势到进入有趣的空间，我们可以看到，在过去的10年里，很多别出心裁的创意已经不仅仅停留在简单的下拉互动上，从情感、工具到营销空间，都包含着不同的设计别出心裁的创意。相信下拉式刷新设计会不断开发出各种丰富细腻的体验。

今天的内容介绍了很多APP的下拉玩法功能，可以看到像饿了么、淘宝这样的大厂APP都有一套完整的设计组件和规范。为了方便大家参考和学习，我打包了一些大厂的设计组件和规格，包括谷歌、苹果等国外大厂。如果需要，可以点击“观看”，添加叮当猫回复“组件”。无需重复添加叮当猫

.

07、本期粉丝福利

留言买票。欢迎大家来到本文介绍的下拉玩法，分享一下在使用App时有哪些设计细节让你心动。我们将从点赞量最高的优质评论中精选3张价值565的门票，期待您的留言~

08.今晚来聊聊

今晚20:00，在我的视频号直播间，叮当猫将连线BAT大场的设计总监，与大家聊聊大场的招聘推送，为想找工作的同学提供面试渠道。

BAT工作场所

职场面试阿里无目标压力、大团队管理、30岁成长年龄歧视、大厂外包、社交聊天、反PUA指南、企名网、职场真相