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

相关链接


案例目标

 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下载素材

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

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值