Axure

背景需要原型中， 有时候须要展现一些如柱状图、折线图、扇形图、漏斗图、组合图等， Axure画统计图有多种形式， 导入HTML、第三放库都能够实现， 这里介绍一种最优形式， 只需简略三步， 就能够画出带交互成果的统计图。 以echarts为例：最终成果示例： 1. 导入echarts组件库1.1 在页面空白处， 新增一个交互PAGE LOADED -> Open Link -> LINK TO -> Link to external URL1.2 引入echarts框架点击函数符号， 编辑JS脚本: javascript: /* 引入ECharts库 */ const script = document.createElement('script'); script.type = 'text/javascript'; /* 这里能够通过改链接更改echarts版本 */ script.src = 'https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js'; document.head.appendChild(script); console.log(document.head);下面脚本将在页面引入echarts框架。特地留神： 第一行javascript:不能够省略， 正文必须都用/* 正文内容 */包裹(Axure函数会合并成一行， 如果用//正文， 会导致前面的代码全副正文掉) 2. 画统计图2.1 拖一个矩形框， 命名为barGraphBox 2.2 创立一个交互2.2.1 点击矩形框， 创立一个交互：LOADED -> Open Link -> LINK TO -> Link to external URL ...

在本章中，你将学会如何应用Axure中继器和内联框架创立一个AppleSymbol图标库网站。我的项目背景在咱们开发iOS应用程序过程，经常会用到图标按钮，Apple提供了一整套官网的图标，开发人员能够间接应用Apple设计的官网图标疾速开发App。但遗憾的是，目前这套AppleSymbol图标库目前只有dmg下载安装的版本，这就对于非苹果的开发者、MacBook低贮存用户十分不敌对。于是乎，咱们看看能不能做个在线版本的AppleSymbol图标库，收录罕用的图标供用户间接应用。说干就干。我的项目创立首先，创立一个新我的项目，命名为AppleSymbol。根底款式-侧边导航栏咱们先剖析下AppleSymbol图标库网站的构造，它由一个侧边导航栏和内容展示区组成，当咱们点击侧边导航栏的菜单时，右侧内容区域将展现不同的内容。在这里咱们应用到的组件是：动静面板、内联框架、中继器，别离实现侧边导航栏、内容区域、内容展现。首先是侧边导航栏，咱们拖入一个动静面板放在左侧，在款式工具栏中，设置它的地位为0,0，尺寸是256*955，并填充动静面板的背景色彩为#001529。为了让侧边导航栏放在右边，咱们须要固定侧边导航栏的动静面板。咱们在款式工具栏中设置“固定到浏览器”，设置程度固定为“左侧”，垂直固定为“顶部”。接下来实现外面的内容。咱们双击动静面板进入动静面板外部，拖入一个矩形1组件，在款式工具栏中，批改它的地位为（13，20），尺寸为230*52，填充色彩为通明色，线段宽度为0；双击矩形1，输出文字“导航菜单”，字体大小为14号字，字体色彩为#FFFFFF。上面，咱们增加交互款式。在交互工具栏中，咱们点击“新建交互”，抉择“单击时”，抉择“设置选中”，选中指标“以后”，值为“真”。在上面“交互款式”一栏中，设置“鼠标悬停时”的交互为勾选“填充色彩”，设置色彩为#1890FF。同理，设置“元件选中的款式”，勾选“填充色彩”，设置色彩为#1890FF。咱们复制6个“导航菜单”的矩形，批改外面的文字为“罕用性能”、“增删改查”、“上下左右”、“珍藏点赞”、“音讯揭示”、“硬件设施”。矩形居中对齐，间距为10，可自行调节矩形间的间距。交互动作-侧边导航栏为了实现单选的成果，咱们须要选中一个侧边导航栏菜单时，选中单个。这里援用“选项组”的概念，选项组中，交互惟一。咱们为每一个菜单都设置选中的时候加背景色彩，只须要把所有的导航菜单联合在一个选项组中，即可实现单选互斥选中的成果。选中全副导航菜单，右键抉择“选项组”。给选项组命名为“导航菜单”。这样咱们就实现了侧边导航栏的单选成果。咱们点击预览看看成果。根底款式-内容区域上面，咱们设计下内容区域。这里咱们用到的组件叫做“内联框架”，它能够链接展现内部地址网站，也能够链接外部创立好的页面。咱们这里有7个菜单，咱们在“页面”工具栏中先创立7个页面。而后还是在AppleSymbol页面中，拖入一个“内联框架”组件，把它放在侧边导航栏左边，尺寸设置为1350*955。顺便设置它的款式，勾选“暗藏边框”，设置滚动模式为“从不滚动”。

只需三步，不必下载Axure RP Extension for Chrome插件！！！只需三步，不必下载Axure RP Extension for Chrome插件！！！只需三步，不必下载Axure RP Extension for Chrome插件！！！关上原型文件的html，会跳转到这个页面，怎么破？1、关上原型文件->resources->chrome->axure-chrome-extension.crx，找到找到Axure RP Extension for Chrome插件2、把.crx文件批改扩展名.rar，解压3、关上浏览器，输出chrome://extensions/，右上角关上开发者模式，抉择“加载已解压的扩大程序”，抉择文件后装置，实现————————————————原文链接：https://blog.csdn.net/qq_3851...

因为是学习心得，所以就不过多介绍axure的根本信息了，间接介绍案例。案例1：form表单 间接拖一个矩形过去，放上你须要的表单控件。例如上面的下拉列表框。 双击改下拉列表框，呈现编辑选项，你能够增加抉择内容等。 例如性别抉择男、女，这样的单抉择框。你须要按Ctrl同时选中两个单选框，而后设置单选按钮组，设置选中就能够实现单选框的互斥。 案例2：自适应 能够依据窗口的分辨率主动调整页面款式。咱们须要在页面属性中开启自适应： 设置好宽高，继承与根本等信息后，就能够进行布局： 3、交互款式 因为交互款式过多就不一一形容了，举几个简略的例子。 案例3：选项组菜单互斥成果 同时选中多个元件，而后指定选中组。 设置选中时的款式变动： 案例4 折叠菜单 把二级菜单暗藏，而后给一级菜单设置单击时的交互事件。