你需要知道的关于用户体验草图的一切

如果你做过任何严肃的创意工作，那么你对创意块太熟悉了。 感觉就像碰了一堵砖墙：你能想象的想法都不够好，或者在现实生活中行不通。

对于设计师来说，这种感觉再熟悉不过了。 然而，就像任何没有明确解决方案的复杂问题一样，一个聪明的过程可以带来所有的不同。 这就是用户体验草图的用武之地。

用户体验草图是用户体验设计中一个至关重要但经常被忽视的方面。 草图是一种非常有效的设计交流方式，同时允许设计师尝试多种想法并在确定一个想法之前对其进行迭代。

在这篇文章中，我打算涵盖您需要了解的有关 UX 草图的所有内容，包括以下几点：

• UX草图和线框简介
• 用户体验草图基础、工具和技术
• 用注释、注释、数字澄清草图
• UX素描技巧和窍门
• 旨在提高质量和生产力的微型方法
• 您需要了解的有关 Wireflow 的所有信息
• 用户体验流程草图快速指南

用户体验草图是一个两步过程

在设计中必须考虑许多选项，从而选择和执行最佳选项。 设计师考虑他们的选择，然后着手制定细节，从而使 UX 设计分为两步：

• 创意产生

在最初的步骤中，会产生多个想法，但由于它们无法完全成型，因此某些元素不完整或缺失的情况并不少见。 主要是考虑不同的方法，并根据您的任务和项目的各种约束来决定哪种方法最有效。

• 添加细节和细化

一步一步地，您确定了一些有希望的变体并着手制定细节，从而使一些想法变得不合适。

UX 草图和线框：介绍和分类

您的线框可能会因所需的详细程度、颜色和样式、是否要向某人展示等因素而有所不同。

我挑出了以下草图类型：

• 草图：创意生成

这些是最初的草图。 较低级别的细节被简单地记录下来。 使用有限数量的颜色。

我画了很多基本的草图，从不同的角度考虑问题，考虑不同的解决方案。 在绘制这样的草图的同时，我也在努力生成尽可能多的解决方案变体。

在这个特定的步骤，不完整让我的思想得到解放，这就是为什么在这个阶段避免陷入细节如此重要的原因。 我的目标是产生尽可能多的想法并选择最有前途的想法。

• 线框：规范，详细阶段

我通常会挑选有希望的草图并仔细研究细节，然后我会选择最好的变体并更详细地进行设计。

然而，这并不意味着每一个细节。 显而易见的事情可能会被注意到。 此外，某些方面将难以在纸上描述。

在这一步，我绘制了所有重要的细节，但我还没有在 Balsamiq 中绘制线框。 在纸上完成所有工作后，我开始在 Sketch 中绘图。

数字工具比纸张提供了更多的创作自由，您可以轻松地将注意力转移到小事上。 例如，您可以专注于“像素抛光”而不是设计。

• 视觉设计草案

这是一种很少使用的方法，但有时它可能会有所帮助。 在项目的早期阶段考虑了各种视觉解决方案，但为所有这些创建数字草图可能需要很长时间。 这就是为什么我首先在​​纸上绘制设计草图，以考虑不同的选项并选择视觉设计方向。

• 组件/元素细分

当我已经有了一个大致的想法并且正在考虑特定的页面功能或界面组件的组成部分时，我发现这种技术很有用。 我绘制不同的页面元素，深入细节，然后绘制页面元素的不同可能位置。

元素，即使是最简单的元素，也必须有状态； 可以按下一个按钮，它有一个悬停文本块，可能为空，也可能不为空。 它越复杂，它的状态就越多。

基础知识入门

• 准备好你的工具。 找到最方便的地方，一张有足够空间的大桌子。 拿很多纸，准备一些钢笔和记号笔。
• 暖身。 为了做好准备，我建议画一些线条、圆圈、基本模板和图标。
• 定义你的目标。 决定你想画什么。 设定你的目标并决定你要讲什么故事。 确定所需的详细程度。 决定你是否准备好画很多。
• 定义您的目标受众。 如果您是为自己执行此操作，则无需担心草图的外观。 但是，如果您打算向客户展示您的图纸，请确保您有一些额外的时间来为您的草图添加更多细节。
• 设定一个时间范围。 决定了你准备分配给素描的时间，比如说 30 分钟，这将帮助你专注于你的工作。

现在，一切就绪，可以开始了：

• 画出边缘。 绘制框架、浏览器或电话窗口、界面的一部分等。

• 添加最大或基本元素：菜单、页脚、主要内容。

• 添加详细信息。 添加相关细节，但在此阶段保持简单。

• 添加注释和注释。 仅当您计划共享草图时才需要这些。 然而，即使你只是为了你的眼睛，它们也很有用。

• 草图替代品。 为您的解决方案草拟一些快速的替代方案。

• 选择最佳解决方案。 选择最佳选项。

• 添加阴影和斜角。 这对于共享目的尤其重要。 添加阴影以使您的草图具有视觉吸引力，如果您打算与团队成员和/或客户分享它，这一点很重要。

• 保存草图。 拍照或将其放入文件夹中。 我的桌子上有几个纸盘用来画草图。

• 分享。 我通常使用以下分享方式之一：
  • 通过 Evernote 扫描草图并向其他团队成员或利益相关者提供永久链接。
  • 拍照并上传到 InVision。
  • 将图像上传并映射到 Realtimeboard。
  • 或者只是通过电子邮件发送照片。
• 查看草图并添加注释。 休息一下，过一会儿再回到你的草图上。 再看看他们。 草图对你还有意义吗？ 一个好的草图必须易于理解。

用附加元素澄清草图

找到或绘制适当的草图，然后在其中添加以下细节：

1. 标题。 有时，添加标题是一个不错的选择。 如有必要，在草图顶部写下描述和日期。 标题将帮助您了解您正在查看的内容以及草图是否相关。 如果您有很多草图或要向其他人展示，这将特别有用。

2. 注释。 注释是靠近元素放置的名称和注释，用于解释其内容或其他属性。 它们添加了阐明其他元素并且通常难以绘制的细节。 例如，它可能是块的名称、一些交互细节、图片的解释、未来设计变化的一些想法等等。 您可以查看我的一个示例以查看注释草图的外观。

3. 数字。 给草图的元素或草图本身编号。 您可以决定如何对它们进行排序（例如，通过交互流、创建它们的顺序等）。 它在讨论（尤其是远程讨论）中也可能很有用，因为您的同事和客户只需在他们的反馈中指出草图编号，您就会明白他们的评论指的是哪一个。

4. 箭头。 您可以使用箭头来指示屏幕转换。 它们还可用于连接草图的不同部分，指示一系列动作，等等。 由于箭头的含义可能会有所不同，因此您可以在箭头上方添加对箭头含义的描述或解释。 这是一个基本草图的示例，显示了转换和几种不同的状态。

5. 笔记。 就像注释一样，注释用于解释概念。 但是，注释与注释的位置不同。 它们不连接到元素或位于所描述的元素附近，类似于此示例。 注释可以放在页面的顶部或底部。 他们甚至可以描述设计中未包含的元素、您可能遇到的问题、一般解释、未草拟的想法等等。

6. 手势。 手势在触摸设备设计的情况下是相关的。 绘制手势可能需要练习。 用于指示不同类型动作的手势有多种变体，因此最好提前决定如何指定特定动作（当然，如果它不明显）并练习绘制它。

7. 回馈。 在将草图展示给其他人之后，或者在您自己再看一遍之后，您可能会收到修复或改进草图的建议。 用不同的颜色标记此类反馈通常很有用，以帮助区分反馈与原始草图。

您可以为不同类型的元素使用不同的颜色。 有时，我用黑色画图，蓝色链接，深绿色笔记，红色标题和反馈。 尝试在你的草图中使用不同的颜色，但要确保你选择的颜色是一致的！

更具体的提示和技巧

1. 不要担心质量。 不要看 Dribbble 上的草图； 它们是关于完全不同的东西。 请记住，草图的主要目的是帮助您更清晰地思考、找到更好的解决方案并节省时间。

2. 实践。 首先，您可以尝试绘制一些应用程序。 打开网络或移动应用程序并尝试复制屏幕，描述笔记中的元素。 只要您有空闲时间，就练习绘制设计的基本构建块。 一般来说，熟能生巧。 一段时间后，它将成为您设计师自我的一部分。

3. 买个文件夹。 我经常不在办公室工作，而是在咖啡馆或家里工作。 纸质草图很容易损坏，因此请购买一个简单的文件夹以确保它们安全无虞。

4. 随身携带工具。 这有助于确保您可以随时在纸上记录您的想法，否则您可能会忘记想法或无法足够详细地记住它。 我总是随身携带一个记事本、几张 A4 纸和钢笔。

5. 与他人分享。 与其他人互动并与您的团队沟通非常重要。 从长远来看，让其他人参与并获得他们的反馈，尤其是在早期，有助于节省时间和资源。 您还可以鼓励其他人按照他们设想的设计方式进行绘制。

6. 纸盘。 考虑在工作台上放置纸盘。 例如，我有三个：用于传入的任务、草图和干净的纸张。

7. 实验和定制。 我的建议是基于我的经验。 随着时间的推移，你会发现什么最适合你； 哪些方法，哪些步骤顺序，哪些内容能够充分发挥您的创造潜力。 只有不断尝试新事物，您才会到达那里，这就是为什么尝试不同的格式、样式和尝试新模板很重要的原因。

8. 使用模板。 模板将节省时间并隐含地考虑格式限制，从而腾出更多时间专注于重要的事情。

其他改善草图的小方法

这些不一定是技巧和窍门，但它们是方法、工具和建议的集合，可以提高您的工作效率或提高草图的质量。

1. 创建一个草图板。 使用笔和纸而不是数字素描工具的最大好处之一是您实际上可以将它贴在墙上。 您团队中的每个人都可以看到并参与（尽管我建议设置审查会议）。
   
   • 你自己会看到你的草图，这会激发你的思考，让你看到全局，而不是孤立的部分，而是整个系统。 您将看到零件之间的相互作用以及它们相互配合的方式。
     
   • 创建草图板 - 附上您的白板草图。 如果您的办公室没有白板，您可以使用双面胶带或便利贴将您的草图粘在墙上。 如果不想粘在墙上，可以找一大块硬纸板代替。 我强烈建议使用草图板，因为它们是最好的设计工具之一。
2. 使用白板。 白板是一个很棒的绘图工具。 它有很多优点：
   • 它是协作的，很容易让其他团队成员参与讨论和绘图。 即使他们的想法不太适合，您也会理解他们的思维方式，这将帮助您达成一致。
     
   • 标记不会让你专注于细节，你必须考虑一般的事情。 草图可以解释。
     
   • 白板易于清洁和修正。
     
   • 空间很大，您可以轻松地思考整个系统流程。
     
   • 您可以使用磁铁附加草图、打印输出和参考资料。

3. 原型。 制作一个可点击的原型来评估您的设计。 尝试获取有关某些元素的反馈。 这在您使用模板时特别有效 - 您的草图大小相同。 显然，如果您使用模板，绘制相同尺寸的草图会容易得多。 我将通过为您提供一些可以下载和使用的模板来尝试使其变得更加容易：移动、浏览器多窗口、浏览器滚动、角色。

4. 使用您的打印机和扫描仪。 用手画出框架（你可以用尺子画得更准确），然后用扫描仪或移动应用程序扫描它，然后打印出来。 您可以在打印前在图像编辑器中编辑您的模板。 您可以删除不必要的细节或复制一些元素。 您还可以打印现成的网站页面、照片和其他描述性元素。 您可以将剪纸粘贴到草图中。

5. 使用 Evernote 进行扫描。 Evernote 是一个很棒的设计工具。 您可以在其中保存和共享您的草图，您可以创建主题，并使用标签来组织您的草图。 “扫描仪”模式的能力尤其令人印象深刻。 你把你的草图放在它前面，它会“扫描”它，这样你就得到了草图的副本。 然后你可以邀请你的同事加入 Evernote 并给他们你的笔记链接。 由于有适用于平板电脑和手机的移动应用程序，您可以随时将草图放在手边。

6. 混合素描。 要将一些生活和现实主义融入您的草图中，您可以将它们与照片结合起来。 这意味着你必须拍一张照片，然后在上面画一些带有界面元素的故事。 这也可以帮助您注意一些交互问题和细节。

7. 追踪现实世界。 如果您需要创建故事板，说明特定上下文中的体验（例如，在公交车站使用智能手机的人），您需要包括对人物、地点和各种现实生活对象的描述。 这些可能很难绘制，特别是如果您没有掌握绘图技巧，但这里有一个简单的提示：拍摄对象或情况的照片，然后使用图像编辑器获取关键对象轮廓。 之后，您可以在草图中使用生成的轮廓。 当然，如果你有平板电脑和手写笔，那就更容易了。

Wireflow：概述系统流程和分支

线流本质上是系统流程的序列，一个接一个的屏幕，带有分支和决策点。 我们应该考虑用户如何处理他们的任务，他们从一个屏幕移动到另一个屏幕的方式，以及他们随着时间的推移对产品的整体体验。

Wireflow，或者您正在绘制的内容及其连接方式，可以根据以下方法进行组织：

• 顺序。 一个序列是一个笔直的旅程，一个接一个的屏幕。 它也可以是一个带有决策点的故事； 你不仅展示了旅程，还展示了用户可以选择的决策点和不同的路径。 您可以显示屏幕交互的结构。
• 状态变化。 描述某些元素的不同屏幕状态以及导致这些状态之间转换的条件或动作。
• 屏幕与屏幕元素。 您可以绘制整个屏幕或考虑微交互和交互。
• 平台。 您可以考虑一种平台体验或多个平台。
• 范围。 你会描绘用户旅程的一部分还是整个旅程？ 一个用户与系统的交互，还是多个用户的交互？

我一般会尝试定义以下线流类型，具体取决于组织和实际用途：

1. 映射整体流程和高级流程。 立即画出屏幕变化的草图，并画出产品使用的大致历程。 在这里，您可以包含一些上下文，并且可以选择显示一些用户交互。 例如，电子商务购物服务是一个相当长的旅程，可能包括很多步骤：用户如何找到商店、他们订购产品所经历的步骤、他们如何付款等等。

2. 画面流。 这侧重于通过系统的特定功能流程。 它可以是一个小的直接屏幕序列，也可以是一个带有分支的旅程。 例如，用户上传一些照片或视频。

3. 导航方案。 绘制您的屏幕及其包含的选项。 这不应该映射旅程。 此步骤包括显示用户可以选择的选项、用户拥有的方向以及各种应用程序部分的信息。 我通常在项目开始时创建一个导航方案。 它有助于了解导航的结构（应该包括哪些点，需要多少级别）。

4. 屏幕状态。 绘制屏幕或元素状态（一个示例可能是文件上传对话框）。 在这种情况下，例如，屏幕将具有以下状态：

   • 空白的
   • 用户在活动区域​​中拉取文件
   • 文件正在上传
   • 文件已上传
   • 有错误

绘制 UX 流程：快速操作指南

线流设计过程类似于线框一。 许多步骤相似或相同，但有一些重要区别：

定义你需要画的东西。 准确地决定你想要画什么（例如，你的设计的一般历史或片段）。 您想产生不同的选择还是想仔细考虑一次旅程的细节？ 决定你是否要向其他人展示你的草图。

定义应在绘图中包含哪些关键帧和过渡。 如果您添加所有屏幕和班次，您的线流将非常长且复杂。 考虑你应该展示哪些关键屏幕来传达有助于完成任务的交互本质。 屏幕切换也是如此。 您需要选择哪些转变对表达您的想法更有用。 查看此示例以供参考。

定义起点。 你旅程的起点是什么？ 您可以从入口点开始，即旅程的开始，例如，用户登录您的应用程序时看到的内容。 或者，您可以从中点开始，或者从最有趣/最困难/最重要的屏幕或流程步骤开始。 或者，您可以从用户获得的最终结果开始，并描述用户为达到这一点所采取的步骤。

决定接下来会发生什么。 绘制开始步骤后，通过回答以下问题来决定下一步做什么：

• 这一步引导用户走向何方？
• 你想让他们走哪条路？
• 他们必须做什么才能到达那里？

绘制替代路线、条目。 考虑用户可以到达每个步骤的替代方法：

• 如果用户的 Internet 连接失败会怎样？
• 他们还有哪些其他选择？
• 如果用户或应用程序出错，会出现什么问题，会发生什么？
• 如果用户在这一步关闭应用会发生什么？
• 用户下次启动应用程序时会从哪里开始？

考虑替代流程。 分析历史，设计替代流程，然后画出草图。

添加注释、注释、详细信息。 添加解释性元素，以澄清非显而易见的细节。

保存。 制作草图的数字副本。

分享。 分享草图（例如，通过 Evernote 或 InVision）。

基本的 UX 流草图技巧和窍门

首先绘制一个线流。 如果你要考虑一段很长的旅程，你最好做一个速写，以了解你需要多少空间，以免错过一些重要的步骤或细节。 之后很难将它们添加到纸质草图中。

不要创建包含太多细节的巨大地图。 纸质草图没有撤消按钮，因此很难进行更改。 您可能会过于精确地绘制细节，这会分散您对生成不同高级变体的想象力。 与其创建一个可以说明整个系统的庞大方案，不如尝试专注于关键脚本并尝试为每个脚本专用一个单独的页面。

削减不必要的细节，并结合各种详细程度。 没有必要画出所有的交互描述，所以尽量只使用你旅程的关键元素。 在绘制巨大的交互图时，您无需详细处理每个屏幕。 有些屏幕可以只用几个方块来表示，而其他的关键屏幕则可以详细设计。

尝试不同的纸张尺寸。 尝试不同的纸张格式，A3 或 A5。 纸张尺寸会限制您，并会以不同方式影响您的流程。 一张小纸不会让你添加许多屏幕或细节，但它可以帮助你专注于主要想法。 使用一张大纸，您可以绘制一段巨大的旅程、许多细节和附加注释。 或者，您可以在其上放置一些小旅行。

便利贴也可以提供帮助。 您也可以尝试使用便利贴。 您可以在它们上绘制单独的屏幕或一些脚注，或者您可以绘制草图元素的其他状态。 它们的优点是可以轻松更换，您也可以简单地将笔记移动到其他地方。 例如，如果流程发生了变化，您只需更改便利贴的顺序即可。

使用模板。 尝试使用模板。 它们将节省时间，并使您能够创建更多可点击的高质量原型。

尝试使用白板。 白板有很多优点。 它变得越来越流行，因为它可以让你用很多分支绘制一个巨大的旅程。 您可以在纸上绘制大量应用程序组件，然后使用磁铁将它们附在白板上，将它们添加到旅程中。

绘制阴影。 阴影可以帮助您标记重要元素，并为您的草图增加视觉吸引力。 我使用三种不同类型的阴影：

• 沿着光线方向的线条 - 这并不总是看起来很漂亮，但您可以使用刻度并将对象拾取到不同的“高度”。
• 用较深的颜色勾勒出某些部分（仅底部或底部和右侧）
• 使用 Pro-marker（或您用于绘图的应用程序中的等价物）

绘图组件。 像“我画得不好”这样的反对意见可能会扼杀你的主动性。 它实际上比听起来容易。 即使是最复杂的草图通常也由许多基本块组成，就像在这个例子中一样。 如果您可以绘制点、线、三角形、正方形和圆形，那么您就拥有了绘制草图所需的基本构建块。

把它们放在一起。 基本元素、按钮、单选按钮和下拉菜单由基本元素组成。 学会绘制这些元素后，可以将它们组合起来，绘制复杂的块和组件。

包起来

这篇文章的目的不是为 UX 草图或一般草图创建终极的、万能的指南，因为设计师有不同的需求和个人喜好。

如您所见，这需要涵盖很多内容。 设计师使用无数的工具、技术和方法来制作 UX 草图，而且这是相当主观的。 某些技术可能适用于从事不同项目的不同人员，也可能不适用。 如果你刚刚开始，你绝对应该尝试一下。 不断的练习和实验将帮助您找到适合您的方法。

您可以选择最适合您的项目和设计方法的技巧和技术。 你对其他 UX 用户有什么额外的草图技巧吗？ 随时在评论部分分享它们。

• • •

进一步阅读 Toptal 设计博客：

• 电子商务用户体验——最佳实践概述（附信息图）
• 以人为本的设计在产品设计中的重要性
• 最佳 UX 设计师作品集——鼓舞人心的案例研究和示例
• 移动界面的启发式原则
• 预期设计：如何创造神奇的用户体验