线框注释和文档

注释是线框附带的注释，通常由线框设计师创建。他们的主要目的是清楚地解释屏幕上的某些东西应该如何以及为什么对任何查看线框的人都有效。

注释可以包括视觉之外的细节——设计原理、场景、边缘案例、交互或示例。如果每个查看您的线框的人都了解您的设计如何以及为何起作用，请认为您的工作做得很好。

注释适用于所有人

注释，就像任何类型的写作一样，需要你了解你的听众。这些注释是为谁准备的？你应该考虑参与线框图的人包括客户、开发人员、视觉设计师和文案。

请记住，每一方对线框图都有不同的期望：

• 客户想了解设计是否符合他们的业务目标。

• 开发人员希望了解他们必须支持什么以及产品如何工作。

• 视觉设计师想要了解页面上需要哪些视觉元素。

• 撰稿人想看看他们需要写什么。

而且，最重要的是，将来您将需要记住为什么将表单元素设为复选框而不是单选按钮。

如果您可以与观众面对面交流，请考虑向他们展示您的线框图。您可以将注释用作谈话要点，并在需要时进行更详细的说明。

注释解释了线框是如何工作的

注释提供了静态线框无法提供的信息。通常，它们会详细说明某些东西应该如何在交互中起作用。当然，开发人员认识到按钮是交互式的。但如果没有解释，他们将不知道该按钮做什么。文案和用户体验作家也是如此——他们需要知道文本的声音以及文案应该包含哪些信息。

创建线框的人可能会遇到一种“专家偏见”。您对线框图了解得如此之多，以至于您可能会认为看到它的每个人都会清楚地理解您的想法。然而，其他人没有你所做的先验知识，他们对某事所做的假设只是假设。为了帮助其他人，请添加有关您希望每个元素做什么的明确信息。

在注释中描述内容和功能

那么，您应该在注释中具体描述什么？您可以将它们分为 2 个主要部分：内容和功能。开发者会主要看内容上的功能说明和文案。客户、设计师和其他利益相关者将同时关注两者。

注释通常使用数字显示。线框中的数字应该有足够鲜明的对比，以从设计中脱颖而出。您可以在它们周围添加彩色圆圈，如果您愿意，可以为不同类型的注释使用不同的颜色。然后这些数字再次列在线框的侧面或底部，并附有文字说明。

对你在线框中放什么以及如何放要聪明。您制作的实际线框越清晰，您在注释中解释的就越少。

注释条件项

理论上，任何元素都可以被注释。但是，我们不要忘记人们注意力的局限性。您需要优先考虑必须注释的内容和不言自明的内容。

几乎总是需要注释的元素类型之一是条件项——例如，只向某些用户显示而不向其他用户显示的横幅。如果没有额外的信息，就不可能猜测它在什么条件下显示。如果线框没有直接提供这些信息，那么看线框的人应该可以在注释中找到它。

注释链接和按钮

用户根据“如果我点击它会发生什么？”来考虑交互元素。但是参与创建产品的人需要更多信息。

在注释链接和按钮等交互式元素时，问自己以下问题：

• 这个元素有多少个状态？

• 是什么触发了状态的变化？

•  当用户单击、悬停或点击时会发生什么？

• 访问过的链接如何显示？

• 用户被重定向到哪里？

还包括从线框中不明显的任何其他信息。

其他需要注释的元素类型是由于空间限制无法在线框中完全显示的元素。例如，您可以在打开的下拉菜单中显示几个项目。在注释中，您可以添加该菜单项的完整列表。

用业务、逻辑或技术约束注释任何内容

使用业务、逻辑或技术约束对任何内容进行注释。例如，完整的密码要求或用户名的最长可能长度。

在这种情况下，注释不仅应该捕获显示的内容（以及显示的位置和时间），还应该捕获显示的原因。你越能记录你的思考过程和你所做的决定，就越容易解释你的工作，证明你的选择，或者在你做出错误决定的情况下纠正它。

“显示前 10 条新消息”的注释与“由于可能有数百条新消息，仅显示前 10 条”的注释之间存在巨大差异。

随手批注，完成后

何时注释线框有两种想法。有人说你应该在设计时这样做，而另一些人则声称在你完成所有线框后更容易做到。

我们认为您应该两全其美——边做边做注释，并在完成后完成注释。

在您进行设计时进行注释可以帮助您思考某些事情将如何工作。它还有助于确保您不会忘记您打算如何工作或您的决策背后的思维过程。全部完成后，编辑注释以确保其他人易于理解。

如果页面侧面或底部的文字太多，请不要害怕开始新页面并继续前进。

选择正确的注释细节级别

注释线框，就像线框本身一样，是一个迭代过程。根据经验，随着保真度的提高，您的笔记将变得更加详细。

例如，您可以先在纸上写下关于您的思考过程的几条评论。随着您使用数字工具，您的注释将变得更加精细。与开发人员交谈后，您可能会添加更多技术信息。

以下是一些关于在不同保真度级别上需要关注的内容的建议：

• 在草图中，添加对想法、角色和场景的评论。

• 在低保真线框中，专注于初始设计决策并探索各种 UI 选项。

• 在中等保真线框中，描述功能和布局推理。

• 在高保真线框图中，详细介绍深入的功能、内容和设计决策以及场景原理。

以上内容为转载