数极客首页

悬浮按钮的使用原则

当要用悬浮的时候,考虑下在哪使用?什么条件下使用?不使用行不行?使用了带来了什么效果?如果效果不好怎么办?哪些界面需要使用?一个界面都有要展示的要素,当悬浮窗的使用是不是影响本界面的因素,其他的界面的关联性等等。

悬浮按钮的使用原则

最近突然好多应用内开始使用悬浮按钮来吸引人的注意力,也是最近运营说一个活动要做悬浮图标,才发现其他的互金产品已经开始做了,感觉就是忽如一夜春风来,遍地都是悬浮图。

对于悬浮图标的应用场景,和悬浮图标的实现,悬浮图标的应用案例来说,其实我并不是非常了解。因为相对于常规的来说,目前的悬浮其实都是按照微信里的来剽窃的,除了系统自带的悬浮图标。

我们也和技术讨论下对于这个活动是不是需要来说,我先从自己的角度认识下。

针对:什么是悬浮,悬浮的形式,悬浮的使用场景,悬浮的作用,悬浮的交互来稍微了解下。

小贴士:判断一个界面的主要操作其实并没有看起来那么简单。为了简化任务,并且考量你是否需要悬浮按钮,可以参考这个“五分钟规则”:如果你花费了5分钟还没找到这一屏的主要操作,那么这说明这一屏不需要悬浮按钮。

一、什么是悬浮

悬浮操作按钮(Floating Action Button,FAB),或者说悬浮按钮,是 Android 应用中最常见的一个控件。悬浮按钮通常是圆形,底部的Material Design 风格的阴影让它看起来悬浮在整个UI之上。悬浮按钮是Android UI 交互中最关键的元素之一,在用户流程中至关重要。

二、悬浮的形状

<悬浮图标一般都是原型,但是也可以根据自己的风格进行设计不同的形状,

UI上,往往是最色彩大胆最直观的页面元素;在功能上,往往是代表用户在页面上最高频次的操作。但是一般悬浮图标不能过大,尺寸固定在:

悬浮按钮的使用原则
悬浮按钮的使用原则
悬浮按钮的使用原则

前端实现方法:https://www.jianshu.com/p/bfba98ec49b0

三、悬浮按钮的使用场景及作用

试想下最常见的一种场景,当有一个很长很长的页面,你翻页到最下面的时候发现前面几行的文字和其有关联,你想回头去看,那这种返回最顶端的悬浮按钮的存在是多么可高兴的事情啊。你最经常用的抖音,有喜欢、分享、音乐点击的悬浮按钮,你最喜欢的事情都给你最直观的的表达。充分给了你表达喜欢的去向和看到同类音乐自己创作的便利。

音乐类的app的界面,使用播放暂停的功能触发。

我最近有一个活动上线,但是我没有很明显的位置,可供用户查看,怎么办?我怎么达到我想要的推广目的啊?

来活动期间悬浮解决:

悬浮按钮的使用原则

所以悬浮按钮其实起到的作用有:

  1. 导航
  2. 引导
  3. 核心

1. 导航工具栏

悬浮按钮可以在进行点按或滚动操作时变换成工具栏。 工具栏可以包含相关的操作,文本和搜索字段等。当用户通过滚动发出他们有兴趣继续浏览内容的信号,滚动消失的工具栏则大大地节省了屏幕空间,整体的使用体验会非常流畅。

不过这个我目前见到的很少。

2. 引导

当你想要宣传你想要的展示的时候,悬浮是个很醒目的操作,他一般会用一些很大胆的色彩来告知用户,来看啊,我这有你感兴趣的。

悬浮按钮可以简单地触发某个动作或在某处导航,常用于触发功能、菜单或导航。

3. 核心功能

一般很核心的功能一直都存在的功能也会使用悬浮按钮,一直存在于界面,时刻告知用户我们要做的是什么,我可以给你提供到什么。

4. 触发和扩展一系列操作

除了单一的功能触发外,通过悬浮按钮更常用于触发一系列的操作,通过扩展,用一组相关、常用的悬浮按钮来替代原来的单一交互。常见的形式有拓展按钮,拓展表单等。

四、设计的原则

1. 选择适当的悬浮按钮尺寸

悬浮按钮主要用于促进用户行为,它们通过在UI上浮动的圆圈图标来区分,并且具有包括变形,启动和传送锚点的运动行为。一般有两种尺寸:默认版和迷你版(仅用于与其他界面元素创建视觉连续性)。

默认的尺寸一般为56*56dp,迷你版的尺寸为40*40dp。界面宽度低于460dp时,需要从默认尺寸(56dp)调整至迷你尺寸(40dp)。

2. 悬浮按钮只承载正向操作

由于悬浮按钮通常承载的是主要的、有代表性的操作,通常它应该是个积极正向的交互,比如创建、分享、探索等。唯一的悬浮按钮不应该执行破坏性的操作。

比如删除、归档。它不应该是非特定的操作,或者是不完整的交互,比如剪切和粘贴是一组组合交互,它们应该存在于菜单栏当中,而非悬浮按钮中。

3. 大尺寸屏幕上的悬浮按钮

悬浮按钮在大尺寸的屏幕上可以放置在扩展的APP栏、工具栏或者结构性的元素(前提不阻碍其他元素)和表单的边缘上。

需要注意的是:每个页面只能出现一个悬浮按钮,也不要将悬浮按钮与一个页面上的所有元素产生关联,悬浮按钮本身显眼抓人眼球,滥用悬浮按钮会分散用户的注意力。

五、悬浮的交互

  1. 打开一个单独的页面,后面是一个单独的页面挑战
  2. 点击扩展展示更多悬浮图标,一般不能超过六个
  3. 页面简单的动画交互展开,一个半页面展开,此时是前后的逻辑变化。

案列

我看了最近很多互金产品都开始使用了活动的悬浮按钮在app中,这样做的目的应该就是为了吸引用户,但是看到了使用的界面只有首页上有。其他页面都没有,可能也是怕影响其他页面的核心功能吧,为了防止起到不好的影响。

毕竟对于四个主要的菜单栏来说:首页、投资、发现、我的来说用户首先进入的就是首页中,首页是最显眼的推荐作用,投资页是最不适合的,会影响用户的选择。

  1. 悬浮的时机
  2. 悬浮的位置
  3. 悬浮的交互和动画效果

六、结后语

当要用悬浮的时候,考虑下在哪使用?什么条件下使用?不使用行不行?使用了带来了什么效果?如果效果不好怎么办?哪些界面需要使用?

一个界面都有要展示的要素,当悬浮窗的使用是不是影响本界面的因素,其他的界面的关联性等等。

悬浮按钮看起来很简单,但是要在APP设计的时候正确使用,还是要注意细节、场景和用户需求的。正确使用悬浮按钮,会有事半功倍的效果。

 

本文由 @丑八怪 原创发布,未经许可,禁止转载。

题图来自 Unsplash,基于CC0协议。

新一代大数据用户行为分析与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合分析用户行为数据和业务数据,可以自动监测网站、APP、小程序等多种渠道推广效果分析,是增长黑客们必备的互联网数据分析软件。数极客支持实时多维分析、漏斗分析、留存分析、路径分析等十大数据分析方法以及APP数据分析网站统计网站分析小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据分析模型,是数据分析软件领域首款应用定量分析与定性分析方法的数据分析产品

发表评论

评论已关闭。

相关文章