图稿创作人：Matt Rae
启动移 动应用程序设计项目时，最好先为体验或体验段创建线框，然后再启动更高保真度的模型。在将时间投入到界面更细微的细节之前，线框创建过程有助于识别用户流程中的任何间隙或突出摩擦点。
在本教程中，将讲述如何为移动应用程序注册流程创建线框。使用基本形状和灰度调色板，你将可以将多个屏幕布置到一个流程中，该流程允许你在加入颜色、图形和最终排版等细节之前验证和测试体验。
创建基本元素
线框由一系列简单元素组成，通常具有灰度或柔色，并简化为矩形和椭圆等基本形状。因为这些对象中有许多重复使用，所以可以创建由可重用元素组成的基本库。
为此，首先绘出矩形，并根据需要为其设置样式以表示特定元素，如按钮。向按钮添加文本占位符会有所帮助，这取决于您设计的保真度。因为在注册流程中使用按钮进入流程的下一阶段，所以添加一个文本框并使用对齐工具使其在按钮形状上居中。
接下来，将这些元素组合成一个组，然后使用右键单击菜单选项使它们成为组件。完成此操作后，可多次拖出和使用该元素，而无需在每次需要按钮元素时都从头做起。
对导航条、图像占位符和常规块等其他常见元素重复此过程。花些时间设置常用元素可让你在整个过程中节省时间，这些组件在适当的时候可用于将你的设计转为更高的保真度。
注册流程中的重要步骤
对于此注册流程，第一步是为流程中的各个不同屏幕或步骤创建画板。典型的注册流程将包括，但不限于以下内容：
主页：此页面通常包含欢迎消息或应用程序徽标，以及用于登录或注册服务的选项。
注册页面：这可以是单个页面，也可以是一系列页面，用于收集创建帐户所需的电子邮件地址、姓名和其他信息。
成功页面和错误页面：这些页面有着至关重要的作用，可向用户提供有关帐户创建状态、帐户创建的成败，以及如何修复错误的反馈。
本教程将重点介绍允许新客户注册帐户的注册流程。此处显示的相同过程适用于为已有帐户的用户创建登录页设计，但他们只需输入用户名和密码即可完成登录过程，而不是输入用于创建帐户的信息。
布置主页
主页（或开始屏幕）应包含几个关键元素。请记住，您的特定用例可能具有不同的要求或目标，因此您的设计应反映这些要求或目标。通常包括以下内容：
• 应用程序徽标
• 欢迎消息
• 注册选项或指向注册页面的链接
• 登录选项或指向登录页面的链接
在此页上，通常会强调登录选项或注册选项。在本例中，为了更无缝地捕捉新用户注册，此工作流程中将突出注册选项，登录选项仍可用，但退居在页面底部。
首先拖出以前创建的常规块组件，然后使其在屏幕顶部展开，从而为时钟、信号和其他操作系统级别的详细信息创建占位符。然后是基本矩形或图像占位符，绘出徽标的占位符，在屏幕上居中。
接下来，添加欢迎消息的占位符。此文本可以用文本工具编写，也可以只使用简单的圆角矩形来表示。在设计的早期阶段，只需使用形状拟出此文本的大纲，而不必担心文案。
页面底部将包含用于注册（创建帐户）或登录（如果用户已有帐户）的选项。您的设计可能需要第三方身份验证服务的选项，如使用 Google 注册或使用 Facebook 登录；如果是这样，您的设计将包含多个用于注册的按钮，包括这些特定选项。
对于本教程，将创建一个 Create an Account 按钮。此按钮可让用户进入到下一屏幕，允许他们输入详细信息以创建帐户。
使用按钮元素时，将其放置于距离页面底部的三分之一处，在欢迎消息下方水平居中。在其下，水平绘制一条直线，超过按钮的宽度，然后在该直线下添加 Log in 按钮。此按钮将是辅助选项，因此可以更改按钮的样式以反映这一点。
创建注册表单
主页完成后，现在可以创建流程中的下一个视图。用户单击在上一屏幕中创建的 Create an account 按钮后，导航到此页面。在此页面上，用户将输入姓名、电子邮件和密码等各种信息以创建帐户。
在此视图中，将添加一些文本元素，以指示哪些字段像上一屏幕上的按钮一样具有标签。您可以选择为页面标题添加文本，或者直接复制文本占位符并将其置于页面顶部。
标题下面将是各种表单元素。为了简化，可以在此处使用基本块元素，也可以创建一个特定于输入字段的块元素，包括边框。将一个块元素置于页面的中心，然后使用文本工具，在左上角添加标签 Name。这将充当此输入字段的标签 — 确保文本足够小，以便看起来不像标题。
接下来，再次复制并粘贴输入字段元素，以便创建用于电子邮件、密码的其他字段以及表示希望在注册时收集的数据的任何其他字段。将元素分组可使此过程更简便。在底部添加一个按钮元素，用于提交表单和完成表单输入。
使用注册流程时，请记住，表单过长和问题过多可能会阻止用户注册，从而降低转化率 — 所以尽量保持此表单清晰简洁。或者，您可能希望将各个表单拆分成单独的视图，使用户只关注各个屏幕上的单个步骤。在本例中，视图将是单个输入字段，并带有按钮 Continue 或 Next。尝试使用每种方法创建流程并进行测试，以了解哪种方法最适合你的受众。
连接原型链接
在 Adobe XD 中创建线框的众多好处之一是，您创建的流程可以实时构建原型，而无需将设计导出到其他应用程序。
要设置原型链接，请使用屏幕顶部的选项卡切换到原型模式。在原型模式下时，单击画板或元素将会显示一个蓝色箭头，您可将该箭头拖到所选的目标位置。
在目前已创建的屏幕上尝试此操作。使用点击触发器，然后试验不同的操作。对于线框阶段设计，只使用溶解或滑动。使用更复杂的动画可能会让你分散注意力，而无法专注于在设计阶段中尝试测试的内容。
完成流程
注册流程接近完成时，应再添加一组屏幕，以向用户提供有关注册是否成功的反馈。成功和错误消息对于良好的体验至关重要，在线框中不应缺失。
成功消息适合用作单击 Submit 按钮时显示的独立页面。这里将有一个正在处理屏幕，然后才显示成功消息。错误消息的工作方式类似，但尽可能在上下文中显示错误，这才会最有帮助。这意味着，如果电子邮件或密码有问题，请突出输入字段并提供可供更正内容的相关反馈。
创建成功屏幕
只需复制第一个屏幕并删除注册按钮和水平线，即可创建成功屏幕。接下来，我们将用对勾图标替换方形占位符，以此说明注册成功。如果你选择这么做，还可以用诸如“Success, registration is complete”的实际消息替换文本占位符。
创建错误屏幕
要创建错误屏幕，请复制表单页。错误应显示在上下文中，因此可以操作此页面来显示错误。对于本例，电子邮件字段将是原因。选择该块，并设置输入字段的样式以包括深灰色边框（这在最终设计中很可能是红色）。使用文本工具，在输入字段下添加一个文本框，其将显示“Error: invalid email format”或反映您正在测试的错误的适当消息。
页面上的其他元素（如提交按钮）可进行修改以反映错误，或阻止再进行下去，直到错误得到解决。
要将错误或成功屏幕连接到原型，可以选择一次连接一个，或从流程中复制其他屏幕，并创建两个单独的流程：一个用于错误，一个用于成功。这样，您可以通过用户测试这两个工作流并进行迭代。
或者，你也可以使用透明矩形作为提交按钮上的目标点，每个目标点指向成功或错误屏幕，从而在测试过程中增加一些神秘感。
这是一个保真度非常低的线框，其主要作用是让我们了解各种屏幕和视图如何连接在一起以构建一个用户旅程。首先将基本元素分组成组件以便重用，这样，过渡到更高的保真度会更加容易。可以为项目的每个阶段重新设置组件的样式，并在整个设计中应用组件，这样在整个项目中重复使用的效率会更高。
共享用于反馈的线框
恭喜，您已在 Adobe XD 中为注册流程创建了线框。接下来，将您学习的知识应用到此应用程序设计的登录流程部分。
