AXURE（一：线框）

前言

兴趣不知何起，突然想试试AXURE！跟着B站的一个阿婆主学习AXURE，今天是第一次学习，先从简单的线框学起！
阿婆推荐先仿照微信的某个页面来熟悉各组件

步骤

1. 复制一张微信的界面在工作区

image
这张图片有些大；拖动左下角的H1到工作区，用取极限的思想，如果界面太大的话，里面支持的最大字可能也比页面里的大
image

2. 缩小图片比例

选中图片，点击右边的锁样图标，锁定宽高比例

image

在宽度处我输入350，缩小图片

image

3. 绘制外方框

拖动左下方的矩形1进入工作区

image
选中方框，在右方输入与微信图片同样宽、高，让方框大小和图片一致
image
图片的外框是白色，而背景也是白色，会不容易看清，所以改变背景颜色为灰色
image
将矩形组件的外框去掉：选中矩形，在上方的线段输入0,回车
image
选中矩形、选择上方的填充，点击取色器（这里没有截上图），点一下图片的背景（灰色）、矩形区域也会变成一样的颜色
image
取色完成后方框变成下面这样
image

4. 绘制内方框

先绘制最上面的灰方块：选取矩形1组件，拖到工作区，从上面的刻度处拖下刻度线

image
选中上方的填充，点取色器，取出对应区域，矩形也会变成对应的颜色；填充好颜色后按照之前的步骤去掉外线框
image
拖下多个刻度线、并在对应的框里填充对应的颜色
image
记得加上页面最下方的灰框框
image

4. 绘制水平线

这是比较细节的地方：大框框里有灰色水平线；借助刻度线的帮助来绘制，颜色依然可以借助取色器

image

绘制好水平线，效果是这样的

image

5. 小图标（用圆形代替了~）

从左下方的元件库中取出圆

image
想模仿一下页面最下方被遮挡的小程序！把圆移到一个大概的位置后，点击灰色框框，再点上方的置于顶层，就有遮盖的效果咯~
image
一列○添加完毕
image
借助刻度线添加图标后的解释文字
image
绘制最下方的四个图标，先随意摆放一下位置
image
位置调整：点击图中的 》，再点击水平即可
image
（这样调整完后可能还需要手动微调一下

6. 成果图

image