界面原型设计工具ReacType、PreVue、OkayDesigner、Ant UX介绍

以下为你介绍的界面原型设计工具都可用在Linux系统上:ReacType(导出 React/TypeScript 代码的可视化原型工具)、PreVue(Vue 界面原型设计工具)、OkayDesigner(AUI 可视化布局工具)、Ant UX(页面逻辑原型)。

1、ReacType(导出 React/TypeScript 代码的可视化原型工具)

ReacType 是一种可视化原型工具,适用于采用 React 组件架构以及 TypeScript 综合类型检查的开发人员。换句话说,可以用它绘制原型并导出 React/Typescript 代码。

ReacType 允许用户动态可视化其应用程序体系结构,采用画布显示、应用程序树和实时组件代码预览。用户可以在画布上创建组件并将这些组件的实例以及嵌套的 HTML 元素加载到其中。然后,可以将此体系结构导出为 TypeScript 应用程序文件,以用作任何存储库的入门模板。

适用于MacOS、Windows、Linux。

Mac用户:目前您可能需要转到安全设置以允许应用程序在您的系统上运行,因为我们还没有Apple许可证。

界面原型设计工具ReacType、PreVue、OkayDesigner、Ant UX介绍

如何使用:

打开应用程序以启动新项目。它将在根App组件中打开,其名称在左侧面板中列出,组件由画布上的白色框表示。

要添加新组件,请在左上方面板的“ 添加类组件 ” 字段中键入其名称,然后按Enter键。

要将组件实例呈现到屏幕,请首先选择要在其中呈现实例的组件或父组件。此选定组件将在新的画布视图中显示,并带有自己的白色框。然后按组件名称旁边的加号按钮。实例或子表示将出现在画布上。

要添加可拖动的HTML元素,请选择左下方面板上的图像图标。

界面原型设计工具ReacType、PreVue、OkayDesigner、Ant UX介绍

底部面板允许用户4个不同视图之间切换:一个应用程序的树状图,一个可输出码的实时预览,进入组件道具形式,并且一个表单添加HTML属性。

界面原型设计工具ReacType、PreVue、OkayDesigner、Ant UX介绍

可以在底部面板的选项卡中将道具添加到每个组件中。输入键值对,选择其数据类型,然后按“ADD PROP”底部。

HTML元素在将HTML元素渲染到画布后,可以将类名和ID的属性添加到每个HTML元素中。

界面原型设计工具ReacType、PreVue、OkayDesigner、Ant UX介绍

要从画布删除一个实例,选择所需的实例,并按删除键。

要删除一个组件,点击左侧面板的所希望组分的“删除”按钮。

要重新开始,请在左侧面板中选择蓝色的“CLEAR WORKSPACE”按钮。这将清除整个应用程序。

导出文件:

完成设置应用程序模板后,按左侧面板底部的绿色“EXPORT PROJECT”按钮,在两个选项之间选择导出文件:

将组件文件导出到组件文件夹中。此选项将允许开发人员将这些文件添加到现有项目中。

使用TypeScript配置文件和组件文件导出新项目。此选项将允许开发人员立即开始新项目。

下载地址:https://gitee.com/mirrors/reactype

2、PreVue(Vue 界面原型设计工具)

界面原型设计工具ReacType、PreVue、OkayDesigner、Ant UX介绍

PreVue 是为 Vue 开发者提供的全集成的界面原型工具。

PreVue 可以让用户进行可视化的设计 Web 组件,包括:

创建组件并预览代码。

设置不同的视图和路由。

建立组件关系。

树状结构浏览应用架构。

导出组件架构到一个 Vue 应用。

支持平台:MacOS,Linux或Windows。

设定:

克隆此仓库:

git clone https://github.com/teamprevue/PreVue.git

安装依赖:

npm i

运行应用:

npm run electron:serve

下载地址:https://gitee.com/mirrors/PreVue

3、OkayDesigner(AUI 可视化布局工具)

界面原型设计工具ReacType、PreVue、OkayDesigner、Ant UX介绍

OkayDesigner是可拖拽的在线或离线前端布局工具,它整合了AUI CSS框架、Font Awesome图标库。

OkayDesigner既可以像墨刀一样供产品经理快速构建原型,同时提供了生成源代码给前端人员,快速生成产品,让开发人员可以更专注与业务逻辑,减少在页面上了花费的功夫。OkayDesigner还提供了在线脚本编辑,可以让Javascript脚本直接应用于预览页面,使产品设计预览阶段就可以清晰展现交互功能,更好理解需求。

OkayDesigner除了整合AUI CSS框架,开发人员还可以根据自己的意愿,按照OkayDesigner的开发要求整合其他CSS框架或自定义框架。

下载地址:https://gitee.com/djxfire/AUIKeShiHuaBuJuGongJu

4、Ant UX(页面逻辑原型)

界面原型设计工具ReacType、PreVue、OkayDesigner、Ant UX介绍

Ant-UX-这是一套制作页面逻辑的素材库,当你在产品设计初期,可以用它来绘制页面与页面之间的逻辑图,帮助你了解产品架构,业务流程。

配合工具:OmniGraffle、Sketch:

OmniGraffle 可以用来绘制图表,流程图,组织结构图以及插图,也可以用来组织头脑中思考的信息,组织头脑风暴的结果,绘制心智图,作为样式管理器,或设计网页或PDF文档的原型。它具有采用拖放的所见即所得界面。所谓的 "Stencils" 一组用于拖放的形状—可以作为 OmniGraffle 的插件使用,用户也可以创建自定义的 Stencils。

Sketch 是一个矢量设计软件,可以帮助你快速投入UI设计当中

使用方式:

1].获取 Ant UX 最新版本。

2].点击文件导入到你的 OmniGraffle 中(如果没有 OmniGraffle,请先安装)。

3].创建白板,在右侧素材库里调用 Ant-UX。

通过简单的拖拽,即可完成一个产品的逻辑图。

下载地址:https://gitee.com/mirrors/Ant-UX

注明

以上就是界面原型设计工具ReacType、PreVue、OkayDesigner、Ant UX的介绍内容,这些界面原型设计工具都能使用在Linux操作系统中。

栏目相关文章