UX术语详解:任务流,用户流,流程图以及其它全新术语

简介: 以下内容由Mockplus(摹客)团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。用户体验拥有一长串专业的术语和可交付内容。

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


img_50af72ee18b80d850f9ba856ccb9c064.png

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

打破它

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

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

流程图


img_5936995b463969b243906670b9201f6a.png

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

任务流与用户流


img_724b549633c13f7b95becf5f564e2f5a.png

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

任务流

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

用户流

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

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

Morgan Brown曾经说过:

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

页面流程图


img_a91604c448b69654c0557a8899817c12.png

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

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

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

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

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


img_152d3423d02bcbd55283b547c1996997.jpe

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

Wireflows


img_201be1464aa34290b8f74e556f429cd8.png

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

Nielsen Norman Group这样定义Wireflows:

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

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

Wireflow元素

*入口和出口

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

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

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

总结:

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

资源

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

界面工具包资源


img_2db8fbdf72c4e59be70d82d9362f96e8.png

*FREEBIE — Flowchart kit for Sketch

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

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


img_5618c4330b5e7bed461fc39cd4a966e9.gif

*Flowchart Kit Sketch Resource

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

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


img_141cfb62a05991829901b19b0e681898.png

*User Flow Diagram Template

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

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

*13+ Productive UX Flowchart Templates

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

Sketch插件资源


img_8c66c34e191f7eb2ac87f2584dcaec92.gif

*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

相关文章
|
10月前
|
Web App开发 IDE JavaScript
Selenium IDE下载安装保姆级教程(附安装包,非常详细)
Selenium IDE 是一款开源跨浏览器的Web自动化测试工具,支持“录制-回放”操作,无需编程即可实现UI级端到端测试。基于Electron开发,兼容主流浏览器,可导出多种语言脚本,轻松集成到持续集成流程中,适用于回归测试、兼容性验证等场景。
|
8月前
|
人工智能 语音技术 云计算
书尖 AI 功能实测|阿里云 AI 技术加持,与喜马拉雅听书体验深度对比
在阿里云AI赋能下,书尖AI实测展现三大优势:1.2亿册全品类书库、双人互动式AI播客、2分钟极速提炼书籍精华,并依托阿里云TTS实现自然听书体验。相较喜马拉雅,其AI深度解读与定制化能力更胜一筹。(239字)
1093 9
|
6月前
|
人工智能 运维 安全
基于端侧 AI 与云边协同的电力智能巡检解决方案实践
电力巡检面临人工依赖高、效率低、安全风险大、数据难闭环等痛点。本方案基于云-边-端协同架构,融合端侧轻量化AI、多模态感知与弱网适配技术,打造工业级AR智能安全帽,实现变电站、输电线路等场景的智能识别、实时预警、全程追溯与安全管控,助力电网数字化升级。
1209 0
基于端侧 AI 与云边协同的电力智能巡检解决方案实践
|
算法 Java API
用录像代替视频聊天,虚拟视频聊天软件微信QQ, 微信第三方插件虚拟视频插件
核心视频处理模块使用JavaCV实现视频捕获、特效处理和虚拟设备输出 Xposed模块通过Hook微信摄像头相关方法实现视频流替换
|
人工智能 自然语言处理 测试技术
有没有可能不微调也能让大模型准确完成指定任务?(少样本学习)
对于我这种正在从0到1构建AI产品的一人公司来说,Few Shots学习的最大价值在于:用最少的资源获得最大的效果。我不需要大量的标注数据,不需要复杂的模型训练,只需要精心设计几个示例,就能让大模型快速理解我的业务场景。
698 43
|
消息中间件 JavaScript BI
如何开发ERP(离散制造-MTO)系统中的客户管理板块(附架构图+流程图+代码参考)
本文详解离散制造-MTO模式下ERP系统客户管理模块的设计与实现,涵盖架构图、流程图、功能拆解、开发技巧及TypeScript参考代码,助力企业打通客户信息与报价、生产、交付全链路,提升响应效率与订单准交率。
|
Web App开发 XML 编解码
IE浏览器下载文件中文文件名乱码问题解决
IE浏览器下载文件中文文件名乱码问题解决
806 0
|
JSON 安全 数据安全/隐私保护
Python安全守护神:OAuth与JWT,让黑客望而却步的魔法阵🧙‍♂️
在网络世界中,数据安全至关重要。本文介绍了如何在Python环境中使用OAuth 2.0和JSON Web Tokens (JWT) 构建安全的认证系统。OAuth 2.0是一种开放标准授权协议,允许客户端在不暴露用户凭证的情况下访问资源。JWT则是一种轻量级的数据交换格式,用于在各方之间安全地传输信息。结合两者,可以构建出既安全又高效的认证体系。文章通过Flask-OAuthlib和PyJWT库的示例代码,详细展示了实现过程。
580 2
|
存储 Linux 测试技术
中断 【ChatGPT】
中断 【ChatGPT】
447 13
|
人工智能 算法
第四届 Data-Juicer数据挑战赛暨天池 Better Synth 多模态大模型数据合成挑战赛
阿里云、NVIDIA主办,阿里云天池平台、魔搭社区、阿里巴巴通义实验室共同组织的第四届 Data-Juicer 数据挑战赛,暨天池 Better Synth 多模态大模型数据合成挑战赛开赛啦~

热门文章

最新文章