在工作上沉淀了几年，时隔几年没发文，重新回来，写写工作相关的总结吧哈哈哈，也当是一种学习和锻炼。
好啦，表演正式开始！
咱们先看看什么是浮标呢？
如下图：
（图片来自花瓣 ）
以上图片就是APP浮标，通常用于展示活动，做为活动的入口。在电商APP及一些O2OAPP应用最为广泛。
浮标对于一个活动来说，至关重要。
成功的浮标可以让用户在短时间内产生点击欲望，做出点击操作，提高转化率。
那么设计师接到一个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，砥砺前行！
