admin管理员组文章数量:1595877
参考antv-x6官方文档API
参考antv x6流程图图绘制编辑：初始化配置（一）
参考antv x6流程图图绘制编辑 节点属性、连线属性置（二）
1 图编辑引擎antv-x6
JavaScript diagramming library that uses SVG and HTML for rendering.
<link href="https://cdn.bootcdn/ajax/libs/antv-x6/1.24.4/x6.css" rel="stylesheet">
<script src="https://cdn.bootcdn/ajax/libs/antv-x6/1.24.4/x6.js"></script>
<link href="https://cdn.bootcdn/ajax/libs/antv-x6/1.24.4/x6.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn/ajax/libs/antv-x6/1.24.4/x6.min.js"></script>
(1)特性
极易定制：支持使用 SVG/HTML/React/Vue 定制节点样式和交互；
开箱即用：内置 10+ 图编辑配套扩展，如框选、对齐线、小地图等；
数据驱动：基于 MVC 架构，用户更加专注于数据逻辑和业务逻辑；
事件驱动：可以监听图表内发生的任何事件。
1.1 安装nodejs
参考Windows安装NodeJS
参考nodejs入门使用介绍（附3个实用基础demo）
一、下载安装
选择LTS版本，选择偶数的NodeJS版本。
官网下载安装包node-v12.14.1-x64.msi。
选择安装路径D:\nodejs\。
其余默认。
查看版本
CMD>npm -v
CMD>node -v
新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理。
二 、环境变量配置
环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。
例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图：
(1)在当前文件夹，长按Shift + 鼠标右键 打开cmd命令行。
(2)输入以下命令设置。
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
(3)设置环境变量，我的电脑-右键-属性-高级系统设置-高级-环境变量。
【系统变量】下新建【NODE_PATH】
输入D:\nodejs\node_global\node_modules。
【用户变量】下的【Path】
C:\Users\user\AppData\Roaming\npm修改为D:\nodejs\node_global。
三、测试
配置完后，安装个module测试下，我们就安装最常用的express模块，打开cmd窗口，输入如下命令，进行模块的全局安装：
CMD>npm install express -g
1.2 安装antv-x6
CMD>npm install @antv/x6 -g
1.3 使用
文件main.html
<html>
<head>
<title>测试antV-x6示例</title>
<script src="https://unpkg/@antv/x6/dist/x6.js"></script>
</head>
<body>
<div id="container"></div>
</body>
<script>
const data = {
// 节点
nodes: [
{
id: 'node1', // String，可选，节点的唯一标识
x: 40, // Number，必选，节点位置的 x 值
y: 40, // Number，必选，节点位置的 y 值
width: 80, // Number，可选，节点大小的 width 值
height: 40, // Number，可选，节点大小的 height 值
label: 'hello', // String，节点标签
},
{
id: 'node2', // String，节点的唯一标识
x: 160, // Number，必选，节点位置的 x 值
y: 180, // Number，必选，节点位置的 y 值
width: 80, // Number，可选，节点大小的 width 值
height: 40, // Number，可选，节点大小的 height 值
label: 'world', // String，节点标签
},
],
// 边
edges: [
{
source: 'node1', // String，必须，起始节点 id
target: 'node2', // String，必须，目标节点 id
},
],
};
const graph = new X6.Graph({
container: document.getElementById('container'),
width: 800,
height: 600,
});
graph.fromJSON(data)
</script>
</html>
(1)在页面中创建一个用于容纳 X6 绘图的容器，可以是一个 div 标签。
(2)X6 支持 JSON 格式数据，该对象中需要有节点 nodes 和边 edges 字段，分别用数组表示。
(3)创建一个 Graph 对象，并为其指定一个页面上的绘图容器，通常也会指定画布的大小。
(4)使用刚刚创建的 graph 来渲染节点和边。
2 交互原型设计软件Axure
2.1 Axure简介
参考axure官方网站
Axure RP是一款专业的快速原型设计工具。
Axure（发音：Ack-sure），代表美国Axure公司。
RP则是Rapid Prototyping（快速原型）的缩写。
一、Axure 9.0
Axure 9.0是一款非常专业的同系列快速原型设计工具，也是当今设计人员使用次数最多的交互原型设计软件，让负责定义需求、规格、设计功能以及界面的专家可以迅速的创建应用软件或者Web网站的线框图、流程图原型、规格说明文档。
作为一款专业的原型设计工具，它能够快速、高效的创建原型，并且同时支持多人协作设计和版本控制管理，它可以辅助用户快速设计完整的产品原型，并且结合了批注、说明、流程图、框架图等元素将产品完整地传达给每一个方面的设计人员，如 UI、UE 等等，并在讨论中不断的完善。
该款软件拥有非常全面的UI、全新的设计和文档特征，相当于向前迈出了一大步，全新的硬件加速渲染引擎，在原来的基础上已经彻底破坏并重建了 Windows 版本的架构，设计了专为加速保存和加载的文件结构。
软件的可视化工作环境能够让你轻松快捷的用鼠标的方式创建带有注释的线框图，不用进行编程，就可以在线框图上定义简单连接和高级交互，在线框图的基础上，可以自动生成 HTML 原型和 Word 格式的规格。
除此之外，axure rp 9.0并没有添加新的元件，但是使用体验及增加的小功能却非常强大，比如可以灵活控制文本内容的边距，图片支持水平翻转、垂直翻转，新增了流程图的元件，元件库支持导入本地图片文件夹等等，都可以极大的提高用户的工作效率。
二、UI和UE和UX的区别
(1)中英文
UI: User’s Interface用户界面交互
UE: User Experience用户体验（用户体验度）
UX: User experience design用户体验
(2)释义
UI：泛指用户的操作界面，包含移动APP，网页，智能穿戴设备等。
UE：用户使用产品时的纯主观感受。
UX：人与系统交互时的感觉。
(3)作用
UI：可以让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。
UE：个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的。但是对于一个界定明确的用户群体来讲，其用户体验的共性是能够经由良好设计的实验来认识到。
UX：“我从这个站点获得了什么？很容易使用吗？甚至有很愉悦的用户体验？”，用户在使用我的产品的同时心中如此的问，这是产生用户黏性的基础。UX的任务是让用户说出“Yes”。
(4)应用
UI：软件、游戏开发，网页设计制作等。
UE：贯穿在一切设计、创新过程。
UX：web站点。
2.2 Axure安装
参考axure 9.0汉化破解版下载地址提取码：jhw8
参考axure 9.0安装破解教程
(1)下载解压，得到软件的原程序、汉化补丁、授权密钥和注册机。
(2)首先双击文件.exe格式的安装原程序，接受条款。
(3)选择默认安装目录即可，不过点击change可以更改路径。
选择D:\Program Files (x86)\Axure\Axure RP 9\。
(4)等待软件安装完成，注意要把立即启动选项的勾去掉。
(5)先将软件汉化补丁lang文件夹复制到软件安装目录下。
即D:\Program Files (x86)\Axure\Axure RP 9该目录下面。
(6)打开软件，可以看到是中文界面，点击enter license输入axure rp 9授权码。
用户还可以通过软件包中的axure rp pro 9注册机生成激活码。
成功激活，可以开始免费使用。
2.3 Axure界面介绍
参考Axure RP使用基础教程
2.3.1 页面导航面板(Pages)
Axure的页面管理采用类似操作系统的文件夹和页面文件的管理方式。不同点是，页面文件可以有子页面，这一点是考虑了页面与页面跳转或者嵌套页面等网页特点。
2.3.2 元件库(Libaries)
Axure的元件库，类似于PPT的模板，或者是Office提供的各种形状、图标，可以通过拖拽的方式，帮助我们快速创建原型。
(1)元件库导入
Axure提供了多种元件库的导入功能，包含官网下载，本地导入、导入共享原件、手工创建等方式。
其中手工创建可将我们日常用到较多的图形、样式、效果等管理成元件库，使用时，可直接拖拽到画布中，这里的元件不是简单的图形、形状、样式，还包含了网页所支持的特效，如渐进渐出、隐藏显示、幻灯片、链接跳转等。
(2)元件库使用
元件库提供了方便的导航筛选和元件名称搜索功能。
2.3.3 工具栏(ToolBar)
工具栏提供了常用按钮的快捷入口，既可以通过鼠标点击激活，也可以通过快捷键激活，选择有两种模式：
(1)相交模式：鼠标按住拖动选择多个元素时，只要鼠标滑过的区域与元素有相交，该元素即被选中。
(2)包含模式：鼠标按住拖动选择多个元素时，只有鼠标滑过的区域完全覆盖了该元素，该元素才能被选中。
默认为相交模式，该模式类似于PPT中的选中模式。
(3)锁定位置(右键元件)的作用主要是将元素锁定在特定位置，以方便处理其他元素，元素一旦锁定后，便无法拖动位置。
(4)预览功能是将当前涉及的原型发布到浏览器浏览，其原理是Axure搭建了一个小型的静态文件服务器，创建的原型转成HTML文件，发布到服务器上，浏览器进行访问预览。
(5)发布功能是将设计的原型图转成HTML静态文件，如果设置了各类动作，Axure会自动生成js的方法帮助实现HTML中的特效。
2.3.4 检视器面板(Inspector)
在画布中，选中元素，右侧可看到样式面板，包含了三部分：样式(类似于CSS所需的各类属性)、交互、说明。
(1)样式面板(Style)
面板提供了元素所需的各种样式属性设置功能，包含了元素名称、盒子模型中的边框、内外边距、圆角、透明度、字体、着重号、对齐方式等。
LOCATION AND SIZE位置和尺寸
OPACITY不透明度
TYPOGRAPHY排版
FILL填充色
BORDER边框
SHADOW阴影
CORNER圆角
PADDING内外边距
(2)交互面板(Properties)
交互面板提供了完整的web页面所需的各类事件绑定所需的设置，如点击事件、双击事件、显示、隐藏、链接等。
(3)说明面板(Notes)
可对元素设置元素说明。
2.4 基础操作
2.4.1 使用元件
(1)设置元件名称
可通过检视面板修改元素名称。
(2)设置元件大小、位置、角度
在样式面板可设置元件的大小，位置，也可以通过拖动的方式设置。
x：从左侧到右侧的距离，单位px
y：从上到下的距离，单位px
w：元件的宽度，单位px
h：元件的长度，单位px
R：元件的角度，单位度
T：文字的角度，单位度
(3)设置元件的颜色和透明度
选择要改变颜色的元件，点击快捷功能区中的背景颜色设置按钮，选取相应的颜色，或者在元件样式中进行设置。
元件颜色Fill
拾色器Color Picker
透明度Opacity
(4)设置元件的盒子模型属性
Axure完美的支持Web页面的布局中的盒子模型属性的设置。
边框宽度Border
边框颜色
边框类型
边框上下左右设置
圆角大小Corner Radius
圆角位置
元件透明度Opacity
元件文字内边距Padding
(5)设置元件默认隐藏
在检视的样式面板中，右上角的隐藏选择框，如果勾上，则该元件默认为隐藏，在画布中则以浅色的形式存在。
(6)标记元件文字
对需要添加文字的元件，双击该元件，即可输入文字。
2.4.2 元件交互
(1)设置元件的类型、Tips、约束
可以通过检视面板中的属性面板，设置元件的类型（如Text、Email、Password）、占位符、Tips、长度、是否隐藏边框、是否只读、是否禁用、表单提交按钮等信息。
(2)元件事件设置
选择元件后在检视的交互属性界面，选择事件类型（点击、双击、右键、鼠标滑过、点击后等），在弹出的对话框中，可设计页面跳转、界面元素显示隐藏、渐入渐出效果等各类动作。
(3)设置下拉列表值
通过元件库选择List Box元件，在检视的交互属性面板点击添加项菜单，可以批量添加下拉值。
(4)单选按钮唯一选中
可以对多个单选按钮设置唯一选中效果，选中多个单选按钮，设置按钮组名即可。
2.4.3 其他常用操作
(1)转换元件为图片
右键中可支持元件转化为图片的操作
(2)元件组合和取消组合
在实际的原型绘制过程中，需要将多个元件组合成一个整体，比如多个单选框需要组成一组、文字描述和按钮元件、页面的header、footer、导航条等。
(3)调整元件的层级
类似与HTML中的Z-index一样，多个元件存在压盖的层级顺序，默认的顺序是先拖入的元件被后拖入的元件压盖，也即后来居上。可通过右键调整层级，也可以在概要(Outline)处拖拽调整，概要出的层级是靠上部的元件压盖靠近下部的元件。
(4) 添加事件执行的条件
在事件设置页面，可通过添加条件的方式，来满足复杂的交互。
2.4.4 常用功能设置
(1)设置形状并排显示时边框是否重叠
(2)显示和隐藏交互和说明编号
一个元件设置了备注或者添加了交互时间后，默认显示编号，可设置显示或不显示。
(3)显示/隐藏两侧的功能面板
点击可展开左侧或右侧的面板。
(4)响应式布局设置
通过设置自适应视图，使得原型HTML在多种分辨率设备中查看时，系统会根据自身分辨率，自动与分辨率相适合的原型进行匹配，并显示出来。
3 Axure应用
3.1 撰写需求文档
需求文档的撰写已经从最开始的纯文字，逐渐转变到图文结合，再到线框图，再到原型图，再到JS高仿真Demo等形式，为的是保证客户需求的传达和落地不偏离，环节交接无抛接。
总的来说，需求文档有三个作用：
(1)传达客户、功能、应用、产品开发需求。
(2)保证各环节沟通有理有据。
(3)软件及产品质量控制有具体标准
很多程序猿在开发时，一般都是看着效果图和原型图写代码，只有在遇到问题时，才会查看word文档。也就是说，开发需要一边写代码，一边看效果图，一边看原型，还要时不时查看文档。
而且，大多数程序猿都不会逐字逐句去读产品经理的长篇大论。那需求写word真的合适吗？这样的用户体验真的好吗？花费大量时间写word真的有价值吗？在Axure画原型的同时，我们为什么不能直接在旁边标注呢？这样岂不是方便快捷很多吗？
其实，流行一种直接在原型图上标注的需求文档撰写方式。在新版的Axure8中，也已经推荐了原型加标注的需求文档样式。Axure8新增了一组部件—不干贴，就是方便产品设计人员进行功能标注。
需求文档结构
脚注模式
不干胶模式
3.2 如何生成链接
(1)首先选择一个元件拖到面板中。
如主要按钮。
(2)右侧属性栏，交互，New Interaction
选择Events事件
选择Actions活动
选择想要跳转的页面
然后Axure会自动转换为单击事件。
(3)在“预览”后单击“BUTTON”按钮，就会跳转页面。
3.3 鼠标悬浮出现其子菜单
(1)元件库中有两个元件，一个是“水平菜单”，一个是“垂直菜单”。
(2)将元件拖到面板中，选择一个菜单框，鼠标右击“文件”，单击“添加子菜单”。
(3)在子菜单添加想要显示的内容，从而得到在页面中显示下拉列表的效果。
3.4 实现弹窗效果
(1)首先依次在元件中拖一个按钮、一个矩形到面板当中，矩形中填写想要弹出的内容。
(2)鼠标右击矩形，点击设为隐藏。
(3)右侧属性栏，交互，New Interaction
选择Events事件
选择Actions显示/隐藏
选择刚才隐藏的元件
选择Treat as Lightbox灯箱
注意：这个灯箱效果还自带一个功能，点击空白处，就会自动隐藏。如果我们不选择这个灯箱效果，是无法自动缩回的。
3.5 预览和导出成HTML
(1)原型图的效果，可以点击菜单栏的预览按钮查看，也可以通过快捷键F5。
(2)导出HTML，可以点击 发布publish–>生成HTML文件，可以通过快捷键F8。
(3)双击start.html即可运行。
版权声明：本文标题：软件测试-5-图编辑引擎antVx6和交互原型设计软件Axure 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1728225837a1150155.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论