微信小程序 回到顶部-微信小程序 回到顶部

美团首页其实就是一个信息流。 我和他们就这方面的技术进行过交流。 他们其实在这方面投入了很多资源，有很强的推荐算法团队。 准确率每提高 0.1 个百分点，每天就可以增加数百万的收入。

美团也是底部的Tab随着信息流滚动和更换图标，但不同的是美团只返回顶部，不刷新。 这与美团的业务和产品结构有很大关系：

a) 通常返回顶部的信息流有明显的刷新意愿，美团首页顶部固定功能入口较多（其实也是重要的流量入口）。 所以回到顶部的潜台词更多的是“定位到入口”。

b) 同时，美团首页的信息流有明显的攀比意愿。 返回时也更有可能找到您刚刚浏览过的一些东西。 直接刷新会增加找到刚刚看到的内容的难度。

c) 新闻收入来自曝光，美团的收入来自点击购买。 所以，美团会把一些你可能感兴趣的东西反复推送给你，加深你的买草意愿。

综合以上三方面，大概就是美团只返回不刷新的原因。

美团第一个Tab变成返回顶部按钮

5. 网易新闻

网易新闻也比较特别。 除了标题的意思，上标签和下标签都可以刷新。 同时，在屏幕右下方放置了一个浮动的“刷新”按钮。

不过功能入口是三个，一个是悬浮的，从产品设计的角度来说有些蛋疼。

因此，网易新闻对这个悬浮按钮做了特殊处理，兼顾了美观与实用。

网易新闻滑动到第三屏出现的悬浮刷新按钮

继续滑动时按钮的透明减弱效果

6. 京东

京东将以上两者结合起来。

底部选项卡也进行了重大更改。 点击对应的Tab后，Tab的图标和文案会直接变为“刷新”，不再随着信息流的滑动而变化，点击顶部标签也不再有反应。

同时，和网易新闻类似，滑动远了会出现悬浮按钮“返回顶部”，比网易新闻更远，大约四五屏。

所以京东使用悬浮按钮返回顶部，点击底部的tab或者下拉都可以刷新（不同的操作提示也会不同）。 悬浮按钮弱化了，但感觉不如网易。

京东的底部刷新和浮动返回顶部按钮

从上面的例子可以看出，目前主流的滑动到顶部的方式有几种，包括顶部栏、顶部标签、底部标签、浮窗（按钮），根据业务和用户群体的不同，使用方式也不同。 或组合。 基本都是单击操作，双击顶栏，比较符合常规认知和操作习惯。 根据产品结构和业务的不同，大部分直接刷新，有的只返回顶部，有的则两者结合。

2.关于刷新

鉴于回顶和刷新密不可分的关系，我们顺便说一下刷新。 默认的刷新方式基本都是下拉刷新，在刷新位置、文案、交互动画等方面会有很大差异。以美团、今日头条为例。

美团的下拉刷新提示位置在顶部，会下拉整个页面，类似微信小程序，会出现菊花圈提醒，搜索框内预设的搜索文案会发生变化，内容下面的信息流也会发生变化。 改变。

标题的下拉比较经典。 整个过程分解下来还有一些细微的提示，位于最上面的标签下：

往下拉一点微信小程序 回到顶部，会出现“下拉推荐”的提示，再往下拉一点，会出现“放推荐”的操作提示

其他故障或异常分支不再详述。

3.关于悬浮窗

这里我想重点说一下悬浮窗。 刚开始做产品经理的时候，觉得悬浮窗真的是个好东西。 它增加了强大的承载能力，也很方便。 市场上有很多产品以各种方式使用浮动窗口。 窗户。

工作久了，看的东西多了，想的东西多了，感觉悬浮窗不是一个很好的设计，会乱七八糟，不干净，对悬浮窗有一定的排斥感。

有一款跨游戏实时语音交流工具，将悬浮窗运用到了极致。 是交叉应用。 屏幕上的永久超级入口会影响其他一些应用程序的体验。 在下沉或垂直领域应该有一定的效果。 市场。

上文提到的美团和京东，底部的tab图标风格各异，比较简洁，可复用性高，节省空间，辨识度高，风格大方。

后来，我注意到了微信文章的“悬浮窗”功能。 其实这只是一种需要。

文章读到一半，尤其是比较长的那篇，重要信息来了，要回复，回头看很麻烦——微信没有浏览记录，需要强记性，多次点击找出图片。 万一入口是朋友圈的文章，点回去重新刷新，就得翻遍了，先收藏一下再跳出来吧。。。

有了悬浮窗功能，就方便多了。 不过为了避免杂乱和不干净，微信做了一些特殊处理——悬浮窗只能停靠在手机屏幕的两侧，只有微信程序在屏幕前台时才会出现。 拖动时，右下角有一个大窗口。 区域红色区域微信小程序 回到顶部，移到这里关闭悬浮窗。 这种设计大大减少了杂乱和不洁。

陌陌还有悬浮窗设计，直播视频的小窗是悬浮的，可以一边看视频一边聊天。 考虑到陌陌的群体、业务功能和变现需求，这是合理的，但不具有普遍性，毕竟陌陌有很强的独特性。

现在我对悬浮窗没有敌意了。 苹果的运营悬浮按钮，知乎的站外引流按钮，其实都是悬浮窗。 在适当的地方巧妙而谨慎地使用它是一种奖励。 回过头来看网易新闻的浮动刷新按钮比较合适。

知乎的站外引流悬浮窗按钮

四、关于底部Tab

刚才多次提到底部4Tab，这是目前比较主流的做法。 做活动的时候还有5Tabs、3Tabs甚至2Tabs。

在研究回顶刷新时，观察到底部Tab的一个小细节：有的点击Tab会触发页面刷新操作，有的点击不会有功能响应，但会触发交互动画，有的会甚至没有互动。

以微信为例，点击时没有交互和功能触发，但双击第一个Tab会触发消息列表向下滚动到最新的未读消息。

通常Tab属于框架层（APK更新），Tab中的内容相对灵活（SDK更新）。 因此，在产品设计时，如果要预留扩展空间，就应该在框架上预留事件和数据接口。

本文重点介绍了“返回顶部”功能，同时也看了下刷新、浮窗、底部标签的相关功能。 实现方式和组合方式比较多样，具体的产品设计要根据实际业务和目的进行。