Axure 9 实战案例，基本元件的应用 1，用矩形与标题设计视频封面

前言

Hello，大家好！欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>

本专栏旨在以实战案例的角度，讲解Axure 9 的基础操作，帮助大家在一个个的案例中，学习产品原型的设计思维，带你快速进入实战阶段。

这里专讲有特色、有难点、有实用的Axure实战案例，适合1岁左右的产品经理，或Axure刚入门不久的同学，希望在接下来的教程中，与大家一起学习成长。

随着抖音的出现，带火了视频剪辑。一段流量火爆的短视频，离不开一个吸人眼球的视频封面。专栏的第一课时，为大家带来一个有趣的教程，就是用Axure来设计一个视频封面。

完成图

第一步：插入或设计背景图

如果有合适的现成的背景图素材，可以直接拖入Axure中，通常背景素材的像素都较大，Axure会提示是否要优化，优化是会掉帧的，我们选择否，视频封面当然要越清晰越好了；然后点击右键，选择裁剪图片，将素材剪裁成封面要求尺寸。

如果没有现成素材，我们可以设计一个简单的渐变背景图。打开Axure 9，拖入一个矩形2，将x和y都设为0，H和W设置为要求尺寸，这里我们以1600×900为例。并将画布缩放至80%，这样设计起来比较方便。

设置尺寸为1600×900，缩放画布为80%

点击工具栏的填充颜色，选择线性，设置矩形的渐变色，然后点击翻转图标，将渐变方式从垂直渐变翻转成水平渐变，拖动矩形上的渐变线的两端，调整到合适的渐变方向。

点击填充颜色，设置为线性渐变

翻转成水平渐变，拖动渐变线改变渐变方向

第二步：设计标题

我们首先拖入一个一级标题，用作为大标题，然后选择一种字体，改变字体大小，再改变字体颜色，基本设置好了之后，输入我们想要的文字。

拖入一级标题，设置字体、大小、颜色

接着拖入一个三级标题，用作副标题，然后依照大标题一样的操作，修改字体、大小、颜色，接着输入正确的文字；设置副标题的长度与大标题的长度成一样（这里是770），再调整行距为60。

设置长度与行距

选中大小标题，设置为左侧对齐，将大小标题组合起来，然后拖动标题组合，使标题中部对齐于背景图。

第三步：设计LOGO

首先调整一下标题的水平位置，给LOGO留出空间，然后拖入一个矩形2，填充颜色为白色，修改大小为500×500，接着拖动矩形调整到合适位置。

拖入矩形，设置为白色500×500

再拖入我们的LOGO或视频截图，修改为合适尺寸（这里是480），拖动对齐白色矩形，然后将LOGO部分组合起来，我们大概看一下，对标题和LOGO进行局部调整，比如给矩形和LOGO设置圆角。

拖入LOGO或视频截图

第四步：美化字体

选中大标题，点击右侧栏样式里的文字阴影，勾选阴影，设置X和Y均为5，我们给大标题加一个阴影；适当调整背景颜色和不透明度，让标题更立体。再用同样的方法，给副标题加阴影。

设置大标题的文字阴影

结语

通过前面四步的设置，就可以快速设计出一个简易大方的视频封面了。完成后，就可以点击“文件_导出xxx图片”，导出图片了。

点击“文件_导出xxx图片”导出图片

在线预览

效果图在线预览：https://u.pmdaniu.com/L8A5p