用户体验设计和线框工具

执行 UX 设计。使用线框图绘制屏幕模型,并使用故事板呈现屏幕流程。

制作线框图

使用线框工具快速有效地绘制屏幕模型。线框简单易于绘制。它让利益相关者预示新系统的外观和操作方式,助您收集影响系统设计的早期反馈。 (您也可以查看我们的高保真视觉稿工具以了解如何进行高保真 UI 设计)

多种线框类型

使用我们的线框软件,您可以为 Android 应用程序(手机/平板电脑)、iPhone / iPad 应用程序、桌面应用程序网页创建线框图。

字体和颜色配置

着色线框元素的边框和主体,以及配置喜欢的字体。

Bootstrap 组件

使用 bootstrap 线框组件创建时尚的网站模型。

为线框制定多重状态

通过为单一线框建立多个不同状态以表达屏幕的变化,以避免重覆性的工作。您可透过树层次结构查看和管理线框状态。

Define wireframing lifecycle with state

用于重新设计 UI 的屏幕截图工具

重新设计系统通常涉及更新当前屏幕。使用智能编辑工具截取屏幕截图,然后使用线框组件进行修改。您还可以移动和删除截取屏幕的各部分。

UI re-design with the wireframe smart edit feature

故事板

使用线框设计屏幕,并使用故事板呈现屏幕流。故事板是一种有效地展现用户如何与系统交互的,引人入胜的方式。这是其中一种廉价的、用以预先确认要求的方式。

Storyboard Tool

故事板播放器

使用故事板播放器向利益相关者呈现故事板。让利益相关者感受新系统,就像在操作真实系统一样!

Storyboard Player

基于线框的流程图

线框是一种被广泛应用的 UX 工具,允许设计人员和客户共同识别用户介面的内容和功能。 Wireflow 通过以流程图表达线框流,呈现特定场景所涉及的步骤和决策点,以及这些步骤中所引申的可能路径,使 UX 更加有效。

Visual Paradigm 的 Wireflow 流程图编辑器允许快速创建线框流程图。绘制专业的 Wireflow,并以动画和打印形式向客户展示。

Wireflow Diagram
Construct wireflow with resource

快速绘制 Wireflow

使用资源工具,通过简单的拖放操作创建 wireflow 场景。它简单、直接、快速。

Associate point of trigger

连接触发点

通过将触发项与接连的场景连接,明确表示触发点。

Using dependency in wireflow

多路径表示

使用'决定形状'以建立多条路径。

根据您自己的选择绘制或组合线框

线流由一系列屏幕(称为"场景")组成。根据所需的详细程度,您可以将详细的线框嵌入为场景,或者通过从预定义的线框符号库中选择一个简单的组件来构成场景,简单灵活!

Android phone wireframe

强大的线框图编辑器

我们的线框工具附带 100 多个可配置的线框元素,您可以为不同的平台和设备制作线框图 - Android apps(手机/平板电脑)、iPhone/iPad apps、桌面应用程序和网页。其编辑功能让您快速、流畅和直观地制作线框图。

Wireframe symbol library

400+ 随时可用的线框符号

使用预设的屏幕组件构建场景。我们准备了 400 个即用型屏幕符号,用于开发 Web 和移动流程图。

播放动画,让 Wireflow 路径动起来!

只要用户交互涉及替代方案和特殊情况,就可以导航多个导线路径。线程编辑器具有动画工具,允许选定的路径(或通常称为场景)进行动画处理。动画在 UX 演示中非常有用,因为它允许利益相关者专注于理解特征的特定场景。

Animating a wireflow
Flexible path creation

灵活的流程创建

您可以按照您喜欢的任何顺序自由选择要包含在线程中的任何场景。

Configuring wireflow animation

多种动画设定

设定颜色及各种动画效果以满足您的喜好。

Labelled wireflow scenes

标记场景

您可以通过参考数字轻松识别场景的顺序。

将动画以故事板幻灯片形式播放

除了直接在 Wireflow 播放动画外,您也可以以故事板形式,一幕一幕地播放线框。这个方法让您留在一线框中,再按需要开始路径上前/后的线框,有助于深入讨论 UX。

Wireflow slideshow

通过 4 个简单步骤进行原型设计

创建 Wireflow 以可视化屏幕流和屏幕布局。与利益相关者一起执行原型来演示和确认您的设计。 UX 原型设计工具允许您通过 4 个简单步骤执行原型设计。

UX prototyping tool

第1步:确认屏幕流程

通过使用预备场景创建初始 Wireflow 以呈现整个屏幕流程。然后,与利益相关者讨论并确认流程,为进一步的用户体验讨论和设计奠定坚实的基础。

第2步:线框图

根据讨论结果对屏幕流程进行必要的更改。然后,为每个预备场景绘制线框,并与利益相关者确认您的设计。线框是用户界面的早期概念设计,它显示了具有简单页面组件和模拟内容(lorem ipsum)的屏幕布局。低保真线框可以快速创建和更改,是加强团队沟通的绝佳工具。

第3步:定义场景交互

定义线框与事件之间的交互。原型将按定义执行。

第4步:确认原型

通过演示 Wireflow 来展示产品功能。原型播放器使 Wireflow 易于理解。您更可以对 Wireflow 进行操作以更好地表达您的设计,例如单击按钮跳转到另一个线框和填写文本框等。演示 Wireflow,就像在执行应用程序一样。与利益相关者确认原型并开始开发、厘清并确认他们的需求。

高保真网站设计工具

用于制作拟真网页设计的网站设计工具。透过像真的屏幕组件以及自定义的实际数据,让客户和利益相关者了解真实系统界面的外观和行为,使其成为接通原始构思(以线框呈现)和最终设计的最佳工具。

High-Fidelity Website Design Tool

高保真桌面应用程序视觉稿工具

使用屏幕样机工具为任何桌面应用程序绘制美观的高保真视觉稿。抛光外观有助于表达用户界面的外观和行为。在屏幕设计中使用实际数据还可以向开发人员传达对数据格式的需求。

High-Fidelity Desktop Application Mockup Tool
  企业 专业 标准
网页线框图
桌面线框图
Android 手机线框图
Android 平板电脑线框图
iPad 线框图
iPhone 线框图
为线框制定多重状态
萤幕截图工具
故事板和播放器
高保真网站设计工具
高保真桌面应用程序视觉稿工具
Wireflow 图
400 多个即用型线框符号,用于制作 Wireflow
Wireflow 路径动画
原型工具
在 Wireflow 中定义事件

创造美好 共同成长

We use cookies to offer you a better experience. By visiting our website, you agree to the use of cookies as described in our Cookie Policy.

OK