以下内容由Mockplus(摹客)团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具

用户体验拥有一长串专业的术语和可交付内容。当在线查看UX相关职位描述时,所罗列的这类术语更是全面繁多。而且,随着时间的流逝和它们自身的不断演变,其中很大一部分甚至出现了定义上的重复和交叠。所以,为方便设计师,Web/app开发者以及用户等更加简单的理解这些术语和可交付内容,我认为是时候该重新整理和定义它们了。

打破它

任务流和用户流是多年来常听到的用户体验术语。虽然我尝试通过Google搜索等方式搜寻其“官方”权威定义,但结果却是,现存的很多UX术语表并未集中过定义它们。

尽管如此,无论如何,这类“流”都是在描述Web或软件的“运动”情况。设计师需要考虑如何设计和引导用户浏览一个网站或软件。创建这类网页或软件“流”能够帮助设计师思考和预估用户在浏览一个页面之前或之后可能发生的情况,并集中处理其中重要的部分。而且,此外,作为创建可运行原型的第一步,这类“流”的设计也能够帮助开发人员了解,软件或网页在交替状态下是如何运作的。

流程图

流程图是一张展示一个复杂系统或活动中人或物动作或行为的顺序图。而,应用到软件或Web设计中,则表示一张展示用户一系列页面活动或行为的顺序图。

任务流与用户流

任务流和用户流并非完全不同。因为它们目的都是为了以最小的阻力,帮助用户完成某项任务。它们都能够帮助你在设计开发具体软件或网页功能之前,深思熟虑一些设计问题。如果你希望能够更简单具体地区分它们,也可以如此定义它们:

任务流

任务流是所有用户为实现某特定操作所完成的单一流程,所有用户所经历流程都是相似的,比如网页或软件注册。任务流是一条单一的流程,毫无分支。

用户流

用户流则是用户所遵循的软件或网页执行路径。可以视作是用户在浏览软件或网页所经历的一个个迷你旅程。用户流不一定是线性的,还可以有分支。通过定义或设计软件或网页路径,你能够发现其中可能的转变点和提升点,从而优化用户体验。

用户流可以非常简单,仅用以帮助设计网页或软件的“红色路径”——即网页或软件主路径。当涉及和添加更多相关条件和要求时,用户流也可以变得极其的复杂。总之,在开发产品之前,用户流可以帮助设计师和开发人员有效地分解复杂的流程,从而加深理解,提升工作效率。

Morgan Brown曾经说过:

“用户流设计可以为用户和企业带来更多实效。”

页面流程图

世界闻名的37 signals软件公司曾对用户流进行速记,并认为它们存在以下不足:

*在设计过程中,用户流有时很难解释并用以交流。

*绘制出流程细节,会非常费时。

*而且随着界面设计的更迭变化,流程设计很快就不在适用。

虽然用户流以及页面流程图之类“流”存在不足,你也可以在实际的Web或软件中尝试使用它们。因为作为一种Web或软件设计的快速入门方式,它们能够在时间有限的情况下,满足你的设计需求。

而且,随着设计需求的不断变化,为方便设计师展示和交流其设计理念,一些原型工具,例如简单快捷的Mockplus, 提供了专业的页面流程图功能。设计师一键点击即可生成所需Web或软件页面流程图,并根据设计需要设置其颜色,背景以及连接线,添加页面备注以及导出为图片等。能够帮助设计师极大的提升设计和交流效率。

Wireflows

多年来,我通过创建流程图来演示和交流Web或软件中的交互设计。而且为了囊括更多的设计情景,这些流程图已演变成包含线框图的“流”设计。而全球知名的用户体验研究机构Nielsen Norman Group最近提出了一个全新的术语“Wireflows”来描绘此类用户体验的可交付内容。

Nielsen Norman Group这样定义Wireflows:

Wireflows是一种结合了线框图风格的页面布局格式,采用了一种简化的流程图来展示Web或软件的各种交互设计。

只有线框图是远远不够的。因为线框图常常仅仅展示Web或软件的页面布局或静态内容,并未包含任何动态交互。而流程图则囊括了Web或软件的交互细节,但却忽略了可能发生的应用情景。而Wireflow则能够帮助设计师存储复杂的交互设计,并展示这些交互设计中变化的内容和布局。

Wireflow元素

*入口和出口

*步骤:例如用户操作,系统操作以及替代路径

*连接:指示所需的路径和可能的不同流程

*决策点:用户必须从两个或多个选项中选择。

总结:

了解和预估这些“流”可能的应用场景,能够有效地优化设计体验。以上所描述的任何“流”都能够帮助设计师更好的展示和交流各种设计理念,从而提高协作效率。

资源

以下是一些可以加速UX工作流设计的资源,希望能对你有所帮助:

界面工具包资源

*FREEBIE — Flowchart kit for Sketch

——来自Greg Dlubacz设计师的流程图工具包

这是一个精心制作的Sketch流程图工具包,可以帮助你轻松快捷的创建简洁直观的站点地图。包含的所有元素,包括箭头等,都是可编辑,可定制的。

*Flowchart Kit Sketch Resource

——来自 Arthur Guillermin Hazan设计师的流程图工具包

这是一个展示了网页界面之间交互设计的流程图工具包。你可以使用它轻松地为你的界面添加箭头以及图标等元素,自定义你的界面,甚至在其帮助下创建更加精确的站点地图。

*User Flow Diagram Template

——来自Jarosław Ceborski设计师的用户流程图模板

这个用户用户流程图模板能够帮助你简单地制作美观吸睛的图表。其中包含的所有方块和箭头都是便于直接使用的Sketch符号。

*13+ Productive UX Flowchart Templates

——来自Template.net网页的UX流程图

Sketch插件资源

*Sketch plugin — AEFlowchart

——来自Marko Tadic的AEFlowcharts插件

Sketch提供了多种能够帮助设计师常见Web或软件流程图的插件。而在简单查看这些插件之后,小编发现,AEFlowcharts是所有这些插件中最易用的。

作者:Naema Baskanderi

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

UX术语详解:任务流,用户流,流程图以及其它全新术语的更多相关文章

  1. RocketMQ——角色与术语详解

    原文地址:http://jaskey.github.io/blog/2016/12/15/rocketmq-concept/ RocketMQ——角色与术语详解 2016-12-15 THU 15:4 ...

  2. Spring框架学习05——AOP相关术语详解

    1.Spring AOP 的基本概述 AOP(Aspect Oriented Programing)面向切面编程,AOP采取横向抽取机制,取代了传统纵向继承体系重复性代码(性能监视.事务管理.安全检查 ...

  3. Zynq7000术语详解,不懂啥是PL,PS,APU,SCU?那就进来看看吧

    Zynq7000术语详解,不懂啥是PL,PS,APU,SCU?那就进来看看吧     相信大家刚看到Zynq手册的时候,对着那么一大堆缩略语肯定是一头雾水,特转来一篇文章,为大家解惑 摘要:本文介绍与 ...

  4. 面试必备:详解Java I/O流,掌握这些就可以说精通了?

    @TOC Java IO概述 IO就是输入/输出.Java IO类库基于抽象基础类InputStream和OutputStream构建了一套I/O体系,主要解决从数据源读入数据和将数据写入到目的地问题 ...

  5. H264编码原理以及I帧、B和P帧详解, H264码流结构分析

    H264码流结构分析 http://blog.csdn.net/chenchong_219/article/details/37990541 1.码流总体结构: h264的功能分为两层,视频编码层(V ...

  6. 详解ROMA Connect API 流控实现技术

    摘要:本文将详细描述API Gateway流控实现,揭开高性能秒级流控的技术细节. 1.概述 ROMA平台的核心系统ROMA Connect源自华为流程IT的集成平台,在华为内部有超过15年的企业业务 ...

  7. AspNetCore.Identity详解2——注册用户

    上一篇:AspNetCore.Identity详解1——入门使用 打开数据库,可以看到使用EF自动生成的表结构如下: 重点关注AspNetUsers表,打开数据库里的表可以知道目前也只用到了这张表.然 ...

  8. CEPH-2:rbd功能详解及普通用户应用ceph集群

    ceph集群rbd使用详解 一个完整的ceph集群,可以提供块存储.文件系统和对象存储. 本节主要介绍rbd存储功能如何灵活的使用,集群背景: $ ceph -s cluster: id: 53717 ...

  9. 浏览器 HTTP 协议缓存机制详解--网络缓存决策机制流程图

    1.缓存的分类 2.浏览器缓存机制详解 2.1 HTML Meta标签控制缓存 2.2 HTTP头信息控制缓存 2.2.1 浏览器请求流程 2.2.2 几个重要概念解释 3.用户行为与缓存 4.Ref ...

随机推荐

  1. 好的框架需要好的 API 设计 —— API 设计的六个原则

    说到框架设计,打心底都会觉得很大很宽泛,而 API 设计是框架设计中的重要组成部分.相比于有很多大佬都认可的面向对象的六大原则.23 种常见的设计模式来说,API 设计确实缺少行业公认的原则或者说设计 ...

  2. AlertDialog中使用ListView绑定数据

    在实际工作过程中,单单使用AlertDialog的单选功能不一定能满足我们的需求,需要绑定数据到 listview 1. 自定义Layout LayoutInflater factory = Layo ...

  3. 怎样创造財富?硅谷创业之父 Paul Graham 《黑客与画家》思维导图

    先送上亚马逊传送门:<黑客与画家>:硅谷创业之父 Paul Graham 文集 再送上一个思维导图: 下载大图:http://caifujianghu.com/article/ruhe-c ...

  4. centeros php 实战

    apache 默认安装路径 Fedora Core, CentOS, RHEL:ServerRoot              ::      /etc/httpdPrimary Config Fle ...

  5. eclipse adt logcat过滤用法

    点击Save Filters的加号,by Log Tag如下就可以只看2dx程序出来的debug信息了

  6. AngularJS开发指南14:依赖注入

    推荐两种使用场景: 1.控制器中的依赖注入 控制器是负责应用行为的类.推荐的控制器声明方法如下: var MyController = function(dep1, dep2) { ... } MyC ...

  7. 【转】open-falcon监控windows机器

    open-falcon监控windows机器 时间:2016-05-22 15:34:04   来源:眷恋江南   编辑:涛涛   点击:791   A-A+     最近公司上线了一款新的游戏,用的 ...

  8. python 书籍推荐 三

    主要先学习<python语言入门>学完后,研究<征服python>Python简明教程(A Byte of Python) 此书讲解简洁易懂,适合初学者 剖析Python源代码 ...

  9. RecordingOptions录制设置选项

    1.录制思考时间 2.录制方式 3.自定义证书 4.非资源选项

  10. Bootstrap-CL:超大屏幕

    ylbtech-Bootstrap-CL:超大屏幕 1.返回顶部 1. Bootstrap 超大屏幕(Jumbotron) 本章将讲解 Bootstrap 支持的另一个特性,超大屏幕(Jumbotro ...