Hands-on Lab: Design a landing page for a travel website using Figma动手实验：在 Figma 中设计旅行的着陆页

预计所需时间：30分钟

在本实验中，您将使用 Figma 设计一个旅行网站的登录页面。

目标

完成本实验后，您将能够：

• 选择旅行网站的框架
• 使用 Figma 设计旅行网站的英雄部分
• 创建旅行网站的服务部分
• 解释旅行网站提供的不同服务
• 创建一个关于旅行网站提供的热门目的地的部分
• 解释旅行网站提供的最佳套餐
• 详细说明如何设计“预订您的下一次旅行”部分
• 创建一个关于旅行网站的客户评价的部分
• 解释网站页脚部分的布局
• 使用 Figma 完成旅行网站设计

练习 1：框架选择

1. 在打开 Figma 后，选择左上角的选择菜单中的框架。快捷键是按“F”键，如下图所示。
   
2. 点击“选择您想要设计的尺寸”。
3. 选择框架后，可以很容易地向左或向右拖动尺寸，按您的需要调整屏幕，如下图所示。
   

练习 2：使用 Figma 设计网站

在 Figma 中设计一个 Hero 区域可以给您的网站访客留下深刻的第一印象。以下是关于设计网站 Hero 区域的一些进一步说明：

1. 向设计中添加文本元素，包括主标题以及您想要包含的任何副标题或标语。您可以根据网站的品牌和风格选择字体、大小和颜色。
2. 为了使您的 Hero 区域更具吸引力，可以考虑添加一些视觉效果，如阴影、渐变或叠加层。您可以尝试不同的效果，直到获得您想要的外观。
3. 通过这些步骤，您应该能够在 Figma 中创建一个引人注目且有效的 Hero 区域。设计 Hero 区域时，请记得考虑您的品牌和用户体验，不要害怕尝试不同的布局和风格，直到找到适合您网站的完美设计。

练习 3：我们网站提供的服务

本节详细介绍了旅行网站提供的服务。基本上，它们是服务卡，每张卡片由服务图标、服务名称和一些与旅游相关的信息组成。

练习 4：解释服务

旅行供应商是提供与旅行相关的一系列服务的公司，例如交通、住宿、旅游和活动。以下是旅行供应商可能提供的服务示例：

• 交通：旅行供应商可能提供各种形式的交通，包括航班、火车、巴士和汽车租赁。他们还可能提供机场接送或班车服务，以帮助旅客到达目的地。

练习 5：我们的热门目的地

本节详细介绍了热门目的地，以便用户可以了解这些热门目的地，便于代理机构提供最佳地点，也方便用户了解不同的地方并选择他们最喜欢的地方。

*注意：目的地的地点和图片来自 Google 和 *Unsplash.com

练习 6: 最适合你的套餐

在这一部分，有从谷歌获取的卡片和图片，以及定价细节。

练习 7：轻松预订您的下一个旅行

在本节中，用户将能够提前预订他们的旅行。
您可以选择背景以使卡片可见，并在卡片内部粘贴图片。使用谷歌上的图片并将其粘贴在卡片的内部。

*注意：使用的图标来自 *SVGRepo.com

练习 8：客户评价

客户评价部分是所有客户评论的展示，让用户可以看到旅行社的服务质量。

练习 9：页脚

网站的页脚是出现在每个页面底部的部分，通常包含对访客有用或相关的信息，但不一定对页面的主要内容至关重要。

• 联系信息，如地址、电话号码和电子邮件地址。
• 社交媒体图标和链接。
• 版权信息和法律免责声明。
• 导航链接到重要页面，如隐私政策、条款和条件以及网站地图。

练习 10：完成 Figma 设计

您可以通过访问 Figma 页面完成您的网站设计。点击这里