axure学习(三)

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

现在总结今天跟着老师学习的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、然后按照上面的交互用例,设计用例。就会有切换的效果。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,279评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,095评论 19 139
  • 效果分析 通过点击右上角的图标切换扫码、账号登录方式; 在扫码登录页面,鼠标移入、移出二维码时,二维码平行移动,并...
    第七周期阅读 14,941评论 0 11
  • 导语 在这个强者更强的年代,我们怎么通过自身的努力变得优秀,变得更强,最首要的是端正态度,而虚心学习是最为正确的态...
    媚影心语阅读 4,463评论 0 0
  • 在美丽的威海湾,有着这样一所环境优美、绿树成荫的码头小学。它讲述着像灯塔一样的教师与像小船一样的学生他们之间悠久...
    宫小越阅读 3,973评论 0 0

友情链接更多精彩内容