UI设计教程：手把手教你撸一个网易云音乐UI界面【Pixso】

时间：2023-09-03 15:06:01 | 来源：网站运营

时间：2023-09-03 15:06:01 来源：网站运营

UI设计教程：手把手教你撸一个网易云音乐UI界面【Pixso】：Hello 各位好，我是皮仔 @Pixso协同设计 。

前两天在逛本站的时候，看到有位网友提了一个问题，想知道「网易云音乐的播放页是如何制作出来的」，本着「有求必应」的原则，皮仔稍微研究了下，花了一会功夫就在 Pixso 中复刻了一版。

制作过程其实并不复杂，更花时间的反而是写如何制作出同样效果的教程鸭~所以，如果这篇 UI 教程帮到了你，请不要忘记双击屏幕点赞鸭，皮仔在此先谢过各位。

为证明皮仔不是在吹牛( •̀ ω •́ )✧，皮仔使出了好几年没用过的「设计技能」，在 Pixso 中参照原版的界面，做了一个勉强还能接受(✿◡‿◡)的版本，如下图右侧的图片。

作品拆解

实际上每当我们拿到一张设计作品的时候，可以问自己一个问题，「这张图是由哪些元素组成的」，逐层拆解出组成图片的所有元素或图层，确定好需要的元素后，依次制作出每个元素，最后将元素「拼装」在一起，就能得到想要的设计作品。

题主想做的网易云音乐播放界面，组成界面的元素如下，主要有：模糊背景、各种 icons 图标、CD、专辑封面、唱臂、底部的半透明图层。

拆解完组成作品的主要元素后，我们就可以用在线设计工具 Pixso 开始做图啦~

绘制过程

在浏览器打开 Pixso 官网，进入工作台新建一个 Pixso 文件，首要的是创建一个和原版图片类似大小的画板。

点击左上角的「画板」，接着在右侧的「设计」面板，选择「iPhone SE」，就能创建一个空白的画板。

创建好画板后，开始制作底层的模糊背景，我们需要在画板中插入一张图片。

点击 Pixso 右上角的插件图标，打开 Pexels 图库，在图库中选择一张自己喜欢的竖版图片，插入画板中。

插入的图片比例如果与画板不一致，我们可以裁剪图片，让图片的比例适配画板的尺寸。

双击插入的图片，右侧会弹出图片的设置面板，点击「适应」右侧的小三角，将「适应」更改为「裁剪」，图片四周就会出现裁剪的控制条，将图片裁剪为符合画板尺寸的比例。

图片完成裁剪后，按住 Alt/Option 键，并用鼠标拖拽图片，快速复制出一张相同的图片，放在画板旁边，等会需要用到。

选中画板中的图片，点击右侧面板「效果」的加号 + ，默认会给图片添加「外阴影」，但这不是我们想要的，点击「外阴影」，将「外阴影」更改为「高斯模糊」。

点击「高斯模糊」左侧的「效果设置」，在弹出的设置面板，提高模糊数值的大小。

伴随着模糊值的提高，会带来一个小问题，图片边缘会出现虚化效果，影响最终的观感，对于这个问题，我们可以采用如下方法解决：

双击选中图片，拖拽图片左上和右下的锚点，放大图片，配合 Pixso 自动启用的「超出画板不显示」，随着图片放大，图片四周虚化的边缘就会被隐藏起来，问题也就得到了解决。

制作好页面背景后，就可以着手制作页面上其他的元素啦~

点击左上角的「形状」工具，选择「圆形」，按住 Shift 键，在画板中插入一个圆形，点击右侧面板的「填充」，将圆形的填充色更改为白色，并设置透明度，让圆形看起来更通透。

同样地再插入一个圆形，点击右侧的「填充」打开拾色器面板，可以用吸管工具吸取原版图片中代表 CD 的元素的颜色。

为了让深灰色的圆形与下方的半透明圆形产生层次感，我们可以给深灰色的圆形添加阴影效果。

选中深灰色的圆形，点击右侧面板「效果」的加号 + ，给圆形添加「外阴影」效果，点击阴影前面的效果选项按钮，可以适当调整一下阴影默认的参数，譬如偏移方向、模糊程度、扩展和阴影的透明度。

完成前面的操作后，我们还要再添加一个圆形，用来制作音乐的专辑封面。

将前面复制出来的背景图片移动到最顶层，并覆盖刚创建的圆形，同时选中图片和圆形，右击选择「创建蒙版」，将矩形的背景图转换为圆形。

将做好的圆形图片放在页面的最顶层，这样就搭建好了页面的基本框架。

接下来就是给页面添加文本内容和各种 icons 图标，添加 icons 图标时，可以点击 Pixso 右上角的「插件」，从 Pixso 内置的两个矢量素材库 iconfont 或 IconPark 插入图标。

在制作页面顶部的状态栏时，可以点击左侧面板的「资源」选项卡，从内置的组件库中插入现成的状态栏。

以其中的 WeUI 纯色组件库为例，点击组件库右上角的下拉菜单，将「图标」切换为「导航栏」，从中选择 iPhone 的导航栏组件并插入画板中。

选中导航栏组件顶部的时间电量模块，按住 Alt/Option 键并拖拽鼠标，复制出一份同样的模块，移动到前面做好的页面上方，稍微修改一下模块的填充颜色和文字大小，就能快速做好页面顶部的状态栏。

至此，除了原图中的「唱臂」，题主想要制作的网易云音乐播放界面，我们就可以说是基本完成了。

Pixso 资源社区

看完界面的整个绘制过程，如果你觉得步骤比较繁琐，或是没有充足的时间来制作类似的界面，可以前往 Pixso 资源社区获取现成的模板，模板提供了音乐 App 不同页面的高保真原型，其中就包含了题主想做的音乐播放页面，所有元素都可以自由编辑，对模板稍加修改，就能得到属于自己的设计作品。

✅ Pixso 资源社区简介

Pixso 资源社区，是在线协同设计软件 Pixso 推出的设计社区，提供了 UI 设计经常会用到的各类素材和模板，素材模板不仅质量高，关键还是完全免费的~

素材：矢量图标、插画素材、emoji 表情、3D 图标、样机素材
模板：多款移动端 UI 模板、网页端 UI 模板、国内外众多大厂的 UI 设计规范和设计系统

对于 Pixso 资源社区的模板或素材，可以点击右上角的「收藏」或「复制」，保存到自己的账号中，方便之后需要用到的时候可以随时找回。

将模板复制到个人账号后，点击「打开文件」可以直接调用 Pixso 自带的编辑器，打开刚复制的模板，Pixso 编辑器支持在线编辑模板，且所有编辑操作会自动保存到云端。

每一个 UI 模板包含了多个不同的页面——开屏页、注册页、主页、用户页、搜索页等等，页面中的所有元素都是可以自由编辑的。

点击左侧的「组件」选项卡，可以看到 UI 模板中用到的所有组件，组件可以在文档的多个页面复用，如果你在模板的基础上创建了新的页面，可以优先从中挑选组件作为页面元素，保证整体风格的统一。

模板自有的组件如果不能满足需求，可以切换到「资源」选项卡，调用来自其他组件库的组件，这一点大大提升了 UI 模板的可拓展性，将模板原有组件进行替换，就能得到另外一套不同风格的模板。

对于模板中用到的位图素材，如果想更换为自己更喜欢的图片，可以点击右上角的「插件」，打开内置的 Pexels 图库插件，选中需要更换的图片，点击 Pexels 插件中的图片就能一键更换。

多个模板不同的页面设计，既可以给我们的设计提供灵感，也可以将其中的一些组件复制到自己的项目中，稍加修改就能直接使用，减少不必要的重复劳动。

Pixso 个人用户完全免费

Pixso 目前对个人用户免费开放，现阶段前往 Pixso 官网注册账号，可以享受多项权益，包含：无限云端空间容量、无限协作人数等等，还有众多实用的隐藏福利，等你来发现~




码字不易，如果对你有帮助的话，请别忘了赏个【三连】或是【关注】我哦，关注不迷路！

我是皮仔，那我们下次再见咯。