总结背景：

1、浮标对于我们来说并不陌生，在各大APP中经常可见。现在在职的公司主要是做特产电商，平时运营活动较多，所以经常需要做活动入口。去年做的挺多的，所以想对自己的工作做一个总结。

2、在整个做浮标的过程中，前期因为缺乏经验，布局排版，配色，动效都比较迷茫，所以去查看了目前很多主流APP的浮标效果。

现在，根据之前所看到的，以及自己平时在工作中的经验，写下这样一篇总结。布局排版、颜色、及动效几个方面都有涉及，希望能给做浮标经验不多的小伙伴们带来一点帮助。

咱们先看看什么是浮标呢？

如下图：

（图片来自花瓣 ）

以上图片就是APP浮标，通常用于展示活动，做为活动的入口。在现在APP中广泛应用。

浮标对于一个活动来说，至关重要。

成功的浮标可以让用户在短时间内产生点击欲望，做出点击操作，提高转化率。

那么设计师接到一个APP的浮标设计需求时，如何避免蒙逼，避免死板能快速做出一个浮标呢。

下面分享下我对做APP浮标一些总结。

一共可以分为四个部分：

一、做出视觉效果

二、加入微动效

三、在AE制作动效样式

四、与开发交付

一、在PS做出视觉效果

PS是我们做视觉效果时用的最多的软件。所以在做浮标时，我们最先会在PS完成浮标的视觉效果设计。

那怎样去做浮标样式呢？

1、颜色：做浮标时，我们通常会选择明亮的颜色作为主色

就像下面几个主流APP的浮标样式，样色都是明亮的颜色

2、几种主要排版样式：

在每次做浮标时，都会去看一些当下主流APP的浮标样式。总结下来主要有以下几种样式：

此样式仅作为布局参考，布局内加入符合各产品定位的元素

3、融入LOGO或品牌元素：

如果一些浮标运用在特殊场景里，为了增加浮标的品牌感，我们可以适当的融入一些产品的LOGO或者一些品牌元素。

二、加入微动效

浮标都是为了凸显某些重要的入口，如果仅仅是一个静态的浮标悬浮在界面上，会显得死板。为了增加用户的点击欲望，我们在做浮标时，会融入一些微动效。

那我们一般怎么去给浮标做一些微动效呢？

1、整体放大缩小

整体放大缩小的样式醒目突出，在界面上用户一眼就能找到，第一时间抓住用户的注意力。但幅度不能太大太快。避免视觉混乱，一般应用于只有一个浮标的界面。

样式如下图：

2、整体左右移动

整体左右移动的样式也能抓住用户的注意力，同样幅度不能太大太快。避免视觉混乱，一般应用于较少浮标的界面。

样式如下图：

3、局部放大缩小、局部上下/左右移动 

局部放大缩小、上下/左右移动是浮标中应用最为广泛的样式 ，即能抓住用户的注意力，多个存在时，视觉上也不会显得很混乱。

样式如下图：

5、按钮放大缩小

按钮放大缩小，也是工作中常用的一种动效方式。按钮的放大缩小，激发用户的点击欲望。样式如下图：

6、加入微元素点缀

加入微元素点缀也是工作中常用的一种动效方式 ，最常见的比如加入一些金币、红包、彩带等元素，烘托氛围，增强浮标的效果。

三、在AE制作动效样式

确定动效样式后，即可在PS导出相应图层，导入到AE制作动效样式。一般微动效在AE中用到的是基础属性，主要是位置的移动和缩放。

四、开发交付

当动效做完后，就是和开发交付的问题。通常有3种方式：

（1）导出GIF；

（2）导出PNG序列图；

（3）用插件导出SVGA文件；

一般情况下，直接导出GIF会存在图标失真的情况，所以我们常常会选用第二种和第三种方式。

1、导出序列图—主要适用于动画帧数不多的微动效，假如帧数太多，会对APP性能有影响 

在AE渲染时的输出模块设置里，可设置导出PNG序列。导出后会自动生成文件夹，文件夹里会有整个微动效的序列图，如下图：

2、动效较复杂时，可选用导出SVGA与开发交付。但SVGA支持的动效格式有限，所以在做微动效时，要考虑清楚具体的动效格式。

以上是最近在工作中的总结，不管是布局样式还是动效样式都是最基础的，除这些外还有更多更优秀的样式和方式。 

如果大家喜欢，请给我点赞赞。如有不妥之处，欢迎大家指正。

2020，砥砺前行！

Powered by Froala Editor