Hello大家好 ，我是本节课的讲师大冯 ，我们接下来讲一下HMI的概念 ，首页设计里面的首页卡片式模块 ，我们继续使用Figma ，来进行操作实操 ，那么紧接着上节课 ，那我们今天来做时间和导航的这个模块 ，为了减少时间 ，我这里直接就复制粘贴了这个模块 ，复制好之后，我们先来做一下时间 ，时间同样取一个200×200的形式 ，和左边的这个太阳是一样大的 ，200的圆居中，上面 ，同样也是50的高度 ，把它的信息换一下 ，16:20 ，pm ，也是居中 ，这里面要用大写 ，高度OK ，下面是04-20时间 ，星期几 ，

消息设置 ，然后这边也改动一下 ，会展中心 ，同样居中一下 ，给它调整好之后 ，这个先删除掉 ，我们来做一下时间上面的这个表盘 ，那表盘做新拟态的形式 ，也可以直接把它拽过来 ，稍微的会简洁一点 ，那最基础的颜色上面是已经有了 ，我们把这个颜色吸取它一下 ，这个颜色 ，

投影的颜色 ，先去试一下，看这个效果差不太多之后 ，我们再做一个套娃 ，进行一个内嵌的形式 ，那在内嵌之前 ，我们要去再加一个内阴影 ，那这个内阴影是和契合上面的部分 ，也是左上角和右下角 ，左上角这个颜色 ，我们可以直接去给它动一下 ，把这个投影颜色复制一下 ，

让它整个形体 ，是成为一个凹陷的状态 ，可能效果不太够 ，稍微的再白一点 ，和它区分的更明显一些 ，那做好这个底板之后 ，我们再去做里面钟表的样式 ，复制一层 ，150×150的尺寸 ，把它的这个描边关掉 ，再做一个140的尺寸 ，让它做凹陷 ，具体这个边 ，我们可以参照一下 ，真实的时钟的形式 ，可以去花瓣搜索一下 ，搜时钟 ，也可以看一下这个表盘 ，真实的形状 ，里边有数字是吧 ，

一圈是12个数字 ，然后有指针的形式 ，还有这个点 ，这个点也顺应的可以缩小 ，是每隔5分钟一个 ，那么我们稍微的给它简化一点 ，既然是一个概念的话 ，就不要在意真实里面的数字 ，只不是说取它整体的形状 ，让人看出来它是一个时钟 ，差不多就OK了 ，那么我们做一下 ，做一个6×6的圆 ，居中 ，包括下面也是，这个差一个像素 ，还是可以接受的 ，Ctrl+G打组，复制粘贴 ，接下来再复制粘贴 ，旋转45度角 ，旋转45度角 ，最后总体给它一个连集所有选项 ，

或者是暂时不给 ，也可以，这个根据后边的效果 ，我们再进行调整 ，那具体填充 ，当前这个颜色可能会差点意思 ，我们点一个渐变填充，那渐变的颜色 ，我们可以使用这个辅助的橙色 ，到这个橙色 ，但是效果不是特别好 ，那使纯色，也可以 ，或者再使用内阴影 ，也可以试一下 ，可以看一下整体的效果 ，给它一个点，这个具体里边的方向细调 ，这里面我就不细致的进行 ，在这里面我也就不再进行 ，

那么在这里面 ，我就不再进行更一步的 ，那在这里 ，我也就不进行更细致的处理了 ，我们再来去绘制一下中间这个表盘 ，那中间表盘 ，根据刚才我们实物图来讲的话 ，填充给它改成线性渐变 ，或者是这个镜像渐变 ，可以先试一下这个效果，和PS差不太多 ，角度，菱形这个效果 ，那么显然这个角度渐变 ，可能更加的符合我们这个效果是吧 ，可以看一下 ，确定一下当前这个时间，16:20 ，那么这个16 ，精准的对一下 ，大概是这个16点 ，那20跟它是重合的 ，我们需要换一个时间来 ，让它看得更加的顺一些 ，14:20 ，14点这个分针 ，然后 ，这个20大概是指向这里 ，具体的颜色我们可以再调整一下 ，