荣誉项目：使用 Figma 增强销售应用程序

预计所需时间：1小时30分钟

前提条件

重要提示： 如果您已经在 Figma 中完成了最终项目，您可以继续使用 Figma 进行荣誉项目。然而，如果您选择了 Thunkable，您可以使用 Thunkable 继续进行荣誉项目，这是本节中的下一个实验室。

在最终项目中，我们已经有三个屏幕之间的交互：主页、零售客户详情和零售客户详情 2，特别为零售类别设计。此外，我们还包含了主页和返回按钮以便于导航。

在开始这个荣誉项目之前，请确保您已完成最终项目，因为它将作为进一步增强销售应用程序交互性的基础。最终项目包括：

• 实践实验室：使用 Figma 的互动设计工具构建销售应用程序

介绍

在这个荣誉项目中，您将增强您在最终项目中创建的销售应用程序。

销售应用程序目前有四个类别：零售、酒店、教育和技术，客户仅在零售类别中添加，如下所示：

在这个荣誉项目中，我们将扩展销售应用程序在剩余三个类别（酒店、教育和技术）中的功能，并为每个类别添加客户。

重要提示： 请确保为任务创建一个以任务名称命名的文件夹，并将完成任务所需的所有截图保存在相应的文件夹内，然后在上传之前将文件夹压缩。因此，最终提交需要有 2 个 zip 文件，请将它们命名为 Task4.zip 和 Task5.zip。

由于任务 1、任务 2、任务 3 和任务 6 只需要上传一张截图，而任务 7 需要 Figma 中的销售应用程序链接，您可以在提交时直接在响应字段中上传/分享相同内容。

使用 Figma 设计销售应用的界面

重要说明：如 Figma Lab 中所示，请在一个单独的销售应用文件或项目中创建所有界面。这将使我们能够轻松地整合交互。

有关添加新界面的信息，请参考 Figma Lab 中的 练习 2：为销售应用创建主页。

任务 1 - 为酒店、教育和科技类别添加四个您选择的客户。

1. 在Figma UI手绘图像实验室中，我们已为零售类别添加了四个客户。同样，您现在应该为酒店、教育和科技类别添加四个您选择的客户。

点击这里获取提示

注意： 请截取一个屏幕截图，以便提交给您的同行评审。它应该显示零售客户屏幕、酒店客户屏幕、教育客户屏幕和科技客户屏幕。将截图命名为Task1.png/jpg。

任务 2：为酒店、教育和技术类别添加客户详情。

1. 在最终项目中，我们已经为零售类别添加了客户详情。现在让我们继续为剩余的类别添加客户详情。确保每个类别至少包含一个客户的详细信息。确保包括所有必需的细节，包括每位客户的电话号码、电子邮件地址、地址和收入。

点击这里获取提示

注意： 截取一个屏幕截图，显示零售客户详情、酒店客户详情、教育客户详情和技术客户详情屏幕，并将其命名为 Task2.png/jpg。

任务 3： 由于零售客户界面已经是最终项目的一部分，现在将其添加到列表中。

1. 首页 - 除了零售客户详情外，还新增了类别
2. 酒店客户详情
3. 酒店客户详情-2
4. 教育客户详情
5. 教育客户详情-2
6. 技术客户详情
7. 技术客户详情-2

注意：

• 截取显示首页、零售客户、零售客户详情-2、酒店客户、酒店客户详情-2、教育客户、教育客户详情-2、技术客户、技术客户详情-2 的屏幕截图，并命名为 Task 3.png/jpg
• 请确保所有屏幕都在同一个销售应用文件中创建，并并排排列。此设置将有助于在屏幕之间添加交互。

使用 Figma 为销售应用添加屏幕之间的交互

任务 4：为销售应用的所有类别添加主屏幕与客户详细信息屏幕之间的交互。

1. 在此任务中，当您点击零售、酒店、教育和技术类别按钮时，必须跳转到相应的客户详细信息屏幕（屏幕-2），显示每个类别的所有四个客户名称。
   请参考最终项目的B部分，以添加主屏幕与零售客户屏幕、酒店客户屏幕、教育客户屏幕和技术客户屏幕之间的交互，如练习 1：创建“主屏幕”和“零售客户详细信息屏幕”之间的导航中所述。

注意： 截取显示以下交互流程的屏幕截图

主屏幕 - 零售客户屏幕 (retail-customer.png/jpg)，

主屏幕 - 酒店客户屏幕 (hotel-customer.png/jpg)，

主屏幕 - 教育客户屏幕 (education-customer.png/jpg) 和

主屏幕 - 技术客户屏幕 (technology-customer.png/jpg)

将这些截图合并并压缩命名为 Task4.zip 文件。

任务 5：验证销售应用中客户详细信息屏幕与客户详细信息-2屏幕之间的交互，适用于所有类别。

1. 在此任务中，当您从客户详细信息屏幕（屏幕-2）中点击某个客户时，它应导航到该特定的客户详细信息-2屏幕（屏幕-3），适用于销售应用的所有类别。

点击此处获取提示

• “零售客户详细信息屏幕”按钮应链接到“零售客户详细信息屏幕-2”。(retail-customer-details.png/jpg)
• “酒店客户详细信息屏幕”按钮应链接到“酒店客户详细信息屏幕-2”。(hotel-customer-details.png/jpg)
• “教育客户详细信息屏幕”按钮应链接到“教育客户详细信息屏幕-2”。(education-customer-details.png/jpg)
• “技术客户详细信息屏幕”按钮应链接到“技术客户详细信息屏幕-2”。(technology-customer-details.png/jpg)
• 捕获显示以下内容之间交互的屏幕截图：
  • 零售客户与零售客户详细信息-2
  • 酒店客户与酒店客户详细信息-2
  • 教育客户与教育客户详细信息-2
  • 技术客户与技术客户详细信息-2屏幕

将上述屏幕截图合并并压缩，文件命名为 Task5.zip。

任务 6：验证销售应用中所有屏幕的“主页”和“返回”按钮的交互

1. 在此任务中，您将启用所有屏幕中“主页”和“返回”按钮的交互。
   请参考最终项目的B部分，特别是练习 3：在“主页”和“返回”按钮之间添加导航。

• 检查“主页”和“返回”按钮在零售客户详情屏幕和零售客户详情 2 屏幕上的交互。
• 检查“主页”和“返回”按钮在酒店客户详情屏幕和酒店客户详情 2 屏幕上的交互。
• 检查“主页”和“返回”按钮在教育客户详情屏幕和教育客户详情 2 屏幕上的交互。
• 检查“主页”和“返回”按钮在技术客户详情屏幕和技术客户详情 2 屏幕上的交互。

注意： 请截图显示所有包含“主页”和“返回”按钮及其交互的屏幕，并命名为任务 6.png/jpg。

任务 7: 提供销售应用程序链接以供同行评审提交。

摘要

恭喜你！你已经完成了荣誉项目！

在这个实验中，你通过扩展功能，增强了在最终项目中创建的销售应用程序，涵盖了其余三个类别：酒店、教育和技术。此外，你还为每个类别添加了客户，并实现了它们之间的互动。