作为UX设计师，我们需要向利益相关者提供内容情境并传达设计决策来阐明我们要表达的概念。添加注释允许UX设计人员向客户端和开发人员传达为什么将界面元素放置在特定位置以及该元素的交互模型是什么等信息。这为设计解决方案建立了明确的信息层次结构，并创建了用户流程，帮助利益相关者了解完整的交互线路图。
一个带有注释的线框图展示出不同屏幕间的用户流程。作者/版权所有者：Dixie Pacheco
为什么注释很重要？
创建带注释的线框图非常耗时，但是可以很好的传达用户体验的整体情况，这有助于利益相关者了解设计决策的好处及其理由。线框图既是项目文档，又是视觉沟通指南。将注释作为工作流程的一部分可以消除误解或混乱。同时，了解受众还可以帮助你确定应将哪种类型的信息纳入注释中，以及应使用哪种写作风格。在向他人展示注释之前，最好先征得项目团队对注释需求的反馈。
线框图通常有五类受众：客户（内部或外部）、开发人员、视觉设计师、文案、最重要的是未来的你自己。
-- Twitter高级产品设计师 Dan Saffer
客户希望看到业务收益以及（数字）体验会给他们的用户带来什么好处，因此使用注释来解释用户体验如何与客户的品牌和业务保持一致非常重要。同时，开发人员和视觉设计师希望了解应用程序的工作方式，因此你需要向他们演示消息传递以及界面（UI）元素的位置和样式，而文案想知道需要编写的内容以及使用什么样的语调来适应目标受众。请确保在此过程中为自己创建笔记，因为你可能需要重新访问该项目，并想知道当初为什么要做出某个设计决定或特定注释。
使用Adobe XD制作的线框图套件。作者/版权所有者：Ahmed Hammad
使用注释显示内容情境
注释提供了某些事物将如何工作的情境。设计线框图时，使用注释不仅可以说明设计本身，还可以说明其在动态环境中的工作方式。首先从用户流程开始，显示用户如何与设计交互的总体逻辑和过程。比如，用户从哪里开始、用户如何选择以及用户将看到什么？
用户将如何与设计交互的总体逻辑和过程图例
交互模型可帮助你提供导航情境，并列出应用程序内所需的各种交互。链接将用户带入到体验中，用户可以看到哪种类型的输入以及用户的选择是什么？
移动端在线商店的线框图，包含页面每个部分的注释。作者/版权所有者：Olivia Gardiner
给线框图添加注释的最佳做法
尽早开始做笔记
一个简单的文本文档或电子表格可以帮助你在将注释应用到线框图之前组织好注释内容。使用简单的词汇和活泼的写作风格使笔记和评论保持简短而直接。避免使用隐喻或修辞手法，并将所有内容保持在内容情境中。提供对功能实现有用的信息，例如字符限制、分页规则和复选框状态。
保持整洁
使用网格系统保证注释和线框图的整洁，以实现统一的布局。通过网格系统，可以保持页面元素与编号的顺序和层次结构对齐，从而更加有效地通过注释传达设计决策，并将注意力集中在功能和内容布局上。
根据客户的内容制定设计决策
不要使用“lorem ipsum”这样的占位符文本，请使用真实内容进行设计。这将避免任何不必要的混乱，也无需对页面上将要使用的特定内容进行大量注释，因为所见即所得。
不要跳过对特定部分或页面的注释
为每一页添加全新的注释。要避免参考之前的项目或声明某项功能和其他网站或应用雷同。在注释中引用过去的项目可能会产生与手头项目不同的偏差或期望。
利用图例
创建符号以区分注释中的内容、功能和动态元素。内容和动态元素的简单图例将为读者提供清晰的信息，并有助于为每个线框图提供情境说明。保持一致的条理性，比如使用两位数编号符号1.x，2.x等，如有必要，你可以根据需要添加其他符号，而不必对现有注释重新编号。注释计数是特定于页面的，因此请勿继续上一页的编号，而需要在新的页面重新计数。向读者提供特定的页面专用ID以便轻松追踪页面之间的注释。
一个移动界面的线框图，带有编号注释和描述图例。作者/版权所有者：Chaymae Lougmani
从解释常规页面元素转移到特定页面元素，并在引用线框图元素和注释时使用相同的命名约定。 确保为每个注释提供可视空间；不要让数字、箭头和注释来干扰页面。如上图所示，在右侧进行注释和其他笔记。
考虑状态
请记住要注意交互性、微交互、移动手势和模式窗口，为每个交互提供用户操作和界面响应标注。比如，说明用户点击的位置或用户将鼠标悬停在元素上时会发生的情况。
一个带注释的移动app线框图。作者/版权所有者：Volodymyr Melnyk
注释的使用时机及场景
在注释线框图时，请简明扼要并清楚地表达想法。阐述如何使用某些内容，为什么将其作为设计的一部分以及会将用户带到何处。你可以使用注释来做以下这些事情：
- 显示号召性用语（CTA）。在每个页面或区块上高亮显示CTA的标签、文本和位置。登录或者注册的操作说明要有明确定义。
- 澄清元素和区块。页面元素和区块应明确定义和标注。如果元素或区块是小部件或区块的显示是有条件的（例如，用户是否登录），请提供详细说明。
- 解释链接和按钮。阐述清楚每个线框图上所有链接和按钮的位置，以及单击后会执行什么操作。显示导航元素会将用户带到的位置。
- 描述动态元素的功能。在演示线框图概念时，请提供以静态形式显示的动态页面元素的相关信息和设计说明。这将包括下拉菜单以及处于活动动态和非活动状态的按钮。例如：“单击时，将打开一个模式叠加窗口”，或者“在悬停时，将打开一个工具提示”。
- 显示页面元素的活动和非活动状态。显示在满足给定条件后按钮状态将如何变化，例如，用户是否已确认阅读条款或已经与页面上的验证码完成互动？
- 显示隐藏或模式窗口的页面内容。设计并说明页面上未立即显示的内容。线框图的隐藏内容或模式窗口元素可以在补充页面或页面空白处显示。
- 支持性消息和提示。鼓励用户成功完成某些任务和成就。通过分步式公开或工具提示，让用户知道在某些部分应该做什么。
- 提供错误消息提示和错误状态。错误消息提示以及错误状态都需要空间和规划，因此请提前考虑所需的消息类型以及将其作为页面元素放置在何处。错误消息应该告诉用户需要修复或纠正错误的方法。
- 指示页面和元素的过渡方式。显示或描述页面元素如何在活动状态和非活动状态之间进行动画或切换。描述动画及其在页面上的使用方式。
- 为项目团队提供标注。编写动作或功能特性，以使设计人员和开发人员知道何时显示加载消息、如何对搜索结果中的内容进行分页或滚动浏览、何时何地使用辅助功能标签等等。
带有描述可访问性需求注释的线框图。作者/版权所有者：Karen Hawkins
你应该对需要处理的内容或功能的各个方面每次都使用不同的注释。当用户打开以前注释过的其他页面或动态内容时，请添加页面引用。
简洁明了
避免写作含糊不清，这可能会导致误解并破坏使用线框图注释的目的。你的注释应清晰准确，以避免需要额外澄清其含义。注释不能替代与利益相关者的交谈或与项目团队进行正式交流。
线框图注释用于向利益相关者提供设计情境并传达项目概念和想法。通常，读者不会详细阅读线框图注释。所以，你需要准备好对你的注释发表意见并回答来自客户和项目团队的问题。使用演练和临时用户测试的反馈来测试和验证线框图。制作线框图不是孤立进行的，将设计决策放在潜在用户面前将为交互提供情境，并有助于交付项目成果。
英文原文：https://xd.adobe.com/ideas/process/wireframing/benefits-of-annotating-wireframes/
原文作者：Andrew Smyk
编译作者：微博/公众号@设计吐司
以上译文仅代表原作者观点。如需转载请遵循CC版权协议正确标明出处。
网友评论