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

在这个动手实验中，您将被要求使用Figma设计一个线框图并添加交互功能，针对一个销售应用程序。该应用程序的主要功能将使用户能够选择一个类别并导航到下一个部分，在那里他们可以选择一个特定的客户并查看该客户的详细信息。

目标

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

1. 使用 Figma 设计屏幕。
2. 开发一个包含四个类别的首页：零售、酒店、教育和技术。
3. 为零售类别设计客户详情屏幕。
4. 在客户详情屏幕上，包括姓名、联系方式、电子邮件、地址和收入字段，展示至少一个零售类别的客户。
5. 实现屏幕之间的交互，以确保在销售应用程序内的无缝导航。

关于 Figma

Figma 是一个网络应用程序，支持协作界面设计，并提供适用于 macOS 和 Windows 的额外桌面应用程序以供离线使用。该工具主要专注于用户界面和用户体验设计，提供一系列矢量图形编辑器和原型工具。实时协作是 Figma 的一个关键特性，允许多个团队成员同时在一个项目上工作。此外，Figma 还提供适用于 Android 和 iOS 的移动应用程序，使用户能够在移动和平板设备上实时查看和与原型互动。

A部分：使用Figma设计销售应用的界面

练习 1：注册 Figma

1. 访问 Figma.com，点击屏幕上的 开始使用 按钮进行注册。
   
2. 选择 使用 Google 继续 或使用用户名/邮箱和密码注册，然后点击 创建账户。
   
3. 如果您使用电子邮件地址注册，Figma 会向您发送一封验证电子邮件。打开电子邮件并点击 验证您的电子邮件 按钮以确认您的账户。
   

注意：如果您使用“使用 Google 继续”注册，系统会提示您选择要注册的电子邮件地址，并按照剩余步骤完成注册过程。此外，您将收到一个弹出窗口，填写您的姓名、工作类型和其他相关信息。

4. 一旦您的账户被验证，您将收到一个弹出窗口以选择 入门 套餐，然后点击“继续”。
   
5. 在接下来的弹出窗口中，将您的第一个项目选择为“使用 Figma 设计”，然后点击“完成”以开始使用 Figma。
   
6. 完成注册过程后，您将被引导到项目页面。
   
7. 要开始一个新项目，首先退出当前文件，点击“主菜单”，然后选择“返回文件”以返回 Figma 主面板。
   

练习 2：为销售应用程序创建主屏幕

1. 从 Figma 页面点击 设计文件 开始设计销售应用程序。
   
2. 点击 框架 选择应用程序的屏幕大小。您可以根据需求选择框架大小，但在此实验中，您将使用 iPhone8。
   
   
3. 您可以通过双击页面名称将其重命名为主屏幕，将应用程序名称重命名为销售应用程序，如下图所示。
   
4. 现在您需要为屏幕设置背景颜色。对于新选择的框架，请查看 Figma 窗口的右侧。点击写着 填充 的白色方块并选择一种颜色。您可以选择 #F0F2F4，或者根据您的选择为销售应用程序使用其他颜色，这是 Figma 默认颜色样本中的蓝色阴影。
   
5. 现在您需要为销售应用程序添加 Wi-Fi、网络、时间和电池图标。点击 Figma 页面左上角的主下拉菜单，在那里选择 插件，然后点击 查找更多插件。
   
6. 现在在插件搜索栏中使用关键字图标搜索图标。您将获得一个插件选项列表，选择 Icons8-icon illustration photo 并点击 运行。
   
   
7. 一旦您进入 Icons8，选择销售应用程序所需的所有图标，即 Wi-Fi、网络、时间和电池，并相应地放置它们，如下图所示。
   
   

注意：所有图标都放置在 Figma 的图层中。确保将它们都放在主屏幕标题下方，如上图所示，在 Figma 页面左侧。

8. 您可以使用 形状工具 设计应用程序。您可以选择椭圆形，在主屏幕的时间下方绘制两个半圆，填充颜色为 89E5E0，并遵循如下图所示的图层模式。
   
   
9. 使用 Icon8 插件添加销售图标，然后转到工具栏点击 文本 工具。点击主屏幕您想放置文本的位置，输入 “销售应用程序” 和 “选择类别”。根据需要调整图标和文本的大小、样式和位置。
   
10. 要制作按钮，使用形状工具绘制所需大小的矩形，并填充您选择的颜色，或使用 33A19B。使用文本工具在按钮上添加文本，例如零售、酒店、教育和技术。
    
11. 要查看销售应用程序的移动模拟，请点击右上角的播放/演示按钮。最终主屏幕如下图所示。
    

练习 3：为销售应用中的零售类别设计客户屏幕

1. 要创建零售客户屏幕（屏幕 2），只需通过复制和粘贴主页屏幕来实现。这将创建一个新的屏幕，紧挨着主页屏幕。
   注意： 请不要重复“主页屏幕”，而是复制并粘贴它。重复页面会创建一个单独的页面，这会妨碍我们在未来练习中提供交互。
   
   
2. 删除销售图标，并根据下面的截图重命名按钮上的标题和文本。
   
3. 请在显示客户名称的零售客户屏幕上包含“主页”和“返回”按钮。您可以从 Icons8 获取这些按钮的合适图标，如提供的截图所示。
   

注意：请确保所有屏幕都在同一个销售应用文件中创建，并并排排列，以便于在接下来的步骤中添加交互。

练习 4：为销售应用创建零售客户详情屏幕

1. 要创建一个零售客户详情-2屏幕（屏幕3），右键点击客户详情屏幕页面并选择“复制”。然后，将其粘贴以创建一个新的屏幕，紧邻零售客户屏幕。最后，将这个新屏幕重命名为“零售客户详情-2”。
2. 删除按钮上的文本，并为客户的个人资料图片添加一个头像。同时，使用Icon8插件添加电话号码、电子邮件地址、地址和收入。现在在零售客户详情屏幕上添加“主页”和“返回”按钮。最后，添加客户所需的所有详细信息，如下图所示。
   
3. 要体验销售应用的移动模拟，请点击页面右上角的播放/演示按钮，以单独查看每个屏幕。请参阅以下截图。
   
   

注意*：请保存此销售应用设计，以便在下一个练习中使用Figma为应用程序提供交互。*

B部分：使用Figma为销售应用程序添加屏幕之间的交互

练习 1：创建从“首页”到“零售客户详情页”的导航。

1. 点击“首页”上的“零售”按钮。在 Figma 界面的左侧，找到“原型”选项卡，如提供的截图所示。
   
2. 在“原型”选项卡中，选择“交互”。会出现一个下拉菜单。从该菜单中选择“点击/点击时”，然后选择“导航到”。最后，点击“零售客户详情”屏幕以设置导航目标。
   

练习 2：在“零售客户详情”屏幕和“零售客户详情-2”屏幕之间添加交互

1. 从 Figma 设计中的“零售客户详情”屏幕中选择一个名字。找到 Figma 界面左侧的“原型”标签。
2. 点击“交互”。从下拉菜单中选择“点击/触摸时”。选择“导航到”，然后从下拉菜单中选择该特定客户的“零售客户详情-2”。
   

练习 3：在“主页”和“返回”按钮之间添加导航

1. 从零售客户屏幕点击“主页”按钮，然后导航到“原型”选项卡，点击“添加交互”。从下拉菜单中选择“点击/按压”。接下来，选择“导航到”，然后从选项中选择“主页屏幕”。对“返回”按钮重复这些步骤。
   这将启用从零售客户屏幕到主页屏幕的导航。返回按钮将导航到上一个屏幕。
   
2. 对零售客户详细信息-2屏幕的“主页”和“返回”按钮重复上述步骤。
3. 要体验销售应用的移动模拟，请点击页面右上角的 播放/演示 按钮，以测试屏幕之间的交互。

摘要

恭喜你！你已经学会了如何在 Figma 上创建你的第一个 UI 应用设计！你通过在 Figma 中设计一个销售应用，并增强应用各屏幕之间的互动，实现了这一点。

作者

Sapthashree K S