signed

QiShunwang

“诚信为本、客户至上”

UI设计素材|正确使用浮动按钮

2020/8/20 13:25:50   来源:

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

浮动按钮动画

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

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

 

浮动操作按钮

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

 

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

尺寸及颜色

颜色

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

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

2、迷你尺寸:40x40px

 

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

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

免费的东西PSD:iOS的9个图标

图标

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

 

浮动过滤按钮

案例

浮动按钮(FAB)可以在当前屏幕上触发操作,也可以执行创建新屏幕的操作。

一、浮动按钮促进重要的、建设性的行动,例如:

1、创建

2、最喜欢的

3、分享

4、启动流程

二、对轻微或破坏性的行为避免浮动按钮,例如:存档或垃圾

告知错误有限的任务,比如剪切文本更适合工具栏的控件(如用于调整阴凉或字体颜色的控件)

特效社交媒体按钮

对于UI项目软社交媒体按钮

更多优秀案例到搜UI (SOOUI) 按钮让点击率飙升。

具体的工作如何使用浮动按钮,设计师还需要根据实际的项目的需求来选择,只有根据实际项目选择合理的浮动按钮,才能设计出更好的用户体验。