相关链接
案例目标
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