谷歌Axure插件——提高原型设计效率的利器

一、快速制作自定义组件

1、Axure自带的组件库虽然丰富，但在某些情况下我们需要自己设计一些特殊的组件，而谷歌Axure插件提供了一个轻松快捷的方式。

以设计一个自定义开关组件为例：

  
  <div class="switch">
    <input type="checkbox" />
    <div></div>
  </div>
  
  /*CSS代码*/
  .switch {
    width: 70px;
    height: 35px;
    position: relative;
  }
  .switch input {
    display: none;
  }
  .switch div {
    width: 35px;
    height: 35px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(0);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    background-color: #ddd;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  }
  .switch input:checked + div {
    transform: translateX(35px);
    background-color: #50BFD5;
  }

2、将以上代码复制到文档中，选中并右键选择“生成交互元件”，即可快速创建出自定义开关组件。

二、使用Javascript代码增强原型交互功能

1、谷歌Axure插件不仅能够帮助我们快速生成交互元件，还支持在原型设计过程中使用Javascript代码增强交互功能。

以为一个翻牌游戏添加计分功能为例：

  
  <div class="flip-box">
    <div class="flip-box-inner">
      <div class="flip-box-front">Front</div>
      <div class="flip-box-back">Back</div>
      <button class="flip-btn">Flip</button>
    </div>
  </div>
  
  /*CSS代码*/
  .flip-box {
    width: 200px;
    height: 200px;
    perspective: 1000px;
    position: relative;
  }
  .flip-box-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    transform-style: preserve-3d;
    transition: transform 0.6s;
  }
  .flip-box-inner.flip {
    transform: rotateY(180deg);
  }
  .flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Safari */
  }
  .flip-box-front {
    background-color: #bbb;
    color: black;
    z-index: 2;
  }
  .flip-box-back {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }
  .flip-btn {
    width: 80px;
    height: 40px;
    border-radius: 6px;
    background-color: #50BFD5;
    color: white;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }

2、在Axure的交互编辑器中为Flip按钮添加动作：点击时选中“设置值”，将方框左侧的“值”的下拉菜单选择“添加脚本”，并在右侧的编辑区输入以下Javascript代码：

  var count = [+[[LVAR1.text]]+]; 
  count++;
  [[LVAR1.text = count]];
  if(count === 8) { 
    alert("Congratulations! You win!")
  }

3、将代码中的“LVAR1”修改为当前文档中的变量名，并保存。

现在游戏界面中的Flip按钮可进行翻牌，并计算分数。当分数达到8时会弹出赢得游戏的提示框。

三、批量导出Axure项目图片和HTML文件

1、在原型设计完成后，我们需要将原型导出成HTML文件与团队或客户共享，同时需要提供静态效果截图。谷歌Axure插件提供了一个批量导出文件的功能。

2、在Axure中打开要导出的文件，点击“Plugins”-“Google Axure RP Extension”-“Export and Publish”，在弹出的窗口中配置一些必要的导出设置，比如导出路径和文件名、图片格式、图片质量等。如下图：

3、点击“导出”按钮，等待一段时间，即可在指定目录下看到导出的HTML文件和静态效果截图。

四、快捷生成产品规格说明文档

1、在产品原型设计完成后，我们需要准备一份详细的产品规格说明文档以便研发人员进行开发。谷歌Axure插件提供了一种自动化生成产品规格说明文档的功能，可以大大减少我们编写文档的时间和精力。

2、在Axure中打开要导出的文件，点击“Plugins”-“Google Axure RP Extension”-“Generate Spec”，在弹出的窗口中配置一些必要的设置，比如输出路径、版本号、字体、尺寸等。如下图：

3、点击“Generate”按钮，等待一段时间，即可获得包含产品原型界面截图、交互操作介绍和规格说明的完整文档。

五、提供更多实用功能的Axure插件

1、除了谷歌Axure插件，市面上还有一些其他供Axure使用的插件，如Justinmind插件、Axure元件库、Axure风格库以及Axure Protopie。

2、其中，Justinmind插件提供了更多高级的交互特效、动态数据和共享功能；Axure元件库和Axure风格库提供了丰富的元件和界面风格模板供我们使用；Axure Protopie则是一个基于Axure的高保真界面原型设计工具，能为我们带来更流畅的交互体验。

3、在日常原型设计工作中，我们可以根据需求情况选择合适的插件，帮助我们提高效率和设计质量。

原创文章，作者：EETUL，如若转载，请注明出处：https://www.506064.com/n/370417.html