adobe xd
在本Adobe XD教程中，您将学习如何使用简历网站模板创建简历网页设计。 您还将学习如何轻松对其元素的各个部分进行动画处理。
您将在此Adobe XD教程中学到什么：
- 如何在Adobe XD中使用简历网站模板
- 如何遮罩和分组对象
- 如何设置水平和垂直滚动的动画
- 如何保存组件
- 如何创建悬停动画
- 如何创建交互式原型
有关如何调整或改善最终简历网页设计的更多启发，您可以在GraphicRiver中找到大量资源。
您需要什么：
您需要以下资源才能完成此Adobe XD CV设计：
- 琥珀简历网站模板
- 霓虹灯肖像的年轻有魅力的男人照片
1.如何调整简历网站模板
第1步
下载Amber简历网站模板，然后在Adobe XD中打开它。 删除琥珀色（浅色）画板，然后将焦点放在其余的琥珀色（深色）画板上。 选择第一个图像中突出显示的组，然后将其删除。
第2步
现在，让我们对该简历网站模板进行一些小的调整。 从“ 主页”部分开始。 首先，使用Michael（ #FFFFFF ）Williams（ ＃9013FE ）从左上角更改Amber文本。
如下所示调整菜单中的间距，将大的琥珀色文字替换为迈克尔，然后删除紫色的点。
复制PORTFOLIO按钮，然后将副本移到右侧，在这两个对象之间留出50 px的间距。 选择新的按钮形状，禁用“ 填充”并添加白色边框 。 将“ 大小”设置为4并选中“ 内部描边”按钮。 将第二个按钮的文本更改为“ HIRE ME” 。
最后，用一张年轻有魅力的男人照片的霓虹灯肖像替换该背景图像。
第三步
移至“ 关于”部分。 您要做的就是修改主要组件之间的间距，如下图所示。 在突出显示的区域中，将组件之间的间距调整为100 px 。 这将为您的最终设计增加一些一致性，从而使外观更容易。
第4步
移至“ 中间”部分，并将其重命名为Stats 。 首先，如第一幅图所示调整顶部和底部的间距。
为每个文本框添加一个圆角矩形框架，并将“ 转角半径”设置为20 。 确保所有这些圆角矩形之间的间距均匀，并将文本内容居中放置在每个圆角矩形内。
第5步
移至Blog部分，并调整间距，如第一幅图所示。 打开该Blog Grid组，仅保留两个Blog Grid Item组。 如下所示调整样式。
移至“ 投资组合”部分，仅调整间距，如第二幅图所示。 对“ 联系表单”部分执行相同的操作，并用一张年轻有魅力的男人照片的霓虹灯肖像替换背景图像。
第6步
将设计的所有部分都移到另一部分，并相应地调整画板的高度。 在“ 图层”面板中查看，并如下所示排列和重命名组。 当您移至原型时，这将使您更轻松地查找和连接对象。
单击画板的名称，然后将焦点放在“ 属性”检查器上。 从“ 滚动”菜单中选择“ 垂直” ，然后将“ 视口高度”设置为1080 。
2.如何在简历网页设计的主页中创建悬停动画
第1步
选择矩形工具（R），然后创建136 x 2像素的形状。 使用智能向导，轻松放置您的形状，如下图所示，然后转到“ 属性”检查器。 使用该复选框禁用现有的边框 ，然后单击“很好地填充颜色”并将颜色更改为＃9025FB 。
使用相同的工具，创建一个136 x 31 px的形状，并将其放置与第二个图像中所示的位置完全相同。 该矩形的外观属性并不重要，因为您将要使用此形状作为遮罩。
选择此矩形以及Michael Williams的一段文字和紫色细线。 右键单击您的选择，然后转到带有形状的蒙版 （ Shift-Command-M ）。
第2步
现在，让我们创建第一个悬停动画。 确保仍选择蒙版组，将焦点放在“ 属性”检查器上，然后从“ 组件”部分单击加号按钮。 再次单击该加号按钮并添加一个悬停状态 。 确保它保持选中状态并返回到画板。
双击您的组，直到看到那条紫色细线。 选择它并将其拖到文本下方，如第二幅图像所示。 从属性检查器返回到“ 组件”部分，然后选择“ 默认状态” 。
在仍选择组件的情况下，从“ 设计”模式切换到“ 原型”模式。 将“ 缓动”设置为“ 缓 出” ，将“ 持续时间”设置为0.3秒 。 最后，单击屏幕右上角的预览按钮以测试您的悬停动画。
这就是动画的外观。
第三步
从菜单移至第一个文本元素，以创建新的悬停动画。 选择椭圆工具（E）并创建一个10像素的圆圈。 如第一幅图像所示放置它，并将填充颜色设置为＃9025FB 。
切换到矩形工具（R） ，创建一个63 x 10 px的形状并将其放置在第二个图像中。 您可以将其不透明度降低到大约50％，以轻松地将形状放置在正确的位置。 选择此矩形以及紫色圆圈和背面的文字，并对其进行遮罩（ Shift-Command-M ）。
第4步
确保在上一步中创建的蒙版组仍处于选中状态，并将其变成组件。 添加一个悬停状态并选择它。
双击所选的组，直到看到该紫色的圆圈，然后将其向上拖动，如第二幅图像所示。 完成后，返回默认状态 。
从设计模式切换到原型模式，将“ 缓动”设置为“ 缓 出”，并将“ 持续时间”设置为0.2秒 。 重复相同的技术为菜单中的其余元素设置动画。
这就是您的悬停动画的外观。
第5步
使用矩形工具（R）创建690 x 350 px的形状，并将其放置在第一个图像中。
选择“ 文本”工具（T），然后添加“ 我的名字是”和“ 我的任务是设计”文本。 如第二张图像所示放置它们，并将填充颜色设置为白色。
切换到“ 椭圆”工具（E） ，创建一个50像素的圆圈，将其填充为＃9025FB并将其放置在第二个图像中。
选择在此步骤中制作的四个元素以及Michael和Lorem Ipsum文本片段，并将它们分组 （ Command-G ）。
第6步
继续关注上一步中的小组。 选择“ 我的名字是”文本并将其拖动到画板的左边缘旁边，然后选择“ 我的任务是设计”文本并将其拖动到右边缘附近。 最后，选择该紫色圆圈并将其向上移动，如下图所示。
步骤7
继续专注于该小组。 选择红色矩形并将其置于组中其他元素顶部的前面（ Shift-Command-] ）。 选择和移动这些对象的一种更简单的方法是通过“ 图层”面板。
重新选择该红色矩形以及该组中的其余元素，并对其进行遮罩（ Shift-Command-M ）。 将此被屏蔽的组转换为新组件。
步骤8
为您的最新组件添加一个悬停状态 ，选择它并移动到您的画板上。 选择该“ Lorem Ipsum”段落并将其不透明度降低到0％ 。 选择紫色圆圈和位于画板之外的两段文字，然后将它们移到原始位置，如第二幅图所示。
完成后，返回到属性检查器并为组件选择默认状态 。
从“ 设计”模式切换到“ 原型”模式，将“ 缓动”设置为“ 缓入- 缓 出”，并将“ 持续时间”设置为0.3秒 ，然后可以测试悬停动画。
这就是您的悬停动画的外观。
步骤9
复制您的PORTFOLIO按钮，然后将副本放置在HIRE ME按钮下方，如第一幅图所示。 将文本从此新按钮更改为“ LET'S DESIGN” 。
使用矩形工具（R）创建140 x 35 px的形状并将其放置在第二个图像中。 选择这个矩形以及HIRE ME和LET'S DESIGN按钮，然后对其进行遮罩（ Shift-Command-M ）。
第10步
确保您的HIRE ME按钮仍然处于选中状态，并将其变成一个组件。 为此新组件添加一个悬停状态并选择它。 将LET'S DESIGN按钮拖动到HIRE ME按钮的顶部，然后返回到组件的默认状态 。
从“ 设计”模式切换到“ 原型”模式，将“ 缓动”设置为“ 缓 出”，并将“ 持续时间”设置为0.3秒 ，然后可以测试悬停动画。
这就是您的悬停动画的外观。
3.如何在此简历网页设计中创建剩余的悬停动画
第1步
专注于ABOUT部分中的第一张照片。 调整该紫色矩形的大小以适合照片的尺寸，然后将“ 更多”按钮居中，如第二幅图像所示。
选择这两个元素以及背面的照片，然后将它们变成新的组件。 转到“ 图层”面板，然后关闭紫色矩形和该“ 更多”按钮的可见性。
为此组件添加一个悬停状态并选择它。 返回“ 图层”面板，然后重新打开紫色矩形和该“ 更多”按钮的可见性。 返回到默认状态 。
从“ 设计”模式切换到“ 原型”模式，将“ 缓动”设置为“ 缓 出”，并将“ 持续时间”设置为0.3秒 ，然后可以测试悬停动画。
这就是您的悬停动画的外观。
第2步
选择“ 探索”按钮并将其变成一个组件。 为此新组件添加一个悬停状态并选择它。 将该圆角矩形的“ 填充”颜色更改为＃9025FB ，然后返回到组件的默认状态 。
从“ 设计”模式切换到“ 原型”模式，将“ 缓动”设置为“ 缓 出”，并将“ 持续时间”设置为0.3秒 ，然后可以测试悬停动画。
这就是您的悬停动画的外观。
第三步
专注于STATS部分的第一个元素。 选择文本以及该圆角矩形，然后将它们变成一个组件。 为此新组件添加一个悬停状态并选择它。 将该圆角矩形的“ 填充”颜色更改为＃9025FB ，然后返回到组件的默认状态 。
交换机从设计到原型模式，设置宽松 ， 缓解和持续时间 0.2秒 ，然后你就可以测试你的悬停动画。
这就是您的悬停动画的外观。
第4步
关注BLOG部分中的第一个Blog Grid Item 。 将其变成一个组件，添加一个悬停状态并选择它。 将该文本背景的颜色更改为＃9025FB并将箭头按钮背景更改为黑色（ ＃000000 ），然后返回组件的默认状态 。
从“ 设计”模式切换到“ 原型”模式，将“ 缓动”设置为“ 缓 出”，并将“ 持续时间”设置为0.2秒 ，然后可以测试悬停动画。 对第二个Blog Grid Item进行相同的更改。
选择两个Blog Grid Item组件，复制它们，然后将副本拖到右侧，如第三幅图所示。
这就是您的悬停动画的外观。
第5步
重点关注“ PORTFOLIO”部分的文本菜单。 使用矩形工具（R） ，在该文本“ ALL”的后面添加一个紫色矩形。 选择矩形和文本，然后将它们变成一个组件。 选择该紫色矩形并将其不透明度降低到0％ 。 为您的组件添加一个悬停状态并选择它。 重新选择该紫色矩形并将不透明度增加回100％ 。 返回到组件的默认状态 。
交换机从设计到原型模式，设置宽松 ， 缓解和持续时间 0.1秒 ，然后你就可以测试你的悬停动画。 为该菜单中的其余元素添加相同类型的悬停动画。
这就是您的悬停动画的外观。
第6步
专注于PORTFOLIO部分的第一张照片。 调整该紫色矩形的大小以适合照片的尺寸，然后将按钮居中，如第二幅图像所示。
对于悬停动画部分，您基本上必须遵循“ 关于”部分中用于照片的相同技术。
这就是您的悬停动画的外观。
步骤7
关注“ 联系”部分中的社交媒体按钮。 选择Facebook按钮并将其变成一个组件。 为此新组件添加一个悬停状态并选择它。 将此形状的填充颜色更改为＃3B5998 ，然后返回到组件的默认状态 。
从“ 设计”模式切换到“ 原型”模式，将“ 缓动”设置为“ 缓入- 缓 出”，并将“ 持续时间”设置为0.2秒 ，然后可以测试悬停动画。
这就是您的悬停动画的外观。 使用＃1DA1F2对Twitter和Pinterest的为＃C8232C。
步骤8
集中在“ 页脚”部分的文本菜单上。 选择“ 主页”按钮并将其变成一个组件。 为此新组件添加一个悬停状态并选择它。 将文本填充颜色更改为＃3B5998 ，然后返回到组件的默认状态 。
从“ 设计”模式切换到“ 原型”模式，将“ 缓动”设置为“ 缓入- 缓 出”，并将“ 持续时间”设置为0.2秒 ，然后可以测试悬停动画。 重复相同的技术为该菜单中的其余元素设置动画。
这就是您的悬停动画的外观。
4，如何将您的设计变成交互式原型
第1步
确保“ 原型”模式仍处于活动状态，然后从“ 页脚”部分中选择“ 页面 顶部 ”。 单击该蓝色箭头按钮，并将其与“ 家庭”组连接。 将“ 缓动”设置为“ 无” ，将“ 持续时间”设置为0.4秒 ，然后可以测试悬停动画。 单击此按钮将向上滚动到设计的“ 主页”部分。
第2步
继续关注FOOTER部分，然后从菜单中选择该Home组件。 单击该加号按钮，然后将组件与“ 主页”组连接。 保持“ 缓动”和“ 持续时间”属性不变 。 默认情况下，Adobe XD将使用与先前原型相同的属性。
第三步
从HOME部分中选择Contact组件，并将其与CONTACT组链接。
第4步
从菜单中选择其余组件，然后将它们与相应的组连接。
第5步
从原型切换到设计模式。 从“ 博客”部分集中关注“ 博客网格项目”组。 使用矩形工具（R）创建1440 x 554 px形状并将其放置在第一个图像中。
选择此新形状以及四个Blog Grid Item组，并对其进行遮罩（ Shift-Command-M ）。
第6步
单击画板的名称以将其选中，然后使用Command-D键盘快捷键添加画板的三个副本，如下图所示。
步骤7
专注于BLOG部分。 在接下来的步骤中，您将把Blog Grid组变成一个水平滚动菜单。 这将要求每个画板在菜单中匹配水平滚动的不同阶段。
从第二个画板中选择“ 博客网格”组，按住Shfit键并将您的选择拖到左侧，如第一个图像所示。 或者，您可以转到属性检查器，然后在X框中输入-181 。
移至第三个画板，选择Blog Grid组并将其拖动到左侧，如第二个图像所示（ X：-791 ）。 最后，从第四个画板中选择Blog Grid组，然后将其移至-1000 ，如第三个图像所示。
步骤8
切换回原型模式。 转到第一个画板，然后关注“ 博客”部分中的“分页”按钮。 选择第二个圆圈，并将其与第二个画板连接。 将“ 缓动”设置为“ 无”，并将“ 持续时间”设置为0.2秒 。
步骤9
继续关注第一个画板上的那些分页按钮。 将第三圆圈与第三画板连接，将第四圆圈与第四画板连接。
从“ 层”面板中选择整个“ 博客网格”组，并将其与第四个画板链接。 将“ 触发器”更改为“ 拖动” ，并将“ 缓动”设置为“ 无” 。 这将允许您滚动到菜单的右端。
第10步
移至第二个画板，然后将焦点放在这些分页按钮上。 首先，相应地更改颜色，然后将灰色圆圈与相应的画板链接。 请记住，将“ 触发器”改回“ 点击” ，将“ 缓动”设置为“ 无”，并将“ 持续时间”设置为0.2秒 。
步骤11
移至第三个画板，相应地更改这些分页按钮的颜色，然后将灰色圆圈与相应的画板链接。 对第四个画板做同样的事情。
从第四个画板中选择“ 博客网格”组，并将其与第一个画板链接。 将“ 触发器”更改为“ 拖动” ，并将“ 缓动”设置为“ 无” 。 这将允许您滚动回到菜单的左端。
您的简历网页设计已完成！
这是它的外观。 希望您喜欢本教程，并可以应用这些技术来创建自己的Adobe XD CV。 请不要在评论部分分享您的最终结果。
随意调整最终设计，使其成为您自己的。 您可以在GraphicRiver上找到一些很好的灵感来源，并提供有趣的解决方案来改善您的Adobe XD CV。
想了解更多？
翻译自: https://webdesign.tutsplus.com/tutorials/resume-cv-website-template-adobe-xd--cms-35015
adobe xd