Hello大家好，我是本节课的讲师大冯 ，今天我们讲一下 ，HMI概念界面的娱乐系统 ，那么在这节课上面 ，我们主要还是以实操为主 ，首先我们来打开这个Figma ，那打开Figma之后 ，我们先建立一个 ，交互原型 ，1920×720的尺寸 ，那在最左边我们需要什么 ，我们需要这个首页和这个全部应用 ，这个在前一节课上已经讲过了 ，下面是什么 ，下面是这个语音 ，我修改一下 ，接下来在重要的区域 ，是什么呢，重要区域 ，第一个歌曲名字 ，歌手的名字 ，歌词 ，歌词的区域也稍微的给它大一点点 ，歌词的下面是什么 ，是这个进度条是吧 ，同时还有对应的播放 ，当前进度是在哪里 ，简单的画一下这个分区 ，就不详细的画了 ，下面还有几个icon ，

对应的 ，对应的这几个icon ，把这边也标注一下 ，在这里可以放置一个喜欢或者收藏 ，这都是一个意思 ，最右边，歌单列表 ，这个是什么 ，上一曲 ，还有下一曲 ，播放/暂停 ，一共是5个icon ，那整体大概是这么一个布局 ，

是车载的娱乐系统 ，那么我们首先根据这个交互原型图 ，可能是特别低的低保真原型图 ，我们去设计一个正式点的界面 ，那么在背景这一块 ，我首先已经做好了 ，接下来我们就是从首页 ，和全部应用 ，这里面开始做起 ，首页这里面的这个图标icon，给它一个70 ，大致给它分一个区 ，还有像语音，语音这里面 ，我提前设计好了这个图形 ，在这里调整一下 ，让它出这个小尖尖就可以了 ，颜色这里面直接使用这个辅助的文字色 ，接下来给它调成渐变的模式 ，在最中间这边给它打一个点，100% ，那两边各0% ，收进去，一定要收进去 ，会增加这个设计的感觉 ，你要感觉这个颜色太重的话 ，

给它调整一下整体的透明度 ，这个都是可以的 ，然后稍微的缩小一点 ，宽度也确定一下 ，这个宽度调整为128 ，对齐一下 ，然后我们首先这个首页这个部分 ，它一个16的圆角 ，具体颜色可以吸一下 ，这个颜色，最上面这个颜色就可以了 ，我们可以后期再调 ，那么我们接下来做一下 ，新拟态的这个风格 ，新拟态的风格特点就是 ，左上角和右下角 ，这个都是有投影的存在 ，是整体处于一个凹起来的情况 ，那么在前一节课上 ，已经跟大家讲过了 ，这里面直接就可以操作 ，首先给它一个描边 ，线性渐变，线性渐变的描边 ，然后统一调整到白色 ，这个1的描边就可以了 ，不用太多 ，让它有一个厚度的质感 ，接下来在效果这里面加两层投影 ，那第一层投影可以使用这个-6 ，你可以看到它是在左上角 ，模糊可以稍微的大一点，给到10 ，甚至你可以给它到20也可以 ，颜色就是直接还是吸取一下这个蓝色 ，

给它一个 ，带一点点蓝的这个白就可以了 ，我们来看一下整体这个效果 ，可能稍微有点白了 ，降低一下这个透明度 ，这个效果是不是大概就起来了 ，调整好左上角之后 ，我们再调整一下这个左下角 ，颜色找一个页面最深的蓝色，吸取一下 ，稍微的让它整体大一点 ，可能效果不太够 ，那 ，模糊给它调整到20，试一下 ，那既然 ，既然这个右下角也是20 ，左上角也得是这个20 ，要让它俩整体的颜色保持一致 ，就可以了 ，调整好之后 ，直接 ，给到它一个40的间距就可以了 ，那么我们来去画一下这个图标 ，这里面直接使用这个三角形也可以 ，看个人习惯 ，没有什么太强制性的要求 ，

做好两个图形之后 ，我们来给它合并一下 ，连集所有选项 ，接下来就是给房子掏一个洞 ，进去 ，可能稍微有一点 ，比例不太合适 ，然后看一下这个比例 ，可以后续再进行调整 ，描边，圆角 ，稍微给一点点圆角就可以了 ，颜色选择这个文字色 ，可以给它稍微的降低一点点这个颜色 ，具体如果觉得有什么好看的颜色 ，可以自己在后续进行调整 ，这个并没有什么强制性的限制 ，全部应用 ，给它变成 ，连集所有选项，描边 ，去掉填充 ，同样这个40% ，

可以使用3 ，看一下 ，感觉2稍微的有一点点小了 ，也是居中对齐一下 ，可以稍微的缩小一点点 ，竖线这里面直接可以使用线性渐变 ，颜色直接吸它的就OK了 ，中间，在中间的这个部位 ，打上一个点，这个0% ，10%的透明度不让它 ，有一个线进行分割就可以了 ，同样偷懒了 ，把右边这个状态栏 ，我直接给拖了过来 ，那么接下来像这个底板完成之后 ，我们再打一下歌手的名字 ，和歌曲的名字 ，那么我们打一下 ，当前这个最火的歌曲 ，叫孤勇者 ，陈奕迅的这个歌曲，最近还是挺火的 ，他的歌词打一下 ，我们搜索一下这个歌词 ，

看看这歌词，这个稍微要长一点点 ，可以看到像这种短的 ，