在工作上沉淀了几年,时隔几年没发文,重新回来,写写工作相关的总结吧哈哈哈,也当是一种学习和锻炼。
好啦,表演正式开始!
咱们先看看什么是浮标呢?
如下图:
(图片来自花瓣 )
以上图片就是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,砥砺前行!