美文网首页
axure学习(三)

axure学习(三)

作者: 不是很倾城 | 来源:发表于2017-08-10 10:13 被阅读0次

前面学习的注册页面还有一点和登录相关的交互操作,这里我就不总结了,希望我自己能记住呀。

现在总结今天跟着老师学习的QQ注册页面的原型图。

网页版的QQ注册是这样的

截不完,我分开截的2张图

1、首先找网页的素材,用谷歌浏览器,右键点击“检查”或者按F12,出来网页下面查看可以查看相应网页元素。在Application里的Frames里的images里可以找到网页的素材。然后右键所需要的元素复制其URL重新打开,就可以将素材保留至本地。

2.我们将相应素材复制到画布中去。

3、添加左边的那个QQ账号,手机账号,邮箱账号3个图片按钮。每点击一个就会切换页面,并且按钮也变成深色,包括上面的图标,有绿色变白色。

我将这个设为动态面板,然后点击进去状态1里设置此文字为灰色,插入图标为绿色,然后点击左侧的部件熟悉,导入点击后变色的图片,并且将文字设置为白色,图标也重新导入白色图标。

导入的image 导入的image

3、设置交互事件。可以看见在部件数学里,设置选中,将被选中后的样式设置出来,再在交互里设计用例,当img_btn2 和img2都选中时,说明显示选中的页面。这里img_btn2就是手机账号,img_btn3就是下一个邮箱,一次类推设置的。

4、上面交互事件看到的内部框架是我跟着老师说的,先截了三个页面的图粘贴下来先做效果。

选左侧选择内部框架推到画布里,然后新建三个子页面,按照图示。将网页上截取的这三个页面分别粘进去。

5、然后按照上面的交互用例,设计用例。就会有切换的效果。

相关文章

  • axure学习(三)

    前面学习的注册页面还有一点和登录相关的交互操作,这里我就不总结了,希望我自己能记住呀。 现在总结今天跟着老师学习的...

  • 产品经理工具小记

    原型设计 Axure 参考/学习资料: [官方教程](http://www.axure.com.cn/catego...

  • Axure RP--专业的快速原型设计工具

    Axure官网 安装包下载 汉化包下载 汉化元件库下载 Axure学习网站 Axure(发音:Ack-sur...

  • 产品学习-1-工具

    今年学习计划:Axure、磨刀、Xmind、Viso 等软件熟悉 ——> Axure和磨刀 各做一个项目 ——> ...

  • Axure学习

    今天看了好几篇关于axure学习的好文,在这里mark一下:效率类: 1.如何快速制作app交互原型 http:/...

  • Axure学习

  • Axure学习

    这是2021年第39篇随笔,全文713字。 4月的第3篇。 4月计划9篇,随笔3/9篇。 最近的文章,都以学习和实...

  • 小楼的axure教程----已自学完成篇

    1.小楼axure rp教程(一)文本框焦点效果 2.小楼axure rp教程(三)单选框效果 3.小楼axure...

  • 初级交互-入门

    一、Axure交互 Axure交互是指把静态线框图变成可点击的交互式HTML原型的功能。 每个Axure交互有三个...

  • axure学习之路.第三弹

    这次我做的是一个简单的web版的一个简单的qq登录页面。 不过在此之前,我想分享一下自己刚学到的一个小tip,很多...

网友评论

      本文标题:axure学习(三)

      本文链接:https://www.haomeiwen.com/subject/efdcrxtx.html