东丽关于网站建设的文章：如何使用AdobeXD为您的下一个Web项目创建一个模型

东丽关于网站建设的文章中说创造一个新网站最令人兴奋的部分是设计创造阶段。在很多情况下，人们只是旋转WordPress并开始尝试设计。然而，如果你想尽快建立和运行你的网站，这种方法并不是最好的。

Web设计模型使您能够勾勒出您的网站将是什么样的。一旦你有一个模型到位，你所要做的就是把它翻译到屏幕上，你就可以走了。在本文中，我们将讨论为什么在您的下一个Web项目中使用模型是有意义的。那我们就把你介绍给AdobeXD一个免费的工具，你可以用它来创建模型，并教你如何使用它。

我们来模拟一下！

为什么要为网页创建模型

我们中的很多人都喜欢为新网站勾勒出粗略的设计，然后再开始工作。这不需要什么花哨-想象一下你会在餐巾纸上画什么样的草图，然后你就明白了。

这就是我们所说的“线框”设计。这是对最终产品外观的低保真度表示。关键是你要能够把你的想法写在纸上，看看它们是否有意义，并与其他人分享。

另一方面，模型的保真度要高得多。而不是餐巾纸，你可能会想要使用一个专门的设计工具。在这种情况下，我们的目标是设计一些看起来尽可能像最终产品的东西。

为您的网络项目创建模型有很多优点，例如：

· 可以计划您的网站的整个设计，而不必触及一行代码或页面生成器.

· 您可以可视化每个元素的位置、它们的外观以及它们在一起的方式。

· 你可以和你的团队中的其他成员一起查看模型，以获得更多的反馈。

· 向客户展示一个模型要比构建一个完整的网站然后征求他们的意见要容易得多。

有很多好处，为您的网站的网页创建模型。然而，他们也需要很多额外的工作，因为他们不会把自己放在一起。要创建一个高保真度的模型，您需要有专门的设计应用程序的经验。考虑到这一点，让我们继续讨论下一节。

AdobeXD简介

AdobeXD是一个轻量级应用程序，用于帮助UX/UI设计人员创建高保真度的线框、图板、交互原型和模型。不像其他Adobe应用程序，您不需要订阅就可以使用AdobeXD。只要注册一个Adobe免费帐户，下载并安装应用程序，你就可以了。

虽然该应用程序包含与Photoshop等其他程序类似的特性，但AdobeXD更适合于UX/UI设计。例如，它使您能够轻松地将按钮和窗体等元素添加到设计中。它甚至可以更新多个图板的元素，如标识，如果它们都是同一网站的一部分。综合起来，所有这些特性都使创建模型成为一件轻而易举的事情。

主要特点：

· 为你的线框和模型创建图板。

· 为网络和移动设备设计布局。

· 轻松添加几乎任何类型的元素，你可以想象到你的设计。

· 一次跨多个设计更新链接元素(如徽标)。

价格：自由

如何使用AdobeXD创建Web模型

要开始，请转到AdobeXD主页并单击免费获得XD纽扣。一个新的页面将打开，您的下载应该自动开始。完成后，启动安装程序文件，该文件将在您继续操作之前向您询问Adobe帐户凭据：

记住，你不需要付费订阅来完成这一步，所以，只要注册一个免费的Adobe帐户，如果你没有一个。完成后，在安装程序中输入凭据，然后开始下载AdobeXD应用程序。这个过程只需要几分钟，但是请记住，Adobe也会同时安装它的CreativeCloud。

一旦AdobeXD准备就绪，您就可以启动该程序，它将询问您希望首先处理哪种类型的项目：

在本教程中，我们使用了Web 1920选项，您可以在上面的图像中看到。一旦您输入AdobeXD，您将在屏幕中间看到一个空白方块，表示您的新画板：

您可以通过单击层层按钮位于屏幕左下角。现在选择您的初始图板，选择复本选项，您的仪表板上将出现一个新的图板：

你可以随意跳转，但现在，让我们专注于如何编辑一个，这将是我们的首页模型。让我们继续选择其中一个图板，使用屏幕右侧的菜单，稍微放大一下：

东丽关于网站建设的文章中提到同样的菜单包括调整你的图板大小，填充颜色，并显示一个网格，这样你就可以更好地控制你放置在里面的元素。现在，只需为您的背景设置一个颜色：

现在，让我们添加我们的模型的第一个元素，在屏幕顶部的第二个导航栏。我们可以通过使用左侧菜单上的矩形工具来做到这一点：

我们继续，在导航栏中添加了一些背景颜色，以及文本，使用文本AdobeXD菜单中的工具：

现在，让我们来看看AdobeXD是如何处理Call to Action(CTA)的。要添加一个，让我们使用长方形又是工具。我们还使用右边的菜单旋转按钮的角，设置背景色，并在其中添加文本：

在上面的截图中，您可以看到使用圆角代替常规角的选项，并且您已经知道如何添加文本和更改背景色。接下来，让我们使用文本和长方形再来一次工具。下面是我们的模型如何处理几次传球：

此时，我们准备通过将图像文件从我们的计算机拖到我们的画板中来添加优雅的主题徽标：

如果您没有注意到，我们正在创建一个优雅主题博客索引的模型。当然，比例并不完美，还有一些细节是不完善的。然而，我们的目标是向您展示您可以使用AdobeXD做什么，即使没有任何实践。

接下来，让我们使用(您猜到的)添加主标题和搜索栏。长方形和文本工具：

现在，为了恩典政变，让我们添加一些博客文章的摘录到我们的模型。首先，让我们在我们的图板上再添加两个矩形。您可以创建一个，并复制它，以使事情更容易为您。当您拖曳它们时，您会注意到AdobeXD显示您的测量值，以使它们保持一致：

现在我们有了两个空矩形。让我们使用文本工具：

最后，让我们继续添加每个帖子的特色图片。和以前一样，您需要从计算机中将图像文件拖到AdobeXD中。

现在让我们后退一步，看看我们的模型：

这不是一个像素完美的娱乐，但它看起来足够好，一个羽翼未丰的尝试。换句话说，使用AdobeXD应该是在公园里散步，即使你刚开始使用设计工具-而且你可以用它创建一些非常酷的模型。

最终，您用AdobeXD创建的每一个模型都需要添加您想要的元素，使用正确的颜色，并在需要的地方放置图像。每个动作都很简单，所以没有理由害怕这个过程。

结语

东丽关于网站建设的文章模型是一个很好的方式，让你的所有想法在纸上(或屏幕)。然后，你可以完善他们，直到你在你的网站的完美设计。创建多个模型，然后尝试在您的站点上复制它们要容易得多，所以这是一种您应该接受的技术。

使用AdobeXD，创建高保真度模型变得非常简单。它不像Photoshop那样有很大的冲击力，但是它能，会，可以做一个伟大的工作，当它涉及到线框和模型(加上，它是免费的！)

您对如何使用AdobeXD为您的网站创建模型有任何疑问吗？让我们在下面的评论部分讨论它们吧！