美文网首页设计方法互联网产品思考互联网科技
UX中的各种“流”—  流程图、用户流、任务流、UI流与线框流

UX中的各种“流”—  流程图、用户流、任务流、UI流与线框流

作者: Linfolio_交互小怪兽 | 来源:发表于2017-06-06 07:17 被阅读922次

    UX设计师的设计过程中有着各种流,用户流,任务流,流程图,那么这些流又有什么区别与联系呢?这个区别与联系,网上的信息多样,没有一个十分明确的定义,于是我自己也希望结合工作,结合实际情况去总结。最近看到一篇文章,也稍微描述了一下这几种图表,分享一下。

    不管是什么流,它的本质都是在描述“运动”。设计师需要考虑用户怎么在整个网站或者app内导航。创造这些flow的初衷,是希望帮助设计师去思考用户在浏览一个页面的前后,会发生一些什么,并且聚焦在重要的部分。“流”除了是创造原型的第一步之外,也可以帮助开发者去理解,整个设计怎么样才算是可运行。

    流程图

    流程图示例

    流程图是一幅包含着一系列用户运动或者动作的图,它们都发生在一个复杂的系统或者活动中。


    任务流vs用户流

    用户的任务流程

    任务流、用户流与流程图就不太一样了。它们的目标,都是去优化用户完成一个任务的流程能力,使得整个过程的阻力最小化。它们都是帮助你在开发之前,就了解整个设计。你可以将它们定义为:

    1.任务流

    任务流是一个特定操作中的单独流程,所有用户在这里的流程都是相似的。例如说,注册。任务流是一条单独的流,它们没有分支。

    2.用户流

    用户流是一个用户在整个应用中跟随的路径。类似于迷你的用户旅程。这个流不一定要呈线型,它可以有分支。决定了路线之后,你可以看到一些颠覆与变化用户体验的可能性。

    用户流可以是很简单的,帮助决定“红色路线"。什么是红色路线呢?在伦敦,它代表了重要的道路,伦敦的交通不遗余力地去保证这些道路完全通畅。这些关键的路线可以演化出很多复杂的路线,这些路线包含了很多的条件与要求。在开发产品之前,用户流对于快速理清复杂流程有很大帮助。

    UI流

    用户流速记

    37 Signals这个组织对于用户流有一个速记。意思大概是用户“看”与“做”的前后连接。他们感觉到用户流有以下的一些缺憾:

    1.在设计过程中“流”的概念有时候难以沟通

    2.把每个流的不同状态画出来太花时间了

    3.随着设计的演变,这些流程图很快就失效了

    基于这些弱点,你可能会想要试一试UI流。用最新的UI去创造流程可能会迎合你的需要。

    线框流程图

    一个退订的流程 by Michael Pons

    NNgroup最近新发明了Wireframe这个词去捕捉最新的UX交付件。

    NNgroup的定义:线框流程图是一种主要着眼于设计的模式,它包含了线框图风格的页面布局,还有简化版的类似流程图的方式去代表交互。

    仅仅是线框图本身是不够的,线框图代表了布局和固定的内容,但不代表交互。流程图的确包含了细节的交互,但是它们没有包含具体的应用场景。线框流程图可以帮助存储复杂的交互,而这些交互中又可以展现布局或者具体内容。

    线框流程图的元素:

    1.入口与出口

    2.步骤,例如:用户操作,系统操作,可选择的路径

    3.联结:代表了理想的路径和其他不同的流

    4.选择点:用户需要在多个选择中抉择的点

    小结

    理解这些不同“流”的潜在使用场景,为好的体验设计进行了准备。任何的这些方法都可以帮助传达火花,并且提供了高效合作的方式。


    原文链接

    https://uxplanet.org/ux-glossary-task-flows-user-flows-flowcharts-and-some-new-ish-stuff-2321044d837d

    相关文章

      网友评论

        本文标题:UX中的各种“流”—  流程图、用户流、任务流、UI流与线框流

        本文链接:https://www.haomeiwen.com/subject/vdtifxtx.html