介绍

在UX字段中,线框是展示页面级布局想法的常见可交付,而流程图对于记录复杂是有用的工作流程和用户任务。但是,尽管这两个可交付成果在UX专业人员中仍然常用,有些情况,它们是用于沟通设计理念的次优工具,特别是在记录移动时,桌面或Web应用程序没有许多唯一的页面,而是使用一些基于用户交互动态改变内容(或布局)的少数核心页面。在过去几年中,拨打了替代交付Wireflow.已成为这些问题的解决方案,用于在常见的用户任务的上下文中显示设计。

标准桌面线框
网页的线框为网站和应用程序传达了布局的思路,内容和页面级设计,这些网站和应用程序很少,主要是静态页面,但在通信大量动态流程流中并不有用。
简单的UX工作流程流程图
使用流程图描述后端进程和用户任务流(如本示例所示)。但是,对于UX使用,它们缺乏页面上下文 - 一个强烈影响用户体验的方面。

Wireflows作为作为工作流的可交付

定义:Wireflows是一种设计规范格式结合了线框式页面布局设计用简化的流程图代表交互的方式

移动应用程序Wireflow.
这个低保真Wireflow显示一个简单的用户任务。使用屏幕设计,而不是抽象的流程图符号,请注意用户将与用户交互的产品。虽然可以在高保真的目的中以高保真创建线框,但它们与较低保真文件一样有用,以讨论和传达交互设计和用户工作流程。

Wireflows成为设计移动应用程序的团队中的常见做法,其中流程图中的每个步骤由用于全移动屏幕设计的线框表示。由于移动屏幕尺寸相对较小,实际的页面设计(即,Wireframes)可以轻松替换流程图中的抽象符号。但是,Wireflows不仅限于记录移动应用程序和网站 - 它们也可以用于桌面产品,通常通过显示基于用户交互来改变的屏幕或网页的一部分。许多设计电子商务购物车和结帐页很适合被指定为线框。

为什么我们需要一些新的东西:流程图和线框没有记录复杂的应用程序

通常介绍一个新的规格格式,因为许多利益相关者都不知道如何解释它。什么旧的通常是熟悉的。但是,我们喜欢Wireflows,因为(1)很容易可学习通过那些在之前的Wireframe和流程图的人和(2)Wireflows有足够的优势来克服否则涉及熟悉格式的惯性。

Wireframe是显示布局的好方法,但它们没有良好地描述交互,并且在记录具有大量动态内容的数字产品的布局时,它们特别差,例如移动应用程序或webapps.。在用许多离散的网站(或其他数字产品)时,线框最有用,相对静止页面或屏幕,单击链接或按钮通常将导航到完全不同的页面

但是,许多现代WebApps和移动应用程序都有很少的总页面,但是通过动态改变内容并通过ajax.(或其他技术),基于用户对产品具有的交互。他们可以从中选择的电子商务产品方面或滤波器更改页面上显示的产品,复杂的创意或技术应用,当存在的整体布局和信息可以基于与工具,模式和其他控制参数的交互急剧差异。在这些情况下,线程范围不会捕获各种布局可能性或内容如何更改的规则。此外,典型的线框不会记录重要性回馈系统在与页面交互后,系统向用户提供给用户。(对用户传达的反馈,他们的行动已被系统识别到良好的用户体验至关重要,并且是第一个10可用性启发式。

另一方面,流程图是一个工具详尽的记录复杂的工作流程和与多个步骤或路径的交互,但通常会释放互动的上下文及其对用户的影响。使用流程图作为文档(和IDeate)的主要可传递给文档(和IDeate),MultiSep用户任务所涉及的交互设计和步骤可以忽略页面上上下文中显示的信息,并影响交互的成功。

Wireflows文档互动

WireFlows的经典用例是记录通过产品上的共同任务的用户的过程(例如,“在社交媒体应用程序上向您的网络中的某人发送直接留言”)。在工作流程中的每个步骤中,简单的线框或高保真屏幕模拟显示用户可用的屏幕。

箭头用于指示用户采取操作的特定UI组件(例如按钮上的点击,单击链接等),并指向由于交互而导致的另一个线框图像。该交互的第二个“节点”不需要是单独的页面或屏幕;rather, it can show the same page with the result of that interaction, such as content that has changed, or feedback that the interface shows as a result of the interaction (e.g., a confirmation popup, a color change, or an error message). It's important that the arrows clearly indicate the clickable “hotspots” (or targets) that lead to the next step in the flow, in order to lessen ambiguity in the wireflow. Unambiguously indicating the triggering hotspot is particularly important for complex apps that have multiple actionable targets on a single page.

移动应用程序Wireflow.
这种简单的线框显示了典型的用户任务流程的几种移动应用程序线框的序列。在该示例中,每个线框对应于相同的应用程序页面,而不是表示不同的应用程序页面。每个步骤都清楚地表示连接到任务流程中的下一步的热点。此外,Wireflow还显示在第二步中使用可视反馈(其中单击的相册更改背景颜色以注册抽头)。

尽管最常用于移动应用程序,但Wireflows也可用于记录桌面应用程序和WebApp中的复杂工作流程。由于在过程中为每个步骤显示全屏桌面线框,因此如果大多数屏幕设计在每个步骤中保持不变,则只显示屏幕的部分更改(例如对话框,模态,模态,在每个步骤中的滤波器或方面可以足以记录接口的相关性,更改部分,同时仍提供足够的上下文。

Desktop Wireflow.
用于Configurator WebApp的简化高保真桌面Wireflow演示了,并非每个步骤中都必须表示屏幕设计的所有部分。由于桌面屏幕设计的较大大小,如果可见的大部分信息不会改变,则不需要显示每个步骤的完整页面。使用战术方法来显示相关屏幕设计,只能可视化由于用户输入而改变的元素。(截图www.planar.com.由nn / g制成一个线框)

虽然Wireflows Excel在显示任务的应用程序和动态网站上,而在每个页面上的内容或布局基于用户交互的情况下,它们也可以适用于传统静态网站中的记录任务流程。但是,要谨慎地使用线框来记录静态桌面站点,因为每个线框图像的大小足够大以丢失被记录的过程的上下文。

用于协作思想的线框

除了与项目利益相关者和开发人员的有用形式的沟通之外,Wireflows还可以作为团队成员之间合作的工具。特别是敏捷环境,能够在交通团队中合作和沟通至关重要。
设计研讨会会议可以在交通团队中建立买入和共同的理解;在这些平行设计研讨会,团队成员IDeate和写下任务流量,该组然后讨论选项,并且UX人员在Wireflow样式中绘制每个步骤以可视化潜在选项(以及团队同意的想法)。

在协作环境中,无需视觉抛光线缆;通过使用带有白板或纸张和铅笔的草图技术来快速记录思想并专注于互动来强烈利益。

可交付成果研讨会Wireflow照片
几个团队成员UX可交付成果研讨会晒黑NN / G UX会议使用手机粘滞便笺,标记和纸张在设计研讨会上在一个线框上进行协作。此过程可以轻松地在白板上工作,或者只是使用纸张和铅笔。

结论

Wireflows是一种可交付的Emerging UX,用于记录用户工作流程和移动和WebApps的复杂交互。它们非常适合在应用程序内的一个或几个页面上代表动态变化,并且在捕获流动的捕获流量较少的工作较少,可以通过大量相对静态的页面连接在一起。Wireflows也可用作通过用户工作流程和任务思考以及在过程中每个步骤中的监视屏幕设计的协作和展示技术。

在我们全天内了解有关Wireflows的更多信息UX可交付成果研讨会