启动页|关于启动页与引导页的设计总结
编辑导语:关于启动页和引导页,我们在每个APP都可以看到。做好这两个页面,是用户了解产品的基础一步,也是用户最先了解产品的第一个窗口。因此,该如何设计启动页与引导页,才能够吸引他人?作者总结了一些自己的经验,与你分享。
文章插图
启动页与引导页设计几乎是每个APP必备的。
在产品上架前期,设计师们通常会集中设计产品启动页与引导页。启动页与引导页是用户了解产品的第一个窗口,能给用户留下初印象~最近刚做完新产品的启动图与引导页设计,分享自己关于做启动图、引导页学到的相关知识与经验总结,希望对大家有所帮助,欢迎一起交流学习呀~
一、启动页、引导页是什么?启动页:当用户打开APP时,在启动APP的过程中被用户所看到的过渡页面或动画都被称为启动页。
文章插图
作用:
- 缓解用户启动APP时等待的焦虑情绪。
- 传递品牌或介绍产品服务理念,加强用户对产品的印象。
- 展示时间短,一般3s内,不可交互。
- 启动图设计的更新速率可以保持1~3年更换一次,不建议频繁更换,启动图设计更新应该是跟随产品整个战略进行更换的。
其他的,比如广告页、节日闪屏等运营类的启动页形式,我们知道有这种过渡页面存在就行了,这里就不做过多介绍了。
引导页:当用户安装或更新APP后首次启动APP时展示的3-5个滑动页面就是引导页,帮助用户更加清晰的了解产品定位与功能服务。

文章插图

文章插图
作用:
- 呈现APP核心功能服务与产品特色或对迭代优化的地方做功能说明,让用户快速了解产品。
- 引导页的设计调性能让用户对产品设计留下初印象。引导页已成为每个APP的仪式感设计,每次产品迭代更新,通过引导页形式,让用户感知到产品的迭代更新。
- 可左右滑动切换页面,最后一页有进入按钮
- 引导页个数一般为3-5个,个数不要超过5个,且尽量提供直接进入或跳过的按钮
- 引导页的设计更新频率可以跟随每次产品升级、新功能特色进行更新,更新频率相对较频繁一些
纯背景+图标/slogan在纯色背景上,融入产品启动图标或产品slogan。这一种是最简洁也是最经典的启动图设计形式。简单有力的宣传产品品牌、传递产品服务理念、加深用户对产品印象。

文章插图
设计小tip:设计这种形式的启动图,我们需要注意页面的视觉平衡。上下比例建议采用0.86:1很多设计师在对齐的时候会直接采用工具的垂直居中,我们可以来对比看一下直接垂直居中与微调后的视觉感受~

文章插图
很明显,直接采用垂直居中,上下比例为1:1的话,视觉中心是有些往下掉的;我们需要往上进行调整,达到视觉平衡。NAVER的改版设计中,专门将启动页的比例由1:1调整为了0.86:1,让视觉达到舒适。
推荐阅读
- 火狐|火狐回应 Firefox 无法访问网页:服务器更新触发 bug,现已解决
- 信息页|企业微信4.0重大版本正式发布:支持微信客服、视频号
- 颗粒度|业务想大多全,用户要精准简,首页设计该如何破局?
- 蝴蝶兰|盒马线上线下启动“春节花市”主力鲜花价格降约四成
- 春节|“2022全国网上年货节”启动 美团“年货送到家”覆盖2800个区县
- 试点|微信支持数字人民币支付!关于数字人民币,你还应该知道这些
- 公告|快手:关于落实“双减”政策的深化治理公告
- 极兔速递|极兔中东市场启动 正式运营阿联酋、沙特快递网络
- 搜狗搜索|搜狗搜索App将更名为Bingo,首页信息流已关闭
- 创作|关于视频,知乎找到了自己的方法论