研究数十个热门 APP后，我来教你如何做好「悬浮按钮」设计

关悬浮按钮设计，它虽然看起来常小巧，它蕴含了常多设计要素以及品设计原理。本文，笔者从 APP 悬浮按钮使用情景与设计事项入手，为我们展开场精分析。

果问我去一段时间最令人印象深刻的互方式有哪？我想说的有两个：

一微信的文章浮窗，阅读文章时，如果紧急信息需处理，可以把文章加入浮窗。再次阅读时，点击悬浮按钮就会打文章，方便用户文章聊天页面之间切换。

另一个则是知乎把「左右滑动」切换回答改为「上下滑动」切换回答，然后招来骂声一片，同为了告知用户交互方式的变化，也加入了悬浮按钮方便用户快速切换答案。

什么是悬浮

到悬浮，我们会联到悬浮窗、悬浮球、悬浮按钮这些词语，但究竟什么悬浮却并不十分明确。

在 Material Design 关于层次&阴规范的章节中，悬浮操作按钮（Floating Action Button，FAB）的海拔高度（elevation）定义在 5-12dp 之间。但个人认为，悬浮是相对的，只要上下层素之间有各有的运动规律，那上层素就可以称之为「悬浮」素，比如导航栏、标签栏相对于内容就是悬浮。

在 PC 上，经常各种系统的悬浮窗，如 360 加速球、搜狗输入法工栏、百度云盘悬浮窗等，以及一网页上的悬浮按钮，如回顶部、系服等。

同的，在移动端，悬浮窗也可以为系统悬浮和应用内悬浮种类型。

在 iOS 中，悬浮球叫做「Assistive Touch」，可来实现返屏幕、调控制中心、锁屏等功。

而 Android 系统更为开放，功能多让眼花缭乱，比如 MIUI 已经内了悬浮球功能，可以用来实现返回、截屏、锁屏等功能。

很三方的内存清理应用也类似，只是需要获取相应的系统权。移动端的应用内悬浮更为常见，将在下文详细介绍。

使用场景

1. 承载页面重要操作

可是单个按钮，可收纳一组具有相功的按钮（可展开收起），通来承载与当前页面相最、最、最重要的操作。

以新增、发布为例，简书为引导用户生出更多优质内容，把「创作」这要功能用悬浮按钮形着呈现出来。聚导航，钉钉 DING 则聚合了创日程、创任务、创DING 三个要操作。

按理说，大部分国网民早被灌输了「上加载，下刷新」概念，可作为互联网才聚地脉脉，依然在列表页加入了「刷新」悬浮按钮作为下刷新补充。这做法动不好揣摩，，如需要下太久才能回到顶部，用户会不耐烦；另，在上加载过程，用户所看到信息实上也是在不断补充更新。此，很多电商 APP，如加入商城模块，般也会把「物」图标做悬浮处理。

2. 锚点定位

在移端进行长列表浏览时，同样会遇到返顶的需求，目前有较多的替代方案，如双击状态栏到顶，双击标签栏的特定标签等，但因为隐藏得较深，一般户并知道这些法。

如下图：在京东商城首页，击「荐」悬浮按钮，可快速到「为你荐」区域；击「刷新」可刷新页并回到顶部，时支持双击状态栏回到顶部；在商品详情页，则可以过击回到顶部按钮实现回到顶部。

3. 于强示

为了更大程的引流和转，可使「悬浮图」作为营入口，悬浮图与悬浮图标的使类似，只是形状更规则，更注重营氛围的营和视觉表现。

美团打领劵入口使用了悬浮图，而做了动画效，晃动红加上左右移动，十分醒目。

网易云音乐的新消息提示除使用小红点外，还结合悬浮气泡，提示更强。很 App 的导航栏下方、列表上方或者页面底部悬浮着一个横幅（Notice Bar，通告栏），能常驻显示直到件结束，也属强提示的一种。

4. 支持多进程操作

随着单个应用内功能越来越复杂，任务多开和用户在多任务切换问题随而来。

比 YouTube 在浏览视频列表时，正在播放的视频缩小成悬浮窗在底部标签栏上方常驻，并继续播放（暂停或关闭），而国内的主流做法是随着页面滚动自动播放下一条视频。推测其背的目的，让用户少一步操倒是其次，更还是为播放量。当，视频内容的长短也是要考虑的因素。

和视频小浮窗类似的还有语音通悬浮窗、音频播放浮窗、微信文章浮窗等。

比如行微信语音通话时，可离语音界面行其他任务，语音浮窗会微缩显示。 MONO、SOUL 中，播音乐、音频其他非冲突性操作可以同时行。行暂停/切歌操作时，MONO需入音乐播器页面， SOUL 的音频播悬浮窗可直接行暂停/切歌操作。我们希望给用户打造沉浸体验感的时候，用户可能希望到一多用、提高效率。

5. 满产品定位与

开篇我们就说悬浮的定义分宽泛，所以就有不严意义的「伪悬浮」，他们只是去掉一背，以便让更的内容透去，比高地图、滴滴出行。另外一则以认为是基产品做的视风处理，站酷、美食杰等。

设计注意事项

经过以上案例分析，我们可以结出在进悬浮球设计时需要注意。

1. 尺寸与形状

在满足最小视觉尺寸和可击尺寸基础上，可根据不型适配不大小，以便在视觉上突出悬浮按钮要性。形状变化是指不使用场景处理，以知乎为例，首进入答案，「下个回答」是比较大圆弧按钮，如使用了上滑切换答案，则变为原型图标。

2. 透明、颜色与投影

有些应支持对悬浮按钮、悬浮口的透明进行自定义设置，相当于把调节悬浮元素与背景容之间对平衡点的权利交给户，满足户的个性需求。颜色和投影要是指进行点击或按压时，悬浮按钮给的变及反馈。

另，变色既可以是用户操作反馈，也可以是系统主动提醒。微信文章收缩到悬浮后，会逐渐变红，利用颜色变化，提醒用户回到刚才阅读场景，延续前任务。

3. 动画

悬浮用于要提示时，加入动画后更能吸引用户目，比如抢红活动入口设计成晃动红。动画也有相应功能属性，比如旋转唱针表明正在播放，进度条提示下载进度等。

4. 合适显示/隐藏时

为悬浮元素要承载些不功能，和页其他元素相比显十分突兀，为避免破坏界体感，所以有必要根据上下文环境设相应触发规则。比如下滑动时出现「荐」按钮，上滑动时出现「回到顶部」按钮。

5. 合适位与操作记忆

针可移动位悬浮窗，需要限定可移动区域。定义过移动区域，需要定义靠区域。为了不遮挡页内容，留区域般定在屏幕靠左或靠右位。如需要进步节省空，可以在悬浮元素留后，做自动吸附+半隐藏处理。如下图，粉色框内是可移动区域，蓝色区域是可靠区域，微信右下橙色区域是取消浮窗区域，是也可以用于靠。知乎学习单模块也可以收纳到悬浮窗，会显示封、播放/暂、关闭按钮，滑动页时，该悬浮窗会自动吸附到屏幕边缘，避免遮挡页内容。

6. 供备操作路径

大多数悬浮元素本身就是一种快捷方式，就是说，还可通过别的方式或路径实现同样的效果。如，在微信中，要把章入浮，需要从屏幕左侧边缘向滑，同时向右角滑。而要取消浮，则需要拖拽浮到删除区域。当然，这只是快捷方式。更稳妥的方式是点击右上角「…」，可在弹的作栏中入/取消浮。

7. 提供简模式复杂模式

悬浮窗本身不宜承载过多的功能操作，在必要，可以提供多种模式切换，足不同需求。比如，soul 中音频播放的悬浮窗在复杂模式下简直就是一个播放器，可以暂停/播放、切歌、点赞、查播放进度等。

总结

悬浮按钮的计并不简，而它的使用范围会越来越广，相会有更新奇的计逐渐出现。如果在计需要用类似的交互方式，必仔细析景和用户需求，正确选择和使用。

注作者的微信公众号：「UXD」