2.使用即时设计做页面原型

1. 设计工具

1.1. 上手

上一节，项目的基础代码已经做好了，现在要做的，就是画一下页面原型，设计一下页面的排布。

这一步的目标，并不是要做很优美的页面、绘图，因为，我们已经计划去使用uView3来做基础组件及样式，这里要处理的，是各页面要呈现哪些元素。

这里是上手闲虾米在闲虾米壁纸项目里所使用到的即时设计工具：

即时设计官网：https://ad.js.design

1.2. 上手"即时设计"

最快的学习工具，还是得b站，有一个比较快速的学习视频，大概是90分钟，可以能大概上手。

https://www.bilibili.com/video/BV1k34y1m7Ly

学习还是非常有必要的，不然连工具怎么使用都要摸索很久，其实是得不偿失的。

1.3. 产品原型偷师

看看别人是怎么做的，主要是看一下行业里的普遍水平或者天花板：

1. 随手记专业版-高保证
2. 千图网，简约毛玻璃拟物记账app：https://www.58pic.com/newpic/41586187.html

2. 即时设计tips

2.1. 完成后的效果图

下面就是最后完成的效果图，将一步步操作实现。

内容包括：工具、iconfont、画板、自动布局、分组、背景渐变、图形操作等。

下面就是为了完成这个，来一步步操作起来~

了解工具，要知道画布是什么，以及即时设计提供的工具都有哪些。

一步步的，画一个小程序的页面出来，包含：状态栏、小程序主体页面、tabbar、indicator。

网页版本和软件安装版本使用起来效果是一样的。

为了防止奇奇怪怪的问题，下载安装未尝不是一件好事。

然后就是一通注册，就可以上手，没什么特别说明。

2.2. 画板 - iPhone容器

当想要做手机端页面原型的时候，选择左侧面板的画板按钮，再从右侧拖入一个对应机型画板页面。

2.3. 工具箱

一般比较多的，是画矩形、原型、直线，这些都在左侧面板上。

有个小插曲，之前找了半天找不到在哪里画直线，其实就是在左侧的矩形，点开，里面有直线、圆形，用了之后，默认会保留上一次用的线型。

2.4. 画iPhone的状态栏和indicator

既然知道了基础的东西，那就直接上手开始画手机页面。

第一个想到的就是，手机状态栏的时间、信号、电池，还有底部的小黑条indicator，需要自己画吗？

答案肯定是不需要，那在哪里找？

看看

2.4.1. 设计标准

iOS15官方设计资源：在 “资源” -> “规范” -> "iOS15官方设计资源（浅色版）"里有：

好，那就继续画吧~

2.4.2. 小程序状态栏

当前项目，我们需要做一个小程序，所以最好找到小程序相关的状态栏。