干货分享!悬停按钮设计规范和经典做法

 xinwen   2020-03-25 16:19   47 人阅读  0 条评论

浮动操作按钮(FAB)是APP应用程序中的常见UI元素。轻巧,优雅,方便,高效,它是Google设计语言中的一颗璀璨的明珠。悬停按钮通常独立出现在界面上,从而改善了整体导航并扩展了页面功能,从而使应用程序的操作更加方便。

作为Android UI交互中最关键的元素之一、浮动按钮在用户体验中的作用非常重要。在用户界面上,它通常是最大胆,最直观的页面元素; 就功能而言,它是用户在页面上最频繁的操作。使用浮动按钮的基本准则是什么?实际用途是什么?让我们一起看一下本文。

一种。 选择适当的悬停按钮大小

悬停按钮主要用于促进用户行为,它们的特征在于浮动在UI上的圆圈图标,并且具有包括变形,激活和锚点传输在内的运动行为。通常有两种大小,默认和最小(仅用于创建与其他界面元素的视觉连续性)。

默认大小通常为56 * 56dp,最小大小为40 * 40dp。当接口宽度小于460dp时,您需要从默认大小(56dp)调整为最小大小(40dp)。

B. 浮动按钮仅可进行向前操作

由于浮动按钮通常包含主要操作和代表操作,因此通常应该是积极的互动,例如创建,共享和探索。唯一的浮动按钮不应执行破坏性操作,例如删除,存档。它不应是非特定的操作或不完整的交互。 例如,剪切和粘贴是一组交互。 它们应该存在于菜单栏中,而不是存在于浮动按钮中。

C。 大屏幕上的悬停按钮

大屏幕上的悬停按钮可以放置在扩展的APP栏,工具栏或结构元素(假设它们不阻止其他元素)和窗体的边缘上。应当注意,每个页面上只能出现一个浮动按钮,并且不必将浮动按钮与页面上的所有元素相关联。 浮动按钮本身很吸引眼球,滥用浮动按钮会分散用户的注意力。

触发

悬停按钮可以简单地触发动作或导航到某个地方,通常用于触发功能,菜单或导航。

工具栏

单击或滚动时,悬停按钮可以转换为工具栏。 工具栏可以包含相关操作,文本和搜索字段等。当用户发出他们有兴趣通过滚动继续浏览内容的信号时,消失的工具栏将大大节省屏幕空间,并且总体用户体验将非常流畅。

界面变形的枢纽

浮动按钮可以转换为APP结构的一部分,并借助动态效果扩展到整个屏幕,甚至可以成为独立的界面,从而成为用于界面功能切换的动态集线器。

对于此作品的用法,Google Material Design设计规范要求:“使浮动按钮变形时,您需要在开始位置和结束位置之间进行逻辑切换。 不要使用其他元素,变形动画应该是可逆的。 新的变形页面还具有可以切换浮动按钮的功能。”

触发并展开一系列动作

除了单个功能触发器之外,浮动按钮更常用于触发一系列操作。 通过扩展,使用一组相关且常用的浮动按钮来替换原始的单个交互。常见的形式有展开按钮,展开形式等。

通常,这组展开的按钮不应少于3个且不大于6个,否则会违反快速有效的浮动按钮的原理。

悬停按钮的练习

清除浮动按钮的基本设计规范和使用分类之后,我们可以尝试开始我们自己的设计实践。 以下内容将帮助大家从两个方面着手。

原型制作

如果您对使用产品上的浮动按钮有初步的了解,则可以通过原型工具Mockplus快速实现原型效果。

Mockplus支持快速设计,快速分享,轻松预览和轻松协作,你可以通过200个组件,8种智能交互组件,只需通过鼠标拖拽就可以实现交互;设计完成后由8种方式供您预览,还支持8 该评论工具可以在线查看,团队也可以脱颖而出。上面的原型示例可以在这里下载:

还是没有灵感?没关系这是Dribbble和Uplabs上每个人都能使用的经典浮动按钮设计的一些示例,我相信它将为您带来灵感。

底部导航

工作功能和UI的完美结合是整体色彩。 在设计中,下拉菜单占据了屏幕的一半,模糊了背景中的元素,突出了表单的重要性。菜单设计非常简洁,所有选项都以垂直顺序排列,并且大量的空白确保文本处于优势位置。

切换动画细节的流程增强了呼吸感,并为用户带来了感知和精致的操作反馈。

用于用户参与的FAB

这个FAB看起来非常激进。 激活后毫不犹豫,它垄断了整个屏幕并占据了主导地位。由于空间充裕,设计成功地包含了所有重要的链接,图标既美观又直观,体验又强大又宽敞。在用户界面方面,作者巧妙地设置了焦点,带来了令人愉悦的视觉印象。

筛选器菜单

这项工作使用FAB作为枢纽,可以使搜索过程更高效,更有趣。 成都网页制作为用户提供了更加灵活的体验。 必要的过滤器选项呈弧形排列,每个选项均带有设计良好的圆形图标。菜单面板也具有类似于按钮本身的圆形形状。 这样,组件看起来很和谐。

浮动按钮似乎很简单,但是在APP的设计中,我们仍然需要注意基本的设计规范,方案和用户体验。正确使用浮动按钮将为您带来更多的产品体验。

本文地址:http://w4seo.cn/webnews/?id=638
版权声明:本文为原创文章,版权归 xinwen 所有,欢迎分享本文,转载请保留出处!

评论已关闭!