初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑
在上两个章节中，我们快速搭建并完成了登录页面和引导页，在常规的App开发中，除了引导页、登录页外，一闪而过的启动页可能最容易让人忽略。
启动页，作为在App启动过程中用户所感知的第一个页面，与引导页、登录页构成了用户对产品形成的第一印象。
本章节中，我们来探讨它们之间的关系，并且采取实战编程的方式实现它们之间的交互逻辑。
需求分析-页面逻辑
首先，我们先分析下常规的App登录交互逻辑。当用户打开App时，会遇到哪些页面？
- 启动页：当用户打开APP时，在启动APP的过程中被用户所看到的过渡页面或动画。
- 引导页：当用户安装或更新APP后首次启动APP时展示的3-5个滑动页面就是引导页，帮助用户更加清晰的了解产品定位与功能服务。
- 登录页：提供账号登录方式，获取用户基本信息，用于统计用户留存或者提供专属服务的身份认证页面。
- 首页：APP的主要功能展示。
启动页、引导页、登录页、首页，它们的逻辑顺序如下图所示：
当用户打开App时，系统启动App并伴随着启动页，若当前用户为首次打开App，则会打开引导页。
用户随着引导页的指引，在引导页最后一页点击操作，进入到登录页面，对于强登录的App，则需要登录认证身份后才可以使用App功能。
而对于弱登录性质的App，可通过跳过关闭登录页面进入首页，并在下一次打开应用时不再弹出登录页。若是工具类应用，则可以直接不要登录页。
UI设计-应用图标
在正式进入编码之前，我们先设计一个简单的应用图标的UI。应用图标设计方式呈现多样化，最能凸显产品品牌和产品服务宗旨的也是最简单的，便是简单的背景颜色+图标icon。
下载并打开AdobeXD设计软件，选择“自定义大小”，设置宽高为1024*1024，如下弹窗所示：
选中视图，选择右侧样式栏中的“填充”操作，选择“线性渐变”，设置角度为斜45度，颜色渐变为#9890e3→#b1f4cf。
拖入一个icon图标，调整其大小，设置其填充颜色为白色，我们就得到了一个产品Logo图标，如下所示：
设计好基本样式后，选择文件 > 导出 > 导出，选择所有面板。在保存文件弹窗中修改名称为“logo”，导出格式为“PNG”，导出大小为“1x”，点击“导出所有面板”，AdobeXD将会保存导出一张1024*1024的UI设计稿图片。
为了得到不同尺寸的程序图标，我们可以下载Apple官方的ProductionTemplates，下载并打开，拖入设计好的1024*1024尺寸的设计稿到最大的空白框中，就可以遍历得到符合Apple官方的全部尺寸程序图标，如下图所示：
批量导出保存之后，程序图标的准备工作就完成了。
实战编程-创建项目
打开Xcode开发工具，点击Create a new Xcode project，将新项目命名为PageSetting，如下弹窗所示：
命名好项目后，指定保存路径，一个SwiftUI项目就创建完成了。
