
想象你是一个建筑师,并且已经对一座建筑有一个美好的想法,你已经考虑过这个建筑的外观,地板的材料,周围的风景和设施。你只是画了草图,然后把它交给了一个承包商。然后,你转到另一个项目,再返回查看项目的进展情况。
你会看到你梦寐以求的那栋楼吗?答案当然是否定的,它看起来不会像你想象的那样。
同样的,这个原理也适用于交付用户体验设计。你在了解用户的过程中付出了很大的努力,你发现了将要使用的技术,并且你打造了一个很棒的体验。现在你不是执行的人,所以您需要提供一个完整详细的规范,以确保团队能够按照您的设想执行设计。
你可能会问,这不是瀑布模型吗?我们已经转向了敏捷方法,我们可以在白板或一张纸上绘图来告诉开发人员该做什么。这不是争辩瀑布模型和其他模型。而是关于将你的想法和设想转化为其他人可以理解和执行的有形事物。
01
别让我猜
想一想故事中的承包商,他正试图弄清楚你脑子里想的是什么材料,房间的尺寸,你是想把门开向右边还是左边,等等。保持你的设计完全是黑色和白色是非常重要的,所以没有出现错误的灰色区域。
在编写用户体验规范时,要站在开发人员的立场上。考虑他们首先需要哪些信息来理解你的设计,再在代码中执行它。花点时间检查一下你的交付成果,确保你已经掌握了所有的细节。
02
达成共识
在设计一个产品时,你是和你的团队一起设计的。作为一名设计师,你是为最终用户服务的人。但是,要记住这个产品是属于整个团队的。这可能会导致一些混乱。如果每个人都拥有这个产品,而他们没有记录所有的细节,他们会做他们“认为”正确的事情,这意味着现在有多个承包商在执行同一个项目,而没有一个蓝图可以遵循。
所以,问题是,我们如何设计出一个逻辑清晰、连贯的用户体验蓝图,并提供足够的细节供团队执行?
03
创建用户体验蓝图
有许多不同的工具可用,所以选择一个对你来说方便的。我们发现Mural或Miro对于创建用户体验蓝图是非常有效的。无限放大和协作特性是做出这一决定的关键。下面是一个用户体验蓝图模板,展示了如何捕获情节串连板、流程图、模拟、交互细节、可视化规范、从文案中复制到单个文档中。

■ 创建一个故事板■
一个简单的故事板可以帮助你理解项目的要点,并使团队在项目的主要目标上保持一致。在创建故事板时,不要担心你的图形技能。你甚至可以使用棍棒或Bikablo技术,创造一个简单的故事板。这里的重点是传达黄金路径以及它将如何帮助用户获得成功。这里有一个故事板的例子,一个是由平面设计师专业创建的,另一个是使用Bikablo草图技术创建的。

使用Mural的用户体验蓝图

使用Mural的用户体验蓝图
■ 创建详细的流程图 ■
流程图是另一种重要的技术,它可以在任何人都容易理解的可视化图中捕获大量细节。

使用Mural的用户体验蓝图
下面是流程图应该包含的4件事。
1.幸福之路或者你的黄金之路
2.边缘案例或细线路径
3.条件流
4.团队需要处理的页面和不需要处理的页面
■ 交互细节■

交互细节示例。感谢 Ema Pijcic
在编写交互细节时,站在开发人员的立场上,考虑规范编写代码所需的信息。如果你没有编码经验,也没有参加过Lynda.com前端开发必不可少的课程,或和你的开发者朋友坐下一起更好地了解他们将如何把你的设计编成每一行代码,以及什么信息是他们寻找的。
1.显示所有状态。如果您正在编写按钮的交互细节,若按钮在用户填写表单之前处于禁用状态,或者保持按钮处于启用状态,则提供交互详细信息,但如果用户需要填写表单,则在表单上显示错误消息。Fav按钮将显示操作将如何出现和消失,以及用户执行操作时会发生什么。
2.解释交互作用,或者提供一个原型的链接,以便演示在没有样本的情况下无法解释的关键交互。
3.如果您正在设计一个响应式页面,请考虑所有的屏幕尺寸,以及这将如何影响您的设计。
■ 视觉设计规范■
有很多工具可以帮助我们生成可视化规范。例如,Invision允许检查UI元素,并提取CSS。与Framer和其他许多工具相同。但是这些工具都不能真正取代旧的视觉规范。如果你有一个设计系统,并且你有一个团队百分之百的采用它,那么你可能不需要像五年前没有设计系统时那样需要规范。然而,我们知道,当我们试图解决一个手边的问题时,设计系统不能有我们需要的所有变化。所以,我们最终创建了需要可视化规范的新组件。因此,将您的可视化规范添加到用户体验蓝图中是非常关键的。对于来自不同地点和时区的分布式团队来说,可视化规范更为重要。
04
在规范中与他人协作
为了使协作更有效,需要记住以下几点。
1.在蓝图中保留模拟的所有版本。当你进行更改时,只需最小化之前的模拟,并描述差异。这样,你就有了适当的变更管理,并且团队知道发生了什么变化。
2.把你的拷贝设计师带到Mural上,这样他们就可以在板上提供最终的文本,而开发者可以简单地从Mural板上复制粘贴文本。在Mural板上有副本也将减少来回复制,因为副本会根据收到的反馈进行更改。
3.从Mural板上提供所有资源的链接,如研究结果,原型,JIRA票等。
4.让你的团队直接在板上提供他们的意见,而不是电子邮件,这样你就可以把所有的意见都放在一个地方。
原文链接:查看链接 ↗
作者:Lalatendu Satpathy
译者:设计小菌
原文请戳【阅读原文】
为尊重版权和译者
转载请联系我们
我 们

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

公众号
「yizhizhaojun」
一只朝菌设计学园

联络微信
平菇老师
「zhaojundesign」
「一只朝菌设计学园」由毕业于清华大学人机交互专业的学长创办,致力于创造卓越的设计知识学习课堂,专注交互设计、用户体验设计、服务设计领域的专业知识教育。
教师团队来自于清华大学、同济大学、上海交大、北京理工大学、北京邮电大学、中山大学、华南理工、江南大学、香港大学、香港理工、台湾科技大学、Imperial、POLIMI、Delft、Oslo、Goldsmiths、Edin、Glas、Manc、Lancaster、Loughborough、Leeds、Arts London、BCU等国内外高校,以及Microsoft、阿里巴巴、腾讯、网易、华为、央视、百度、美团点评等企业集团。
清华大学有训曰:行胜于言。「一只朝菌」谨承母校百年教诲,时刻铭记师者之责,为好学者传道授业,为有志者掌灯引行。