本页面由英文自动翻译而成，内容中可能存在翻译错误

组件和共享样式#

注意： LinkedIn Learning 资源正在逐步替换中。

在本课程中，我们将学习如何在 Adob​​e XD 中使用组件和共享样式创建设计系统，以帮助我们保持一致性并节省重复创建设计元素的时间。您将学习如何设置和管理组件、创建和更新图层和文本样式，以及导入第三方库，例如官方的 iOS 和 Android UI 工具包。Moodle 中已提供当前 UI 工具包的链接。

• Adobe XD
  • 请观看 Adob​​e XD LinkedIn Learning 课程第 9 章（组件）的视频：https://www.linkedin.com/learning/adobe-xd-essential-training-design-14363201/
  • Adob​​e XD 入门：组件和库：https://www.adobe.com/au/products/xd/learn/get-started-xd-components-libraries.html
  • 如何在 Adob​​e 中使用组件XD：https://www.youtube.com/watch?v=hR4GWqO4WFg
  • 如何向 Adob​​e XD 添加 UI 工具包：https://helpx.adobe.com/au/xd/help/access-ui-kits.html
• Figma
  • 请观看 Figma LinkedIn Learning 第 3 章和第 4 章的视频。课程：https://www.linkedin.com/learning/figma-essential-training-the-basics/the-basics-of-figma
  • Figma 中的组件：[https://help.figma.com/hc/en-us/sections/4403935997847-Components](https://help.figma.com/hc/en-us/sections/4403935997847-Components
  • Figma 中的库Figma：https://help.figma.com/hc/en-us/sections/4403936000407-Libraries-

任务#

请观看上方视频，学习如何创建和使用组件。选择以下应用之一：

• Coles/Woolworths
• Ikea
• Ebay/Temu/Wish/Ali Express
• JB Hi-Fi

此任务要求您设计一个双屏界面，用于展示使用组件创建的商品列表。您将使用列表中选择的应用作为参考。首先，请从应用中选择一个屏幕作为设计参考，例如商品页面或结账页面。

从零开始重新创建界面，但仅使用 Apple 或 Android 的 UI Kit 组件。您并非重新设计应用，而是使用 iOS/Android 提供的基本布局组件重新创建它。请尽可能使用/重用组件来重新创建布局。界面中的所有信息，例如产品名称、图片、价格等，都应保留在您的界面中（您可以根据需要替换图片）。最终结果将是一个类似于您的参考界面，但缺少所有设计元素（例如颜色、字体、主题等）的 UI。 现在，选择一个用户可以从您刚刚创建的界面跳转到的第二个屏幕。例如，如果您从产品图库开始，那么用户可以跳转到产品信息页面。同样，请仅使用 UI 工具包组件来完成此第二个屏幕。

提交方式： 截取两个屏幕的屏幕截图，并在 Adob​​e XD 或 Figma 中显示图层面板。上传一张单独的图片，显示您使用的 UI 工具包组件。如有需要，请上传到论坛。

**提示：**这是一个阅读 iOS 设计指南（https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/）或 Android 设计指南（https://m3.material.io/）的好机会。这些资源很有用，我们会在以后的课程中再次用到它们。