网站内容发布流程图( 线框流程图影响用户体验的因素有哪些？|公司调研)

　　网站内容发布流程图(

线框流程图影响用户体验的因素有哪些？|公司调研)

　　线框流程图是线框和流程图的组合。当一些页面动态变化时，它们可以记录工作流程和屏幕设计。

　　介绍

　　在UX领域，线框图是一种常用的表达方式，用于表达页面级布局的概念。但是，流程图对于记录复杂的工作流和用户任务非常有用。虽然这两种交付方式在 UX 领域是常用的，但它们并不是传达设计思想的最佳工具，尤其是当记录没有很多独特的页面时，但其中一些会因用户的不同而动态改变内容（或布局）相互作用。在手机、台式机或Web APP上使用多核页面时。近年来，一种称为线框流程图交付的替代方案已经浮出水面，作为解决这些问题的一种方式。线框流程图曾经用于表达常见用户任务中使用场景的设计。

　　一个网页线框可以传达那些主要是静态页面或应用程序的布局思想、内容和页面级别的设计，但在传达复杂的动态操作过程时是无用的。

　　该流程图用于描述后端流程和用户任务流（如本示例中）。但是，对于UX使用来说，它缺乏页面的上下文——一个严重影响用户体验的因素。

　　线框流程图作为工作流交付

　　定义：线框流程图是将线框风格的页面布局设计与流程图等简化交互表达方式相结合的设计规范板。

　　这个低保真线框流程图显示了一个简单的用户任务。使用屏幕设计，而不是抽象的流程图符号，使我们能够继续关注用户将与之交互的产品。虽然线框流程图可用于高保真创作以传达详细的设计规范，但它们与用于讨论通信交互设计和用户工作流程的低保真文档一样有用。

　　线框流程图是在团队中设计移动应用程序的常用方法。流程图中的每一步都相当于一个填充手机屏幕设计的线框。由于手机的屏幕尺寸相对较小，真实的页面设计（如线框）可以很容易地替换线框中的抽象符号。但是，线框流程图不仅限于记录移动应用程序，而且 网站 - 它们也可以用于桌面产品，通常用于显示由于用户交互而发生变化的屏幕或网页部分。许多电子商务购物表格和收银机页面设计也适用于线框流程图的细化。

　　为什么我们需要新的东西：流程图和线框不能很好地记录复杂的应用程序

　　一般来说，引入标准化的新风格是不好的，因为很多利益相关者不知道如何解释它。一般来说，旧的东西是比较熟悉的。但是，我们确实喜欢线框图流程图，因为对于以前看过线框图和流程图的人来说很容易上手，而且线框图流程图具有足够的优势来克服其他同类产品的缺点。

　　线框是表达布局的好方法，但它们不能很好地描述交互。他们无法特别记录具有大量动态内容的电子产品的布局，例如移动APP和Web APP。当记录网站（或其他电子产品）与许多不相关的、相对静态的页面或屏幕时，线框很有用，因为在这些页面或屏幕上，点击一个链接或按钮通常会导航到一个完全不同的页面。

　　然而，许多现代网络应用程序和移动应用程序只有几个完整的页面，但基于用户与产品的交互，内容和布局会通过 AJAX（或其他技术）进行相应的更改。无论是选择分类或过滤时产品页面显示会发生变化的电子商务产品，还是基于工具、模型或其他控制参数之间的交互，整体布局和信息显示都会发生强烈的变化，复杂，创意或技术应用，它们都涵盖。在这些情况下，线框无法很好地捕捉各种布局的可能性，或者内容变化的规则。此外，线框无法记录用户与页面交互后系统呈现给用户的重要反馈。

　　另一方面，流程图是一种工具，可以综合记录复杂的工作流和多步骤或路径的交互信息，但往往忽略了交互中的使用场景及其对用户的影响。当使用流程图作为主要交付记录（或构思）交互设计或收录多个用户任务步骤时，会忽略页面内外环境中显示的某些信息，这往往会影响交互的成功。

　　线框流程图记录交互信息

　　线框图流程图中非常经典的用例图用于记录用户在产品上完成常见任务的过程（例如，在社交媒体应用中“直接向联系人中的某个人发送消息”）。线框流程图中的每个步骤、简单的线框或高保真屏幕设计，都代表用户可能使用的屏幕。

　　箭头是一个特定的 UI 组件，用于指示用户的行为（例如，单击按钮、单击链接等），作为交互的结果指向另一个线框。交互需求的第二个“点”不是一个独立的页面或屏幕，而是可以在同一个页面上展示交互的结果，比如内容的变化，以及展示交互结果的界面反馈（例如，一个确认消息）弹出、颜色更改或错误消息）。为了减少线框图流程图中的歧义，流程中的箭头清楚地显示点击时“热点”（或任务）将指向哪个步骤是非常重要的。对于在单个页面中具有多个行为目标的复杂应用程序，

　　在这个简单的线框图中，展示了一个常见用户任务流程中的一系列多个移动 APP 线框图。每个线框代表同一个APP页面，而不是不同的APP页面。每一步都清楚地表明了由任务流中的热点连接的下一步。另外，第二步的线框流程图展示了视觉反馈的效果（为了标记这次点击，改变了相册点击时的背景颜色）。

　　除了经常用于移动应用程序之外，线框流程图对于记录复杂的桌面和 Web 应用程序也很有用。由于使用全屏桌面线框来表示一个流程中的每个步骤会浪费很多空间，如果每个步骤中的大部分屏幕设计都会保持不变，那么只显示每个步骤中屏幕变化的那部分（例如对话、模态、过滤或分类）可以有效地记录与界面相关并且正在发生变化的部分，同时仍然提供足够的上下文。

　　为Web APP结构操作说明制作一个简化的高保真桌面流程图，并不是每一步都需要呈现屏幕设计的所有部分。由于桌面屏幕设计的尺寸较大，如果能看到的大部分信息保持不变，则没有必要每一步都显示整个页面。使用一种战术方法来显示相关的屏幕设计，只能看到由于用户输入而发生变化的部分。

　　线框流程图不仅可以展示APP和动态网站的动态工作流程，每个页面的内容和布局会因用户交互而改变，也适合记录在传统的静态网站@ > 任务流程。但是，关于使用线框流程图记录静态网站，需要注意的是，每个线框的尺寸可能过大，这样会丢失记录过程的使用场景。

　　协作想法的线框流程图

　　除了作为程序相关人员和开发人员之间交流的有用方法，作为团队之间合作的工具，线框流程图也可以很好地工作。尤其是在敏锐的环境中，跨部门团队的良好合作和沟通是非常重要的。

　　跨部门团队之间的设计研讨会可能会产生一些理解的火花。在这些平行的设计工作组中，团队成员构思并写下任务流程，然后整个团队讨论这些点。对于潜在点的可视化，UX 绘制线框流程图中的每个步骤（并记录团队已同意的点）。

　　在协调的环境中，线框流程图不需要在视觉上进行润色。对于这种类型的讨论，使用白板或纸笔草图快速记录想法和互动是非常有效的。

　　在 NN/g UX 会议的 UX 交付研讨会上，几位团队成员使用带有便利贴、记号笔和纸的手机来讨论设计过程中的流程图。使用白板或仅使用纸和笔即可轻松完成此过程。

　　综上所述

　　线框流程图是一种新兴的 UX 交付方式，用于记录移动和 Web 应用程序中的用户工作流程和复杂的交互方法。它们非常适合在一个APP中呈现一个或几个页面的动态变化，但它们无法通过大量相对静态的页面连接在一起来捕捉过程。作为一种团队合作和构思的方法，用于在构思过程中考虑用户的工作流程、任务以及屏幕设计的每一步。线框流程图也很有用。