用户体验蓝图——完整设计交付的4大要点(二)
三、创建用户体验蓝图
现在有非常多不同的工具可以使用,因此你可以任意选择一个合适的工具。根据我们的以往经验,Mural或者Miro在制作用
户体验蓝图时非常有效。无限缩放和团队合作功能是高效制作蓝图的关键。
下面是一个用户体验蓝图模板,展示了如何记录故事板、流程图、原型、交互细节、可视化规范、如何在设计文档里提供标
准文案等。

1)制作故事板
一个简单的故事板可以帮助团队理解项目的重点,并使团队在项目的主要目标上保持一致。在制作故事板时不要担心你的绘
图能力。你可以甚至画一个火柴人或使用Bikablo手绘方法来制作简单的故事板。制作故事板的要点是传达产品如何帮助用户
获得成功。
这里有一个故事板的例子,一个是由平面设计师专业创建的,另一个是使用Bikablo手绘创建的。

2)制作具有细节的流程图
制作流程图是另一种必不可少的技能,可以帮助任何人通过可视化的图轻松捕获方案细节。
流程图必须包括以下4个内容:
1. 最佳体验流程或黄金路径
2. 极端场景下的流程或分支流程
3. 基于某一条件的特定流程
4. 团队需要处理的页面以及不需要处理的页面
3)交互细节
在撰写交互细节文档时需要从开发者的角度思考,考虑你需要在写代码时遵守的规范信息。如果你没有写代码经验,可以上
一下Lynda.com的前端开发基础课或坐在你的开发朋友身边,从而更好地了解他们会如何解读你的设计,以及他们需要什么
样的信息。
1、展示所有的状态。如果在为按钮编写交互说明时,需要提供不同状态时的交互细节说明,如按钮在用户填写完表单前都处
于禁用状态,或者保持按钮可点击但在表单上显示错误提示直到用户填写完表单等。这个按钮需要如何显示操作内容、如何
消失,需要显示用户完成操作后会发生的事情。
2、 当有无法通过文字解释的复杂交互时,可以通过提供跳转至原型的链接地址来详细解释交互效果。
3、 如果你是为响应界面而设计,需要考虑所有的屏幕大小,以及不同的屏幕大小会怎样影响你的设计。
4)使用真实的内容文案。
如果没有适当的用词语言和流程来引导用户,那你的设计方案是不完整的。我们强烈建议你在设计方案上使用合适的文本而
不是占位符(Lorem Ipsum)。通过这种方式,你不仅仅关注交互和界面版式,而是关注于完整的用户体验。
5)视觉设计规范
有非常多的工具可以用于生成视觉标注文档。例如,Invision允许你检查UI元素从而提取CSS。Framer和许多其他的工具也
都支持这种能力。但是没有一个工具能够真正取代传统的视觉标注。如果你有一个设计系统,并且有一个100%采用它的团
队,你可能不需要像五年前没有设计系统时那样做太多的说明。
然而我们知道,当我们试图解决一个临时的问题时,设计系统无法完全提供我们需要的所有变化。结果,我们会创建需要视
觉规范的新组件。因此,将视觉规范添加到UX蓝图中非常关键。对于在不同位置和时区工作的远程团队而言,视觉规范显得
尤为重要。
