启动页|关于启动页与引导页的设计总结

编辑导语:关于启动页和引导页,我们在每个APP都可以看到。做好这两个页面,是用户了解产品的基础一步,也是用户最先了解产品的第一个窗口。因此,该如何设计启动页与引导页,才能够吸引他人?作者总结了一些自己的经验,与你分享。
启动页|关于启动页与引导页的设计总结
文章插图
启动页与引导页设计几乎是每个APP必备的。
在产品上架前期,设计师们通常会集中设计产品启动页与引导页。启动页与引导页是用户了解产品的第一个窗口,能给用户留下初印象~最近刚做完新产品的启动图与引导页设计,分享自己关于做启动图、引导页学到的相关知识与经验总结,希望对大家有所帮助,欢迎一起交流学习呀~
一、启动页、引导页是什么?启动页:当用户打开APP时,在启动APP的过程中被用户所看到的过渡页面或动画都被称为启动页。
启动页|关于启动页与引导页的设计总结
文章插图
作用:

  • 缓解用户启动APP时等待的焦虑情绪。
  • 传递品牌或介绍产品服务理念,加强用户对产品的印象。
特点:
  • 展示时间短,一般3s内,不可交互。
  • 启动图设计的更新速率可以保持1~3年更换一次,不建议频繁更换,启动图设计更新应该是跟随产品整个战略进行更换的。
启动页的形式比较多样化,但UI设计师在产品上架前期主要还是设计以产品内容或品牌为主的品牌启动图,介绍产品核心服务与传递品牌,本文主要介绍的是APP品牌启动图这种形式。
其他的,比如广告页、节日闪屏等运营类的启动页形式,我们知道有这种过渡页面存在就行了,这里就不做过多介绍了。
引导页:当用户安装或更新APP后首次启动APP时展示的3-5个滑动页面就是引导页,帮助用户更加清晰的了解产品定位与功能服务。
启动页|关于启动页与引导页的设计总结
文章插图
启动页|关于启动页与引导页的设计总结
文章插图
作用:
  • 呈现APP核心功能服务与产品特色或对迭代优化的地方做功能说明,让用户快速了解产品。
  • 引导页的设计调性能让用户对产品设计留下初印象。引导页已成为每个APP的仪式感设计,每次产品迭代更新,通过引导页形式,让用户感知到产品的迭代更新。
特点:
  • 可左右滑动切换页面,最后一页有进入按钮
  • 引导页个数一般为3-5个,个数不要超过5个,且尽量提供直接进入或跳过的按钮
  • 引导页的设计更新频率可以跟随每次产品升级、新功能特色进行更新,更新频率相对较频繁一些
二、启动页、引导页怎么做?启动图设计形式启动图常见的设计形式有纯背景+图标/slogan、背景图片、漂浮图标、品牌渗透这4种形式。
纯背景+图标/slogan在纯色背景上,融入产品启动图标或产品slogan。这一种是最简洁也是最经典的启动图设计形式。简单有力的宣传产品品牌、传递产品服务理念、加深用户对产品印象。
启动页|关于启动页与引导页的设计总结
文章插图
设计小tip:设计这种形式的启动图,我们需要注意页面的视觉平衡。上下比例建议采用0.86:1很多设计师在对齐的时候会直接采用工具的垂直居中,我们可以来对比看一下直接垂直居中与微调后的视觉感受~
启动页|关于启动页与引导页的设计总结
文章插图
很明显,直接采用垂直居中,上下比例为1:1的话,视觉中心是有些往下掉的;我们需要往上进行调整,达到视觉平衡。NAVER的改版设计中,专门将启动页的比例由1:1调整为了0.86:1,让视觉达到舒适。

推荐阅读