虎课网为您提供字体设计版块下的XD-教育类视频播放页设计图文教程，本篇教程使用软件为XD 1.0，难度等级为中级拔高，下面开始学习这节课的内容吧！

本篇教程学习的是XD-教育类视频播放页设计，喜欢的一起来学习吧。

学完本课内容后，同学们可以根据下图作业布置，在视频下方提交作业图片，老师会一一进行解答。

那我们开始今天的教程吧。

1.本节课先介绍一下视频播放页的形式，然后是形式选择，最后进行界面设计，视频播放页有直播视频和录播视频两种播放形式，也可分为竖全屏和横全屏两种，本课主讲的是视频播放页中的直播页设计，功能相对单一，仅保留评论和放大功能。

2.直播页的特点就是互动性强、实时互动、不可跳转时间，交互方面注重互动性，录播相当于看电影、电视剧一样的效果，注重的是观看操作，最大的区别就是直播是固定时间点，录播时间和倍速可调。

3.快手直播是竖屏的直播案例，右边是网易云课堂，一些教育类直播课程的，人们习惯采用横屏。

4.互动区域：文字形式有纯文字类型，像第一张图片，还有文字+底框，可以是一部分文字在底框里面，一部分在外面，输入法页有两种，一个是全部上调，包括一些消息也会随着键盘升起而上弹，还有一种是覆盖内容，左边的即时性比较高。

5.还有一个消失点和进入点，可以给它设置不同的透明度来展示消失，包括它的滚动速率也可以设置，消息多的时候可以查看历史消息，这种一般有几种样式，一种是不支持查看，第二个是上下滑动，有个临界点，还有高亮显示聊天区域，有新消息给它一个提醒。

6.打开【XD】，【Ctrl+D】新建画布，找一张图片，占比多一些，找一个组件粘贴进来，给它【顶对齐】，【高度】调整为【280】。

7.【Ctrl+D】复制一层，选择这个图片和矩形，按住【Ctrl+Shift+M】做一个蒙版，然后释放顶层。

8.去掉【边界】，填充【黑色】，降低【透明度】，把播放按钮放上来，【居中】显示，按住【Ctrl+Shift+D】把布尔运算解除，椭圆填充【黑色】，按钮是白色。

9.下边有一个卡片介绍，画一个【矩形】，描边为【10】，按住【Shift+上键】给它移动10个单位，去掉【边界】，放上标题，下面放一些时间安排，把时间轴复制过来，【Ctrl+G】打个组。

10.【取消网格编组】，给它编辑一下，改成即将开课的状态，颜色可以调整的艳丽一些，给人一种紧凑感，进入聊天区界面，【Ctrl+D】复制一份。

11.高度为【210】，填充内容，【Ctrl+Shift+右中括号】放到最上面，选中它们两个【Ctrl+Shift+M】，标题改成正在直播。

12.添加一些标签，做一个分割，加一个返回键和全屏键，在【插件中心】搜索插件，调整它的大小和粗细，一般图标线条单位为【2】。

13.【Ctrl+D】复制返回键，旋转45°，调整5个单位，【Ctrl+D】复制一份，左右对称，再【Ctrl+D】上下对称，打个组，把它放到右下角，接下来完成对话区域，有一个头像，大小为【22】。

14.后面是聊天内容，颜色浅一点，降低【不透明度】，后面可以添加具体的文案，最下面是输入区域，高度为【80】，【Ctrl+D】复制一个矩形，做到输入框里，左边放一个按钮，右边放一个发送的飞机，进行调整。

15.同学们记得上传自己的作业哦！

以上就是XD-教育类视频播放页设计图文教程的全部内容了，你也可以点击下方的视频教程链接查看本节课的视频教程内容，虎课网每天可以免费学一课，千万不要错过哦！