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

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

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

　　介绍

　　在 UX 世界中，线框是表示页面级布局想法的常见交付方式，但是，流程图对于记录复杂的工作流程和用户任务很有用。尽管这两种交付物在 UX 领域都很常用，但它们并不是传达设计理念的最佳工具，尤其是在记录的独特页面不多但由于用户交互而动态更改内容（或布局）的页面时在手机、桌面或Web APP上使用。近年来，一种称为线框流程图的替代交付方式（用于表示常见用户任务的使用场景设计）已经浮出水面，作为这些问题的解决方案。

　　Web 线框可以传达 网站 或主要是静态的应用程序的布局想法、内容和页面级设计，但在传达复杂的动态工作流时它是无用的。

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

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

　　定义：线框流程图是一种设计规范板，它结合了线框样式的页面布局设计和流程图等简化的交互式表达方法。

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

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

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

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

　　线框是表示布局的好方法，但它们不擅长描述交互，尤其不擅长记录具有大量动态内容的电子产品的布局，例如移动应用程序和 Web 应用程序。当用许多不相关的、相对静态的页面或屏幕记录 网站（或其他电子设备）时，线框很有用，在这些页面或屏幕上单击链接或按钮通常会导航到完全不同的页面。

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

　　另一方面，流程图是一种工具，可以全面记录复杂的工作流程和多步骤或路径的交互，但往往忽略交互中的使用场景及其对用户的影响。当使用流程图作为记录（或构思）收录多个用户任务的交互设计或步骤的主要交付方式时，它会忽略页面上下文中呈现的一些信息，这通常会影响交互的成功。

　　线框流程图记录交互信息

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

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

　　在这个简单的线框图中，显示了一个通用用户任务流中多个移动应用程序的一系列线框图，每个线框图代表相同的应用程序页面，而不是不同的应用程序页面。每个步骤都清楚地代表了热点连接到的任务流中的下一步。除此之外，第 2 步中的线框图流程图展示了视觉反馈的动作（为了标记点击，点击相册时背景颜色会发生变化）。

　　除了在移动应用程序中大量使用之外，线框流程图对于记录复杂的桌面和 Web 应用程序也很有用。由于用全屏桌面线框来表示流程中的每个步骤会浪费大量空间，因此如果在每个步骤中大部分屏幕设计都保持不变，则仅表示每个步骤中屏幕的变化情况。该部分（例如对话、模态、过滤器或分类）可以有效地记录正在更改的界面部分，同时仍提供足够的上下文。

　　为一个Web APP的结构和操作描述做一个简化的高保真桌面流程图，并不是每一步都需要呈现屏幕设计的所有部分。由于桌面屏幕设计的尺寸较大，如果可以看到的大部分信息没有变化，则不必在每一步都显示整个页面。以战术方式显示相关的屏幕设计，只看到因用户输入而变化的部分。

　　线框流程图不仅可以展示APP和动态网站的工作流程，每个页面的内容和布局都会因用户交互而发生变化，也适用于传统静态网站的记录。任务流。但是，使用线框图流程图记录静态网站的一个注意事项是，每个线框图的尺寸可能太大而丢失记录过程的使用场景。

　　用于协作想法的线框流程图

　　除了作为项目利益相关者和开发人员之间沟通的有用方法之外，线框图还可以很好地作为团队合作工具。尤其是在敏感的环境中，跨部门团队之间能够很好的合作和沟通是非常重要的。

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

　　在不需要对线框图进行视觉修饰的协作环境中，这种类型的讨论，使用白板或纸笔草图来快速记录想法和交互是非常有效的。

　　在 NN/g UX 会议的 UX 交付研讨会上，几名团队成员在设计会议中使用便利贴电话、标记和纸来讨论流程图。这个过程可以很容易地用白板或笔和纸来完成。

　　综上所述

　　线框流程图是一种新兴的 UX 交付方式，用于记录移动和 Web 应用程序中的用户工作流程和复*敏*感*词*互。它们非常适合在应用程序中呈现对一个或几个页面的动态更改，但是通过链接在一起的大量相对静态的页面来捕获流程不太有效。线框流程图也可用作团队合作和构思的方法，用于考虑用户工作流程、任务以及构思过程中屏幕设计的每个步骤。

　　本文由@Exception 翻译并发布在每个人都是产品经理。禁止任何未经许可的复制。