如何完成APP浮标设计

在工作上沉淀了几年,时隔几年没发文,重新回来,写写工作相关的总结吧哈哈哈,也当是一种学习和锻炼。

好啦,表演正式开始!




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

如下图:

(图片来自花瓣 )

图片来自花瓣

以上图片就是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,砥砺前行!

你可能感兴趣的:(如何完成APP浮标设计)