谷歌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、在日常原型設計工作中，我們可以根據需求情況選擇合適的插件，幫助我們提高效率和設計質量。