10个 Adob​​e XD模板可帮助您更快、更智能地进行设计

adobe XD 是一种 UI（用户界面）和 UX（用户体验）设计工具，可让您设计网站和应用程序——不仅在视觉设计方面——还包括动作设计和交互性。使用 Adobe 的旗舰网页设计工具，您可以创建一个外观和感觉都像真实网站或应用程序的原型。它将帮助您、您的客户和您的开发团队设想最终产品并比以往更快地构建它。

为什么应该在设计过程中使用 Adobe XD

每个产品创造过程的第一步是产生和形成它的主要思想。为此，一支铅笔和一张纸就可以完成这项工作，但这种传统方法可能会受到限制。使用 Adobe XD，您将可以使用更多空间和工具来发展和发展您的基本想法。它促进了设计过程，并使创建更智能、更快。

使用预建的 Adobe XD 模板节省更多时间

需要节省更多时间？如果您不喜欢从头开始创建原型并希望减少在 Adobe XD 中花费的设计时间，那么可以使用 ThemeFo rest和 Envato Elements 上提供的可自定义 XD 模板！

在本综述中，我将向您展示一些可用的最佳 Adobe XD 模板，并教您为 UI 设计师节省时间的最佳 Adobe XD 技巧之一；只需单击一下即可将您的原型转换为真实代码！

适用于应用程序开发人员的最佳 Adobe XD 模板

当您下载 Adobe XD 的移动 UI 工具包时，您可以选择在软件本身内打开它，或下载适用于android（或 ios）智能手机的 Adobe XD 应用程序并在那里测试您的模板。 

此外，将您的移动设备连接到您的计算机（通过 USB）可以让您创建原型的实时预览，并帮助您立即查看您在计算机内所做的更改！

在这里，您可以找到 ThemeForest 上三个最好的 Adobe XD 应用程序模板。

1. Collector – AdobeXD 的移动线框 UI 工具包

Collector 是 Adobe XD 的多用途模板包，自带 200 多个屏幕，适用于 20 种不同类别的android和ios应用程序。它是完全可定制的，使您在设计移动应用程序时能够更快地工作。

2. Oswald - 模板智能 UI 工具包 [Adobe XD]

26 个流行的 iOS 应用程序类别中的 450 多个屏幕使这个 UI 工具包非常适合那些正在为他们的应用程序开发寻找一个方便的包的人。

Oswald 包含 1,000 个有用的内部元素和许多有价值的组件，它的所有模板还具有明暗模式。

3. Kenakata - 电子商务移动应用程序 UI 套件

如果您正在为您的下一个电子商务移动应用程序寻找专业设计的模板，那么 Kenakata 可能是您的绝佳选择。它经过精心设计，呈现在一个简单明了的环境中，可帮助您（作为设计师）轻松定制它。

网页设计师的最佳 Adobe XD 模板

Adobe XD 不仅用于设计应用程序原型，而且还是用于创建有吸引力的网站原型的强大工具。在本节中，我想向您展示来自 ThemeForest 和 Envato Elements 的最佳 XD Web 模板的候选名单。

4.希维 | Adobe XD 网站 UI 工具包版本 1.0

Shiveh 是 ThemeForest 上非常流行的 XD 模板。它是一个现代且设计精良的模板包，包括 30 多个标题和滑块、90 个画板和 30 个响应式视图——它们都可以在明暗模式下使用和编辑。

5. Collector Wireframe Web Kit

这是您在上一节中看到的收集器模板包的 Web 版本。对于设计师和开发人员来说，它是一个有价值的 UI 工具包，包括 200 个预制屏幕、元素和 Google 字体，可帮助您更快地设计您的网站。

“一切都井井有条，易于组装和更换；您可以使用任何字体，选择任何颜色组合等等。“

6. WireBlock - Adobe XD 的线框 UI 工具包

WireBlock 是另一个优雅的 Adobe XD 用户界面模板，其中包括用于不同类型网站的 +160 块，以便您可以在项目中编辑、自定义和使用它们。

创建管理面板的最佳 Adobe XD 模板

对于网络（或应用程序）开发人员来说，一个巨大的（但令人愉快的？！）挑战是为他们的产品创建一个管理面板或仪表板。为什么不使用 Themeforest 和 Envato Elements 上提供的这些管理 UI 工具包之一开始您的项目，从而节省自己的时间。

7.神秘 | 管理员仪表板 XD 模板

Mystic 是 Themeforest 的 Adobe XD 类别中最畅销的商品。它是一个功能强大且设计巧妙的管理面板模板，可用于设计移动应用程序和网站的后端。它有 1,000 多个优雅而有目的的元素，因此您可以根据自己的需要进行编辑和自定义。

8. Nextrun - 整洁干净的管理仪表板模板 Adobe XD

Nextrun 是一个新发布的精美 XD 模板，旨在激发创意并帮助您创建更好的经理门户或管理面板。 

“Nextrun 包含 14 页模板，在此升级版本中，您将获得更友好和方便的用户界面以及适用于平板电脑和移动/智能手机设备的响应式视图。”

适合初学者的易于使用的 Adobe XD 模板（简单和极简主义）

如果您是 Adobe XD 的新手，我建议您使用包含更少元素和更少复杂性的极简模板，以便您可以更快地自定义它们并更轻松地处理它们。这里有两个优雅的 Adobe XD 模板，设计简洁。

9. Oxer - 最小的投资组合 Adobe XD 模板

不再浪费时间！免费安装 Adobe XD，然后使用来自 ThemeForest 的易于编辑的模板开始设计您的第一个原型。

Oxer 是一个完美的模板，旨在供基于 CMS 的开发人员使用，例如使用wordpress和drupal创建网站的开发人员。它的极简设计允许您使用像 Elementor 这样的页面构建器插件在 WordPress（例如）上重新创建它。 

10. Frize - 简单而专业的管理仪表板

寻找一个干净的仪表板来更快地创建和管理您的网站？如果是这样，请尝试我们列表中的最后一项：Frize XD 模板。它是一个引人注目的现代管理面板模板，并带有一个简单而简约的环境。

您可以通过每月订阅计划从 Envato Elements 查看和下载 Frize、数百个 Adobe XD 模板以及数百万个其他创意资产。

如何将 Adobe XD 模板导出为代码？

现在，让我们更进一步，看看如何将我们的 XD 模板转换为实际的代码行。

Adobe XD 允许您安装额外的插件并添加更多功能。要将您的设计和模板转换为 html、css或 Dart 代码，您唯一需要做的就是在Adobe 官方网站上安装一个插件，如 Web Export、Anima 或类似的东西。

要安装 Web 导出插件（或任何其他转换器插件），请打开 Adobe XD。然后在顶部导航栏上，单击Plugins并选择Browse Plugins。它将打开一个包含三个不同选项卡的弹出窗口。在Browse选项卡下，搜索并找到 Web Export 插件，然后单击Install。

安装后，导航到Plugins > Web Export并选择Export Artboard。最后，在弹出窗口中选择所需的选项，然后单击Export。就是这样！您已成功将 Adobe XD 模板导出为 HTML 文件，准备好进行部署。

结论

在这个集合中，您已经看到了最有用的 Adobe XD 模板，这些模板让您可以更快、更智能地设计您的应用程序和网站！在 Tuts+ 上发现更多与 XD 相关的教程：