提高 Material Design「飘浮按钮」客户体验

2021-03-01 16:52 jianzhan

提高 Material Design「飘浮按钮」客户体验


短视頻,自新闻媒体,达人种草1站服务

飘浮按钮是 Material Design 語言的1个常见的控制,英文称为 Floating Action Button(FAB),一般用于 Android 手机上端页面的按钮,它的特点的地方便是会有1个下黑影,从而让它看起来就像飘浮在 UI 页面上面。飘浮按钮在 Android UI 互动中最重要的元素之1,在客户步骤中相当关键。飘浮按钮十分的易用,可是要正确的应用它,还得遵照1些基础的标准。

 

在今日的文章内容中,你会寻找下面难题的回答:

何时合适应用飘浮按钮?

飘浮按钮的最好实践活动有哪些?

飘浮按钮要怎样同动效融合起来提升客户体验?

何时合适应用飘浮按钮

A、实行重要的实际操作

飘浮按钮一般用来承载有关度最高、最常见、最关键的实际操作。一般,在运用中,它应当承载特点性的实际操作,关键作用,就像下面的事例1样:

 

飘浮按钮用来开启运用中的主实际操作。显示屏上的中止/播发互动应用飘浮按钮来开启,表明这个运用是1个歌曲播发器。

B、做为正确引导专用工具

飘浮按钮还能够为客户出示下1步的提醒和正确引导。Google 的科学研究说明,当众对不熟习的页面之时,很多客户都趋向于点一下飘浮按钮来探寻,获得正确引导。因而,飘浮按钮在作用上有相近路标的特性。

Twitter 就将发推作用做变成飘浮按钮。

C、其实不是每屏都必须飘浮按钮

飘浮按钮颜色显眼,高亮度,十分抓人目光。当你开启页面的情况下,要想不去留意到它都不好,由于它太显著了。可是,其实不是每一个页面都必须飘浮按钮,由于并不是每屏都有标示性的、关键的实际操作。

不必乱用飘浮按钮,它只以便重要实际操作而存在!

Android 系统软件中 Google Photos 运用便是1个典型的实例。当你开启它的图库的情况下,最先映入眼前的是用于检索的飘浮按钮,这个情况下,飘浮按钮存在2个重要的难题:

针对绝大部分的客户而言,检索是是非非关键互动。主要的实际操作是访问照片,因此此处其实不必须飘浮按钮。

飘浮按钮会分散化客户的留意力。

 

小贴士:分辨1个页面的关键实际操作实际上并沒有看起来那末简易。以便简化每日任务,而且考虑你是不是必须飘浮按钮,能够参照这个 5分钟标准 :假如你花销了5分钟还没寻找这1屏的关键实际操作,那末这表明这1屏不必须飘浮按钮。

飘浮按钮最好实践活动

A、防止出現 迷之导航栏

具体上大家这里说的迷之导航栏指的是 Mystery meat navigation ,一般简称为MMN,这句讥讽式的术语源于Web Pages That Suck 的站长 Vincent Flanders,指的是那些难于被发现、目地不明、仅有当光标挪动到其上才可以发现、直至开启才了解其內容的 掩藏式 连接。

具体上,飘浮按钮所存在的难题和MMN有点类似,它是1个典型的标志式按钮,其实不包括文本标识来讲明其作用,而通用性的、广泛被了解的标志自始至终是极少数。举个事例,下面的按钮是甚么作用?

有人能猜出它与共享有关,那末它的共享作用实际是指向甚么地区,有甚么实际效果,你能确知么?你要想了解,就务必点一下它。确实,点一下这些按钮来发现其作用,消耗的時间十分短,风险性也不高,可是这终归是1种认知能力压力,并不是吗?最不便的地区在于,客户务必记牢它的作用才行。

将全部的的这些标志和相应的APP都记牢,这个工作中量可不小。

自然,应用标志式的按钮自身其实不存在难题,前提条件是,APP的左右文自然环境要明确,客户才可以够清楚分辨按钮的含意和作用。举个事例,你应用的是笔记类运用,很显著,关键的作用是纪录、查询笔记。那末这个情况下,飘浮按钮上的笔的标志,所表述的含意就很清楚了。

B、1屏只应用1个飘浮按钮

飘浮按钮在页面中是突显的,也是最具备入侵性的,因此要末只应用1个飘浮按钮,要末果断别用。

 

C、飘浮按钮只承载顺向实际操作

因为飘浮按钮一般承载的是关键的、有意味着性的实际操作,一般它应当是个积极主动顺向的互动,例如建立、共享、探寻等。唯1的飘浮按钮不可该实行破坏性的实际操作,例如删掉、归档。它不可该是是非非特殊的实际操作,或是不详细的互动,例如裁切和粘贴是1组组成互动,它们应当存在于工具栏之中,而非飘浮按钮中。

 

Material Design 的设计方案标准中针对飘浮按钮所承载互动和标志有指引表明。

飘浮按钮和动效

飘浮按钮自身十分灵便,它能够拓展、形变,还可以给予意见反馈。

A、拓展为1系列实际操作

在一些状况下,点一下飘浮按钮能够拓展出别的的常见实际操作(就像 Evernote这样)。根据拓展,用1组有关、常见的飘浮按钮来取代原先的单1互动,这样是可行的,它们是1体的,可进行也能收纳,不常驻,这和前面所提到的标准其实不矛盾。

但是,这样的设计方案要留意几点:

这些实际操作务必与刚开始的总飘浮按钮是关系起来的,它们是1体的,不必把进行后的按钮视作独立的存在。

做为1般标准,这组扩展出来的按钮不可少于3个,不可以过剩6个,不然违背了做为飘浮按钮的迅速、高效率的标准。

 

B、飘浮按钮形变为新的页面

飘浮按钮能够不1直都为按钮形状,依靠动效它可以拓宽到全部显示屏,变成单独的页面。

飘浮按钮可以做为页面转换的正中间核心区。

当飘浮按钮形变为页面的情况下,它阐明了前后左右页面之间的逻辑性关联,就像下面的实例:

 

C、翻转的情况下掩藏飘浮按钮

以便便于客户在翻转的全过程中阅读文章內容,飘浮按钮能够在翻转页面的情况下,掩藏起来。

 

Medium 的 Android 版顾客端之中,便是这么应用飘浮按钮的,当翻转到文章内容底部的情况下,飘浮按钮会再度出現。具体上,她们的网页页面端也选用了相近的设计方案方式。

结语

飘浮按钮看起来很简易,可是要在APP设计方案的情况下正确应用,還是要留意细节、情景和客户要求的。正确应用飘浮按钮,会有事倍功半的实际效果。