什么是浮动按钮?浮动按钮通常是一个界面浮动的图标,它的颜色、图标、位置在界面中有着明显的区别,出现在屏幕内容的前面,由一个圆形加中间一个图标组成,通常在所处的屏幕中是为了突出一个重要功能点,执行主要的操作或最频繁的操作,有着较强的引导性。

UI设计干货素材|教你正确使用浮动按钮

浮动过滤按钮

UI设计干货素材|教你正确使用浮动按钮

浮动按钮动画

UI设计干货素材|教你正确使用浮动按钮

浮动操作按钮

UI设计干货素材|教你正确使用浮动按钮

浮动操作按钮(FAB) - 材料设计UI

浮动按钮是表示屏幕主要动作的最合适的方式时,才使用它。

三大原则主要原则。浮动按钮应该是屏幕上的主要操作。

建设性原则。浮动按钮应该执行建设性的行动,如创建、分享或探险。关联原则。浮动按钮应该与它所显示的屏幕相关。

组成元素浮动按钮通常由一个圆形容器加中间一个图标组成。

尺寸及颜色

颜色

浮动按钮的颜色通常是由应用程序的颜色或者产品本身的品牌颜色决定的,并且与后面的背景形成鲜明的对比,如果与背景混在一起,浮动按钮将毫无意义。

两种尺寸1、默认尺寸:56x56px

2、迷你尺寸:40x40px

 

迷你浮动按钮通常用在小屏幕上。当屏幕宽度为460dp或更小时,默认浮动按钮应该转换为最小大小(40px)。

迷你浮动按钮一样具有视觉连续性,可以用于创建与其他屏幕元素的视觉连续性。

图标

浮动按钮图标应该清楚地说明它的作用,不应该包含屏幕上其他地方的通知或操作。

更多素材APP设计到搜UI (SOOUI) 浮动按钮有三种类型在Material Design中的使用规范和各自的特点,规范是死的,具体的工作如何使用浮动按钮,设计师还需要根据实际的项目的需求来选择,只有根据实际项目选择合理的浮动按钮,才能设计出更好的用户体验。

UI设计干货素材|教你正确使用浮动按钮

相关文章:

  • 2021-09-17
  • 2021-07-07
  • 2021-07-25
  • 2021-04-19
  • 2021-09-05
  • 2021-09-16
  • 2021-07-29
  • 2021-12-11
猜你喜欢
  • 2021-05-16
  • 2021-08-06
  • 2021-08-18
  • 2021-05-15
  • 2021-12-01
  • 2021-06-23
  • 2021-12-10
相关资源
相似解决方案