1.4_2 Axure RP 9 for mac 高保真原型图 - 案例1 【基础】模仿微信页面

相关链接

• 目录
• Axure中文学习网
• AxureShop
• AxureShop-QA

---

案例目标

 1. 了解Axure RP9 基本功能、界面布局
 2. 熟悉什么是 元件，并熟悉常用元件：矩形
 3. 掌握元件 样式 的配置
 4. 掌握 标尺辅助线 的使用
 5. 掌握 添加文字、设置字体 的方式
 6. 掌握 iconfont 的使用方式

一、素材准备

• 手机打开微信，截图，将截图粘贴导入Axure RP9
• 可以通过锁定宽高比例，将素材调整至合适大小

二、操作步骤

1.添加背景

1.1 使用矩形元件

• 元件库->矩形1
• 拖入绘图区，并调整长宽，和截图一致、去掉边框（线宽=0），对齐时Axure会有辅助线自动提示

1.2 设置背景色

• 设置背景色，填充->颜色->取色器

a.颜色

 
b.使用取色器

2.添加各个功能入口

2.1 使用矩形元件

• 元件库 -> 矩形1

2.2 样式调整

• 2.2 设置线宽0，长度与背景一致，对齐背景

2.3 使用标尺辅助线

• 使用标尺线辅助对齐

a.按住鼠标左键并拖拽

 
b.标尺线与图中位置对齐(朋友圈上边界)

 
c.标尺线与图中位置对齐(朋友圈下边界)

 
d.右侧与标尺线对齐

2.4 重复步骤

• 重复上面步骤，完成其他功能入口的绘制（可以直接复制粘贴，调整位置）

3.添加分割线

3.1 使用水平线元件

• 元件库->水平线
• 对齐，使用取色器调整颜色，与背景色保持一致 #EDEDED
• 最后可以右击页面空白处，选择隐藏标尺辅助线，或直接删除辅助线

4.功能入口图案

4.1 使用标尺辅助线

• 通过辅助线定位，左边距=62-43=19，图案直径=84-62=22

4.2 使用圆形元件

• 元件->圆形，按照定位及大小添加每个模块的图案

4.3 iconfont下载素材

• iconfont可以找图标替换圆形图案

a.搜索"朋友圈"

b.下载选择 PNG格式（背景透明的图案）

5. 添加文字描述

5.1 使用一级标题元件

• 元件->一级标题，修改标题中的文字内容为"朋友圈"，调整字体字号大小和素材看起来差不多

5.2 修改字体

• 选中【一级标题】元件->(右侧导航栏)样式->排版，可以选择字体
• 其中，中文字体实际显示英文名，例如 宋体 = Songti SC（Axure RP9汉化版）

5.3 重复步骤

• 重复以上步骤，添加所有文字描述，最后隐藏或删除标尺辅助线

6.添加箭头

6.1 iconfont下载素材

• iconfont下载素材

6.2 使用标尺辅助线

• 左侧定位：已知如图，设m为箭头左侧到图1左边界距离，n为箭头右侧到图1左边界距离，则m=b-a=373，n=c-a=380。则右图两个辅助线x轴坐标分别为833(460+373)，840(460+380)

6.3 使用图片元件

• 元件 -> 图片

6.4 重复步骤

• 重复以上步骤，添加所有箭头，最后隐藏或删除标尺辅助线

---

22/08/16

M