有使用Axure创建个人博客并在线公开的产品经理。 Axure有多少可能性？ 是否可以挑战更多的开发项目，成为可以直接在线使用的产品？
笔者正好利用2020年漫长的春节假期进行了探索。 为什么会想用原型工具制作完成品呢？
主要原因是，它是一个只看就能得到的编辑过程，普通人可以在几乎不增加学习成本的情况下完成学习编程需要花费时间的工作，质量的稳定性更可靠。 传送带可以很容易地设置，也不需要考虑不同浏览器之间的代码兼容性。 其次，Axure提供了强大的函数库，赋予了无限的可能性。
此次挑战的工具使用的是axure 8.0版，项目在作者的公司中选择了交互式复杂的移动商城装机功能。 利用此功能，用户可以通过直接在PC端查看的编辑方法，将移动端常见的展示效果组合为积木，使之成为用户所需的移动商城风格。 (下图：左侧，内部装饰组件选择区域。 中间，实际效果预览区域。 右边，组件参数设定区域。 ）
这次挑战的原型公布在作者的在线空间。 网站如下。
无axurenavbar的原型地址： http://yssy cm.com/fituppage/fituppage.htmlaxurenavbar的原型地址： http://yssy cm.com/fitutur
适用于各种画面尺寸的自适应布局框架。 预览区中的内部装饰组件的实时显示。 在预览区域的指定位置插入新的内部装饰组合。 从预览区域中删除现有的内部装饰组合。 在预览区中上下调整内部装饰组合的位置。 内部装饰组件的设定变更时的预览区域的同步。 通用图像选择控件的单选和多选功能。 通用翻页控件。 内部装饰部件“图像列表”功能。 内部装饰组件“视频”功能。 装饰部件“标题”功能。 由于时间有限，其他装修部件的功能还没有提供，但根据笔者的经验，是可以实现的。 如果需要与后台进行通信，请插入JS文件来处理数据。
经过这段时间的探索和实验，总结得出，Axure对文件的体积不敏感，可以进行交互式、不复杂的项目。 例如CMS、个人博客等展示类产品。 如果需要复杂的交互，也可以实现，但在实现的过程中需要额外的注意事项。 有兴趣的朋友可以知道以后分享给大家的一些探索中的经验。
Axure做前端开发的优缺点
优点
貌似得到的编辑效果：虽然只有一个优点，但这是很多人的痛处。 编程学习从HTML、CSS、JS到放弃很多，Axure的工作方式让前端的工作如画。
缺点
完成文件冗余：以这次的项目为例，HTML文件： 482KB。 JS脚本： 855KB，其中jquery库162KB，CSS文件62KB，页面数据文件1270KB。 共计2669KB (不包括图像资源)。 完成项目中的所有功能后，HTML文件和页面数据文件可能会变大。 这可能是Axure为存储与原型说明相关的内容而生产的冗余。
执行效率低下：
主要是数据集频繁大量修改后，页面明显被引导到纸箱上，Axure的数据集机制容易产生大量的数据操作。 因此，笔者只能选择控制一些接口部件的数量，降低实时同步频率，在操作间隙更新数据等方法，尽量减少卡顿感。
调试过程复杂：
Axure没有现成的调试方法，需要规划调试空间。 有兴趣的朋友可以看看后面的单元测试和集成测试的介绍。
代码片段：
在Axure中，所有的代码都写在组件上，这个一开始我不太在意，但是随着项目的进行，影响会越来越大，最终几乎不能继续进行，最终必须提出Axure伪代码规范的解决方案
经过这次探索，笔者认为，如果Axure朝着可视化编程的方向努力，有可能大幅降低前端的开发门槛，或者改变开发方式。
关于使用Axure进行复杂交互的方法，下面是这次探索的一些经验。
Axure编程中必备的基础功能实现
变量
实现变量效果的3种方法：Axure全局变量：利用Axure本机的全局变量功能。 此变量由所有页面共享，可用于页面之间的数据传输。 组件的文本记录：利用组件的文本记录功能，用该方法保存的变量只对当前页面有效。 数据集(中继器) :用于访问复杂的数据，可以作为小数据表使用。 中继器也是页面元素，因此只在当前页面有效。 数据集中的数据可以通过文本元素和过滤器的组合来获取，也可以通过过滤器和字符的组合来剪切。 笔者推荐前者。 这是因为它更直观，更容易调试。
可以向
条件判定
Axure的各个组件添加条件判定。 但是，在用于模拟功能函数时，多项选择按钮(checkbox )比较合适。 因为选择状态有助于调试过程。
循环
通过定时切换多个选择按钮(复选框)来完成。 由于缺点在逻辑上并不严密，所以需要注意逻辑上的并行化的影响。 可以通过禁用和锁定等方法避免影响。
自定义功能函数
通过定时切换多个选择按钮(复选框)来完成。 由于单个设备的功能有限，可能需要多个 checkbox组合完成，这种方式我们把他称为功能函数组。命名规范
对于复杂的项目，元件多时间命名规范极为重要。否则再次优化，修改无从着手。规范可以帮助我们看名知其意，也有利于在众多元件中轻松找到需要的元件。
编程过程
设计过程
功能设计图：折分功能，帮助理解流程及流程中各动作的影响范围。
功能列表：记录拆分后的功能列表，帮助你实施时更加有条理，应随着伪代码的编写逐步完善。
功能影响列表：记录功能可能影响到的范围或用户可能的非正常操作列表，并给出对应的解决方案（如有必要可编写解决方案的伪代码），应随着伪代码的编写逐步完善。
伪代码编写
伪代码是将各元件的协作，用简练的文字描述出来的方法。因为Axrue中的功能，都是写在各各独立的元件上的，非常碎片化，对于复杂一些的功能，编辑不直观，思维容易被干扰，后期也不利于梳理和阅读。本次的项目随着元件的增加，几乎到了不可维护的情况。
所以需要避免在元件中盲目操作导致越发混乱，同时对于之后的维护，只需要有对应的伪代码，便可快速了解整个全貌，轻松上手，伪代码需要与命名规范结合使用。（本次使用的Axure伪代码规范文档：http://www.yssycm.com/personal/index.php/2020/03/15/axure-pseudocode-specification/）
创建调试环境
调试即是伪代码的实施的过程，按伪代码的内容要求，逐一操作创建对应的元件并赋于对应的功能。将需要监视的变量，数据集，功能函数组，分类陈列，方便运行中查看错误产生在那。必要时可增加额外功能元件，帮助触发特定的情况。Axure中的等待命令可以模拟编程调试中的断点功能，完成调试后可以只隐藏不删除，便于之后再次修改维护（发布上线的可以删除减少一些冗余）。
单元测试与集成测试
将项目中的功能，依据范围，目的，拆分为相对独立的功能模块，每一个功能模块在独立的页面进行编辑和调试。最后再组装到一个页面中。可以快速定位错误的位置，同时预览调试速度也快。
其它相关事项
选择元件的顺序会影响执行顺序，如果发生难已理解的错误，可以仔细查看下顺序。如果能有一个大的宽屏(2560*1440)的显示器将极大提高效率与过程的舒适性。Axrue发布后与预览时的图片引用位置是不同的。因为在发布时会把项目所有用到的图片进行总和，无论在项目中引用过几次是否在同一个界面中，最后都只会输出一张，大家共用，一般是输出到第一次引用此图片的页面资源文件夹中，如果项目中有依赖图片路径的操作，记的处理。引入外部的CSS文件可以扩展Axrue的样式功能。引入外部的JS文件可以实现更多的交互或实现原型中的数据与外部系统打通。如果计划要把数据传送到后台，伪代码设计时就应考虑到。本文由 @镜缘 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议