APP启动页设计实例与最佳实践分享

发布日期：2024-08-26 09:37    点击次数：127

启动页是应用启动时出现的过渡页面或动画，旨在提升用户体验、缓解用户焦虑，以及传递品牌或产品的人情味。根据应用性能，其停留时间可能从1秒到3秒不等。启动页同样是应用名片，需要展现品牌的独特个性。运用品牌颜色和 IP 形象能加深用户印象，唤起情感共鸣，帮助用户记忆和理解品牌。今天就来为设计师分享启动页设计指南，涉及启动页的定义、目的、设计要点、元素、原则，让你轻松了解启动页设计的基本指南！

js.design/community?category=search&search=启动页&source=sh&plan=smt07111

1、启动页的定义

启动页是用户在打开应用时看到的过渡页面，常常用来缓解用户等待应用启动的焦虑感，启动页偶尔也被用来放置开屏广告，起到广告位的作用，一些启动页还会包括产品的宣传标语和产品信息等元素，以此来增加用户对于产品的了解。

启动页在 APP 启动时立即出现，其主要用于减少用户打开 APP 时的等待焦虑，它的显示时长是根据程序启动时长而定的，当程序准备完毕则启动页消失，马上进入 APP 首页。

特点：不可交互、显示时长不可控、无点击 / 跳过等操作

2、设计启动页的目的

在加载过程中缓解用户等待焦虑

确保产品品牌的宣传广告深入人心，让用户更容易记住并加深印象

3、APP 启动页设计要点

重点：信息简练

因为启动页的出现时长较短且不可控，所以启动页的信息传达要尽量简练，如果使用长文案内容的话可能会出现用户没看完就已经自动进入首页的情况。

4、启动页设计的元素

4.1 Logo

Logo 是启动页设计最常出现的一个元素，通过用户开启应用的时间来展示公司以及产品的 Logo ，加深用户对于产品 Logo 的印象，通常处于启动页的核心位置，例如中心位置，还会通过放大和字体颜色的不同来突出显示，让用户能一眼看到。

4.2 品牌标语

启动页设计上的品牌标语同 Logo 的作用一样，可以在 Logo 的基础上进一步强调产品或产品的特点和优势，以此来宣传品牌或者产品，品牌标语的位置并没有那么多要求，页面底部或者居中都可以。

4.3 插画和图片

启动页除了 Logo 和 品牌标语，偶尔还要搭配一些插画或者图片，当然，这些插画和图片也是与品牌相关的，可以是品牌的 IP 形象，也可以是一些使用地点等等，让页面更加丰富。

5、启动页设计的原则

5.1 突出品牌

启动页设计的重点就是一定要突出品牌,使用品牌相关元素在启动页上来强化用户对于品牌的认知印象。

5.2 时间简短

由于启动页设计是在加载应用期间出现的，所以出现时间不能够很长，不然会让用户等很长时间，一般时间会在几秒左右，另外，要注意如果是广告类启动页的话，可以添加跳过按钮，以免让用户产生厌烦情绪。

5.3 简洁明确

启动页设计的形式可以很多样，但这并不代表启动页设计的元素也是越多越好，因为短短时间内用户只能注意到很少的信息，所以在元素方面要控制好数量，避免太多的文字或者信息。

5.4 尺寸设配

由于市场上手机设备尺寸也各不相同，所以在启动页设计时要注意尺寸的适配问题，防止启动页在不同的设备尺寸上出现变形等情况。

6、APP 启动页设计类型

IP+Slogan 类

此类启动页会将产品的 IP 放置在启动页里，通过可爱的 IP 和 Logo 传递品牌调性。显得画面丰富生动，在给用户呈现轻松愉快的启动页时，把 APP 的 Slogan 放出来，传达出 APP 对于的定位，培养用户对于平台的品牌感知。有一些 APP 也会将平台的一些业务模块放出来，加深用户对于平台有丰富的业务形态的认知。

IP 形象: 可独立展示，也可结合场景或者整个画面展示，位置和大小都可变化

Logo: 位置常底部居中，也可根据 IP 位置灵活调整

Logo+Slogan 类

Logo+Slogan 类启动页会在页面中间放置较大的产品的 Slogan，通过文案直接传递品牌调性或产品特色。并将 Logo 放在启动页，增加用户对于平台 Logo 的辨识度，培养用户的记忆点，同时也能给用户官方信任的感觉，然后再将平台的 Slogan 放在 Logo 周边，引导用户对于平台的服务定位。

Slogan:文字可横排，可竖排

Logo: 位置常底部居中，也可和 Slogan 组合展示

插画/照片+Logo 类

此类启动页会在页面中使用和产品高度相关的插画或照片，如：表现使用场景、表现功能特色、表现品牌调性。通过插画或照片，增加启动页趣味性。主要在摄影、视频、旅行、金融这些 APP 中出现的比较多，能够让用户去感受大自然的美景，起到放松视觉，奔赴美好的寓意。在金融类 APP 喜欢用实景照片，可能是因为金融行业相对比较传统，用这种保守的实景照片起到给用户增加信任感的目的。

插画/照片: 可满屏可局部，可单独展示也可和 Logo 有呼应还可和 Slogan 结合使用Logo: 位置常底部居中，也可根据插画位置灵活调整

纯色+Logo 类

主要在国外应用中比较常见，大面积的品牌色有利于加深用户对于平台的品牌认知，让用户看到这个颜色，就想到了某个平台或者某家公司。主要是想给用户传达品牌符号，加深用户对于平台 logo 的记忆点。同时也跟启动 logo很好的对应起来，有个呼应作用，这种简单的启动页也表明平台的设计风格也是偏简约、专注于用户体验。

背景:可为品牌色、图片、白色、视频等Logo: 位置可在中间，页面底部

以上就是今天本文和大家分享的 APP启动页设计如何做，相信大家看完今天的文章对于 APP 启动页设计也有了初步的了解。其实想要设计出优秀的启动页并不难，只要选对工具是可以事半功倍的，国产的一款非常优秀的 APP 设计软件，不仅设计功能专业强大，还为大家创造了一个开源平台。这里为设计师提供了海量优质的设计资源，在这里你可以临摹业界大佬作品，学习前沿的设计知识！大家快去试试吧！

发布于：北京市