那我们再往下看,就是整个微信的这个底部了,对吧?那这个底部的话,呃,每一个点击是可以进行一个跳转的,那我们的一个办法就是我们首先得把这个呃底部给画出来,对吧?这个底部应该是一个矩向,我们先去确定这个矩形的一个高度 啊,我们去对比一下我们这个图图片,那我们的这个矩形的高度就到这,然后这个矩形是不是一个没有底下的这个整个底底部是没有这个描边的,对吧?没有边框的。 然后他的这个颜色啊,我们可以去看一下,你如果不知道他的颜色是什么样的情况下,你点击这个填充,你会在旁边发现一个小的这个像滴管一样的这个工具,点击一下这个滴管的这个工具,你可以在屏幕上任何一个地方去点吸取他的这个颜 颜色啊,那我们现在想要的是这个灰灰的这个颜色,那我们就点一下任何一个灰色的地方,你会发现这个时候我们的这个啊颜色就和这个原这个设计图上的是一样的,对吧?这个截屏上是一样的。然后我们再给它调整一下它的这个宽度, 那这个时候我们就有了一个和底下的这个是一样的这个,呃底部的这个把了,对吧?然后在这上面会有四个这个图标 和这个文案,我们来看我们分别去进行一个设计。首先我们看第一个这个图标像什么有这个消息,所以我们得在素材里面去搜一下啊,这是短信, 然后我们就可以找到类似的这种嗯消息吧, 我们就可以找到类似的这样的一个图标,对吧?我们把这个图标给拖进来啊,他们的大小是差不多的,但是我发现他的颜色不一样啊。这个时候我们在这个图标的这个位置选一下图标色, 然后点一下这个吸管啊,把它稍微挪过来一些,选一下这个吸,点一下这个吸管,然后去吸一下这个绿色啊,这时候我们就把这个绿色的图标做出来了, 然后再往下是什么呢?再往下我们得把这字给打出来啊,那我们可以用快捷键输入微信两个字, 然后对这个字的颜色进行一个最近使用,里面就会出现我们刚才那个绿色了,然后他的大小进行一个调整, 进行一个对齐。这时候我们看到这个微信和这个 图标我们就已经有了,那这个地方我们得注意一个点什么呢?因为我们会发现后面这几个我们是不是可以用复制的方式去把他们的框架给做出来,然后再对文案进行修改,那这个时候你会发现这个文字有多有少,他是一个什么样的对齐方式呢?他是一个居中对齐的方式,所以我们就可以对这个文案 进行一个选择,选择居中水平居中对齐。那这样我给他们俩后续再去,我首先给他们做个分组哈,这个是我们说的这个微信,取个名字叫微信的这个图标, 那我接下来是不是就可以复制这个组,然后把它拖动到和他对齐的这个位置上,那我们接下来要改一下他的这个,首先第一要改的是什么?他改成了通讯录对 不对?那我们得把文字改了,通讯录这个时候大家看,因为居中对齐了,所以变成三个字的时候呢?啊,我不需要任何的一个调整,只需要对他的颜色进行一下调整为这个黑色, 同时这个图标我们也得对他进行调整,我们怎么样去快速的调整一个图标呢?那就是我们选中这个图标,然后在右侧我们会发现有一个呃图标的这样的一个选项,我们点击他在这个位置再去进行一个呃搜索啊, 可能我们这个搜索的叫这个通讯录,那我们就可以找类似的这样的一个图标,然后我们找到了之后啊,点击他,你会发现这个图这个通讯录他就已经变了,对吧?但是他不太像,我们选择一个比较 像的吧 这个吧,然后对他的颜色进行一个调整。 哎,这个时候我就把第二个图标给做好了,那接下来我们去把第三个和第四个去分别做一下,首先我们看这个地方我们还得给他,嗯,改一个名字,对吧?他叫通讯录,然后我再复制他, 这个时候我看到这个叫发现,那我就去对他的这个文案进行一个调整,发现,然后他的一个图标像什么?像个指南针,对不对?那我们就去收指南针 啊,然后选中一个跟他长得比较像的啊,然后给他们这个组合取一个名字叫发现,还有我什么呢?还有这个最后的一个我的,对吧?啊?先去 我们还是先修改文案叫我,然后这个地方他的图标去点击他,然后这个图标我们回到这个初级的这个目录哈,然后他的图标叫我个人中心,对吧? 嗯,我的选择一个 切换好,这时候我们是把这四个图标给做好了,然后接下来我们要做的是什么?我们得把这些图标挪到这个板上啊,然后按保持和他一样的这个对齐的方式。那这个地方我们用什么快捷的方法呢? 我们可以做的一个办法就是首先我们把第一个图标给挪上去,然后选择他和这个瓣进行一个居中的一个对齐,垂直居中 啊,然后我们再把最后一个放上去,跟他进行一个对齐, 然后我们再选中刚才我们画的这两个图标,这样的话我们就四个图标一块选中了,对吧?然后这四个图标啊,我们要让他们同把这两个往上对,那就是顶对齐, 这时候他们上来了,那他们之间的这个距离是不是现在有可能不准?不是啊,彻底的这个平均,那我们就点一下这个地方有个叫水平等间距,哎,我们点一下,发现他就会自动的进行一个对齐了, 然后我们再把它这四个选中的和底下的这个背景一块选中,然后给他们再组合一个编组,这个平组我们就可以给他另外第一 步导航,这样我们再把我们的底部导航给拿过来啊,我们放到任何一个位置吧,假如说我们现在先给他放到这啊,我们看看会有什么样的一个问题。好,我们放到这里以后,我们去打开预览看一下 啊,这个时候我们发现他的这个位置首先不太对,是吧?并且在我们滑动的过程当中出现了一个什么问题呢?出现了他也跟着滑走了,这不符合我们的语气,对吧?所以我们就得把它放到我们页面的这个底部 啊,我们今天来进行一个拖动,拖到这个页面的一个底部, 然后再做 什么样的事?我们刚才说了一个小箭头对不对?那我们就得把这个小箭头往哪放?往他的最上面去放,对其他的最上面,这样我们才能确保说当我们在进行滑动的时候, 他会保持不变,那我们现在来试一试,这是不是就符合我们的一个呃预期了?我们正常看到的是不是这样的?那这个地方我们会发现底下这个地方他其实不应该是白色的,他应该和我们上面的颜色是一样的,对吧?那我们去找到底下的这个矩形 啊,我们看到镜头其实没有矩形,对吧?所以我们可以给他画一个矩形,或者说把我们的这个矩形的高度给他拉高啊,我们来试一试。那我们拉高后会存在个什么问题?是不是就 会把这个给遮挡住了?我们现在随便拿一下是不是给他遮挡住了?那这时我们应该怎么办?我们可以把它放到他的上面去,那最简单的把它放到他的上面去的办法是什么呢?是我们先剪切它, 这时候他不在了,对不对?然后我们再选中这个组建,在选中这个组建的基础之上,再把它粘贴回来,这个时候他就会在他的上面了啊?这个时候我们再把我们的这个矩形往下拖拽, 然后把这个按钮放在底部的这个中央, 这个时候我们再去看一下预览,那这样是不是就更符合我们的一个预期了呢?这是不是就是我们正常在 iphone 上看到了这个微信 啊?我们可以正常的进行一个拖动,他不会受到这个嗯,影响。 好,这个时候我们会发现,呃,我们的这个圆心其实有个 bug, 对吧?就是当我上面有消息,新消息的时候,底下并没有出现这个新消息的这个图标,所以我们得干嘛?我们是不是得把这个图标给他加上,那我们就给他做一次复制啊?然后把这个图标 稍微放大一些,这样我们便于我们拖动,然后在我们拖动一个元素的过程当中啊,我们可以,我们 我们是希望他能够保持一个和这个原来的这个元素保持同样的一个距离,这个这个水平或者垂直,对吧?那我们来看一下,当我们在拖动的过程当中,如果我们按住 shift, 我们就只能够在 这个水平的方向进行拖动,或者是只能在这个垂直的方向进行这个拖动,但是如果我不按师傅的时候,我就可以随意的拖动,对吧?这个其实和我们所有的这个呃,月薪相关的软件设计相关的软件都具备这样的一个能力哈, 好,那我们就把我们的这个拖动到我们的这个页面的这个下面来,这个时候大家可以想想我有什么快速的方法能够实现吗? 啊?我们刚才是不是说过他的属性里面有个位置,那我们就去看一下这个位置大概是在多少,我们可以知道这个点的位置是在一千四百六十一,对吧?那我是不是就可以选择他点击他,然后把他的高度也变成一千四百六十一,这个时候我们会看到他就到了最下面这个位置,啊? 啊?然后我们可以稍微调整一下他的这个高度啊,这个时候我们的一个页面啊,微信的这个首页是不是就完成了?