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. 小程序状态栏

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

这个其实已经很接近了，但是并不是特别合适，因为要找小程序相关的：

不确定是不是使用的姿势不对，这里的搜索结果不展示：

好难找，要换个地方，在“WeUI设计规范库（浅色）”里面有：

这里要注意的，就是默认拖进去的，是375*88的，而我们的iPhone14画板，是390的，要手动调一下宽度。

2.4.3. iPhone的indicator

还是老地方：iOS官方设计资源 -> Bars -> Home indicators，选iPhone那个：

这里就引入一个新东西，就是要让加进来的indicator跟我们的iPhone14画板里居中对齐，这么操作：

居中，底对齐：

好啦，到这里，我们的基础画板就好了，可以在里面造轮子了~

2.5. 引入iconfont

首先，为什么iconfont？因为人家有大厂背书，然后有些icon资源，是英文的，搜索起来，着实不方便。

添加方式：插件 -> 社区 -> 搜索iconfont，进行添加。

建议添加之后，星标一下，这样在画布右上角，就能看到iconfont的快速入口

比如，想为小程序的tabbar找一个“我的”图表，直接搜索就行了：

我觉得这个挺Q的，好看！

拖拽进画板就行了：

然后，好丑…不过好在，样式可以很方便很方便很方便很方便很方便很方便的调整，真的很方便~

下面就去话一下tabbar吧~

2.6. 画tabbar

当然不会是自己随便想，造轮子的事情，还是少做的好！

先把图标都找好，先怼起来：

2.6.1. 调整图标大小

按住shift，把4个都选上，然后设置成24*24

2.6.2. 调整图标的线颜色

错误姿势：描边

描边，是边框，不是图标的线条颜色。如果“描边”设为黑色，看下是什么样：

正确的方式：选择到图标的画板里面的内容，设置其“填充”颜色：

设置完成后的效果：

2.6.3. 给图标，加背景颜色

可以跟我们的作业对比一下，如果是选中状态，应该要有个黄色的背景色，怎么处理呢？

设置“填充颜色”：

要解答2个问题：

1. 为什么不是像作业一样，背景是黄色，线条是黑色？
2. 怎么才能保持和作业一样的黄色？

先解答问题1：为什么不是像作业一样，背景是黄色，线条是黑色？

答：需要找图标的时候，就找xxx-fill这样的，意思是有颜色填充，就像最后一个“我的”图表，就是可以填充的

问题2：怎么才能保持和作业一样的黄色？

答：使用取色器。

我们把“我的”这个图标，照着作业的样子改一改：

“取色器”这么用：

选中“路径1”，也就是“我的”画板里面的图，再选择“描边”为黑色：

这样，“我的”图表的颜色就好啦：

为了能做的好看些，我们把其他图标，也找fill的，都改改吧，强迫症犯了…

感觉好些了…

2.6.4. tabbar自动布局

药不能停，继续看问题，怎么能把下面的4个图标平分对齐呢？

在操作之前，其实，我们应该理解成5个图标，因为还有1个“记账”文本没画，不然肯定是有问题的。

1. 先把左边工具栏里的图标顺序、名字都给改一改，这样便于我们后面的操作：

2. 最好是给这5个小东西都分到一个组里，这样后面便于统一处理

   cmd+G或ctrl+G ===> 创建分组，然后给这个分组重命名为tabbar。

   这样，只要我们选中tabbar，其实就是把这个组里的都选中了，可以方便操作拖拽改变位置、操作对齐等。

   

   等比例调整这个组的宽度（390是我们画布的宽度）：

   

2.6.4.1. 重头戏：自动布局

初始设置完之后，也可以用这个中间的红色竖线，左右拖动来改变元素的间距：

2.6.5. 参考线

参考线是个好东西，为什么呢？

就比如我们现在在画的是底部的tabbar，众所周知，iPhone有一个底部小黑条：indicator。

然后，iPhone的这个indicator为了防止误触等，设置了一个安全距离，术语是SafeArea，具体的屏幕尺寸和SafeArea高度，参考下面的“屏幕尺寸及安全区大小”。----34像素

现在我们需要拉一条底部的参考线，让我们的tabbar整体要在这个参考线以上：

1. 从“1”标准的位置，鼠标移上去，可以拉下来一根参考线
2. 把参考线往下放，放到多少？我们的手机屏幕高度是844，安全区34，所以放在810处。
3. 有时候鼠标操作参考线，1px的移动比较困难，使用键盘的方向键，方便操作。

2.6.6. 屏幕尺寸及安全区大小

手机型号	尺寸（pt)	倍数	屏幕（px）	状态栏高度	顶部安全距离	底部安全距离
iPhone14Pro	393 * 852	3	1179 * 2556	54pt	59pt	34pt(竖屏) / 21pt(横屏)
iPhone14ProMax	430 * 932	3	1290 * 2796	54pt	59pt	34pt(竖屏) / 21pt(横屏)
iPhone12、iPhone12Pro、iPhone13、iPhone13Pro、iPhone14	390 * 844	3	1170 * 2532	47pt	47pt	34pt(竖屏) / 21pt(横屏)
iPhone12ProMax、iPhone13ProMax、iPhone14Plus	428 * 926	3	1284 * 2778	47pt	47pt	34pt(竖屏) / 21pt(横屏)
iPhone12mini、iPhone13mini	375 * 812	3	1125 * 2436	50pt	50pt	34pt(竖屏) / 21pt(横屏)
iPhoneXS Max、iPhone11ProMax	414 * 896	3	1242 * 2688	44pt	44pt	34pt(竖屏) / 21pt(横屏)
iPhoneX、iPhoneXS、iPhone 11 Pro	375 * 812	3	1125 * 2436	44pt	44pt	34pt(竖屏) / 21pt(横屏)
iPhoneXR、iPhone 11	414 * 896	2	828* 1792	48pt	48pt	34pt(竖屏) / 21pt(横屏)
iPhone6 Plus、iPhone6s Plus、iPhone7 Plus、iPhone8 Plus	414 * 736	3	1242x2208	20pt	20pt	—
iPhone6、iPhone6s、iPhone7、iPhone8、iPhoneSE2、iPhoneSE3	375 * 667	2	750 * 1334	20pt	20pt	—

2.6.7. 把tabbar放在参考线上

为了方便视觉上操作，给tabbar加一个黑色描边，就容易操作了。

2.6.8. tabbar上的图标配字

1. 图表要配字，所以要重新设定tabbar的线框高度，留下适当的空间
2. 对齐方式改为底部对齐，这样，“记账”2个字就不会飘起来

一个小的方案，就是把 图先拉出来，加上文字之后，编一个组，居中对齐，这样就可以认为他们是1个东西。

像这样：

然后，再重新给他们操作一下“自动布局”即可，操作结果是这样：

做的过程中发现一个小问题，就是“记账”是2个文字，没法底部对齐，所以我们可以为这个文字，也设定一个宽高，比如我这里是把底部的icon+文字，统一都设置成 24 * 44，所以“记账”这2个文字也是 24 * 44，这样就能一起底部对齐了。

2.6.9. tabbar的特别样式：大黄圆圈

1. 中间“记账”，上面是大黄色的圆圈，圆圈边缘有一个同心半圆，线条灰色
2. 半圆左右，有横线，用来区分正文和tabbar区域

这个，圆圈就单独话，然后再移动到合适的位置上。

1. 按shift画一个40 * 40的圆

2. 给填充上黄色

3. 按shift画一个 56 * 56的圆

4. 给填充透明，边框灰色

   

5. 把透明圆的底部删掉，双击透明圆，会变成如下状态，就可以按delete删除不需要的线了

   

6. 中间画上十字线。

   

   最终的结果就是：

   

7. 去掉边框黑线，画左右2边的线

   左右2边线长是多少？需要计算一下：

   半圆直径56，页面宽390， (390-56)/2 = 167，画这2条线即可。同时去掉下面的参考线，可见：

   

2.7. 小程序页面绘制

2.7.1. 渐变色

头部做一个渐变色，基本就成型了。

1. 渐变色，画一个矩形先。

   麻烦来了，画了矩形之后，会盖住StatusBar

   

   这时候要做的，是把StatusBar的画板放在上面，这样：

   

2. 矩形重命名为“头部渐变背景”，先填充黄色，设置渐变

   

3. StatusBar设置为透明色，让渐变的背景可以透过来

   在“填充”里面，‘A’设置为0即可。

   

2.8. 完成效果

基础设置基本就完成啦，效果如下：