悬浮按钮要怎么设计才能带来好体验?

​什么时候适合使用悬浮按钮

A、执行关键的操作

悬浮按钮通常用来承载相关度最高、最常用、最重要的操作。通常,在应用中,它应该承载特征性的操作,核心功能,就像下面的例子一样:

悬浮按钮用来触发应用中的主操作。屏幕上的暂停/播放交互使用悬浮按钮来触发,说明这个应用是一个音乐播放器。

B、作为引导工具

悬浮按钮还可以为用户提供下一步的提示和引导。Google 的研究表明,当面对不熟悉的界面之时,许多用户都倾向于点击悬浮按钮来探索,获取引导。因此,悬浮按钮在功能上有类似路标的属性。

Twitter 就将发推功能做成了悬浮按钮。

C、并不是每屏都需要悬浮按钮

悬浮按钮色彩显眼,高亮,非常抓人眼球。当你打开界面的时候,想要不去注意到它都不行,因为它太明显了。但是,并不是每个界面都需要悬浮按钮,因为不是每屏都有标志性的、重要的操作。

不要滥用悬浮按钮,它只为了关键操作而存在!

Android 系统中 Google Photos 应用就是一个典型的案例。当你打开它的图库的时候,首先映入眼帘的是用于搜索的悬浮按钮,这个时候,悬浮按钮存在2个关键的问题:

·对于绝大多数的用户而言,搜索是非主要交互。首要的操作是浏览图片,所以此处并不需要悬浮按钮。

·悬浮按钮会分散用户的注意力。

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

悬浮按钮最佳实践

A、避免出现“迷之导航”

实际上我们这里说的迷之导航指的是“Mystery meat navigation”,通常简称为MMN,这句讽刺式的术语源于Web Pages That Suck 的站长 Vincent Flanders,指的是那些难于被发现、目的不明、只有当光标移动到其上才能发现、直到打开才知道其内容的“隐藏式”链接。

实际上,悬浮按钮所存在的问题和MMN有点相似,它是一个典型的图标式按钮,并不包含文字标签来说明其功能,而通用的、普遍被认识的图标始终是少数。举个例子,下面的按钮是什么功能?

有人能猜出它与分享相关,那么它的分享功能具体是指向什么地方,有什么效果,你能确知么?你想要知道,就必须点击它。的确,点击这些按钮来发现其功能,耗费的时间非常短,风险也不高,但是这终究是一种认知负担,不是吗?最麻烦的地方在于,用户必须记住它的功能才行。

将所有的的这些图标和相应的APP都记住,这个工作量可不小。

当然,使用图标式的按钮本身并不存在问题,前提是,APP的上下文环境要明晰,用户才能够清晰判断按钮的含义和功能。举个例子,你使用的是笔记类应用,很明显,主要的功能是记录、查看笔记。那么这个时候,悬浮按钮上的笔的图标,所表达的含义就很清晰了。

B、一屏只使用一个悬浮按钮

悬浮按钮在界面中是突出的,也是最具有侵略性的,所以要么只使用一个悬浮按钮,要么干脆别用。

C、悬浮按钮只承载正向操作

由于悬浮按钮通常承载的是主要的、有代表性的操作,通常它应该是个积极正向的交互,比如创建、分享、探索等。唯一的悬浮按钮不应该执行破坏性的操作,比如删除、归档。它不应该是非特定的操作,或者是不完整的交互,比如剪切和粘贴是一组组合交互,它们应该存在于菜单栏当中,而非悬浮按钮中。

Material Design 的设计规范中对于悬浮按钮所承载交互和图标有指引说明。

悬浮按钮和动效

悬浮按钮本身非常灵活,它可以扩展、变形,也可以给予反馈。

A、扩展为一系列操作

在某些情况下,点击悬浮按钮可以扩展出其他的常用操作(就像 Evernote这样)。通过扩展,用一组相关、常用的悬浮按钮来替代原来的单一交互,这样是可行的,它们是一体的,可展开也能收纳,不常驻,这和前面所提到的原则并不冲突。

不过,这样的设计要注意几点:

·这些操作必须与开始的总悬浮按钮是关联起来的,它们是一体的,不要把展开后的按钮视为单独的存在。

·作为一般规则,这组拓展出来的按钮不应少于3个,不能多余6个,否则违反了作为悬浮按钮的快速、高效的原则。

B、悬浮按钮变形为新的界面

悬浮按钮可以不一直都为按钮形态,借助动效它能够延伸到整个屏幕,变为独立的界面。

悬浮按钮能够作为界面转化的中间枢纽。

当悬浮按钮变形为界面的时候,它阐明了前后界面之间的逻辑关系,就像下面的案例:

C、滚动的时候隐藏悬浮按钮

为了便于用户在滚动的过程中阅读内容,悬浮按钮可以在滚动界面的时候,隐藏起来。

Medium 的 Android 版客户端当中,就是这么使用悬浮按钮的,当滚动到文章底部的时候,悬浮按钮会再次出现。实际上,他们的网页端也采用了类似的设计模式。

--by.U爱设计菇凉--

如果你喜欢设计,请关注我。

学习加QQ:1289916063

微信号:zheng-z-xixi

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容