手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

Axure 8.0快速入门上手实战

时间:2024-10-11 22:05:21

1、在浏览器中打开百度首页,直接使用微信的截图将百度的logo截图下来。

Axure 8.0快速入门上手实战

2、打开Axure 8.0,新建文件,从左侧的元件库将图片元件拖放到中间空白的编辑区。

Axure 8.0快速入门上手实战

3、双击拖放到编辑区的图片元件,本地选取添加第1步得到的百度logo图片。

Axure 8.0快速入门上手实战

4、第1步截图的时候,可以看到图片在浏览器中显示的宽和高是210*68。

Axure 8.0快速入门上手实战

5、单击Axure中添加的百度logo,在右侧样式编辑栏调整图片尺寸,输入宽度210和高度68。

Axure 8.0快速入门上手实战

6、同样用截图工具可以看到文本输入框的宽和高是535*37,"百度一下"按钮的宽和高是102*37,文本输入框和百度logo间的垂直距离是28。在Axure中从元件库拖放一个矩形元件和一个文本框元件到编辑区,分别修改宽高为102*37和535*37。

Axure 8.0快速入门上手实战
Axure 8.0快速入门上手实战

7、移动文本框、矩形和百度logo到合适的位置。

Axure 8.0快速入门上手实战

8、在右侧样式编辑栏给102*37的矩形填充颜色,可以用取色器取色。同时将矩形边框修改成和填充色一样的颜色。

Axure 8.0快速入门上手实战
Axure 8.0快速入门上手实战

9、双击102*37的矩形,输入文字"百度一下",然后在样式编辑栏修改字体大小到16,字体颜色为白色。

Axure 8.0快速入门上手实战

10、"百度一下"按钮左边还有个小相机的图标,Axure 8中有自带相机图标,不过和百度的样式差别比较大,我们从百度首页截图下来放入Axure中,要记得将相机图标置于顶贫脊雪赙层,不然会被文本框遮住。到这里,基本的原型就出来了,下面我们再添加一些交互效果。

Axure 8.0快速入门上手实战
Axure 8.0快速入门上手实战
© 手抄报圈