Axure原型图教程

什么是原型

用线条、图形描绘出的产品框架，也称线框图，具体化表象需求和功能

---

原型图分类

草图原型（手绘图稿，修改方便）

低保真原型（简单交互，无需配色，产品规划及评审阶段使用）

高保真原型（复杂交互，有设计图，跟真实页面相同，高保真元件库）

---

Axure介绍

• 用于快速制作原型
• 在无需编码的情况下构建低、高保真原型
• 只需拖、拉、编辑即可完成

---

Axure文件类型

• .rp：原型文件
• .rplib：元件库文件
• .rpteam：团队项目文件
• .html：网页文件

---

组合元件

同时选中多个元件，点菜单栏上的组合就行

---

预览/生成html文件

预览html文件：点菜单栏上的发布，选择预览
生成html文件：点菜单栏上的发布，选择在HTML文件……

---

快捷键

• 取消左侧面板：CTRL + alt + {
• 取消右侧面板：CTRL + alt + }

---

添加元件库

在左侧面板点击载入元件库，载入.rplib文件即可

---

元件样式

XYWH：横坐标，纵坐标，宽高

填充：背景色 与 阴影

---

多个元件间隔相同

全选元件，右键选择分布，水平分布

---

取色笔

---

添加交互事件

选中元件，将右侧面板切换到交互，点击新建交互

也可以直接添加悬停时修改样式

---

中继器

• 在元件库里面找到中继器，拖出来
• 双击中继器，进入编辑模式
• 绘制出统一模板，并且为每一个元件在右侧面板起好名字
  
  
• 点击关闭，绘制出3个一模一样的中继器
• 添加更多中继器，在右侧面板添加行
  
• 为每个中继器添加不同数据，用英文起好每一个列名
  
• 为每一行列添加数据
  
• 为中继器新建一个每项加载的交互
  
• 通过fx设置为item
  

---

动态面板——同一位置出现不同内容

• 元件库选中动态面板，拖出来
• 双击进入编辑模式
• 为不同的state添加不同的内容
  
• 为按钮添加单击时设置面板状态
  

---

web端网站设计规范

不同于移动端：

• 屏幕尺寸、分辨率，适配
• 交互方式，鼠标相对手指具备更精准的点击范围，有更多的控件状态（单击双击，悬浮）

---

web端网站设计规范——设计尺寸及版心

现在，电脑分辨率主要是1920*1080，版心（左右两边padding）宽度大概为960到1200（默认安全区1200即可）

---

web端网站设计规范——尺寸规范

• 1280*800
• 1366*768
• 1440*900
• 1920*1080

---

web端网站设计规范——导航结构

• 纵向导航：
  
• 横向导航：
  

---

web端网站设计规范——界面元素

• 列表
• 表单

---

移动端设计规范——尺寸规范

• iPhone6：375*667
  
  

---

移动端设计规范——界面元素

• 条栏：
  
• 内容视图：