专业知识分享用户体验 · 设计

完整的用户体验设计过程(下)

2020-06-2013 MIN READ原载于微信公众号 ↗

接下来让我们继续上一篇文章的内容,来看看整个用户体验设计的过程~

阶段4:应用程序流程

流程、图表和地图

在我上一篇关于流程(UX流程,以及它们为什么如此令人困惑)的文章中,我讨论了许多可供UX设计人员使用的选项,它们从简单的文字和箭头一直到高保真的用户流。但在这个过程中,你要保持低保真度(即细节的数量),这样你才能尽早得到反馈。因此,这些将帮助您尽快确定信息体系结构(信息的结构和层次结构,以及如何表示该信息)。

为了提高速度,你应该使用任何能够帮助你可视化整个应用程序的实际流程的东西。一种选择是基于文本的UI流程。这使得迭代变得非常轻松,并且节点可以非常容易地转换为便签,以便后续测试。

基于文本的UI流程的解释

基于文本的Ul流程的示例

流程图是类似的,尽管它们使用UML(统一建模语言)来保持一致并使其易于理解,尤其是当用颜色编码时。站点地图也可以用来显示站点上的每一个页面,但只是对于简单的网站来说是如此,对于复杂的web/移动应用程序来说就不是这样。你很有可能不需要使用Sitemap(代替其他工具);请记住,凡事都要以防万一。

流程图

站点地图

用户测试

在你进行更多的图形/视觉设计之前,你要确保你在正确的轨道上。毕竟,作为用户体验开发人员,你有责任为他们提供他们需要的东西,帮助他们开发出用户会喜欢的体验。因此,为了确保你不会浪费时间重新做你的工作,你需要别人的反馈。

将流程写在纸上供用户(客户端、开发人员等)测试,这是让他们开始“体验”应用程序的好方法。虽然这不会让他们对最终产品有很好的感觉,但它提供了一个获得反馈的机会。毕竟,阶段4实际上只是一个合理性检查——以确保在你不会因为本可以通过适当的沟通和协作来避免的问题而放弃后续的工作。

让测试人员“浏览”这个应用程序,看看一切是否合理,是否有建议等等。最糟糕的情况是,每个人都说很好,然后,在您完成了一个完整的原型之后,有人说流程不正确,或者出现了一个将您带回此阶段的基本问题。显然,将来还需要修改,但现在是大修改的时候了。

即使你在电脑上规划了应用程序的流程,也可以用便签来绘制应用程序的地图。这样人们在批评它或在应用中移动东西时会感觉很舒服,写在一堆便利贴上就不会有“不成不变”的感觉。

因为这个原因,你也不想让他们看起来很漂亮。你希望人们对他们的反馈是诚实的,所以不要给他们理由去保留他们的问题、疑虑或建设性的批评。同理,不要拘泥于你对应用程序流程的想法……这个阶段属于“发现和计划”部分,因为有时候你只需要根据用户反馈来发现应用程序的最佳流程。

如果你在反馈中听到了矛盾,让更多的人去测试它,并寻找适合的模式。当你有足够的证据来支持你的应用流程是直观的并且工作良好的概念时,你就该进入下一个阶段了。

03

「 设计 」

注意:在这一点上,许多设计师喜欢使用设计系统——一个可根据规定标准组装的可重复使用的部件系统。设计系统是非常好的(我个人喜欢“原子设计”方法),但它们并不适用于所有事情(或所有人)。

使用设计系统的两个要点是保持设计的一致性,并使其易于扩展。然而,尽管从长远来看,他们可能会加快设计过程,但这在前期阶段需要大量的时间投入。

您必须首先花时间构建小的组件,如果你只使用一次或几次,那么这些组件可能就不那么有用了。例如,如果您只为small iOS 应用程序设计UI,那么使用设计系统可能会浪费太多时间。出于这个原因,我没有把设计系统包括在这个过程中(但是它们肯定可以被应用到它中,所以如果你感兴趣的话,请记住它们)。

阶段5:交互设计

交互图

现在您对应用程序的流程有了一定的了解,从阶段4开始,您可以开始确定如何从一个屏幕导航到下一个屏幕。借此机会使用“交互地图”来帮助您理解屏幕的哪些部分是交互的。

例如,您应该为每个屏幕设置方框(但不是缩放、缩放或定位)……包括按钮、链接、输入等,而不用担心实际的美学。

虽然设计师们似乎经常忽略或跳过这一步(可能是因为这需要更多的时间,而且很多人更愿意直接使用线框图),但当你与客户/团队一起工作时,如果您想要不断地给人带给人放心的感觉,或者提供持续的反馈的意愿,那么它就会特别有用。

下图展示了交互图的样子,它们不是全屏模型。但是不要被保真度所困扰——你可以做低保真度,即使是在便利贴上。

这里的重点不是显示UI的样子,而是知道如何从一个页面切换到另一个页面。事实上,这张图片并不是一个完美的例子,因为它也有一些非交互式元素,但它与交互图非常相似。

此外,如果做得好,这个交互图在将来可以作为整个产品开发团队的一个很好的参考(因为它没有很多其他分散用户注意力的元素伴随UI的其他部分)。

线框图和线性流程

线框图只是低保真度的模型,它们可以很好地显示元素在屏幕上的位置(可能很模糊)。出于这个原因,一些设计师在白板上使用标记,因为它迫使你用块状字母书写文本,所以你不可能仔细检查,也不用担心细粒度的细节。

线框图是用来指示形状、大小和位置的,基本上就是这样,(而不是字体、颜色、图像等内容)。你可以用它们来做纸质原型(见下文)。

线性流程只是显示应用程序流程的线框图,虽然线性流动的定义并不确切…但就我们的目的而言,我特别指的是那些表示哪些元素是交互式的(例如,按钮),以及它们在与用户交互时将引导用户到哪个屏幕的映射。这样,通过将它们添加到线框图中,您就可以在交互地图上进行构建。

如果我没有提到用户体验设计者在这个阶段可以使用的另一个工具,那就是我的疏忽了。我看到过一些可以购买的物理纸牌,它们可以尽可能快地加速用户体验的设计过程。

虽然这样做的缺点是我们没有办法进行定制,但这正是这个工具使用和发展起来如此迅速的原因。想必您会希望在设计过程的早期使用它来快速了解流程可能是什么。尽管你总是可以下载和使用免费的数字UI工具包,因为它们可以做同样的事情。根据工具包的不同,你还可以定制一些东西……但请记住,定制需要更多的时间,而高效性和便捷性正是这些牌的优势。

纸质原型

一旦你有了各种各样的线框图,那么就是时候获得更多的用户反馈了。与在第4阶段中完成的测试非常相似,您需要测试流程。这一次,测试人员不需要过多地依靠他们的想象力,因为他们可以实际地点击页面,而您将能够引导他们从一个阶段导航到另一个阶段的过程……当你有一个方便的线流程来参考时,会更容易)。

没有“唯一正确的方法”来做一个纸质的原型。这意味着你可以使用便利贴,打印出你的设计,或者剪下你已经画好的页面。只要记住,如果您在工作上投入了大量的努力,测试人员可能会觉得批评您的工作是一件不太好的事情。幸运的是,许多用户体验设计师和那些测试他们的人发现纸质原型很有趣——这对我们来说当然很有帮助。

纸上的原型可以让人大开眼界,因为大多数人可以真正感受到你的应用程序将会是什么样的体验。既然你会在反馈的基础上不断改进,你绝对不应该花时间担心像颜色或图像这样的事情。你应该忙着完善应用程序的流程,现在就开始行动(尽管我们可以百分百确定地预计以后会有所改变)。

换句话说,我们的目标是确保你后续收到的反馈能够集中在美感之上,而不是交互性或应用程序的流程。如果对应用程序的流程有任何疑虑,那么应该在进入下一步之前,在当前这个阶段解决这个问题。

阶段6:高保真设计

用户界面设计

你知道它迟早会来的,不是吗?现在UI终于来了!这是所有细节,高保真的体现。而更大的公司通常会将用户体验和UI分开,以至于用户体验设计师甚至可能不会参与到应用程序的这一方面。

在这种假设的情况下,你是唯一的设计师,所以全靠你了。

这个阶段的讽刺之处在于,它占用了大量的时间,并且难度很大,但你可以从中学到很多东西(从现代趋势到设计软件)……但在定义它在这个过程中的位置方面,并没有什么可说的。

毕竟,这非常简单:您现在将设计屏幕的实际外观。您的设计将很快提交给开发人员,他们将实现这些设计。如果用户不喜欢你所设计的屏幕(比如,屏幕不够直观或吸引人),那么他们就不会喜欢这个应用程序。

当然,当你觉得需要听取别人的意见时,或者当你完成设计时,你应该得到反馈。

额外的可交付成果

可选(建议,特别是对大型项目)一些额外的可交付成果,这将有助于为视觉设计在整个应用程序设定一致的标准。

我犹豫不决,因为我没有这样做的设计系统,因为两者都需要预先投资的时间,可能是不必要的(取决于应用程序的范围)。然而,这代表可以创建设计过程的末尾。当然,您可以更早地开始这样做,但这是一个逐个案例的情况。

下面是一些你可能想要考虑的设计交付成果:

  1. 样式指南:明确定义一致的视觉标准的文档;
  1. 情绪板/风格平铺:体现应用程序/网站的“情绪”或“感觉”,并通过标准化的视觉审美帮助传达品牌的UI设计和美学理念。

样式指南的范围从高度可视化的UI元素描述到更多的文本解释(像一个小手册,而不是一个单页的说明),用段落的信息证明他们所有的设计选择。这可能是有用的,但是您应该与客户/团队确认是否值得为此麻烦。

至于另外两个……有人告诉我,情绪板和风格平铺之间有区别,但对我来说,这听起来只不过是营销语义。它们本质上都是脱离上下文的组件的集合,被设计用来适应未来可能出现的任何上下文。这对产品开发团队交流品牌和维护整个应用程序的特定视觉标准非常有帮助。

如果您预期将来会创建许多新的屏幕、页面或特性——或者你正在处理合同,以后不会再提供指导——这可能是一项有价值的时间投资。看几个例子,很容易看出这些东西的价值。

原型

有很多很酷的软件可以制作原型。

关于功能原型,它们实际上模拟了整个体验。例如,您可以点击“下一步”按钮,它会带你去下一个屏幕,就像一个真正的应用程序。当然,你不需要输入或看到真实的数据(这都是虚构的),但是对于测试人员来说,这使它非常容易看到真正的应用将是什么样子。

不用说,你需要很多人来测试这个应用程序。当你的原型“准备好了”,你就可以开始与开发者合作实现你的设计。

04

「 产出 」

说实话,开发团队不应该为了开始开发而等待最终的原型,因为开发一个复杂的应用程序需要花费很多时间。特别是当有大量的后端开发需要完成时(例如:构建服务器、构建数据库等等),开发人员现在应该已经工作了一段时间。但在这一点上,你已经做了艰苦的工作,现在是他们发光的时候了。所以是时候和一个更支持的角色合作了,以使其启动。

阶段7:实施和管理

当您给开发人员一个原型时,您的工作实际上并没有完成。相反,这是当你开始做这些任务时:

  1. 支持你的团队:回答有关事物应该如何外观或工作的问题,必要时提供指导;
  1. 用户测试:获得更多反馈,了解用户的想法,记录分析,确定是否需要进行更新。您可能会这样做,因为QA(质量保证)可能会试图破坏应用程序,而不可预见的问题可能需要您的专业知识;
  1. 计划:可能会计划新的特性(或修订),您可能需要参与讨论这些更新应该包含什么以及如何进行;
  1. 更新:根据出现的新问题,测试中收到的新反馈,或计划中的新功能,你可能需要退回原始的阶段,再次更新设计。

为了更新你的应用程序,你应该回到多远的过程中——这取决于几件事。例如,你的时间压力有多大,所要更新的内容是什么(例如,大检修,小bug修复,新特性,等等)。但是请放心,在某个时候你会回来的,因为持续改进是用户体验设计师的标志。

05

「总结 」

我的研究成果包括7个阶段:

  1. 前期规划——研究
  1. 预先计划——建立角色
  1. 发现和计划——常见的技术和可选的方法
  1. 发现和计划——应用程序流程
  1. 设计——交互设计
  1. 设计——高保真设计
  1. 生产——实施和管理

我没有详细介绍任何一个阶段,因为这里有很多好的信息(很多都是相关的链接)。但我所概述的流程似乎与其他UX设计工作流模型相当一致,即使阶段的数量或信息的组织方式略有不同。出于这个原因,我很满意自己对用户体验设计过程的新认识。

原文链接:查看链接 ↗

作者:Ryo Mac

译者:益生菌菌

原文请戳【阅读原文】

为尊重版权和译者

转载请联系我们

推荐阅读

整个用户体验设计过程(上)

2021 清华美院信息系交叉学科考研经验分享

环球设计之旅第五周课程回顾\|设计思维实战

「超级课」5星期学会UX交互设计全流程:零基础进阶交互设计师!

苹果如何塑造用户界面

我们

服务.体验.交互设计传道者

「一只朝菌设计学园」由毕业于清华大学人机交互专业的学长创办,致力于创造卓越的设计知识学习课堂,专注交互设计、用户体验设计、服务设计领域的专业知识教育。

教师团队来自于清华大学、同济大学、上海交大、北京理工大学、北京邮电大学、中山大学、华南理工、江南大学、香港大学、香港理工、台湾科技大学、Imperial、POLIMI、Delft、Oslo、Goldsmiths、Edin、Glas、Manc、Lancaster、Loughborough、Leeds、Arts London、BCU等国内外高校,以及Microsoft、阿里巴巴、腾讯、网易、华为、央视、百度、美团点评等企业集团。

清华大学有训曰:行胜于言。「一只朝菌」谨承母校百年教诲,时刻铭记师者之责,为好学者传道授业,为有志者掌灯引行。

本文原载于微信公众号,正文与配图已转存至本站以便长期访问。 查看原文 ↗

有想具体聊聊的问题?把你的情况说一说。

联系咨询