如何在Adob​​e XD中创建简历网站模板

在本 adobe XD 教程中，您将学习如何使用简历网站模板创建简历网页设计。您还将学习如何轻松地为其元素的某些部分设置动画。

您将在本 Adobe XD 教程中学到什么：

• 如何在 Adobe XD 中使用简历网站模板

• 如何屏蔽和分组对象

• 如何动画水平和垂直滚动

• 如何保存组件

• 如何创建悬停动画

• 如何创建交互式原型

有关如何调整或改进最终简历网页设计的更多灵感，您可以在GraphicRiver找到大量资源。

你需要什么：

您需要以下资源才能完成此 Adobe XD CV 设计：

• 琥珀 简历网站模板

• 一个年轻有魅力的男人照片的霓虹灯肖像

1.如何调整简历网站模板

步骤1

下载Amber简历网站模板并在 Adobe XD 中打开它。删除Amber（Light）画板并专注于剩余的Amber（Dark）画板。选择第一张图片中突出显示的组并将其删除。

第2步

现在，让我们对这个简历网站模板进行一些小调整。从主页部分开始。首先，使用 Michael ( #FFFFFF ) Williams ( #9013FE )从左上角更改 Amber 文本。

如下所示调整菜单中的间距，用Michael替换大的Amber文本并删除紫点。

复制PORTFOLIO按钮并将副本向右移动，在这两个对象之间留出50 px的间隙。选择新的按钮形状，禁用填充并添加一个白色边框。将Size设置为4并检查Inner Stroke按钮。将第二个按钮的文本更改为“HIRE ME”。

最后，用一张年轻有魅力的男人照片的霓虹肖像替换该背景图像。

第 3 步

移动到关于部分。您所要做的就是修改主要组件之间的间距，如下图所示。在突出显示的区域将组件之间的间距调整为100 像素。这将为您的最终设计增加一点一致性，使其更容易在眼睛上。

第4步

移动到中间部分并将其重命名为Stats。首先，调整顶部和底部间距，如第一张图片所示。

为每个文本框添加一个圆角矩形框并将角半径设置为20。确保所有这些圆角矩形之间的间距均匀，并将每个圆角矩形内的文本内容居中。

第 5 步

移动到博客部分并调整间距，如第一张图片所示。打开该博客网格组并仅保留两个博客网格项组。如下图所示调整样式。

移动到投资组合部分，只调整间距，如第二张图片所示。对“联系表”部分执行相同的操作，并将背景图像替换为年轻有魅力的男人照片的相同霓虹肖像。

第 6 步

将设计的所有部分移到另一个下方，并相应地调整画板的高度。查看“图层”面板内部并排列和重命名您的组，如下所示。这将使您在进行原型设计时更容易定位和连接对象。

单击画板的名称并关注属性检查器。从Scrolling菜单中选择Vertical并将Viewport Height设置为1080。

2.如何在简历网页设计的主页中创建悬停动画

步骤1

选择矩形工具 (R)并创建一个136 x 2 像素的形状。使用智能指南轻松放置您的形状，如下图所示，然后转到属性检查器。使用该复选框禁用现有边框，然后单击填充颜色井并将颜色更改为#9025FB。

使用相同的工具，创建一个136 x 31 像素的形状，并完全按照第二张图片所示放置。此矩形的外观属性并不重要，因为您将要将此形状用作蒙版。

选择这个矩形以及Michael Williams的一段文字和紫色的细线。右键单击您的选择并转到带有形状的蒙版（Shift-Command-M）。

第2步

现在，让我们创建第一个悬停动画。确保您的蒙版组仍处于选中状态，将注意力集中在属性检查器上，然后单击该组件部分的加号按钮。再次单击那个加号按钮并添加一个Hover State。确保它保持选中状态并返回到您的画板。

双击您的组，直到您看到那条紫色细线。选择它并将其拖动到文本下方，如第二张图像所示。从属性检查器返回到组件部分并选择默认状态。

在您的组件仍处于选中状态的情况下，从设计模式切换到原型模式。将Easing设置为Ease-Out并将Duration设置为0.3 seconds。最后，单击屏幕右上角的预览按钮来测试悬停动画。

这就是您的动画的外观。

第 3 步

移动到菜单中的第一个文本元素以创建新的悬停动画。选择椭圆工具 (E)并创建一个10 px的圆圈。如第一张图片所示放置它并将填充颜色设置为#9025FB。

切换到矩形工具 (R)，创建一个63 x 10 像素的形状并将其放置在第二个图像中。您可以将其不透明度降低到50% 左右，以便轻松地将您的形状放置在正确的位置。选择这个矩形以及紫色圆圈和位于后面的一段文字并将它们遮住（Shift-Command-M）。

第4步

确保在上一步中制作的蒙版组仍然被选中，并将其变成一个组件。添加一个悬停状态并选择它。

双击您选择的组，直到看到那个紫色圆圈，然后将其向上拖动，如第二张图所示。完成后，返回Default State。

从Design切换到Prototype模式，将Easing设置为Ease Out并将Duration设置为0.2 seconds。重复相同的技术来为菜单中的其余元素设置动画。

这就是悬停动画的外观。

第 5 步

使用矩形工具 (R)创建一个690 x 350 像素的形状并将其放置在第一张图片中。

选择文本工具 (T)并添加“我的名字是” 和“我的使命是设计” 的文本片段。如第二张图所示放置它们并将填充颜色设置为白色。

切换到椭圆工具 (E)，创建一个50 px的圆圈，用#9025FB填充它，然后将其放置在第二张图所示的位置。

选择在此步骤中制作的四个元素以及Michael和Lorem Ipsum文本片段并将它们分组（Command-G）。

第 6 步

继续关注上一步中创建的组。选择“我的名字是” 文本并将其拖动到画板的左边缘旁边，然后选择“我的任务是设计” 文本并将其拖动到右边缘旁边。最后，选择那个紫色圆圈并将其向上移动，如下图所示。

第 7 步

继续关注那个群体。选择红色矩形并将其置于组的其他元素之上（ Shift-Command-] ）。选择和移动这些对象的一种更简单的方法是通过“图层”面板。

重新选择这个红色矩形以及该组中的其余元素并屏蔽它们（Shift-Command-M）。将此蒙版组变成一个新组件。

第 8 步

为您的最新组件添加一个悬停状态，选择它并移动到您的画板。选择“Lorem Ipsum”段落并将其不透明度降低到0%。选择紫色圆圈和位于画板外的两条文本，并将它们带到原始位置，如第二张图所示。

完成后，返回属性检查器并为您的组件选择默认状态。

从Design模式切换到Prototype模式，将Easing设置为Ease In-Out并将Duration设置为0.3 seconds，然后您就可以测试悬停动画了。

这就是悬停动画的外观。

第 9 步

复制您的PORTFOLIO按钮并将副本放在HIRE ME按钮下方，如第一张图片所示。将这个新按钮的文本更改为“让我们设计”。

使用矩形工具 (R)创建一个140 x 35 像素的形状并将其放置在第二个图像中。选择这个矩形以及HIRE ME和LET'S DESIGN按钮并遮盖它们（Shift-Command-M）。

第 10 步

确保您的HIRE ME按钮仍处于选中状态并将其转换为组件。为这个新组件添加一个Hover State并选择它。将LET'S DESIGN按钮拖到 HIRE ME按钮的顶部，然后返回到组件的默认状态。

从Design模式切换到Prototype模式，将Easing设置为Ease Out并将Duration设置为0.3 seconds，然后您可以测试悬停动画。

这就是悬停动画的外观。

3.如何在此简历网页设计中创建剩余的悬停动画

步骤1

专注于“关于”部分的第一张照片。调整该紫色矩形的大小以适合照片的尺寸，然后将“更多”按钮居中，如第二张图像所示。

选择这两个元素以及位于背面的照片并将它们变成一个新组件。转到图层面板并关闭紫色矩形和更多按钮的可见性。

为这个组件添加一个Hover State并选择它。返回“图层”面板并重新打开紫色矩形和“更多”按钮的可见性。返回默认状态。

从Design模式切换到Prototype模式，将Easing设置为Ease Out并将Duration设置为0.3 seconds，然后您可以测试悬停动画。

这就是悬停动画的外观。

第2步

选择EXPLORE按钮并将其变成一个组件。为这个新组件添加一个Hover State并选择它。将该圆角矩形的填充颜色更改为#9025FB，然后返回到组件的默认状态。

从Design模式切换到Prototype模式，将Easing设置为Ease Out并将Duration设置为0.3 seconds，然后您可以测试悬停动画。

这就是悬停动画的外观。

第 3 步

关注STATS部分的第一个元素。选择带有圆角矩形的文本并将它们变成一个组件。为这个新组件添加一个Hover State并选择它。将该圆角矩形的填充颜色更改为#9025FB，然后返回到组件的默认状态。

从Design切换到Prototype模式，将Easing设置为Ease In并将Duration设置为0.2 seconds，然后您可以测试悬停动画。

这就是悬停动画的外观。

第4步

关注BLOG部分的第一个Blog Grid 项目。把它变成一个组件，添加一个Hover State并选择它。将该文本背景的颜色更改为#9025FB并将箭头按钮背景更改为黑色 ( #000000 )，然后返回到组件的默认状态。

从Design模式切换到Prototype模式，将Easing设置为Ease Out并将Duration设置为0.2 seconds，然后您可以测试悬停动画。对第二个Blog Grid Item进行相同的更改。

选择两个Blog Grid Item组件，复制它们，然后向右拖动副本，如第三张图所示。

这就是悬停动画的外观。

第 5 步

关注PORTFOLIO部分的文本菜单。使用矩形工具 (R)，在“全部” 文本后面添加一个紫色矩形。选择矩形和文本并将它们变成一个组件。选择那个紫色矩形并将其不透明度降低到0%。为您的组件添加一个悬停状态并选择它。重新选择那个紫色矩形并将不透明度增加到100%。返回到组件的默认状态。

从Design模式切换到Prototype模式，将Easing设置为Ease In并将Duration设置为0.1 seconds，然后您就可以测试悬停动画了。从此菜单中为其余元素添加相同类型的悬停动画。

这就是悬停动画的外观。

第 6 步

专注于您的投资组合部分的第一张照片。调整该紫色矩形的大小以适合照片的尺寸，然后将按钮居中，如第二张图像所示。

对于悬停动画部分，您基本上必须遵循“关于”部分中用于照片的相同技术。

这就是悬停动画的外观。

第 7 步

关注“联系”部分的社交媒体按钮。选择 Facebook 按钮并将其变成一个组件。为这个新组件添加一个Hover State并选择它。将此形状的填充颜色更改为#3B5998，然后返回到组件的默认状态。

从Design切换到Prototype模式，将Easing设置为Ease In-Out并将Duration设置为0.2 seconds，然后您可以测试悬停动画。

这就是悬停动画的外观。将#1DA1F2用于 Twitter，将#C8232C用于 Pinterest。

第 8 步

专注于FOOTER部分的文本菜单。选择Home按钮并将其变成一个组件。为这个新组件添加一个Hover State并选择它。将文本填充颜色更改为#3B5998，然后返回到组件的默认状态。

从Design切换到Prototype模式，将Easing设置为Ease In-Out并将Duration设置为0.2 seconds，然后您可以测试悬停动画。重复相同的技术来为该菜单中的其余元素设置动画。

这就是悬停动画的外观。

4.如何将您的设计变成交互式原型

步骤1

确保原型模式仍然处于活动状态，然后从FOOTER部分选择该Page Topper 。单击该蓝色箭头按钮并将其与“家庭”组连接。将Easing设置为None并将Duration设置为0.4 seconds，然后您可以测试悬停动画。单击此按钮将向上滚动到设计的HOME部分。

第2步

继续关注FOOTER部分并从菜单中选择Home组件。单击该加号按钮并将您的组件与Home组连接。保持Easing和Duration属性不变。默认情况下，Adobe XD 将使用应用于先前原型的相同属性。

第 3 步

从HOME部分中选择Contact组件并将其与CONTACT组链接。

第4步

从菜单中选择其余组件并将它们与相应的组连接。

第 5 步

从原型切换到设计模式。关注BLOG部分中的Blog Grid Item组。使用矩形工具 (R)创建一个1440 x 554 像素的形状并将其放置在第一张图片中。

选择这个新形状以及四个博客网格项目组并将它们遮住（Shift-Command-M）。

第 6 步

单击画板的名称将其选中，然后使用Command-D键盘快捷键添加三个画板副本，如下图所示。

第 7 步

专注于博客部分。在接下来的步骤中，您将把Blog Grid组变成一个水平滚动的菜单。这将要求每个画板与菜单中水平滚动的不同阶段相匹配。

从第二个画板中选择博客网格组，按住Shfit键并将您的选择拖到左侧，如第一张图片所示。或者，您可以转到属性检查器并在X框中输入-181 。

移动到第三个画板，选择“博客网格”组并将其拖到左侧，如第二个图像（X：-791）所示。最后，从第四个画板中选择Blog Grid组并将其移动到-1000，如第三个图像所示。

第 8 步

切换回原型模式。转到第一个画板并关注BLOG部分的分页按钮。选择第二个圆圈并将其与第二个画板连接起来。将Easing设置为None并将Duration设置为0.2 seconds。

第 9 步

继续关注第一个画板上的分页按钮。将第三个圆圈与第三个画板连接起来，将第四个圆圈与第四个画板连接起来。

从图层面板中选择整个博客网格组并将其与第四个画板链接。将Trigger更改为Drag并将Easing设置为None。这将允许您滚动到菜单的右端。

第 10 步

移动到第二个画板并专注于那些分页按钮。首先，相应地更改颜色，然后将灰色圆圈与相应的画板链接。记得将Trigger改回Tap，将Easing设置为None并将Duration设置为0.2 Seconds。

第 11 步

移动到第三个画板，相应地更改那些分页按钮的颜色，然后将灰色圆圈与相应的画板链接。对第四个画板做同样的事情。

从第四个画板中选择Blog Grid组并将其与第一个画板链接。将Trigger更改为Drag并将Easing设置为None。这将允许您滚动回菜单的左端。

恭喜！您的简历网页设计已完成！

这是它的外观。我希望您喜欢本教程，并且可以应用这些技术来创建您自己的 Adobe XD CV。不要犹豫，在评论部分分享您的最终结果。