UX常用文档和交付物示例（多图）

作者: ux2017 | 来源:发表于2017-05-20 22:39 被阅读902次

译者心得：

本文作者列出了20多种用户体验领域常用的文档，并对每种都给出了大量示例和参考资料，内容非常丰富。有一些文档是比较类似的，比如体验地图、任务网格、用户旅程图和场景地图，它们之间的细微差别很难直观地分辨出来，但我认为区分这些概念并不那么重要，重要的是分析的过程。
文字不只是文字，图表也不只是图表。当你在考虑一句话怎么写的时候，你在考虑的是事情的本质，是现象背后的原因。当你在考虑一个图表怎么呈现的时候，你在考虑的是信息的相互关系，是其中蕴含的知识和启发。

在写了如何创建优秀的UX文档之后，我想到如果把一些UX文档和交付物的样例汇集起来应该会很有用。希望这能在你选择要产出哪种文档的时候提供一些灵感和帮助。对每种文档和交付物，我都提供了例子，以及一个简短的概述和可以让你了解更多信息的链接。本文将会包含下面这些UX文档和交付物：

请注意下面大多数的示例文档都不是我自己写的。你可以点击文档查看来源。

内容模型图(Content models)

内容模型图展示了你在一个设计中可能需要的所有类型的内容，不管你设计的是网站，应用，甚至宣传册。所有内容项根据它们的领域、类型以及与内容之间的不同关系（比如包含关系）显示在一起。内容模型图与领域模型图非常像。

虽然创建内容模型对于系统架构师、开发或者内容专家来说更为典型，但是这也是UX设计师应该知道（并且可能需要创建）的。将内容与设计解耦在响应式和移动端设计中也变得越来越重要了。你可以在内容模型：一种大师级技巧（分隔列表）中了解更多关于内容模型的信息。

内容模型图1

内容模型图2

内容模型图3

内容模型图4

移情地图(Empathy maps)

移情地图一般会（但不全是）伴随着人物角色。移情地图提供关于用户的信息，比如他们可能的想法、感受、行为、所见和所闻，以及他们可能体验到的痛苦和收获。

移情地图是让人物角色更加生动的好方法，可以激发对用户的共情并且收买更大的项目团队。协作创造移情地图，或者至少与大团队一起检查地图，通常是一种有用的方式。关于移情地图的信息有很多，甚至在innovation games网站上有一个在线移情地图游戏。

移情地图1

移情地图2

移情地图3

移情地图4

体验地图(Experience maps)

体验地图（又叫做用户体验地图）展现了用户在特定目标下的点到点的旅程和体验。比如说，一个关于“去度假”的体验地图会包含从研究假期、实际度假过程到写度假回顾的所有事情。

在旅程的每个阶段，体验地图都会展示一些信息，比如客户使用的触点，客户的所做、所想、所感，以及为提升体验而产生的任何挫折和想法。在对客户的体验进行讨论和设计多通道的用户体验时，体验地图是很有用的文档。Adaptive Path提供了一个可以免费下载的体验地图指南。你也可以看看我的报告从基于任务的设计到基于体验的设计，以及来自UX Lady的一些案例。

体验地图1

体验地图2

体验地图3

体验地图4

体验地图5

体验地图6

体验地图7

心智模型图(Mental models)

与任务网格一样，心智模型图描绘了用户在完成一个特定任务时采取的思维过程（即用户的心智模型）。比如说，在计划晚上与朋友的一次活动，或者考虑假期去哪里时。心智模型图将每个步骤拆解为具体任务以及用户在每个步骤中会考虑的问题和情况。

心智模型图对于讨论和捕捉用户行为以及发现设计机会很有帮助。在Indi Young的心智模型书中有关于心智模型图的更多信息，书的第一章可以免费阅读。

心智模型图1

心智模型图2

心智模型图3

心智模型图4

人物角色(Personas)

人物角色是用户的虚拟代表（有点像替身）。它们是虚构的，但是应该基于事实。它们代表着真实用户群的目标、动机、性格和行为。

人物角色可以让用户更加生动。它可以帮助项目团队对“用户”是谁达成共识（这并不总是一件容易的事情），帮助我们讨论用户的重要信息。可以看看我的文章最大程度地利用人物角色获取更多关于人物角色以及如何使用它的信息。

人物角色1

人物角色2

人物角色3

人物角色4

人物角色5

人物角色6

人物角色7

流程图(Process diagrams)

流程图将一个流程视觉化地展示出来，包括了不同的决策点和过程流。流程图在商业分析中更加常用，但是UX设计师也同样可以用它来描述一系列的用户旅程，或者在一个网站或者应用的某个部分的逻辑。

流程图1g

流程图2

流程图3

流程图4

流程图5

原型(Prototypes)

原型大概已经接替线框图成为UX设计师的最重要的UX文档/交付物了。原型本质上是设计的一个半功能性的模型。在讨论设计，评估设计（比如通过可用性测试）以及广泛地展示应该发生什么时，原型是非常好的工具。

我之前曾经描述过为什么我认为原型完全优于线框图，并且随着市面上越来越多的原型制作工具，确实没有理由不去创建可交互原型。可以在Adaptive Path的原型工具列表中看到全面的原型创建工具。

场景地图(Scenario maps)

场景地图展示了用户在给定场景下会经历的步骤（所以叫做场景地图）。场景地图不止记录步骤，也会记录好的想法、问题以及其他在考虑一个设计时可能有用的信息。

场景地图可以为当前的场景或者未来的场景创建。它通常关注用户会做什么，而未必关注用户会怎么做。你可以在我的文章手把手教你如何创建场景地图中找到更多关于场景地图的信息。场景地图在John Pruitt和Tamara Adlin的优秀书籍人物角色的生命周期——在产品设计过程中牢记用户中有详细的描述（虽然在书中场景地图被称为现实地图与设计地图）。

场景地图1

场景地图2

场景介绍(Scenarios)

场景介绍或视觉化或叙事化（即用文字）地描述用户（通常以人物角色的形式）在一个给定场景中会执行的步骤。与场景地图一样，场景介绍可以用于现实的场景或者假想的场景。

场景介绍可以用于识别为支持目标场景而需要提供的特性和功能，以及通过讲述用户故事创造一种未来的产品或服务。

场景介绍1

场景介绍2

场景介绍3

场景介绍4

站点地图(Sitemaps)

站点地图展示了组成网站或者应用，或者其中的某些部分的页面和屏幕。站点地图通常揭示分组，比如网站剖面以及不同页面和屏幕之间的链接。

站点地图1

站点地图2

站点地图3

站点地图4

站点地图5

站点地图6

草图(Sketches)

草图往往更像是一个设计工艺品而不是产出物。也就是说，它们通常用来帮助讨论一个设计或者概念，而其本身不适合作为一个比较正式的文档。但是它们依然是用来展示概念和早期设计的一种有用的UX文档。可以在我的文章绘制草图的乐趣中看到更多关于草图的信息。

草图1

草图2

草图3

草图4

故事板(Storyboards)

故事板是从卡通和电影领域借来的概念（如果看到了好的想法，不要害怕捉住它）。它们以漫画书的形式生动地展现一个场景，可以让事物变得生动有趣。如果想要了解更多，Johnny Holland有一系列非常值得阅读的关于故事板制作与UX的文章。

故事板1

故事板2

故事板3

故事板4

设计规范(Style guides)

正如Susan Roberson在她的文章创建设计规范中指出的，“设计规范是一份关于代码的动态文件，详细地记录了在你的网站或应用中的所有不同的元素和编码模块”。它通常不只包括元素（比如文字，按钮，UI控件等）的视觉外观和感觉，以及HTML和CSS代码，也详细描述了设计模式和正确的用法。

有很多设计规范示例。其中比较好的包括：

风格瓷砖(Style tiles)

正如在有着机智名称的Styletil.es网站上提到的，风格瓷砖是“一种设计交付物，包括字体，颜色和传达出网站的视觉品牌本质的界面元素。风格瓷砖类似于一个室内设计师在设计一个房间之前获得认可的油漆芯片和织物样品。它们有助于在设计师和关键决策人之间建立通用的设计语言，并且可以促进对客户的偏好和目标的讨论。”

风格瓷砖更多地是一种生动的设计交付物而非UX文档。然而，UX设计师一定会投入到一组风格瓷砖中，并且如果他们有平面设计技能，可能会自己创建一套风格瓷砖。