天猫APP启动页改版


启动页改版前体验上的现状:


为什么要对启动页进行改版呢,我们来回顾下:天猫客户端启动后,首先会看到一张很有氛围的启动页,几秒钟后,又出现一张闪屏,上面有很多活动相关文案,紧接着可能会出现“超级品牌日”的首屏霸屏,然后才能进入到正常的首页。

其实刚才说到的每一张页面所想要表达的信息都是相互独立,互无关联的,给人一种信息断层的感觉。并且,用户需要接收2-3张页面的信息才能正式进入首页,这个过程就显得复杂和冗长。所以我们存在的问题就是:信息断层和过程冗长。

我们的设计目标呢,就是需要去解决以上两个问题:
信息断层:将原本完全独立的页面之间赋予关联性
过程冗长:简化进入首页的流程,在感知上更轻量化一些。

在开始思考方案之前呢,还需要进行大量的竞品分析,了解下我们主流使用的APP们都是怎么做的。在进行了大量的收集之后呢,大致将他们的启动页分为了四种类型。
第一种类型是将品牌信息放置于页面中间最主要位置,在页尾放版权或slogan信息,这样的优点是品牌信息很突出,一目了然,用户阅读起来也没有负担。但缺点呢,不能与后面的闪屏做关联承接,体验上有断层。

第二种类型的特点会更加的明显,只在页尾放品牌和slogan等信息,优点是可以和后面的闪屏页有承接呼应,虽然有了关联性,但因为这样的设计保留了大面积的空白,当启动时间比较长,或者后面没有闪屏的时候体验不佳。

第三种类型比较少见,以一张非常有意境的场景画面作为启动页,会给人留下非常深刻的印象,但同样会存在和类型一一样,不能和后面的页面呼应承接,并且随着长时间的在线,略微有点审美疲劳。

第四种类型也比较常见,属于框架型结构,在启动的时候加载最基础的框架作为启动页,这一类型的启动页适合秒开型的APP,对于性能的要求非常的高,所以不太适用。

所以,我们最终的方案,会结合刚才类型一“品牌信息突出,阅读无负担”的优点,以及类型二能与后面的闪屏有衔接的设计思路,和天猫自己的特性与品牌。

下图最左侧是我们最终的方案,随着性能的提升,启动页时长有了优化,短短的1、2秒,所以信息尽可能的精简,我们希望用户启动客户端后,首先是看到天猫的品牌信息,通过将猫头品牌符号的放大,位移,渐变等动效方式,来衔接呼应出后面的页面。

下面我们来看几个应用的案例:
以下是几个应用案例动效果,但由于是GIF格式画质很渣,请见谅。
日常版:通过将猫头品牌符号下移承接闪屏。

节日节气版:通过将品牌符号放大形变成氛围图,氛围图始终贯穿猫头形状。

品牌合作版:猫头的形状同样可以和品牌做结合。

超级品牌日版:将启动页和首页超级大旋风通过动效串联。

大促视频版:将品牌符号从启动页延续到视频内。

启动页的改版作为2017天猫App全面升级的第一步,焕然一新的天猫App也即将面世。据内部消息,一大波深度设计解析正在赶来的路上,一起期待吧。

评论
热度 ( 1 )

© Lee-style | Powered by LOFTER