产品设计

用户体验设计交付物

微信扫一扫,分享到朋友圈

用户体验设计交付物
0

前言:本文翻译整理自Alex Khmelevsky,文长3000字左右,阅读时间约为10分钟

作为用户体验的实践者,我们经常被潜在客户和其他设计师问到类似的问题:

“在设计项目结束时,你会提供什么可交付成果?”

“这对我们的开发团队来说是否足够执行?”

“我们的设计团队是否能够维护你的设计?”

“在未来添加新功能有多难?"

等等…

为了解决所有这些问题,并为设计过程提供一些线索,这里简要描述每个交付品及其目的。

什么是 UX 可交付?

让我们从最基本的开始ーー什么是可交付的? 简单地说,用户体验可交付物是一个交流想法以及研究结果的设计文档,并为设计和开发团队提供指导。 不管是哪个行业或平台,不管是小型初创企业还是全球性企业,一个标准的用户体验设计项目的可交付成果清单或多或少是相同的,主要取决于产品需求、预算和时间表。

这份清单通常包括以下文件:

研究阶段

* 用户调研文档

* 用户界面/用户体验研究文档

* 信息架构思维导图

* 用户流程文件

* 线框图

* 交互式原型

* 用户测试报告

* 视觉设计原型

* 用户界面动画

* 设计系统

* 设计规范

下面我们来详细来看一下每一个问题:

用户调研文档

用户研究是任何项目不可分割的一部分。 通过利用各种方法,例如个人访谈、实地研究和在线调查,我们获得了关于客户需求、情感、行为和动机的额外洞察力。 除了采访用户,我们也进行其他方法分析,如卡片分类,思维导图,协作线框,等等。 这些访谈和方法的结果被整合在一份研究文件中,其中包括主要的发现、人物角色和高层次的建议。 本文档帮助我们获得关键利益相关者对用户目标和期望特性的认可。

除了最后的调研文档,我们还提供了所有的原始材料,包括用户研究计划、带有结果矩阵的电子表格、音频或视频记录、访谈中的笔记等等。

竞品分析是一个很有价值的研究方法,它可以帮助我们找出竞争对手的优势和劣势。 通常,我们挑选5-7个最具吸引力的直接竞争对手,并评估他们的解决方案,以解决我们在用户研究和项目发现过程中发现的问题。 我们还注意到它们使用的术语,以确保我们的解决方案利用了行业标准语言和命名约定。

但是我们并没有止步于此,也没有将我们的研究扩展到与项目没有直接关系的产品上。 毕竟,最终用户体验更加多样化,而不仅仅局限于单一产品。 在研究阶段,我们可能会关注诸如导航、使用体验、最常见的工作流和设计模式、使用的可视化类型等等。 因此,我们创建了一个最终的研究文档,其中包含了主要的调查结果,并作为指导和支持我们的设计决策的手册在整个项目中使用。

信息架构思维导图

一旦主要的研究阶段完成,我们使用所有收集到的数据为未来的产品建立一个信息架构,或者修改现有的架构以更好地适应用户的需求和工作流程。 它通常是以一种思维导图的形式创建的,这种思维导图可以鸟瞰整个系统,并显示各个部分之间的关系。 事实证明,当与利益相关者合作时,这种思维导图练习是非常有效的。 通过可视化整个项目结构,可以更容易地理解范围和定义特性优先级。

思维导图帮助我们更准确地规划设计工作,以有效和可持续的方式组织内容,并创建一个更深思熟虑的导航。 多年来,我们尝试了很多在线和离线工具来创建思维导图,最终以 MindNode 作为我们的首选工具而告终。

用户流程文件

用户流程是一系列用户操作或系统状态,用户需要通过这些操作或系统状态来实现一个有意义的目标。 我们创建了一个设计规范格式,它将屏幕布局设计与用户和系统交互的流程图样的表示分解为简单的场景。 本文档的主要目标是为开发人员提供所有可能的用户流的详细描述,包括边缘案例、错误和各种状态。

它是一个迭代的文档—- 在项目的整个生命周期中,我们不断地更新它。 这一切都是从空白的模版和箭头开始的,它们勾勒出核心工作流。

一旦我们有了初始的线框图,我们就把它们添加到文档中,一旦视觉设计生产阶段开始,我们就用最终的视觉效果替换它们。

这个过程使我们能够更有效地迭代用户流程,根据文档的完整性不断监控项目的进度,并在早期识别任何令人沮丧或混乱的点。

线框图

线框图本质上是一个网站或应用程序的框架。 它们被设计用于固化项目需求并定义主要的布局、用户体验工作流和内容。 它们很容易创建和维护,允许我们快速迭代各种想法,获取利益相关者和最终用户的反馈。

在设计界有一个永无止境的争论,是否应该创建低保真度或高保真度的线框图。 双方都有自己的论点,但我们更倾向于后者。 根据我们的经验,利益相关者和用户倾向于更好地理解他们。 我们不需要解释"这个灰色模块以后会被复制取代",当线框图更加详细,看起来更像是一个成品而不是一个草图时,许多问题就自己解决了。


然而,在用户体验阶段的开始,当我们刚刚开始整体布局和导航时,低保真度的线框图被证明是更有效的。 我们可以快速生成一组选项来与客户讨论,一旦我们同意某个解决方案,我们就转向高保真的线框图,这需要更多的时间来创建,但从长远来看对项目更有利。

交互式原型

一张照片胜过千言万语。 一个交互式原型的价值是它的10倍。 我们创建交互式原型作为线框图和视觉设计过程的一部分。 它们帮助我们识别设计中的弱点,在内部迭代设计,验证假设,测试假设。 通常情况下,我们会使用像 InVision 这样的简单工具。 它提供了全方位的功能来进行用户测试,向客户展示我们的工作,或者收集涉众的反馈。 当我们想要测试一个更复杂的交互或者工作流时,我们可以使用类似于 Framer 的东西或者直接用 html / css 创建原型。

用户测试报告

在进行设计项目时,在设计过程中停下来验证假设和设计决策总是很有用的。 其中一站是可用性测试。 在交互式原型的帮助下(使用线框图或最终视图创建) ,我们进行了一系列的用户测试会话。 作为这个练习的结果,我们创建了一个用户测试报告,其中包含对我们的发现的总结和对下一步的建议。 它还通过概述总体测试目标、设置和参与者人口统计特征为测试提供背景。 我们还分享音频和视频录音以及其他辅助材料。

视觉设计原型

随着我们最终确定核心特性的线框图和工作流程,我们开始在项目的视觉方面工作。 无论是使用品牌指南(如果提供的话) ,还是从头开始设计风格,我们总是从视觉探索开始。 我们创造了一套视觉设计理念伴随着情绪板,以说明我们的愿景,未来的风格的产品。


一旦我们同意了进入开发阶段的方向ーー对所有需要的页面应用样式,并创建所有必要的规范,这样开发人员就可以开始从事他们这一边的项目。



作为生产阶段的一部分,我们还提供了短视频剪辑,展示了主要的用户界面交互和动画,为用户体验增加了愉快的时刻,并引导用户沿着这条路走下去。 然后,开发人员将视频和动画规范用作将这些交互实现到最终产品的指南。

设计系统

设计系统是一套设计说明文件,为客户的内部设计团队或第三方机构提供强大的工具包。

风格指南形式化的关键设计原则,描述视觉识别,并设置排版,颜色,响应行为,产品照片和可视化风格的基本规则。

组件库是不同状态的 UI 元素的集合。 它以草图文件或任何其他由项目需求设置的软件的形式出现。

用户体验指南文档提供了关于导航的建议,描述了使用的用户体验设计模式,以及如何使用组件库应用它们。

设计系统帮助维护产品的设计和体验的一致性,并被用作创建新页面和添加新功能的构建块。

设计规范

当涉及到开发时,确保设计按预期的方式实现总是很重要的。 通常情况下,开发者自愿或不情愿地忽略一些看起来不是很重要的小事情,但是设计和实现之间的这些小差异会产生滚雪球效应,最终可能会极大地影响最终的用户体验。

在过去,我们的团队会提供一个详细的、静态的 PDF 文档,其中描述了所有 UI 元素的度量、边距、填充等。 由于在整个项目中不断进行设计更新,这个文档的制作非常耗时,而且很难维护。 开发人员经常抱怨很难快速找到所需的信息并在文档中进行导航。

为了解决这些问题,我们决定转向在线解决方案ーー zeblin.io。 我们现在有了一个多功能的交互式工具,为开发人员提供了一种方便的方式,在他们需要的时候得到他们需要的东西。 除了大小和页边距,Zeplin 还提供代码片段,允许快速将资产导出到 PNG 或 SVG 格式,拥有评论系统来支持开发和设计团队之间的交流,并且在整个项目中易于维护。

总结

创建这些资产的过程并不总是线性的,并且取决于项目的优先级和进度。 文档的某些部分可以并行完成,某些部分可以比其他部分更早开始。 在项目结束时,我们通过共享 Google Drive 或 Dropbox 文件夹提供所有最终可交付成果。 我们还将所有在 Zeplin 和 InVision 创建的项目的所有权转让给客户。

一切完成后,我们可以通过提供设计支持来继续我们的合作伙伴关系。 这可能类似于监控开发以确保一切都得到正确实施,充当内部设计团队并提供不断的设计更新,或者组织与客户团队的研讨会以教育他们关于新的设计系统。 但这是另一篇文章的主题。

作者:Alex Khmelevsky

https://clay.global/news/ux-design-agency-deliverables/?ref=heydesigner

注:第一次通过翻译软件整理翻译文章,如有错误,请多指正。

最后吐槽一下UI中国的文章编辑器,只能说排版惨不忍睹!!

阅读原文...


UI中国

DevOps 基于Walle的小型持续集成实战(二)设计

上一篇

SpringMvc的Controller中异常处理

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
用户体验设计交付物

长按储存图像,分享给朋友