界面原型设计工具UXBOX、Graver、VvvebJs、OverVue介绍

以下为你介绍的界面原型设计工具都可用在Linux系统上:UXBOX(开源原型工具)、Graver(高效的 UI 渲染框架)、VvvebJs(使用拖拽的方式生成网页)、OverVue(适用于Vue的原型工具)。

1、UXBOX(开源原型工具)

界面原型设计工具UXBOX、Graver、VvvebJs、OverVue介绍

UXBOX 是用于设计和原型制作的开源解决方案,目前正处于早期开发阶段。UXBOX适用于所有设计和原型的标准格式SVG。

基于SVG:

UXBOX适用于所有设计和原型的标准格式SVG。这意味着您在UXBOX中的所有内容都是可移植的,并且可以在许多其他矢量工具中进行编辑,并且易于在网络上使用。

说明:

大多数主要操作可以通过帮助脚本完成manage.sh。

UXBOX的开发需求是通过单个docker容器完成的。在不同的tmux会话中打开每个主要服务。

UXBOX安装和所有数据都存储在数据库中(文件上传等)。docker守护程序会将这些数据存储在docker目录/var/lib/docker/volumes/....中,这意味着即使容器崩溃,停止或删除,您的数据也会被保存。

为了使您的数据能够持久用于升级并获得备份访问权限,请使用命名的docker卷或安装主机文件夹。为此,您需要一个卷用于数据库容器。

数据库:

/var/lib/postgresql/data PostgreSQL Data

$ docker run -d \

 -v db:/var/lib/postgresql/data \

 postgresql

您还需要保留UXBOX后端公共资源,以免丢失上传的图像并允许前端公开资产。

/srv/uxbox/resources/public UXBOX后端公共资源

$ docker run -d \

 -v db:/srv/uxbox/resources/public \

 monogramm/docker-uxbox-backend

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

2、Graver(高效的 UI 渲染框架)

界面原型设计工具UXBOX、Graver、VvvebJs、OverVue介绍

Graver 是一款高效的 UI 渲染框架,它以更低的资源消耗来构建十分流畅的 UI 界面。Graver 独创性的采用了基于绘制的视觉元素分解方式来构建界面,得益于此,该框架能让 UI 渲染过程变得更加简单、灵活。

功能特点:

性能表现优异:

Graver 在 FPS、CPU、Memory 各方面的指标均表现优异。

“一站式”异步化:

Graver 从文本计算、样式排版渲染、图片解码,再到绘制,实现了全程异步化,并且是线程安全的。使用 Graver 可以一站式获得全部性能优化点。

性能消耗的“边际成本”几乎为零:

Graver 渲染整个过程除画板视图外完全没有使用 UIKit 控件,最终产出的结果是一张位图(Bitmap),视图层级、数量大幅降低。

渲染速度快:

Graver 并发进行多个画板视图的渲染、显示工作。得益于图文混排技术的应用,达到了内存占用低,渲染速度快的效果。由于排版数据是不变的,所以内部会进行缓存、复用,这又进一步促进了整体渲染效率。Graver 既做到了高效渲染,又保证了低时延页面加载。

以“少”胜“繁”:

Graver 重新抽象封装 CoreText、CoreGraphic 等系统基础能力,通过少量系统标准图形绘制接口即可实现复杂界面的展示。

基于位图(bitmap)的轻量事件交互系统:

如上述所说,界面展示从传统的视图树转变为一张位图,而位图不能响应、区分内部具体位置的点击事件。Graver 提供了基于位图的轻量事件交互系统,可以准确识别点击位置发生在位图的哪一块“绘制单元”内。该“绘制单元”可以理解为与我们一贯使用的某个具体UI控件相对应的视觉展示。使用 Graver 为某一视觉展示添加事件如同使用系统 UIButton 添加事件一样简单。

全新的视觉元素分解思路:

Graver 一改界面编程思路,与传统的通过控件“拼接”、“添加”,视图排列组合方式构建界面不同,它提供了十分灵活、便捷的接口让我们以“视觉所见”的方式构建界面。

如何运行示例项目:

在 Clone 项目后,执行 pod install,然后打开 GraverDemo.xcworkspace。

安装:

CocoaPods 在 Podfile 中添加 pod 'Graver',然后运行 pod install 即可。

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

3、VvvebJs(使用拖拽的方式生成网页)

VvvebJs是一个开源的网页拖拽自动生成的JavaScript库,你可以以简单拖拽的方式生成自己需要的网页样式,内置jquery和Bootstrap,你可以拖拽相关的组件进行网页的构建,非常的方便,而且可以实时修改代码,功能丰富,使用简单,界面友好,特别适合一些专注于展示的网页设计,需要的朋友不可错过!

界面原型设计工具UXBOX、Graver、VvvebJs、OverVue介绍

相关特性:

1]、组件和块/片段拖放。

2]、撤销/重做操作。

3]、一个或两个面板界面。

4]、文件管理器和组件层次结构导航添加新页面。

5]、实时代码编辑器。

6]、包含示例php脚本的图像上传。

7]、页面下载或导出html或保存页面在服务器上包含示例PHP脚本。

8]、组件/块列表搜索。

9]、Bootstrap 4组件等组件。

默认情况下,编辑器附带Bootstrap 4和Widgets组件,可以使用任何类型的组件和输入进行扩展。

使用方式:

如下代码:

<!-- jquery-->

<script src="js/jquery.min.js"></script>

<script src="js/jquery.hotkeys.js"></script>

<!-- bootstrap-->

<script src="js/popper.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<!-- builder code-->

<script src="libs/builder/builder.js"></script>

<!-- undo manager-->

<script src="libs/builder/undo.js"></script>

<!-- inputs-->

<script src="libs/builder/inputs.js"></script>

<!-- components-->

<script src="libs/builder/components-bootstrap4.js"></script>

<script src="libs/builder/components-widgets.js"></script>

<script>

$(document).ready(function() 

{

Vvveb.Builder.init('demo/index.html', function() {

//load code after page is loaded here

Vvveb.Gui.init();

});

});

</script>

要初始化编辑器,调用Vvveb.Builder.init。第一个参数是要加载以进行编辑的URL,它必须位于相同的子域中才能进行编辑。第二个参数是页面加载完成时调用的函数,默认情况下调用编辑器Gui.init();。

结构:

界面原型设计工具UXBOX、Graver、VvvebJs、OverVue介绍

Component Group是一个组件集合,例如Bootstrap 4组由Button和Grid等组件组成,该对象仅用于在编辑器左侧面板中对组件进行分组。例如,Widgets组件组只有两个组件视频和地图,并被定义为如下:

Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/video"];

Component是一个对象,它提供可以在画布上放置的html以及在选择组件时可以编辑的属性,例如Video Component,具有Url和Target属性的html链接Component定义为:

Vvveb.Components.extend("_base", "html/link", {

nodes: ["a"],

name: "Link",

properties: [{

name: "Url",

key: "href",

htmlAttr: "href",

inputtype: LinkInput

}, {

name: "Target",

key: "target",

htmlAttr: "target",

inputtype: TextInput

}]

});

在Component属性集合中使用Input对象来编辑属性,例如文本输入,选择,颜色,网格行等。例如,TextInput扩展Input对象并定义为:

var TextInput = $.extend({}, Input, {

events: {

"keyup": ['onChange', 'input'],

},

setValue: function(value) {

$('input', this.element).val(value);

},

init: function(data) {

return this.render("textinput", data);

},

}

);

输入还需要一个在编辑器html(在editor.html中)定义为<script>标签的模板,其id为vvveb-input-inputname,例如对于文本输入为vvveb-input-textinput,定义:

<script id="vvveb-input-textinput" type="text/html">

<div>

<input name="{%=key%}" type="text" class="form-control"/>

</div>

</script>

以上是借助浏览器翻译工具,对官网的文档进行简单的翻译,可能会有些不够准确的地方,感兴趣的小伙伴可以直接查看相关文档!

设计界面预览:

界面原型设计工具UXBOX、Graver、VvvebJs、OverVue介绍

界面原型设计工具UXBOX、Graver、VvvebJs、OverVue介绍

界面原型设计工具UXBOX、Graver、VvvebJs、OverVue介绍

界面原型设计工具UXBOX、Graver、VvvebJs、OverVue介绍

总结:

VvvebJs是一个非常强大的网页可视化生成构建工具,让不懂网页设计的小伙伴们也能够通过拖拽来生成美观大方的网页出来,让设计网页就像设计图片一样,VvvebJs特别适合展示型网页,甚至可以不需要代码就能完成一项复杂的网页设计,总体来说,VvvebJs是一个值得尝试的工具!

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

4、OverVue(适用于Vue的原型工具)

界面原型设计工具UXBOX、Graver、VvvebJs、OverVue介绍

OverVue是一种原型设计工具,允许开发人员动态创建和可视化Vue应用程序,实现组件层次结构的实时直观树形显示和实时生成的代码预览。生成的样板可以作为模板导出,以便进一步开发。

主要特征:

上传前端模型图像。

可视化可拖动和可调整大小的组件。

创建组件的父子层次结构。

将html元素添加到组件。

创建Vue Router使用的路由。

每个组件的实时生成的可预览代码段。

实时生成的树视图,以帮助可视化父子层次结构。

保存项目并打开以前的项目。

导出工作前端的完整样板代码。

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

注明

以上就是界面原型设计工具UXBOX、Graver、VvvebJs、OverVue的介绍内容,这些界面原型设计工具都能使用在Linux操作系统中。

栏目相关文章