Axure使用（基于Axure RP 7.0）

本博客参考课程《Axure原创教程网》

地址：http://www.iaxure.com/

一、下载安装与汉化

1、下载与安装

https://www.axure.com/

https://www.axure.com/downloadthanks?dl=80pc

或者

https://pan.baidu.com/s/1s399xRCGqUBpa__ED8yqGg，密码：d8m4

2、安装汉化包

http://downloads.iaxure.com/AxureRP8_CHS_V1.6.6.zip

将下载的汉化包解压后得到文件“default”，并把该文件替换到**\Axure\Axure RP 8\Lang\default下，例如： C:\Program User\Axure\Axure RP 8\Lang\default

3、下载和安装元件库

元件库可以自己制作，也可以从网络上下载，参考元件库：http://downloads.iaxure.com/IaxureRP8V1.2.zip

载入元件库：

添加选择添加元件库

4、注册激活

Axure RP 7.0注册码:
用户名：axureuser
序列号：8wFfIX7a8hHq6yAy6T8zCz5R0NBKeVxo9IKu+kgKh79FL6IyPD6lK7G6+tqEV4LG

在“帮助”——“管理授权”中输入注册信息进行注册即可。

二、Axure RP 7介绍

7.0后新增的模块动态面板

1、站点地图：设置增加站点及子站点

2、页面样式：背景、对齐（居左、居中）、背景图片、重复

3、页面交互：页面载入时、窗口调整尺寸时、窗口滚动时

4、页面注释（说明、含自定义说明）

4、母版：新增母板后通过“右键母版”——“新增页面”后会将母版同步到对应的页面中(也可以移除母版)

三、元件库（新建、编辑/修改、下载）

C:\Users\ThinkPad\Documents\Axure\Libraries

1、创建元件库，确认后会打开元件库编辑器

2、创建元件：一个元件库可以包含多个元件，新建保存后刷新或载入元件库即可

添加矩形元件后可以调整（点击矩形元件右上方的小黑点可以选择形状）元件形状为“圆形”

现有元件库也可以进行编辑，也可以下载元件库（从Auxre官网下载）

下载链接到的地址：https://www.axure.com/support/download-widget-libraries

四、元件的其他特性

1、元件的交互事件：鼠标打击时、鼠标移入时、鼠标移除时、即更多事件

2、元件的注释：可以新增配置（也可以直接用描述说明）

3、元件命名：通过名称可以区分相同元件类型的事件区分，尽量用英文字母命名

4、元件的属性和样式（不同元件有所不同）

5、元件的管理（具备搜索等多种设置）：

五、原型实例-登录界面

1、取色器

将需要取色的目标选取一小块添加到Axure编辑窗口，在背景颜色选项中点击“取色器”进行取色即可。

2、图片logo的处理

添加图片Image（第一个元件、用截图软件看他的坐标位置）

双击图片Image元件添加本地文件,选中按照当前元件尺寸（选择“否”）。

裁剪图标：如果图片是通过页面截取过来的，可以有很多留白，在图片属性里，选择“裁剪”——调整保留区域后“双击”即可把大量留白去除。

切割图片：在图片属性中选择裁剪，可以将目标图片裁剪为2分或者4分。

保留图片清晰度：

添加图片，裁剪取对应留白后
选择“固定边角范围”——通过选择图片四周的“三角形，把图片有内容的区域都包含进来”——设置W和H即可。
下图右侧图标清晰度比左侧高

3、处理文本框

添加区域矩形框，用来表示用户名和密码登录区域，区域坐标参考设置，拖动时会标识矩形框与logo图标的中心对齐线

设置矩形框的线条颜色

4、设置鼠标悬停时事件（字体为蓝色）

5、设置元件提示信息（鼠标移动到元件上时的文字提示）-在“元件提示”里设置

6、发布（生成HTML文件,F8）或预览（F5）

7、效果图

8、原型对应的HTML代码内容

<!DOCTYPE html>
<html>
  <head>
    <title>主页</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/主页/styles.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/axure/axQuery.js"></script>
    <script src="resources/scripts/axure/globals.js"></script>
    <script src="resources/scripts/axutils.js"></script>
    <script src="resources/scripts/axure/annotation.js"></script>
    <script src="resources/scripts/axure/axQuery.std.js"></script>
    <script src="resources/scripts/axure/doc.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/messagecenter.js"></script>
    <script src="resources/scripts/axure/events.js"></script>
    <script src="resources/scripts/axure/action.js"></script>
    <script src="resources/scripts/axure/expr.js"></script>
    <script src="resources/scripts/axure/geometry.js"></script>
    <script src="resources/scripts/axure/flyout.js"></script>
    <script src="resources/scripts/axure/ie.js"></script>
    <script src="resources/scripts/axure/model.js"></script>
    <script src="resources/scripts/axure/repeater.js"></script>
    <script src="resources/scripts/axure/sto.js"></script>
    <script src="resources/scripts/axure/utils.temp.js"></script>
    <script src="resources/scripts/axure/variables.js"></script>
    <script src="resources/scripts/axure/drag.js"></script>
    <script src="resources/scripts/axure/move.js"></script>
    <script src="resources/scripts/axure/visibility.js"></script>
    <script src="resources/scripts/axure/style.js"></script>
    <script src="resources/scripts/axure/adaptive.js"></script>
    <script src="resources/scripts/axure/tree.js"></script>
    <script src="resources/scripts/axure/init.temp.js"></script>
    <script src="files/主页/data.js"></script>
    <script src="resources/scripts/axure/legacy.js"></script>
    <script src="resources/scripts/axure/viewer.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return \'resources/images/transparent.gif\'; };
      $axure.utils.getOtherPath = function() { return \'resources/Other.html\'; };
      $axure.utils.getReloadPath = function() { return \'resources/reload.html\'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (Image) -->
      <div id="u0" class="ax_image" title="基于WordPress">
        <img id="u0_img" class="img " src="images/主页/u0.png"/>
        <!-- Unnamed () -->
        <div id="u1" class="text">
          <p><span></span></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u2" class="ax_形状">
        <img id="u2_img" class="img " src="images/主页/u2.png"/>
        <!-- Unnamed () -->
        <div id="u3" class="text">
          <p><span></span></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u4" class="ax_文本段落">
        <img id="u4_img" class="img " src="resources/images/transparent.gif"/>
        <!-- Unnamed () -->
        <div id="u5" class="text">
          <p><span>用户名</span></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u6" class="ax_文本段落">
        <img id="u6_img" class="img " src="resources/images/transparent.gif"/>
        <!-- Unnamed () -->
        <div id="u7" class="text">
          <p><span>密码</span></p>
        </div>
      </div>

      <!-- Unnamed (文本框) -->
      <div id="u8" class="ax_文本框">
        <input id="u8_input" type="text" value=""/>
      </div>

      <!-- Unnamed (文本框) -->
      <div id="u9" class="ax_文本框">
        <input id="u9_input" type="text" value=""/>
      </div>

      <!-- Unnamed (复选框) -->
      <div id="u10" class="ax_复选框">
        <label for="u10_input">
          <!-- Unnamed () -->
          <div id="u11" class="text">
            <p><span>记住我的登录信息</span></p>
          </div>
        </label>
        <input id="u10_input" type="checkbox" value="checkbox"/>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u12" class="ax_形状">
        <img id="u12_img" class="img " src="images/主页/u12.png"/>
        <!-- Unnamed () -->
        <div id="u13" class="text">
          <p><span>登录</span></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u14" class="ax_文本段落">
        <img id="u14_img" class="img " src="resources/images/transparent.gif"/>
        <!-- Unnamed () -->
        <div id="u15" class="text">
          <p><span>注册</span></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u16" class="ax_文本段落">
        <img id="u16_img" class="img " src="resources/images/transparent.gif"/>
        <!-- Unnamed () -->
        <div id="u17" class="text">
          <p><span>|</span></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u18" class="ax_文本段落" title="找回密码">
        <img id="u18_img" class="img " src="resources/images/transparent.gif"/>
        <!-- Unnamed () -->
        <div id="u19" class="text">
          <p><span>忘记</span><span>密码？</span></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u20" class="ax_文本段落" title="不知道自己在哪？">
        <img id="u20_img" class="img " src="resources/images/transparent.gif"/>
        <!-- Unnamed () -->
        <div id="u21" class="text">
          <p><span>←</span><span>回到Axure原创教程网</span></p>
        </div>
      </div>
    </div>
  </body>
</html>