天猫 APP 启动页改版

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

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

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

我们的设计目标呢，就是需要去解决以上两个问题：

信息断层：将原本完全独立的页面之间赋予关联性

过程冗长：简化进入首页的流程，在感知上更轻量化一些。

在开始思考方案之前呢，还需要进行大量的竞品分析，了解下我们主流使用的APP们都是怎么做的。在进行了大量的收集之后呢，大致将他们的启动页分为了四种类型。

第一种类型是将品牌信息放置于页面中间最主要位置，在页尾放版权或slogan信息，这样的优点是品牌信息很突出，一目了然，用户阅读起来也没有负担。但缺点呢，不能与后面的闪屏做关联承接，体验上有断层。

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

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

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

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

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

下面我们来看几个应用的案例：

以下是几个应用案例动效果，但由于是GIF格式画质很渣，请见谅。

日常版：通过将猫头品牌符号下移承接闪屏。

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

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

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

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

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

来源：天猫UED AlibabaGroupUED

关键字：设计, 设计文章, base64

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！