User Flow,UX设计师日常输出的16种交付物之一

4 评论 21722 浏览 62 收藏 7 分钟

UX设计师在实际工作中需要交付什么呢?根据NN/g研究数据表明在常用的16种“UX 交付物(UX Deliverables)”中,至少有一半的UX从业人员使用了11种不同的“交付物形式”。实际工作中UX设计师所提供的交付物会依据他们在不同的设计团队中角色以及这个角色使用的方法和工具而有所不同。

本文将重点介绍“Usrer Flow”定义以及相关制作工具。

User Flow 是什么?

丹麦的“交互设计基金组织(IDF)对User Flow的定义:

“设计人员在设计网站和应用程序的页面时,并不总能产生最佳结果。 设计过程中往往会将外观(look),感觉(feel)和流程(process)与用户试图实现的目标分离开来。

另一种方法是设计用户流程(User Flow),着重关注用户需要完成哪些工作,以及如何以最有效的方式交付这些工作。 这将带来更好的用户体验,因为它将用户置于设计过程的中心。”

用户流程图(User Flow)是一个简单的图表,概述了用户为了实现特定目标而必须对你的产品或服务采取的步骤。

与客户旅程地图(Customer Journey Map)相反,用户流程图仅考虑你的产品会发生什么(也就是说,忽略所有外部因素)。

这些图表可以帮助设计人员快速评估实现用户目标所需的过程效率,并帮助决策通过头脑风暴(Brainstorming)确定的伟大创意如何实现。

示例:用户注册流程©UXFlow

User Flow 在网页与应用设计中的作用

用户流程是“Web和App”页面上内容设计的基础。从了解用户需求开始,有助于产品团队构建旨在满足这些需求的流程与体验。

我们在设计每一个“用户流程”时,都需要考虑这些问题:

  • 用户试图完成什么?
  • 对用户什么才是最重要的以及能让用户继续下去是什么?
  • 用户需要哪些其他信息才能完成任务?
  • 用户对完成任务的犹豫和障碍是什么?

这些问题的答案将告诉我们如何设计页面,并确定要包含的内容和导航链接。如果用的主要目标是浏览各种商品,那么我们在设计页面应该为用户提供其购买产品以及后续的设计与功能。

User Flow 常用工具

用户流程工具帮助我们理解用户通过网站或应用实现特定目标的路径。这里有3个新工具/插件可以帮助我们做到这一点:

1. Userflows — Made with the Marvel API

Userflows可以将Marvel原型转化为交互式用户流程,让我们能够全局的看到用户如何从一个屏幕移动到另一个屏幕,帮助我们向开发人员、合作伙伴和客户讲述更好的故事。

Userflows演示©UXFlow

2. FlowMapp — UX planning tool

FlowMapp是一个在线规划工具,用于创建用户流程和可视化站点地图,帮助你有效地为网站设计和规划更好的用户体验。

与您的团队和客户协作,以便每个人都参与开发过程。 留下评论,进行编辑,并使用直观的拖放界面来创建易于遵循的计划。

(FlowMApp有两个在线工具:Sitemap,可视化站点地图和User Flow,用户流程。推荐大家使用)

FlowMapp/User Flow Tool演示©FlowMapp

3. Overflow: Figma Integration

Overflow是专门为设计师定制的用户流图工具,现在您可以开始将Figma,Sketch、Adobe XD与之同步,以创建用户流程。

©overflow

作为一名UX设计师,总是需要在设计思考的每一个阶段提供可交付的成果(Deliverables)。

无论我们是将这些内容保留给自己还是与他人共享,都必须在尽可能多的工具和方法中练习技能,并熟悉所有类型的UX交付物。

注:

1.IDF:Interaction Design Foundation 交互设计基金组织是一家拥有17年历史的非营利社区,2002年成立于丹麦。致力于将全球设计教育水平提高到常春藤标准,同时将成本降低到最低水平。通过提供一流的课程材料使学习民主化,目标是在学术严谨性和实际相关性之间取得完美平衡。和斯坦福大学,剑桥大学和SAP实验室等顶尖大学和公司以及 Clayton Christensen 和 Don Norman等著名作家合作。自2002年以来,IDF建立了一个可持续的合作和教育平台,并在全球92个国家发展了455个当地设计团体。

2.NN/g:Nielsen Norman Group 尼尔森诺曼集团是一家UX研究与咨询公司。其创始人Jakob Nielsen 和 Don Norman 因其在定义UX领域的领导地位而在全球享有盛誉。

 

作者:永和,产品经理/体验设计师。微信公众号:UXFlow

本文由 @永和 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 谢谢文章,请你喝杯快乐水~

    来自加拿大 回复
  2. 请问 这个User Flow,和流程图 有什么区别呢?感觉差不多

    来自北京 回复
  3. 第一个流程图通过什么APP呈现的?

    回复
    1. Sketch

      回复