UX常用文档和交付物示例(多图)

译者心得:

本文作者列出了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设计师一定会投入到一组风格瓷砖中,并且如果他们有平面设计技能,可能会自己创建一套风格瓷砖。


风格瓷砖1

风格瓷砖2

风格瓷砖3

风格瓷砖4

系统地图(System maps)

系统地图图形化地展示了在一个特定的产品或服务中的不同角色和人工制品,以及它们之间的关系(把它当做一个生态系统地图)。角色可能是服务的用户或者实际上传递着服务的员工。人工制品可能是任何东西,从网站到实体对象如宣传册或印刷品。

系统地图可以描绘与产品或服务(不管是已有的还是未来的)相关的各种元素,并且帮助我们对UX设计有一个更加全局的视角。


系统地图1

系统地图2

系统地图3

系统地图4

系统地图5

系统地图6

任务网格(Task grids)

任务网格通常是任务分析的主要产出物。任务分析包括将一个大任务,比如发送一封邮件,拆解成它的具体步骤和阶段。任务网格跟体验地图很像,但是一般展示的是一个已有的任务,而不是一种未来的、期望的体验。

对任务的每个步骤,列出用户可能会问的一系列问题,以及潜在的痛点和关于功能特性的想法。


任务网格1

任务网格2

任务网格3

可用性报告(Usability reports)

可用性报告常常被用来详细描述专家评估结果,比如启发式评估或者认知走查,或者用来呈现可用性测试的结果。可用性报告的关键是尽可能保持简短(没有什么事情像阅读一篇一百多页的报告一样了)以及尽可能使用视觉化表达。在我的文章可用性检查实施指南中可以看到关于专家评估的更多信息。

可用性报告1

可用性报告2

可用性报告3

可用性报告4

用户旅程图(User journeys)

体验地图一般用来展示点到点的客户旅程,而用户旅程文档一般只用来展示用户旅程的一部分。比如说,它可能是用户访问网站的旅程,或者完成一个特定任务的旅程。

旅程通常被拆分为用户采取的步骤,通常会伴随着视觉化传达以帮助讲述故事。


用户旅程图1

用户旅程图2

用户旅程图3

用户旅程图4

用户旅程图5

用户旅程图6

用户故事地图(User story maps)

我们创建用户故事地图常常是作为敏捷软件开发项目的一部分。用户故事地图制定了组成各种产品特性和后续版本的用户故事。

用户故事用于在敏捷开发中定义用户需求。它们通常采取这样的形式:“作为一个<角色>,我想要<目标/渴望>以便<获得好处>”。比如说,“作为一个<帮助台操作员>,我想要<检索之前的帮助台询问>以便<发现到目前为止发生了什么>”。

你可以在我的文章把UX带入敏捷盛会中的技巧中了解更多关于敏捷开发的UX的信息。Jeff Patton在这个网站中也有很多关于绘制故事地图的信息。他也顺手写了《用户故事地图》一书。

用户故事地图1

用户故事地图2

用户故事地图3

用户故事地图4

视觉稿(Visuals)

视觉稿,实物模型,复合体,叫什么都可以(我认为叫做视觉稿是最清楚的),图形化设计视觉稿是重要的UX文档。它们展现了完成的设计最终应该长什么样子。随着响应式设计的流行,更加组件化的视觉稿(比如风格瓷砖)也越来越流行了。

线框图(Wireframes)

在很多年的时间里线框图是UX设计师的关键UX文档。但是,随着市面上出现的原型制作工具越来越强大和方便(更别说有那么多线框图的局限性),原型已经开始强势挤入了线框图的UX文档榜首位置。

线框图用来展示组成屏幕,页面或者UI组件的UI元素(文字,图片,按钮,链接等)。线框图有点像UI的蓝图,展示了由什么元素组成UI以及它们应该如何运作,但不一定会展示UI的外观。


线框图1

线框图2

线框图3

线框图4

文字云(Word clouds)

文字云(有时候会令人困惑地被称为标签云)是一种视觉化地以某种形状展现一组词语的方式。通常是以云的形状(所以叫做文字云),词语的大小跟词语的重要性或频率正相关。

文字云本身不是一种常见的UX文档,但是可以用来传达UX相关的信息,比如入站搜索词,用户反馈和站内搜索词。你可以在我的文章使用文字云表达中读到更多关于文字云的信息。也可以看看文章使用文字云提升你的设计研究的三种方式

文字云1

文字云2

翻译自:http://www.uxforthemasses.com/resources/example-ux-docs/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容