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。
想了解更多？
翻译自: /tutorials/resume-cv-website-template-adobe-xd--cms-35015
adobe xd
