赞助商
立即赞助

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

UI设计3年前 (2021)发布 流光
3.2K 0 0

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

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

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

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

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

什么是悬浮

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

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

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

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

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

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

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

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

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

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

使用场景

1. 承载页面重要操作

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

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

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

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

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

2. 锚点定位

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

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

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

3. 于强示

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

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

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

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

4. 支持多进程操作

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

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

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

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

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

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

5. 满产品定位与

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

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

设计注意事项

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

1. 尺寸与形状

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

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

2. 透明、颜色与投影

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

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

3. 动画

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

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

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

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

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

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

6. 供备操作路径

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

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

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

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

总结

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

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

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

还在频繁地使用弹窗对用户展示重要提示吗?明知这样有损体验却没有更好的选择吗?那么不妨来试试干扰度更低,却依然可以用于...
交互控件
相比于 Toast,Snackbar 的好处十分明显,可读性更强,还可以兼容 1-2 个次要操作,适用场景更加广泛。因此,我整理了 Snackb...
Snackbar
本文将深入细节从多角度去解析组件化的概念,帮助我们理解、构建组件库。 设计组件化的概念本身是从程序的开发模式中演变而...
交互组件库
在上篇文章《基础科普!超全面的 UI 元素尺寸设置指南(上)》中介绍了设置 UI 元素尺寸的基础规范,及控件尺寸的定义。 这...
图标设计
编者按:常见的APP 图文布局有哪些?不同按钮有哪些用法?今天这篇总结帮新手认识基础知识,赶紧来收! 一、图文布局 用户所...
App设计
在开始着手设计手机界面时,困扰着新人的除了不知道应该在界面中放什么以外,最突出的就是不知道元素应该使用的长宽数值,也...
UI控件
最近在做迭代改版设计,在这期间遇到了很多问题,其中一个就是我在上篇文章《「瞬间之美」读书笔记:Web界面设计如何让用户心...
一致性原则
用Sketch做界面设计也有些年头了,一开始无情的工具人全程手动加复制粘贴,至于速度么,全看手速了。后来学会了一些偷懒的技...
sketch